src/components/CrudModel.vue

@@ -89,6 +89,7 @@ async function fetch(data) {
     watch(formData, () => (hasChanges.value = true), { deep: true });
 
     emit('onFetch', data);
+    return data;
 }
 
 async function reset() {

src/pages/Worker/Card/WorkerNotificationsManager.vue

@@ -14,35 +14,38 @@ const $props = defineProps({
         default: null,
     },
 });
-const entityId = computed(() => $props.id || route.params.id);
-
-onUpdated(() => console.log('updated'));
 
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
+const entityId = computed(() => $props.id || route.params.id);
+const notifications = ref();
 
 async function toggleNotification(notification) {
+    let data = {};
     if (notification.active) {
         await axios.delete(`NotificationSubscriptions/${notification.id}`);
-        notification.id = null;
+    } else {
-        notification.active = false;
+        const res = await axios.post(`NotificationSubscriptions`, {
-        return quasar.notify({
-            type: 'positive',
-            message: t('worker.notificationsManager.unsubscribed'),
-        });
-    }
-
-    const { data } = await axios.post(`NotificationSubscriptions`, {
             notificationFk: notification.notificationFk,
             userFk: entityId.value,
         });
+        data = res.data;
+    }
 
     notification.id = data.id;
+    notification.active = !notification.active;
     quasar.notify({
         type: 'positive',
-        message: t('worker.notificationsManager.subscribed'),
+        message: t(
+            `worker.notificationsManager.${notification.active ? 'un' : ''}subscribed`
+        ),
     });
+    orderNotification(notifications.value);
+}
+
+function orderNotification(data) {
+    notifications.value = data.sort((notification) => -+notification.active);
 }
 </script>
 
@@ -51,98 +54,55 @@ async function toggleNotification(notification) {
         auto-load
         data-key="NotificationSubscriptions"
         :url="`NotificationSubscriptions/${entityId}/getList`"
+        :default-reset="false"
         :default-remove="false"
+        :default-save="false"
+        @on-fetch="orderNotification"
     >
-        <template #body="{ rows }">
+        <template #body>
+            <div>
                 <QList class="notificationList">
-                <QCard v-for="row in rows" :key="row.id" class="q-pa-md">
+                    <QCard
+                        v-for="notification in notifications"
+                        :key="notification.notificationFk"
+                        class="q-pa-md"
+                    >
                         <QItem>
                             <QItemSection avatar>
                                 <QBtn
                                     round
                                     icon="mail"
-                                :color="row.active ? 'green' : 'orange'"
+                                    :color="notification.active ? 'green' : 'orange'"
-                                @click="toggleNotification(row)"
+                                    @click="toggleNotification(notification)"
                                 />
                             </QItemSection>
-                        <QItemSection>
-                            <QItemLabel>{{ row.name }}</QItemLabel>
-                            <QItemLabel caption> {{ row.description }} </QItemLabel>
-                        </QItemSection>
-                    </QItem>
-                </QCard>
-            </QList>
-        </template>
-    </CrudModel>
-    <!-- <QPage>
-        <QCard class="q-pa-md">
-            <QList>
-                <div
-                    v-show="
-                        notifications.filter(
-                            (notification) => notification.active == true
-                        ).length
-                    "
-                >
-                    <QItemLabel header class="text-h6">
-                        {{ t('worker.notificationsManager.activeNotifications') }}
-                    </QItemLabel>
-                    <QItem>
-                        <div
-                            v-for="notification in notifications.filter(
-                                (notification) => notification.active == true
-                            )"
-                            :key="notification.id"
-                        >
-                            <QChip
-                                :key="notification.id"
-                                :label="notification.name"
-                                text-color="white"
-                                color="primary"
-                                class="q-mr-sm"
-                                removable
-                                @remove="disableNotification(notification)"
-                            />
-                        </div>
-                    </QItem>
-                </div>
-                <div v-show="notifications.length">
-                    <QItemLabel header class="text-h6">
-                        {{ t('worker.notificationsManager.availableNotifications') }}
-                    </QItemLabel>
-                    <div class="row">
-                        <QItem
-                            class="col-3"
-                            :key="notification.notificationFk"
-                            v-for="notification in notifications"
-                        >
                             <QItemSection>
                                 <QItemLabel>{{ notification.name }}</QItemLabel>
-                                <QItemLabel caption>{{
+                                <QItemLabel caption>
-                                    notification.description
+                                    {{ notification.description }}
-                                }}</QItemLabel>
+                                </QItemLabel>
-                            </QItemSection>
-                            <QItemSection side top>
-                                <QToggle
-                                    checked-icon="check"
-                                    unchecked-icon="close"
-                                    indeterminate-icon="block"
-                                    v-model="notification.active"
-                                    @update:model-value="toggleNotification(notification)"
-                                />
                             </QItemSection>
                         </QItem>
-                    </div>
-                </div>
-            </QList>
                     </QCard>
-    </QPage> -->
+                </QList>
+            </div>
+        </template>
+    </CrudModel>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .notificationList {
-    display: grid;
+    // display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    // grid-template-columns: repeat(4, 1fr);
-    grid-gap: 10px;
+    // grid-gap: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    gap: 15px;
+    width: 100%;
+    > .q-card {
+        flex: 1;
+        width: 100%;
+    }
 }
 </style>