Implemented: UI for user details page (#3)

package.json

@@ -12,28 +12,30 @@
     "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
   },
   "dependencies": {
+    "boon-js": "^2.0.3",
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "^2.4.7",
+    "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
-    "@hotwax/oms-api": "^1.6.0",
+    "@hotwax/dxp-components": "^1.9.1",
+    "@hotwax/oms-api": "^1.11.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",
     "core-js": "^3.6.5",
+    "luxon": "^3.2.0",
     "mitt": "^2.1.0",
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
-    "vue-i18n": "~9.1.6",
-    "vue-logger-plugin": "^2.2.3",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.1",
     "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@capacitor/cli": "^2.4.7",
-    "@intlify/vue-i18n-loader": "^2.1.0",
     "@types/jest": "^27.5.0",
+    "@types/luxon": "^3.2.0",
     "@typescript-eslint/eslint-plugin": "~5.26.0",
     "@typescript-eslint/parser": "~5.26.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -53,7 +55,6 @@
     "eslint-plugin-vue": "^8.0.3",
     "jest": "^28.1.0",
     "ts-jest": "^28.0.8",
-    "typescript": "~4.7.4",
-    "vue-cli-plugin-i18n": "^1.0.1"
+    "typescript": "~4.7.4"
   }
 }

src/App.vue

@@ -13,6 +13,7 @@ import emitter from "@/event-bus"
 import { mapGetters, useStore } from 'vuex';
 import { initialise, resetConfig } from '@/adapter'
 import { useRouter } from 'vue-router';
