From d220b35710f49c3a247d901c0d637689b886413d Mon Sep 17 00:00:00 2001
From: John Cardinal <support@ayanova.com>
Date: Fri, 4 Mar 2022 23:03:37 +0000
Subject: [PATCH]

---
 ayanova/src/router.js                         |  16 +
 .../views/customer-notify-subscription.vue    | 736 ++++++++++++++++++
 .../views/customer-notify-subscriptions.vue   | 246 ++++++
 3 files changed, 998 insertions(+)
 create mode 100644 ayanova/src/views/customer-notify-subscription.vue
 create mode 100644 ayanova/src/views/customer-notify-subscriptions.vue

diff --git a/ayanova/src/router.js b/ayanova/src/router.js
index 27b4d95f..e9c7e1ff 100644
--- a/ayanova/src/router.js
+++ b/ayanova/src/router.js
@@ -283,6 +283,22 @@ export default new Router({
       component: () =>
         import(/* webpackChunkName: "cust" */ "./views/cust-head-office.vue")
     },
+    {
+      path: "/customer-notify-subscriptions",
+      name: "customer-notify-subscriptions",
+      component: () =>
+        import(
+          /* webpackChunkName: "cust" */ "./views/home-notify-subscriptions.vue"
+        )
+    },
+    {
+      path: "/customer-notify-subscriptions/:recordid",
+      name: "customer-notify-subscription",
+      component: () =>
+        import(
+          /* webpackChunkName: "cust" */ "./views/customer-notify-subscription.vue"
+        )
+    },
     //####################### SERVICE GROUP ##############################
     {
       path: "/svc-schedule",
diff --git a/ayanova/src/views/customer-notify-subscription.vue b/ayanova/src/views/customer-notify-subscription.vue
new file mode 100644
index 00000000..ea4eac39
--- /dev/null
+++ b/ayanova/src/views/customer-notify-subscription.vue
@@ -0,0 +1,736 @@
+<template>
+  <div>
+    <v-row v-if="formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
+            <v-col cols="12" sm="6" lg="4" xl="3">
+              <v-select
+                ref="eventType"
+                v-model="obj.eventType"
+                :items="selectLists.eventTypes"
+                item-text="name"
+                item-value="id"
+                :readonly="formState.readOnly"
+                :label="$ay.t('NotifyEventType')"
+                data-cy="eventType"
+                :rules="[form().integerValid(this, 'eventType')]"
+                :error-messages="form().serverErrors(this, 'eventType')"
+                @input="fieldValueChanged('eventType')"
+              ></v-select>
+            </v-col>
+            <v-col v-if="showWoStatus" cols="12" sm="6" lg="4" xl="3">
+              <v-autocomplete
+                v-model="obj.idValue"
+                :items="selectLists.wostatus"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('WorkOrderStatus')"
+              >
+                <template v-slot:item="data">
+                  <v-list-item-avatar>
+                    <v-icon :color="data.item.color">$ayiFlag</v-icon>
+                  </v-list-item-avatar>
+                  <v-list-item-content>
+                    <v-list-item-title
+                      ><span class="text-subtitle-2">{{ data.item.name }}</span
+                      ><v-icon
+                        v-if="data.item.locked"
+                        small
+                        color="disabled"
+                        class="ml-2"
+                        >$ayiLock</v-icon
+                      >
+                      <v-icon
+                        v-if="data.item.completed"
+                        color="disabled"
+                        class="ml-1"
+                        small
+                        >$ayiCheckCircle</v-icon
+                      ></v-list-item-title
+                    >
+                    <v-list-item-subtitle>
+                      {{ data.item.notes }}</v-list-item-subtitle
+                    >
+                  </v-list-item-content>
+                  <v-list-item-action> </v-list-item-action>
+                </template>
+              </v-autocomplete>
+            </v-col>
+            <v-col v-if="showQuoteStatus" cols="12" sm="6" lg="4" xl="3">
+              <v-autocomplete
+                v-model="obj.idValue"
+                :items="selectLists.quotestatus"
+                item-text="name"
+                item-value="id"
+                :label="$ay.t('QuoteQuoteStatusType')"
+              >
+                <template v-slot:item="data">
+                  <v-list-item-avatar>
+                    <v-icon :color="data.item.color">$ayiFlag</v-icon>
+                  </v-list-item-avatar>
+                  <v-list-item-content>
+                    <v-list-item-title
+                      ><span class="text-subtitle-2">{{ data.item.name }}</span
+                      ><v-icon
+                        v-if="data.item.locked"
+                        small
+                        color="disabled"
+                        class="ml-2"
+                        >$ayiLock</v-icon
+                      >
+                      <v-icon
+                        v-if="data.item.completed"
+                        color="disabled"
+                        class="ml-1"
+                        small
+                        >$ayiCheckCircle</v-icon
+                      ></v-list-item-title
+                    >
+                    <v-list-item-subtitle>
+                      {{ data.item.notes }}</v-list-item-subtitle
+                    >
+                  </v-list-item-content>
+                  <v-list-item-action> </v-list-item-action>
+                </template>
+              </v-autocomplete>
+            </v-col>
+
+            <v-col v-if="showDecValue" cols="12" sm="6" lg="4" xl="3">
+              <gz-decimal
+                ref="decValue"
+                v-model="obj.decValue"
+                :readonly="formState.readOnly"
+                :label="$ay.t('Total')"
+                data-cy="decValue"
+                :rules="[
+                  form().decimalValid(this, 'decValue'),
+                  form().required(this, 'decValue')
+                ]"
+                :error-messages="form().serverErrors(this, 'decValue')"
+                @input="fieldValueChanged('decValue')"
+              ></gz-decimal>
+            </v-col>
+
+            <v-col v-if="showIntegerDecValue" cols="12" sm="6" lg="4" xl="3">
+              <v-text-field
+                ref="decValue"
+                v-model="obj.decValue"
+                :readonly="formState.readOnly"
+                :clearable="!formState.readOnly"
+                :label="$ay.t('UiFieldDataTypesInteger')"
+                data-cy="decValue"
+                :rules="[form().integerValid(this, 'decValue')]"
+                :error-messages="form().serverErrors(this, 'decValue')"
+                type="number"
+                @click:clear="fieldValueChanged('decValue')"
+                @input="fieldValueChanged('decValue')"
+              ></v-text-field>
+            </v-col>
+
+            <v-col v-if="showAgeValue" cols="12" sm="6" lg="4" xl="3">
+              <gz-duration-picker
+                ref="ageValue"
+                v-model="obj.ageValue"
+                :readonly="formState.readOnly"
+                :label="$ay.t('Duration')"
+                :show-seconds="false"
+                data-cy="ageValue"
+                :error-messages="form().serverErrors(this, 'ageValue')"
+                @input="fieldValueChanged('ageValue')"
+              ></gz-duration-picker>
+            </v-col>
+
+            <v-col v-if="showAyaType" cols="12" sm="6" lg="4" xl="3">
+              <v-select
+                ref="ayaType"
+                v-model="obj.ayaType"
+                :items="selectLists.coreAyaTypes"
+                item-text="name"
+                item-value="id"
+                :readonly="formState.readOnly"
+                :label="$ay.t('AyaType')"
+                data-cy="ayaType"
+                :rules="[form().integerValid(this, 'ayaType')]"
+                :error-messages="form().serverErrors(this, 'ayaType')"
+                @input="fieldValueChanged('ayaType')"
+              ></v-select>
+            </v-col>
+            <!-- :menu-props="{ contentClass: 'cyAyaType' }" -->
+            <v-col v-if="showAdvanceNotice" cols="12" sm="6" lg="4" xl="3">
+              <gz-duration-picker
+                ref="advanceNotice"
+                v-model="obj.advanceNotice"
+                :readonly="formState.readOnly"
+                :label="$ay.t('NotifySubscriptionPendingSpan')"
+                :show-seconds="false"
+                data-cy="advanceNotice"
+                :error-messages="form().serverErrors(this, 'advanceNotice')"
+                @input="fieldValueChanged('advanceNotice')"
+              ></gz-duration-picker>
+            </v-col>
+
+            <v-col v-if="showLinkReportId" cols="12" sm="6" lg="4" xl="3">
+              ATTACH REPORT todo: dynamic list of reports to select from for
+              type chosen
+            </v-col>
+
+            <v-col v-if="showTags" cols="12">
+              <gz-tag-picker
+                ref="tags"
+                v-model="obj.tags"
+                :label="$ay.t('TaggedWith')"
+                :readonly="formState.readOnly"
+                data-cy="tags"
+                :error-messages="form().serverErrors(this, 'tags')"
+                @input="fieldValueChanged('tags')"
+              ></gz-tag-picker>
+            </v-col>
+          </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+    <v-overlay :value="!formState.ready || formState.loading">
+      <v-progress-circular indeterminate :size="64" />
+    </v-overlay>
+  </div>
+</template>
+<script>
+const FORM_KEY = "notify-subscription";
+const API_BASE_URL = "notify-subscription/";
+export default {
+  data() {
+    return {
+      selectLists: {
+        wostatus: [],
+        quotestatus: [],
+        eventTypes: [],
+        deliveryMethods: [],
+        coreAyaTypes: []
+      },
+      obj: {
+        id: 0,
+        concurrency: 0,
+        userId: this.$store.state.userId,
+        ayaType: 0,
+        eventType: 0,
+        advanceNotice: "00:00:00",
+        idValue: 0,
+        decValue: 0,
+        deliveryMethod: 1,
+        deliveryAddress: null,
+        linkReportId: 0,
+        tags: []
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      ayaType: window.$gz.type.CustomerNotifySubscription
+    };
+  },
+  computed: {
+    showDeliveryAddress() {
+      return this.obj.deliveryMethod == 2;
+    },
+    showDeliveryMethod() {
+      return this.obj.eventType != 27;
+    },
+    showWoStatus() {
+      switch (this.obj.eventType) {
+        case 4:
+        case 24:
+          return true;
+        default:
+          return false;
+      }
+    },
+    showQuoteStatus() {
+      switch (this.obj.eventType) {
+        case 9:
+        case 29:
+          return true;
+        default:
+          return false;
+      }
+    },
+    showDecValue() {
+      //WorkorderTotalExceedsThreshold = 23 The "Andy"
+      return this.obj.eventType == 23; // || this.obj.eventType == 11; //service bank threshold
+    },
+    showIntegerDecValue() {
+      //UnitMeterReadingMultipleExceeded=26,
+      return this.obj.eventType == 26;
+    },
+    showAyaType() {
+      switch (this.obj.eventType) {
+        case 1:
+        case 2:
+        case 3:
+        case 10:
+          return true;
+        default:
+          return false;
+      }
+    },
+    showAdvanceNotice() {
+      switch (this.obj.eventType) {
+        case 5:
+        case 11:
+        case 12:
+        case 14:
+        case 16:
+        case 21:
+        case 22:
+        case 25:
+        case 34:
+          return true;
+        default:
+          return false;
+      }
+    },
+    showAgeValue() {
+      switch (this.obj.eventType) {
+        case 24:
+        case 29:
+        case 10:
+          return true;
+        default:
+          return false;
+      }
+    },
+    showLinkReportId() {
+      //New NOTE NOTE: This is probably not required at the mo as customers are expected to login and view the reports as configured in global settings,
+      //so, if post release nothing relies on this it might be removed
+      //
+      //NOTE: Currently projected: Only Quotes and Workorders are involved in sending as attached reports
+      //And only to customers and only single items, not lists so it's doable to indicate a report id
+      //and send a link from notification to open the report
+      switch (this.obj.eventType) {
+        case 999: //to be filled in later
+          return true;
+        default:
+          return false;
+      }
+    },
+    showTags() {
+      if (!window.$gz.store.getters.isCustomerUser) {
+        //customers NEVER see tags anywhere, that's private information and they do not use or require it
+        switch (this.obj.eventType) {
+          case 27: //General notification
+          case 20: //backup status
+          case 28: //server ops problem
+          case 31: //workordercreatedforcustomer customer notification, no tags
+          case 32: //pm generation failure, like ops notice sb on any item
+            return false;
+          default:
+            return true;
+        }
+      } else {
+        return false;
+      }
+    }
+  },
+  watch: {
+    formState: {
+      handler: function(val) {
+        if (this.formState.loading) {
+          return;
+        }
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+        if (!val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit(
+            "menu-enable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":new");
+        } else {
+          window.$gz.eventBus.$emit(
+            "menu-disable-item",
+            FORM_KEY + ":duplicate"
+          );
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":new");
+        }
+      },
+      deep: true
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.rights = window.$gz.role.getRights(
+        window.$gz.type.CustomerNotifySubscription
+      );
+      vm.formState.readOnly = !vm.rights.change;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      let setDirty = false;
+      //id 0 means create or duplicate to new
+      if (vm.$route.params.recordid != 0) {
+        //is there already an obj from a prior operation?
+        if (this.$route.params.obj) {
+          //yes, no need to fetch it
+          this.obj = this.$route.params.obj;
+        } else {
+          await vm.getDataFromApi(vm.$route.params.recordid);
+        }
+      } else {
+        //Might be a duplicate and contain another record
+        if (this.$route.params.obj) {
+          this.obj = this.$route.params.obj;
+          this.obj.concurrency = undefined;
+          this.obj.id = 0;
+          setDirty = true;
+        } else {
+          //default to their configured email address on new record
+          this.obj.deliveryAddress = this.$store.state.userOptions.emailAddress;
+        }
+      }
+      window.$gz.form.setFormState({
+        vm: vm,
+        loading: false,
+        dirty: setDirty,
+        valid: true
+      });
+      generateMenu(vm);
+    } catch (error) {
+      window.$gz.errorHandler.handleFormError(error, vm);
+    } finally {
+      vm.formState.ready = true;
+    }
+  },
+  async beforeRouteLeave(to, from, next) {
+    if (!this.formState.dirty || JUST_DELETED) {
+      next();
+      return;
+    }
+    if ((await window.$gz.dialog.confirmLeaveUnsaved()) === true) {
+      next();
+    } else {
+      next(false);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  methods: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    },
+    canDuplicate: function() {
+      return this.formState.valid && !this.formState.dirty;
+    },
+    ayaTypes: function() {
+      return window.$gz.type;
+    },
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (
+        this.formState.ready &&
+        !this.formState.loading &&
+        !this.formState.readOnly
+      ) {
+        //if it's a general notification make sure delivery is set to email
+        if (ref == "eventType" && this.obj.eventType == 27) {
+          this.obj.deliveryMethod = 2;
+        }
+        window.$gz.form.fieldValueChanged(this, ref);
+      }
+    },
+    async getDataFromApi(recordId) {
+      const vm = this;
+      vm.formState.loading = true;
+      if (!recordId) {
+        throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
+      }
+      try {
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        const res = await window.$gz.api.get(API_BASE_URL + recordId);
+        if (res.error) {
+          if (res.error.code == "2010") {
+            window.$gz.form.handleObjectNotFound(vm);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          vm.formState.loading = false;
+        } else {
+          vm.obj = res.data;
+          generateMenu(vm);
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false,
+            readOnly: res.data.eventType == 27 && res.data.deliveryMethod == 1 //default in-app notification is read only
+          });
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+        vm.formState.loading = false;
+      }
+    },
+    async submit() {
+      const vm = this;
+      if (vm.canSave == false) {
+        return;
+      }
+
+      try {
+        vm.formState.loading = true;
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        //don't send the deliveryaddress if it's an in-app notification
+        if (vm.obj.deliveryMethod == 1) {
+          vm.obj.deliveryAddress = null;
+        }
+        const res = await window.$gz.api.upsert(API_BASE_URL, vm.obj);
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          if (res.data.id) {
+            //POST
+            vm.obj = res.data;
+            this.$router.replace({
+              name: "customer-notify-subscription",
+              params: {
+                recordid: res.data.id,
+                obj: res.data
+              }
+            });
+          } else {
+            //PUT
+            vm.obj.concurrency = res.data.concurrency;
+          }
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true
+          });
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      } finally {
+        vm.formState.loading = false;
+      }
+    },
+    async remove() {
+      try {
+        const dialogResult = await window.$gz.dialog.confirmDelete();
+        if (dialogResult != true) {
+          return;
+        }
+        this.formState.loading = true;
+        if (this.$route.params.recordid == 0) {
+          JUST_DELETED = true;
+          this.$router.go(-1);
+        } else {
+          window.$gz.form.deleteAllErrorBoxErrors(this);
+          const res = await window.$gz.api.remove(
+            API_BASE_URL + this.$route.params.recordid
+          );
+          if (res.error) {
+            this.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(this);
+          } else {
+            JUST_DELETED = true;
+            this.$router.go(-1);
+          }
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, this);
+      } finally {
+        this.formState.loading = false;
+      }
+    },
+    duplicate() {
+      this.$router.push({
+        name: "customer-notify-subscription",
+        params: {
+          recordid: 0,
+          obj: this.obj
+        }
+      });
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  const m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "save":
+        m.vm.submit();
+        break;
+      case "delete":
+        m.vm.remove();
+        break;
+      case "new":
+        m.vm.$router.push({
+          name: "customer-notify-subscription",
+          params: { recordid: 0 }
+        });
+        break;
+      case "duplicate":
+        m.vm.duplicate();
+        break;
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  const menuOptions = {
+    isMain: false,
+    readOnly: vm.formState.readOnly,
+    icon: "$ayiBullhorn",
+    title: "CustomerNotifySubscription",
+    helpUrl: "home-notify-subscriptions",
+    formData: {
+      ayaType: window.$gz.type.CustomerNotifySubscription,
+      recordId: vm.$route.params.recordid
+    },
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "Save",
+      icon: "$ayiSave",
+      surface: true,
+      key: FORM_KEY + ":save",
+      vm: vm
+    });
+  }
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "$ayiPlus",
+      key: FORM_KEY + ":new",
+      vm: vm
+    });
+  }
+
+  if (vm.rights.change && vm.$route.params.recordid != 0) {
+    menuOptions.menuItems.push({
+      title: "Duplicate",
+      icon: "$ayiClone",
+      key: FORM_KEY + ":duplicate",
+      vm: vm
+    });
+  }
+
+  if (vm.rights.delete && vm.$route.params.recordid != 0) {
+    menuOptions.menuItems.push({
+      title: "Delete",
+      icon: "$ayiTrashAlt",
+      surface: false,
+      key: FORM_KEY + ":delete",
+      vm: vm
+    });
+  }
+  menuOptions.menuItems.push({ divider: true, inset: false });
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+let JUST_DELETED = false;
+
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText();
+  await populateSelectionLists(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations([
+    "NotifySubscriptionPendingSpan",
+    "CustomerNotifySubscription",
+    "NotifyEventType",
+    "Tags",
+    "Duration",
+    "TaggedWith",
+    "WorkOrderStatus",
+    "Total",
+    "UiFieldDataTypesInteger",
+    "QuoteQuoteStatusType"
+  ]);
+}
+
+//////////////////////
+//
+//
+async function populateSelectionLists(vm) {
+  //ensure the pick lists required are pre-fetched
+  await window.$gz.enums.fetchEnumList("NotifyEventType");
+  const tempEventTypes = window.$gz.enums.getSelectionList("NotifyEventType");
+
+  vm.selectLists.eventTypes = tempEventTypes.filter(z => {
+    //return true if it's a type allowed for customer
+    switch (z.id) {
+      case 6:
+        return window.$gz.store.state.customerRights.notifyCSRAccepted;
+      case 7:
+        return window.$gz.store.state.customerRights.notifyCSRRejected;
+      case 21:
+        return window.$gz.store.state.customerRights.notifyServiceImminent;
+      case 30: //cust or inside user both
+        return window.$gz.store.state.customerRights.notifyWOCompleted;
+      case 31:
+        return window.$gz.store.state.customerRights.notifyWOCreated;
+      default:
+        return false;
+    }
+  });
+
+  await window.$gz.enums.fetchEnumList("coreview");
+  vm.selectLists.coreAyaTypes = window.$gz.enums.getSelectionList("coreview");
+  let res = await window.$gz.api.get("work-order-status/list");
+  if (res.error) {
+    vm.formState.serverError = res.error;
+    window.$gz.form.setErrorBoxErrors(vm);
+  } else {
+    vm.selectLists.wostatus = res.data.all;
+  }
+
+  res = await window.$gz.api.get("quote-status/list");
+  if (res.error) {
+    vm.formState.serverError = res.error;
+    window.$gz.form.setErrorBoxErrors(vm);
+  } else {
+    vm.selectLists.quotestatus = res.data.all;
+  }
+}
+</script>
diff --git a/ayanova/src/views/customer-notify-subscriptions.vue b/ayanova/src/views/customer-notify-subscriptions.vue
new file mode 100644
index 00000000..36a0cdfc
--- /dev/null
+++ b/ayanova/src/views/customer-notify-subscriptions.vue
@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
+    <v-data-table
+      :headers="headers"
+      :items="obj"
+      class="elevation-1"
+      :disable-pagination="true"
+      :disable-filtering="true"
+      hide-default-footer
+      :header-props="{ sortByText: $ay.t('Sort') }"
+      data-cy="subsTable"
+      :no-data-text="$ay.t('NoData')"
+      @click:row="rowClick"
+    >
+    </v-data-table>
+  </div>
+</template>
+<script>
+const FORM_KEY = "notify-subscriptions";
+export default {
+  data() {
+    return {
+      obj: [],
+      headers: [],
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.fullRightsObject() //users always have full rights to their own notification subscriptions
+    };
+  },
+  async created() {
+    const vm = this;
+    try {
+      await initForm(vm);
+      vm.formState.readOnly = false;
+      vm.formState.ready = true;
+      window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getDataFromApi();
+      vm.formState.loading = false;
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
+  },
+  methods: {
+    rowClick(item) {
+      //nav to item.id
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.NotifySubscription,
+        id: item.id
+      });
+    },
+    async getDataFromApi() {
+      const vm = this;
+      vm.formState.loading = true;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const res = await window.$gz.api.get(
+          "customer-notify-subscription/list"
+        );
+
+        if (res.error) {
+          if (res.error.code == "2010") {
+            window.$gz.form.handleObjectNotFound(vm);
+          }
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          if (res.data) {
+            const ret = [];
+            const languageName = window.$gz.locale.getResolvedLanguage();
+            const currencyName = window.$gz.locale.getCurrencyName();
+            for (let i = 0; i < res.data.length; i++) {
+              const o = res.data[i];
+              let info = "";
+              if (o.status != "") {
+                info += o.status;
+              }
+              if (o.decValue && o.decValue != 0) {
+                //currently is only currency for "The Andy" so format as currency
+                const t = window.$gz.locale.currencyLocalized(
+                  o.decValue,
+                  languageName,
+                  currencyName
+                );
+                if (info != "" && t != "") {
+                  info += ` - ${t}`;
+                }
+              }
+              if (o.ageValue) {
+                const t = window.$gz.locale.durationLocalized(o.ageValue);
+                if (info != "" && t != "") {
+                  info += ` - ${t}`;
+                }
+              }
+              let eventDisplay = window.$gz.enums.get(
+                "NotifyEventType",
+                o.eventType
+              );
+              if (info && info != "") {
+                eventDisplay += ` - ${info}`;
+              }
+              ret.push({
+                id: o.id,
+                eventType: eventDisplay,
+                ayaType: `[${window.$gz.enums.get("coreview", o.ayaType)}]`,
+                deliveryMethod: window.$gz.enums.get(
+                  "NotifyDeliveryMethod",
+                  o.deliveryMethod
+                ),
+                deliveryAddress: o.deliveryAddress,
+                tags: window.$gz.util.formatTags(o.tags)
+              });
+            }
+            vm.obj = ret;
+          } else {
+            vm.obj = [];
+          }
+          window.$gz.form.setFormState({
+            vm: vm,
+            dirty: false,
+            valid: true,
+            loading: false
+          });
+          generateMenu(vm);
+        }
+      } catch (error) {
+        window.$gz.form.setFormState({
+          vm: vm,
+          loading: false
+        });
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    }
+  }
+};
+
+/////////////////////////////
+//
+//
+async function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  const m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "new":
+        m.vm.$router.push({
+          name: "customer-notify-subscription",
+          params: { recordid: 0 }
+        });
+        break;
+
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  const menuOptions = {
+    isMain: true,
+    icon: "$ayiBullhorn",
+    title: "CustomerNotifySubscriptionList",
+    helpUrl: "customer-notify-subscriptions",
+    menuItems: [],
+    formData: {
+      ayaType: window.$gz.type.NotifySubscription
+    }
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: "New",
+      icon: "$ayiPlus",
+      surface: true,
+      key: FORM_KEY + ":new",
+      vm: vm
+    });
+  }
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+/////////////////////////////////
+//
+//
+async function initForm(vm) {
+  await fetchTranslatedText();
+  await cacheEnums();
+  await createTableHeaders(vm);
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI translated text is available
+//
+async function fetchTranslatedText() {
+  await window.$gz.translation.cacheTranslations([
+    "NotifyEventType",
+    "ID",
+    "AyaType",
+    "NotifyDeliveryMethod",
+    "NotifyDeliveryAddress",
+    "Tags"
+  ]);
+}
+
+//////////////////////
+//
+//
+async function cacheEnums() {
+  await window.$gz.enums.fetchEnumList("NotifyEventType");
+  await window.$gz.enums.fetchEnumList("NotifyDeliveryMethod");
+  await window.$gz.enums.fetchEnumList("coreview");
+}
+
+//////////////////////
+//
+//
+async function createTableHeaders(vm) {
+  vm.headers = [
+    { text: vm.$ay.t("ID"), value: "id" },
+    { text: vm.$ay.t("NotifyEventType"), value: "eventType" },
+    { text: vm.$ay.t("AyaType"), value: "ayaType" },
+    { text: vm.$ay.t("NotifyDeliveryMethod"), value: "deliveryMethod" },
+    { text: vm.$ay.t("NotifyDeliveryAddress"), value: "deliveryAddress" },
+    { text: vm.$ay.t("Tags"), value: "tags" }
+  ];
+}
+</script>