refs #4797 feat(workerNotification): add cards

src/pages/Worker/Card/WorkerNotificationsManager.vue

@@ -5,6 +5,8 @@ import { computed, onMounted, onUpdated, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
+import CrudModel from 'components/CrudModel.vue';
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -14,75 +16,60 @@ const $props = defineProps({
 });
 const entityId = computed(() => $props.id || route.params.id);
 
-onMounted(() => fetch());
 onUpdated(() => console.log('updated'));
 
 const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
 
-const notifications = ref([]);
-
-async function fetch() {
-    try {
-        await axios
-            .get(`NotificationSubscriptions/${entityId.value}/getList`)
-            .then(async (res) => {
-                if (res.data) {
-                    notifications.value = res.data;
-                }
-            });
-    } catch (e) {
-        //
-    }
-}
-
-async function disableNotification(notification) {
-    await axios
-        .delete(`NotificationSubscriptions/${notification.id}`)
-        .catch(() => (notification.active = true))
-        .then((res) => {
-            if (res.data) {
+async function toggleNotification(notification) {
+    if (notification.active) {
+        await axios.delete(`NotificationSubscriptions/${notification.id}`);
         notification.id = null;
         notification.active = false;
-                quasar.notify({
+        return quasar.notify({
             type: 'positive',
             message: t('worker.notificationsManager.unsubscribed'),
         });
     }
-        });
-}
 
-async function toggleNotification(notification) {
-    if (!notification.active) {
-        await disableNotification(notification);
-    } else {
-        await axios
-            .post(`NotificationSubscriptions`, {
+    const { data } = await axios.post(`NotificationSubscriptions`, {
         notificationFk: notification.notificationFk,
         userFk: entityId.value,
-            })
-            .catch(() => (notification.active = false))
-            .then((res) => {
-                if (res.data) {
-                    notification.id = res.data.id;
+    });
+
+    notification.id = data.id;
     quasar.notify({
         type: 'positive',
         message: t('worker.notificationsManager.subscribed'),
     });
 }
-            });
-    }
-}
 </script>
+
 <template>
-    <CrudModel auto-load :url="`NotificationSubscriptions/${entityId}/getList`">
+    <CrudModel
+        auto-load
+        data-key="NotificationSubscriptions"
+        :url="`NotificationSubscriptions/${entityId}/getList`"
+        :default-remove="false"
+    >
         <template #body="{ rows }">
-            <QList v-for="row in rows" :key="row.id">
-                <QCard>
-                    <QCardSection horizontal>
-                        {{ row }}
-                    </QCardSection>
+            <QList class="notificationList">
+                <QCard v-for="row in rows" :key="row.id" class="q-pa-md">
+                    <QItem>
+                        <QItemSection avatar>
+                            <QBtn
+                                round
+                                icon="mail"
+                                :color="row.active ? 'green' : 'orange'"
+                                @click="toggleNotification(row)"
+                            />
+                        </QItemSection>
+                        <QItemSection>
+                            <QItemLabel>{{ row.name }}</QItemLabel>
+                            <QItemLabel caption> {{ row.description }} </QItemLabel>
+                        </QItemSection>
+                    </QItem>
                 </QCard>
             </QList>
         </template>
@@ -151,3 +138,11 @@ async function toggleNotification(notification) {
         </QCard>
     </QPage> -->
 </template>
+
+<style scoped>
+.notificationList {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+}
+</style>