From 3d4779c2af6825b53c60564720cef693f9146bd3 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 25 Jul 2024 16:24:25 -0400
Subject: [PATCH 1/7] feature/FOUR-17027

---
 .../components/NotificationsList.vue           | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index f11e10e4f5..3e73436028 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -27,7 +27,19 @@
         </div>
       </div>
     </div>
-    <div class="card card-body table-card d-none d-sm-block">
+
+    <data-loading
+      v-show="loading"
+      :for="/clients/"
+      :empty="$t('No Data Available')"
+      :empty-desc="$t('')"
+      empty-icon="noData"
+    />
+
+    <div
+      v-show="!loading"
+      class="card card-body table-card d-none d-sm-block"
+    >
       <vuetable
         :data-manager="dataManager"
         :sort-order="sortOrder"
@@ -103,6 +115,7 @@
 <script>
 import moment from "moment";
 import datatableMixin from "../../components/common/mixins/datatable";
+import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import AvatarImage from "../../components/AvatarImage";
 import NotificationMessage from "./notification-message";
 import NotificationUser from "./notification-user";
@@ -115,7 +128,7 @@ export default {
     NotificationUser,
     AvatarImage,
   },
-  mixins: [datatableMixin],
+  mixins: [datatableMixin, dataLoadingMixin],
   props: ["filter", "filterComments", "type", "showTime"],
   data() {
     return {
@@ -123,6 +136,7 @@ export default {
       orderBy: "",
       showTime: true,
       sortOrder: [],
+      loading: false,
       fields: [
         {
           title: () => this.$t("Status"),

From b1117c213808219d4ea058047d4157e1788d5f8c Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 25 Jul 2024 16:27:18 -0400
Subject: [PATCH 2/7] feature/FOUR-17027

---
 resources/js/notifications/components/NotificationsList.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index 3e73436028..325dd35f99 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -27,7 +27,6 @@
         </div>
       </div>
     </div>
-
     <data-loading
       v-show="loading"
       :for="/clients/"
@@ -35,7 +34,6 @@
       :empty-desc="$t('')"
       empty-icon="noData"
     />
-
     <div
       v-show="!loading"
       class="card card-body table-card d-none d-sm-block"

From a7a9f8bc80d0802f6f5dc16bd50a1a629cf3347a Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 26 Jul 2024 16:42:50 -0400
Subject: [PATCH 3/7] feature/FOUR-17027

---
 resources/js/notifications/components/NotificationsList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index 325dd35f99..fa8bb40d34 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -35,7 +35,7 @@
       empty-icon="noData"
     />
     <div
-      v-show="!loading"
+      v-if="!loading"
       class="card card-body table-card d-none d-sm-block"
     >
       <vuetable

From d1934e22d4d3cee7a3df2209a6f3e35cc9cbcac2 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 31 Jul 2024 16:19:46 -0400
Subject: [PATCH 4/7] feature/FOUR-17027

---
 resources/js/notifications/components/NotificationsList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index fa8bb40d34..d624718914 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -132,7 +132,6 @@ export default {
     return {
       response: null,
       orderBy: "",
-      showTime: true,
       sortOrder: [],
       loading: false,
       fields: [

From 31bd85553c7ee331564394e7c1f11b0423def204 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 1 Aug 2024 12:17:45 -0400
Subject: [PATCH 5/7] feature/FOUR-17027

---
 .../components/NotificationsList.vue          | 194 +++++++++---------
 1 file changed, 98 insertions(+), 96 deletions(-)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index d624718914..9dbea4d886 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -1,123 +1,125 @@
 <template>
   <div class="data-table">
-    <div class="card-deck d-block d-sm-none">
-      <div
-        v-for="notification in data.data"
-        :key="notification.id"
-        class="card"
-      >
-        <div class="card-body shadow">
-          <div class="d-flex align-items-center mb-3">
-            <notification-user :notification="notification" />
-          </div>
-          <h5 class="card-title">
-            <notification-message
-              :notification="notification"
-              :show-time="showTime"
-            />
-          </h5>
-          <h6 class="card-subtitle mb-2 text-muted">
-            {{ notification.read_at || 'N/A' }}
-          </h6>
-          <a
-            v-if="notification.data.url"
-            href="#"
-            @click="redirectToURL(notification.data.url)"
-          >More</a>
-        </div>
-      </div>
-    </div>
     <data-loading
       v-show="loading"
-      :for="/clients/"
+      :for="/notifications\?page/"
       :empty="$t('No Data Available')"
       :empty-desc="$t('')"
       empty-icon="noData"
     />
-    <div
-      v-if="!loading"
-      class="card card-body table-card d-none d-sm-block"
-    >
-      <vuetable
-        :data-manager="dataManager"
-        :sort-order="sortOrder"
-        :css="css"
-        :api-mode="false"
-        :fields="fields"
-        :data="data"
-        data-path="data"
-        pagination-path="meta"
-        :no-data-template="$t('No Data Available')"
-        @vuetable:pagination-data="onPaginationData"
-      >
-        <!-- Change Status Slot -->
-        <template
-          slot="changeStatus"
-          slot-scope="props"
+    <div v-show="!loading">
+      <div class="card-deck d-block d-sm-none">
+        <div
+          v-for="notification in data.data"
+          :key="notification.id"
+          class="card"
         >
-          <span
-            v-if="props.rowData.read_at === null"
-            style="cursor:pointer"
-            class="far fa-envelope fa-lg blue-envelope"
-            @click="read(props.rowData.id)"
-          />
-
-          <span
-            v-if="props.rowData.read_at !== null"
-            style="cursor:pointer"
-            @click="unread(props.rowData)"
+          <div class="card-body shadow">
+            <div class="d-flex align-items-center mb-3">
+              <notification-user :notification="notification" />
+            </div>
+            <h5 class="card-title">
+              <notification-message
+                :notification="notification"
+                :show-time="showTime"
+              />
+            </h5>
+            <h6 class="card-subtitle mb-2 text-muted">
+              {{ notification.read_at || 'N/A' }}
+            </h6>
+            <a
+              v-if="notification.data.url"
+              href="#"
+              @click="redirectToURL(notification.data.url)"
+            >More</a>
+          </div>
+        </div>
+      </div>
+      <div class="card card-body table-card d-none d-sm-block">
+        <vuetable
+          :data-manager="dataManager"
+          :sort-order="sortOrder"
+          :css="css"
+          :api-mode="false"
+          :fields="fields"
+          :data="data"
+          data-path="data"
+          pagination-path="meta"
+          :no-data-template="$t('No Data Available')"
+          @vuetable:pagination-data="onPaginationData"
+        >
+          <!-- Change Status Slot -->
+          <template
+            slot="changeStatus"
+            slot-scope="props"
           >
-            <i class="far fa-envelope-open fa-lg gray-envelope" />
-          </span>
-        </template>
+            <span
+              v-if="props.rowData.read_at === null"
+              style="cursor:pointer"
+              class="far fa-envelope fa-lg blue-envelope"
+              @click="read(props.rowData.id)"
+            />
 
-        <!-- From Slot -->
-        <template
-          slot="from"
-          slot-scope="props"
-        >
-          <notification-user :notification="props.rowData" />
-        </template>
+            <span
+              v-if="props.rowData.read_at !== null"
+              style="cursor:pointer"
+              @click="unread(props.rowData)"
+            >
+              <i class="far fa-envelope-open fa-lg gray-envelope" />
+            </span>
+          </template>
 
-        <!-- Subject Slot -->
-        <template
-          slot="subject"
-          slot-scope="props"
-        >
-          <a
-            style="cursor: pointer;"
-            @click="redirectToURL(props.rowData.data?.url)"
+          <!-- From Slot -->
+          <template
+            slot="from"
+            slot-scope="props"
           >
-            <span v-if="props.rowData.type === 'FILE_READY'" />
-            <span v-else>
-              <notification-message
-                :notification="props.rowData"
-                :style="{ fontSize: '14px' }"
-              />
-            </span>
-          </a>
-        </template>
-      </vuetable>
-      <pagination
-        ref="pagination"
-        :single="$t('Task')"
-        :plural="$t('Tasks')"
-        :per-page-select-enabled="true"
-        @changePerPage="changePerPage"
-        @vuetable-pagination:change-page="onPageChange"
-      />
+            <notification-user :notification="props.rowData" />
+          </template>
+
+          <!-- Subject Slot -->
+          <template
+            slot="subject"
+            slot-scope="props"
+          >
+            <a
+              style="cursor: pointer;"
+              @click="redirectToURL(props.rowData.data?.url)"
+            >
+              <span v-if="props.rowData.type === 'FILE_READY'" />
+              <span v-else>
+                <notification-message
+                  :notification="props.rowData"
+                  :style="{ fontSize: '14px' }"
+                />
+              </span>
+            </a>
+          </template>
+        </vuetable>
+        <pagination
+          ref="pagination"
+          :single="$t('Task')"
+          :plural="$t('Tasks')"
+          :per-page-select-enabled="true"
+          @changePerPage="changePerPage"
+          @vuetable-pagination:change-page="onPageChange"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import moment from "moment";
+import { createUniqIdsMixin } from "vue-uniq-ids";
 import datatableMixin from "../../components/common/mixins/datatable";
 import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import AvatarImage from "../../components/AvatarImage";
 import NotificationMessage from "./notification-message";
 import NotificationUser from "./notification-user";
 
+const uniqIdsMixin = createUniqIdsMixin();
+
 Vue.component("AvatarImage", AvatarImage);
 
 export default {
@@ -126,7 +128,7 @@ export default {
     NotificationUser,
     AvatarImage,
   },
-  mixins: [datatableMixin, dataLoadingMixin],
+  mixins: [datatableMixin, dataLoadingMixin, uniqIdsMixin],
   props: ["filter", "filterComments", "type", "showTime"],
   data() {
     return {

From 4640723a443557999673b3754aa1cd164577743d Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 1 Aug 2024 12:23:30 -0400
Subject: [PATCH 6/7] feature/FOUR-17027

---
 resources/js/notifications/components/NotificationsList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index 9dbea4d886..84ee91087f 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -135,7 +135,6 @@ export default {
       response: null,
       orderBy: "",
       sortOrder: [],
-      loading: false,
       fields: [
         {
           title: () => this.$t("Status"),

From dd1abb966131b6b05f79ba08bed25106f8ebdb8d Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 1 Aug 2024 15:48:48 -0400
Subject: [PATCH 7/7] feature/FOUR-17027

---
 resources/js/notifications/components/NotificationsList.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/js/notifications/components/NotificationsList.vue b/resources/js/notifications/components/NotificationsList.vue
index 84ee91087f..38e913fcb0 100644
--- a/resources/js/notifications/components/NotificationsList.vue
+++ b/resources/js/notifications/components/NotificationsList.vue
@@ -302,6 +302,9 @@ export default {
         .then((response) => {
           this.response = response;
           this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
         });
     },
   },