-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improved: Added support to link user to multiple security groups (#267).
- Loading branch information
Showing
6 changed files
with
347 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <template> | ||
| <ion-content> | ||
| <ion-list> | ||
| <ion-list-header>{{ securityGroup.groupName || securityGroup.groupId }}</ion-list-header> | ||
| <ion-item> | ||
| <ion-label> | ||
| {{ getDateTime(securityGroup.fromDate) }} | ||
| <p>{{ translate('added to group') }}</p> | ||
| </ion-label> | ||
| </ion-item> | ||
| <ion-item button @click="confirmRemove()" lines="none"> | ||
| {{ translate("Remove") }} | ||
| </ion-item> | ||
| </ion-list> | ||
| </ion-content> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| alertController, | ||
| IonContent, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonListHeader, | ||
| popoverController, | ||
| } from "@ionic/vue"; | ||
| import { defineComponent } from "vue"; | ||
| import { translate } from "@hotwax/dxp-components"; | ||
| import { mapGetters, useStore } from 'vuex'; | ||
| import { UserService } from "@/services/UserService"; | ||
| import { DateTime } from "luxon"; | ||
| import { showToast } from "@/utils"; | ||
| import { hasError } from "@/adapter"; | ||
| import logger from '@/logger'; | ||
| export default defineComponent({ | ||
| name: "SecurityGroupActionsPopover", | ||
| components: { | ||
| IonContent, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonListHeader | ||
| }, | ||
| props: ['securityGroup'], | ||
| computed: { | ||
| ...mapGetters({ | ||
| selectedUser: 'user/getSelectedUser', | ||
| userSecurityGroups: 'user/getUserSecurityGroups', | ||
| }) | ||
| }, | ||
| methods: { | ||
| closePopover() { | ||
| popoverController.dismiss(); | ||
| }, | ||
| getDateTime(time: any) { | ||
| return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED); | ||
| }, | ||
| async removeUserSecurityGroup() { | ||
| try { | ||
| const resp = await UserService.removeUserSecurityGroup({ | ||
| groupId: this.securityGroup.groupId, | ||
| userLoginId: this.selectedUser.userLoginId | ||
| }) | ||
| if (hasError(resp)) throw resp.data | ||
| showToast(translate('Security group removed successfully.')) | ||
| } catch (error) { | ||
| showToast(translate('Something went wrong.')); | ||
| logger.error(error) | ||
| } | ||
| // refetching security groups | ||
| const userSecurityGroups = await UserService.getUserSecurityGroups(this.selectedUser.userLoginId) | ||
| this.store.dispatch('user/updateSelectedUser', { ...this.selectedUser, securityGroups: userSecurityGroups }) | ||
| this.closePopover() | ||
| }, | ||
| async confirmRemove() { | ||
| const message = 'Are you sure you want to perform this action?' | ||
| const alert = await alertController.create({ | ||
| header: translate("Remove security group"), | ||
| message: translate(message), | ||
| buttons: [ | ||
| { | ||
| text: translate("No"), | ||
| }, | ||
| { | ||
| text: translate("Yes"), | ||
| handler: async () => { | ||
| await this.removeUserSecurityGroup(); | ||
| } | ||
| } | ||
| ], | ||
| }); | ||
| return alert.present(); | ||
| } | ||
| }, | ||
| setup() { | ||
| const store = useStore(); | ||
| return { | ||
| store, | ||
| translate | ||
| } | ||
| } | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| <template> | ||
| <ion-header> | ||
| <ion-toolbar> | ||
| <ion-buttons slot="start"> | ||
| <ion-button @click="closeModal"> | ||
| <ion-icon slot="icon-only" :icon="closeOutline" /> | ||
| </ion-button> | ||
| </ion-buttons> | ||
| <ion-title>{{ translate("Select security groups") }}</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
|
|
||
| <ion-content> | ||
| <ion-list> | ||
| <ion-item v-for="securityGroup in securityGroups" :key="securityGroup.groupId"> | ||
| <ion-checkbox :checked="isSelected(securityGroup.groupId)" @ionChange="toggleSecurityGroupSelection(securityGroup)"> | ||
| <ion-label> | ||
| {{ securityGroup.groupName || securityGroup.groupId }} | ||
| <p>{{ securityGroup.groupId }}</p> | ||
| </ion-label> | ||
| </ion-checkbox> | ||
| </ion-item> | ||
| </ion-list> | ||
|
|
||
| <ion-fab @click="saveSecurityGroups()" vertical="bottom" horizontal="end" slot="fixed"> | ||
| <ion-fab-button> | ||
| <ion-icon :icon="saveOutline" /> | ||
| </ion-fab-button> | ||
| </ion-fab> | ||
| </ion-content> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { | ||
| IonButtons, | ||
| IonButton, | ||
| IonCheckbox, | ||
| IonContent, | ||
| IonFab, | ||
| IonFabButton, | ||
| IonHeader, | ||
| IonIcon, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonTitle, | ||
| IonToolbar, | ||
| modalController | ||
| } from "@ionic/vue"; | ||
| import { defineComponent } from "vue"; | ||
| import { closeOutline, saveOutline } from "ionicons/icons"; | ||
| import { mapGetters, useStore } from "vuex"; | ||
| import { translate } from '@hotwax/dxp-components' | ||
| export default defineComponent({ | ||
| name: "SelectSecurityGroupModal", | ||
| components: { | ||
| IonButtons, | ||
| IonButton, | ||
| IonCheckbox, | ||
| IonContent, | ||
| IonFab, | ||
| IonFabButton, | ||
| IonHeader, | ||
| IonIcon, | ||
| IonItem, | ||
| IonLabel, | ||
| IonList, | ||
| IonTitle, | ||
| IonToolbar, | ||
| }, | ||
| props: ["selectedSecurityGroups"], | ||
| data() { | ||
| return { | ||
| selectedSecurityGroupValues: JSON.parse(JSON.stringify(this.selectedSecurityGroups)), | ||
| } | ||
| }, | ||
| computed: { | ||
| ...mapGetters({ | ||
| securityGroups: 'util/getSecurityGroups' | ||
| }) | ||
| }, | ||
| methods: { | ||
| closeModal() { | ||
| modalController.dismiss({ dismissed: true}); | ||
| }, | ||
| saveSecurityGroups() { | ||
| const securityGroupsToCreate = this.selectedSecurityGroupValues.filter((selectedGroup: any) => !this.selectedSecurityGroups.some((group: any) => group.groupId === selectedGroup.groupId)) | ||
| const securityGroupsToRemove = this.selectedSecurityGroups.filter((group: any) => !this.selectedSecurityGroupValues.some((selectedGroup: any) => group.groupId === selectedGroup.groupId)) | ||
| modalController.dismiss({ | ||
| dismissed: true, | ||
| value: { | ||
| selectedSecurityGroups: this.selectedSecurityGroupValues, | ||
| securityGroupsToCreate, | ||
| securityGroupsToRemove | ||
| } | ||
| }); | ||
| }, | ||
| toggleSecurityGroupSelection(updatedSecurityGroup: any) { | ||
| let selectedGroup = this.selectedSecurityGroupValues.some((group :any) => group.groupId === updatedSecurityGroup.groupId); | ||
| if (selectedGroup) { | ||
| this.selectedSecurityGroupValues = this.selectedSecurityGroupValues.filter((group :any) => group.groupId !== updatedSecurityGroup.groupId); | ||
| } else { | ||
| this.selectedSecurityGroupValues.push(updatedSecurityGroup); | ||
| } | ||
| }, | ||
| isSelected (securityGroupId: any) { | ||
| return this.selectedSecurityGroupValues.some((securityGroup :any) => securityGroup.groupId === securityGroupId); | ||
| } | ||
| }, | ||
| setup() { | ||
| const store = useStore(); | ||
| return { | ||
| closeOutline, | ||
| saveOutline, | ||
| store, | ||
| translate | ||
| }; | ||
| }, | ||
| }); | ||
| </script> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.