+import { translate } from '@hotwax/dxp-components';
 
 export default defineComponent({
   name: 'App',
@@ -33,7 +34,7 @@ export default defineComponent({
       if (!this.loader) {
         this.loader = await loadingController
           .create({
-            message: this.$t("Click the backdrop to dismiss."),
+            message: translate("Click the backdrop to dismiss."),
             translucent: true,
             backdropDismiss: true
           });
@@ -77,7 +78,7 @@ export default defineComponent({
   async mounted() {
     this.loader = await loadingController
       .create({
-        message: this.$t("Click the backdrop to dismiss."),
+        message: translate("Click the backdrop to dismiss."),
         translucent: true,
         backdropDismiss: true
       });

src/adapter/index.ts

@@ -1,23 +1,25 @@
 import {
   api,
   client,
-  fetchProducts,
+  getConfig,
+  hasError,
   initialise,
-  isError,
-  Product,
+  logout,
   resetConfig,
+  setUserLocale,
   updateToken,
   updateInstanceUrl
 } from '@hotwax/oms-api'
 
 export {
   api,
   client,
-  fetchProducts,
+  getConfig,
+  hasError,
   initialise,
-  isError,
-  Product,
+  logout,
   resetConfig,
+  setUserLocale,
   updateToken,
   updateInstanceUrl
 }

src/authorization/Actions.ts

@@ -0,0 +1 @@
+export default {}

src/authorization/Rules.ts

@@ -0,0 +1 @@
+export default {} as any 

src/authorization/index.ts

@@ -0,0 +1,124 @@
+import { AbilityBuilder, PureAbility } from '@casl/ability';
+import { getEvaluator, parse } from 'boon-js';
+import { Tokens } from 'boon-js/lib/types'
+
+// TODO Improve this
+// We will move this code to an external plugin and use below Actions and Rules accordlingly
+let Actions = {} as any;
+let Rules = {} as any;
+
+// We are using CASL library to define permissions.
+// Instead of using Action-Subject based authorisation we are going with Claim based Authorization.
+// We would be defining the permissions for each action and case, map with server permissiosn based upon certain rules.
+// https://casl.js.org/v5/en/cookbook/claim-authorization
+// Following the comment of Sergii Stotskyi, author of CASL
+// https://github.com/stalniy/casl/issues/525
+// We are defining a PureAbility and creating an instance with AbilityBuilder.
+type ClaimBasedAbility = PureAbility<string>;
+const { build } = new AbilityBuilder<ClaimBasedAbility>(PureAbility);
+const ability = build();
+
+/**
+ * The method returns list of permissions required for the rules. We are having set of rules, 
+ * through which app permissions are defined based upon the server permissions.
+ * When getting server permissions, as all the permissions are not be required. 
+ * Specific permissions used defining the rules are extracted and sent to server. 
+ * @returns permissions
+ */
+const getServerPermissionsFromRules = () => {
+    // Iterate for each rule
+    const permissions = Object.keys(Rules).reduce((permissions: any, rule: any) => {
+        const permissionRule = Rules[rule];
+        // some rules may be empty, no permission is required from server
+        if (permissionRule) {
+            // Each rule may have multiple permissions along with operators
+            // Boon js parse rules into tokens, each token may be operator or server permission
+            // permissionId will have token name as identifier. 
+            const permissionTokens = parse(permissionRule);
+            permissions = permissionTokens.reduce((permissions: any, permissionToken: any) => {
+                // Token object with name as identifier has permissionId 
+                if (Tokens.IDENTIFIER === permissionToken.name) {
+                    permissions.add(permissionToken.value);
+                }
+                return permissions;
+            }, permissions)
+        }
+        return permissions;
+    }, new Set())
+    return [...permissions];
+}
+
+/**
+ * The method is used to prepare app permissions from the server permissions.
+ * Rules could be defined such that each app permission could be defined based upon certain one or more server permissions.
+ * @param serverPermissions 
+ * @returns appPermissions
+ */
+const prepareAppPermissions = (serverPermissions: any) => {
+    const serverPermissionsInput = serverPermissions.reduce((serverPermissionsInput: any, permission: any) => {
+        serverPermissionsInput[permission] = true;
+        return serverPermissionsInput;
+    }, {})
+    // Boonjs evaluator needs server permissions as object with permissionId and boolean value
+    // Each rule is passed to evaluator along with the server permissions
+    // if the server permissions and rule matches, app permission is added to list
+    const permissions = Object.keys(Rules).reduce((permissions: any, rule: any) => {
+        const permissionRule = Rules[rule];
+        // If for any app permission, we have empty rule we user is assigned the permission
+        // If rule is not defined, the app permisions is still evaluated or provided to all the users.
+        if (!permissionRule || (permissionRule && getEvaluator(permissionRule)(serverPermissionsInput))) {
+            permissions.push(rule);
+        }
+        return permissions;
+    }, [])
+    const { can, rules } = new AbilityBuilder<ClaimBasedAbility>(PureAbility);
+    permissions.map((permission: any) => {
+        can(permission);
+    })
+    return rules;
+}
+
+/**
+ * 
+ * Sets the current app permissions. This should be used after perparing the app permissions from the server permissions
+ * @param permissions 
+ * @returns 
+ */
+const setPermissions = (permissions: any) => {
+    // If the user has passed undefined or null, it should not break the code
+    if (!permissions) permissions = [];
+    ability.update(permissions)
+    return true;
+};
+
+/**
+ * Resets the permissions list. Used for cases like logout 
+ */
+const resetPermissions = () => setPermissions([]);
+
+/**
+ * 
+ * @param permission 
+ * @returns 
+ */
+const hasPermission = (permission: string) => ability.can(permission);
+
+export { Actions, getServerPermissionsFromRules, hasPermission, prepareAppPermissions, resetPermissions, setPermissions};
+
+// TODO Move this code to an external plugin, to be used across the apps
+export default {
+    install(app: any, options: any) {
+
+        // Rules and Actions could be app and OMS package specific
+        Rules = options.rules;
+        Actions = options.actions;
+
+        // TODO Check why global properties is not working and apply across.
+        app.config.globalProperties.$permission = this;
+    },
+    getServerPermissionsFromRules, 
+    hasPermission, 
+    prepareAppPermissions, 
+    resetPermissions, 
+    setPermissions
+}

src/components/ContactActionsPopover.vue

@@ -0,0 +1,100 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ translate(placeholder) }}</ion-list-header>
+      <ion-item button @click="copyInfo(value)">
+        {{ translate("Copy") }}
+      </ion-item>
+      <ion-item @click="updateContact(type)" button>
+        {{ translate("Edit") }}
+      </ion-item>
+      <ion-item button lines="none">
+        {{ translate("Remove") }}
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  alertController,
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+  popoverController,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@hotwax/dxp-components";
+import { useStore } from 'vuex';
+import { copyToClipboard } from "@/utils";
+
+export default defineComponent({
+  name: "ContactActionsPopover",
+  components: {
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  props: ["type", "placeholder", "value"],
+  data() {
+    return {
+      options: {
+        email: {
+          header: 'Edit email',
+          placeholder: 'Email'
+        },
+        phoneNumber: {
+          header: 'Edit phone number',
+          placeholder: 'Phone'
+        },
+        externalId: {
+          header: 'Edit externalId',
+          placeholder: 'External ID'
+        }
+      } as any
+    }
+  },
+  methods: {
+    closePopover() {
+      popoverController.dismiss();
+    },
+    copyInfo(info: string) {
+      copyToClipboard(info, 'Copied to clipboard')
+      this.closePopover();
+    },
+    async updateContact(type: string) {
+      // handling alert header and placeholder
+
+      const contactUpdateAlert = await alertController.create({
+        header: translate(this.options[type].header),
+        inputs:  [{
+          // TODO add validation for email/phone
+          name: "input",
+          placeholder: translate(this.options[type].placeholder),
+        }],
+        buttons: [{
+          text: translate('Cancel'),
+          role: "cancel"
+        },
+        {
+          text: translate('Save'),
+          handler: (result) => {
+            // TODO handle result
+          }
+        }]
+      })
+      await contactUpdateAlert.present()
+    },
+  },
+  setup() {
+    const store = useStore();
+
+    return {
+      store,
+      translate
+    }
+  }
+});
+</script>