Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved: UI for the product store management (#240) #274

Merged
merged 2 commits into from
Sep 17, 2024
Merged

Improved: UI for the product store management (#240) #274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a0d8f85
Improved: ui for the product store management (#240)
amansinghbais Sep 17, 2024
2149432
Improved: added entry in locale for missing static text, imported Ion…
amansinghbais Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 10 additions & 69 deletions src/components/ProductStoreActionsPopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<ion-content>
<ion-list>
<ion-list-header>{{ productStore.storeName || productStore.productStoreId }}</ion-list-header>
<ion-item button @click="selectProductStoreRole()">
{{ translate("Edit") }}
<ion-item>
<ion-label>
{{ getDateTime(productStore.fromDate) }}
<p>{{ translate("added to product store") }}</p>
</ion-label>
</ion-item>
<!-- <ion-item button>
{{ translate("View product store") }}
</ion-item> -->
<ion-item button @click="confirmRemove()" lines="none">
{{ translate("Remove") }}
</ion-item>
Expand All @@ -20,15 +20,14 @@ import {
alertController,
IonContent,
IonItem,
IonLabel,
IonList,
IonListHeader,
modalController,
popoverController,
} from "@ionic/vue";
import { defineComponent } from "vue";
import { translate } from "@hotwax/dxp-components";
import { mapGetters, useStore } from 'vuex';
import SelectProductStoreModal from '@/components/SelectProductStoreModal.vue'
import { UserService } from "@/services/UserService";
import { DateTime } from "luxon";
import { showToast } from "@/utils";
Expand All @@ -40,6 +39,7 @@ export default defineComponent({
components: {
IonContent,
IonItem,
IonLabel,
IonList,
IonListHeader
},
Expand All @@ -54,67 +54,8 @@ export default defineComponent({
closePopover() {
popoverController.dismiss();
},
async selectProductStoreRole() {
const selectProductStoreModal = await modalController.create({
component: SelectProductStoreModal,
componentProps: { selectedProductStores: this.userProductStores }
});

selectProductStoreModal.onDidDismiss().then(async (result) => {
if (result.data && result.data.value) {
const productStoresToCreate = result.data.value.productStoresToCreate
const productStoresToRemove = result.data.value.productStoresToRemove

const updateResponses = await Promise.allSettled(productStoresToRemove
.map(async (payload: any) => await UserService.updateProductStoreRole({
partyId: this.selectedUser.partyId,
productStoreId: payload.productStoreId,
roleTypeId: payload.roleTypeId,
fromDate: this.userProductStores.find((store: any) => payload.productStoreId === store.productStoreId).fromDate,
thruDate: DateTime.now().toMillis()
}))
)

// explicitly calling ensurePartyRole (ensurePartyRole) as addToPartyTole
// and removeFromPartyRole are running in parallel on the server causing issues
if (productStoresToCreate.length) {
try {
const resp = await UserService.ensurePartyRole({
partyId: this.selectedUser.partyId,
roleTypeId: "APPLICATION_USER",
})
if (hasError(resp)) {
showToast(translate('Something went wrong.'));
throw resp.data
}
} catch (error) {
logger.error(error)
return
}
}

const createResponses = await Promise.allSettled(productStoresToCreate
.map(async (payload: any) => await UserService.createProductStoreRole({
productStoreId: payload.productStoreId,
partyId: this.selectedUser.partyId,
roleTypeId: "APPLICATION_USER",
}))
)

const hasFailedResponse = [...updateResponses, ...createResponses].some((response: any) => response.status === 'rejected')
if (hasFailedResponse) {
showToast(translate('Failed to update some role(s).'))
} else {
showToast(translate('Role(s) updated successfully.'))
}
// refetching product stores with updated roles
const userProductStores = await UserService.getUserProductStores(this.selectedUser.partyId)
this.store.dispatch('user/updateSelectedUser', { ...this.selectedUser, productStores: userProductStores })
}
})

this.closePopover()
return selectProductStoreModal.present();
getDateTime(time: any) {
return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED);
},
async removeProductStoreRole() {
try {
Expand All @@ -139,7 +80,7 @@ export default defineComponent({
async confirmRemove() {
const message = 'Are you sure you want to perform this action?'
const alert = await alertController.create({
header: translate("Remove product store role"),
header: translate("Remove product store"),
message: translate(message),
buttons: [
{
Expand Down
3 changes: 2 additions & 1 deletion src/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"Add permissions": "Add permissions",
"Add phone number": "Add phone number",
"Add profile picture": "Add profile picture",
"added to product store": "added to product store",
"Add to a product store": "Add to a product store",
"All": "All",
"App": "App",
Expand Down Expand Up @@ -158,7 +159,7 @@
"Remove email": "Remove email",
"Remove external ID": "Remove external ID",
"Remove phone number": "Remove phone number",
"Remove product store role": "Remove product store role",
"Remove product store": "Remove product store",
"Remove users": "Remove users",
"Rename Security Group": "Rename Security Group",
"Require password reset on login": "Require password reset on login",
Expand Down
42 changes: 23 additions & 19 deletions src/views/UserDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,18 +259,20 @@
</ion-card-title>
</ion-card-header>

<ion-button :disabled="!hasPermission(Actions.APP_SECURITY_GROUP_CREATE)" v-if="!userSecurityGroups.length" @click="selectSecurityGroup()" fill="outline" expand="block">
<ion-icon :icon="addOutline" slot='start' />
{{ translate('Add to security group') }}
</ion-button>
<ion-list v-else>
<ion-list>
<ion-list-header color="light">
<ion-label>{{ translate('Security Group') }}</ion-label>
<ion-button :disabled="!hasPermission(Actions.APP_SECURITY_GROUP_CREATE) || !selectedUser.userLoginId" @click="selectSecurityGroup()">
{{ translate('Add') }}
<ion-icon slot="end" :icon="addCircleOutline" />
<ion-button :disabled="!hasPermission(Actions.APP_SECURITY_GROUP_CREATE) || !selectedUser.userLoginId" @click="selectSecurityGroup()" v-if="userSecurityGroups.length">
{{ translate('Edit') }}
<ion-icon slot="end" :icon="pencilOutline" />
</ion-button>
</ion-list-header>

<ion-button :disabled="!hasPermission(Actions.APP_SECURITY_GROUP_CREATE)" v-if="!userSecurityGroups.length" @click="selectSecurityGroup()" fill="outline" expand="block" class="ion-margin">
<ion-icon :icon="addOutline" slot='start' />
{{ translate('Add to security group') }}
</ion-button>

<template v-if="!hasPermission(Actions.APP_SUPER_USER) && checkUserAssociatedSecurityGroup('SUPER')">
<ion-item lines="none" :disabled="true">
<ion-label slot="end">{{ translate('Super') }}</ion-label>
Expand All @@ -289,7 +291,6 @@
</ion-button>
</ion-item>
</template>
</ion-list>

<!--<ion-item lines="none">
<template v-if="!hasPermission(Actions.APP_SUPER_USER) && selectedUser.securityGroup?.groupId === 'SUPER'">
Expand All @@ -303,19 +304,20 @@
<ion-select-option value="">{{ translate("None") }}</ion-select-option>
</ion-select>
</ion-item>-->

<ion-button :disabled="!hasPermission(Actions.APP_UPDT_PRODUCT_STORE_CONFG)" v-if="!userProductStores.length" @click="selectProductStore()" fill="outline" expand="block">
<ion-icon :icon="addOutline" slot='start' />
{{ translate('Add to a product store') }}
</ion-button>
<ion-list v-else>

<ion-list-header color="light">
<ion-label>{{ translate('Product stores') }}</ion-label>
<ion-button :disabled="!hasPermission(Actions.APP_UPDT_PRODUCT_STORE_CONFG)" @click="selectProductStore()">
{{ translate('Add') }}
<ion-icon slot="end" :icon="addCircleOutline" />
<ion-button :disabled="!hasPermission(Actions.APP_UPDT_PRODUCT_STORE_CONFG)" @click="selectProductStore()" v-if="userProductStores.length">
{{ translate('Edit') }}
<ion-icon slot="end" :icon="pencilOutline" />
</ion-button>
</ion-list-header>

<ion-button :disabled="!hasPermission(Actions.APP_UPDT_PRODUCT_STORE_CONFG)" v-if="!userProductStores.length" @click="selectProductStore()" fill="outline" expand="block" class="ion-margin">
<ion-icon :icon="addOutline" slot='start' />
{{ translate('Add to a product store') }}
</ion-button>

<ion-item :disabled="!hasPermission(Actions.APP_UPDT_PRODUCT_STORE_CONFG)" v-for="store in userProductStores" :key="store.productStoreId">
<ion-label>
<h2>{{ store.storeName || store.productStoreId }}</h2>
Expand Down Expand Up @@ -472,7 +474,8 @@ import {
eyeOffOutline,
eyeOutline,
mailOutline,
warningOutline
warningOutline,
pencilOutline
} from 'ionicons/icons';
import { translate } from '@hotwax/dxp-components';
import ContactActionsPopover from '@/components/ContactActionsPopover.vue'
Expand Down Expand Up @@ -1251,6 +1254,7 @@ export default defineComponent({
eyeOutline,
hasPermission,
mailOutline,
pencilOutline,
router,
store,
translate,
Expand Down
Loading