ayanova/src/views/home-notifications.vue

@@ -1,13 +1,44 @@
 <template>
   <div>
+    <v-row>
+      <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
+      {{ obj }}
+      <v-col rows="12">
+        <v-timeline :dense="$vuetify.breakpoint.smAndDown">
+          <v-timeline-item v-for="i in obj" :key="i.id" fill-dot>
+            <v-card :outlined="$store.state.darkMode">
+              <v-card-title>{{ i.name }}</v-card-title>
+              <v-card-subtitle
+                >{{ i.uicreated }} - {{ i.uievent }}</v-card-subtitle
+              >
+              <v-card-text
+                ><v-icon large class="mr-2">{{ i.icon }}</v-icon
+                >{{ i.uiayatype }}
+                <div class="mt-4" v-if="i.message">{{ i.message }}</div>
+              </v-card-text>
+
+              <v-card-actions>
+                <v-btn text @click="deleteItem(i)">{{ $ay.t("Delete") }}</v-btn>
+                <v-btn text @click="openSubscription(i)">{{
+                  $ay.t("NotifySubscription")
+                }}</v-btn>
+                <v-btn text @click="openItem(i)">{{ $ay.t("Open") }}</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-timeline-item>
+        </v-timeline>
+      </v-col>
+    </v-row>
+
+    <!-- 
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-    {{ obj }}
+
 
     <v-list three-line>
       <template v-for="item in obj">
         <v-list-item :key="item.id">
           <v-list-item-avatar>
-            <v-icon>{{ item.icon }}</v-icon>
+            <v-icon @click="openItem(item)" large>{{ item.icon }}</v-icon>
           </v-list-item-avatar>
           <v-list-item-content>
             <v-list-item-title
@@ -16,10 +47,14 @@
             <v-list-item-subtitle
               v-html="subtitleHtml(item)"
             ></v-list-item-subtitle>
+            <div>
+              <v-icon>fa-trash-alt</v-icon>
+              <v-icon>fa-bell</v-icon>
+            </div>
           </v-list-item-content>
         </v-list-item>
       </template>
-    </v-list>
+    </v-list> -->
   </div>
 </template>
 
@@ -64,14 +99,20 @@ export default {
     };
   },
   methods: {
-    subtitleHtml(item) {
-      let msg = "";
-      if (item.message) {
-        msg = ` &mdash; ${item.message}`;
-      } else {
-      }
-      return `<span class='text--primary'>${item.uievent}</span>${msg}`;
+    openItem(item) {
+      window.$gz.eventBus.$emit("openobject", {
+        type: item.ayaType,
+        id: item.objectId
+      });
     },
+    openSubscription(item) {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.NotifySubscription,
+        id: item.notifySubscriptionId
+      });
+    },
+    deleteItem(item) {},
+
     async getDataFromApi() {
       let vm = this;
 
@@ -124,6 +165,11 @@ export default {
             ).name;
 
             temp[i].icon = window.$gz.util.iconForType(temp[i].ayaType);
+
+            if (!temp[i].message) {
+              temp[i].message =
+                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique aliquam luctus. Suspendisse molestie lacus ac varius cursus. Praesent facilisis sem quam, vitae tincidunt ligula porttitor maximus. Sed quis mi commodo, dictum nunc sed, elementum leo. In tincidunt porta risus, et tristique orci congue at.";
+            }
           }
 
           vm.obj = [...temp];
@@ -230,7 +276,6 @@ function generateMenu(vm) {
 //
 async function initForm(vm) {
   await fetchTranslatedText(vm);
-  // await populateAyaTypeList(vm);
   await populateSelectionLists(vm);
 }
 
@@ -239,44 +284,7 @@ async function initForm(vm) {
 // Ensures UI translated text is available
 //
 async function fetchTranslatedText(vm) {
-  await window.$gz.translation.cacheTranslations([
-    // "NotifyDeliveryMethod",
-    // "NotifyEventType",
-    // "NotifyDeliveryAddress",
-    // "InTags",
-    // "NotifyEventObjectDeleted",
-    // "NotifyEventObjectCreated",
-    // "NotifyEventObjectModified",
-    // "NotifyEventWorkorderStatusChange",
-    // "NotifyEventContractExpiring",
-    // "NotifyEventCSRAccepted",
-    // "NotifyEventCSRRejected",
-    // "NotifyEventWorkorderClosed",
-    // "NotifyEventQuoteStatusChange",
-    // "NotifyEventQuoteStatusAge",
-    // "NotifyEventServiceBankDepleted",
-    // "NotifyEventReminderImminent",
-    // "NotifyEventScheduledOnWorkorder",
-    // "NotifyEventScheduledOnWorkorderImminent",
-    // "NotifyEventWorkorderCloseByPassed",
-    // "NotifyEventOutsideServiceOverdue",
-    // "NotifyEventOutsideServiceReceived",
-    // "NotifyEventPartRequestReceived",
-    // "NotifyEventNotifyHealthCheck",
-    // "NotifyEventBackupStatus",
-    // "NotifyEventCustomerServiceImminent",
-    // "NotifyEventPartRequested",
-    // "NotifyEventWorkorderTotalExceedsThreshold",
-    // "NotifyEventWorkorderStatusAge",
-    // "NotifyEventUnitWarrantyExpiry",
-    // "NotifyEventUnitMeterReadingMultipleExceeded",
-    // "NotifyEventDefaultNotification",
-    // "NotifyDeliveryMethodApp",
-    // "NotifyDeliveryMethodSMTP",
-    // "NotifyEventObjectAge",
-    // "NotifyEventServerOperationsProblem",
-    // "Duration"
-  ]);
+  await window.$gz.translation.cacheTranslations(["NotifySubscription"]);
 }
 
 //////////////////////

ayanova/src/views/home-notify-subscriptions.vue

@@ -7,7 +7,7 @@
     >
     </gz-extensions> -->
     <gz-data-table
-      formKey="widget-list"
+      formKey="notification-subscriptions"
       :dataListKey="dataListKey"
       :dataListFilter="dataListFilter"
       :dataListSort="dataListSort"