.vscode/settings.json

@@ -13,5 +13,6 @@
     ],
     "[vue]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
-    }
+    },
+    "cSpell.words": ["axios"]
 }

src/pages/Claim/Card/ClaimDevelopment.vue

@@ -249,9 +249,6 @@ function goToAction() {
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;
 }
-.maxwidth {
-    width: 100%;
-}
 </style>
 
 <i18n>

src/pages/Worker/Card/WorkerNotificationsManager.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { useQuasar } from 'quasar';
-import { computed, onMounted, onUpdated, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -19,33 +19,40 @@ const route = useRoute();
 const { t } = useI18n();
 const quasar = useQuasar();
 const entityId = computed(() => $props.id || route.params.id);
-const notifications = ref();
+const active = ref();
+const available = ref();
 
 async function toggleNotification(notification) {
-    let data = {};
-    if (notification.active) {
+    if (!notification.active) {
         await axios.delete(`NotificationSubscriptions/${notification.id}`);
+        swapEntry(active.value, available.value, notification.notificationFk);
     } else {
-        const res = await axios.post(`NotificationSubscriptions`, {
+        const { data } = await axios.post(`NotificationSubscriptions`, {
             notificationFk: notification.notificationFk,
             userFk: entityId.value,
         });
-        data = res.data;
+        notification.id = data.id;
+
+        swapEntry(available.value, active.value, notification.notificationFk);
     }
 
-    notification.id = data.id;
-    notification.active = !notification.active;
     quasar.notify({
         type: 'positive',
         message: t(
-            `worker.notificationsManager.${notification.active ? 'un' : ''}subscribed`
+            `worker.notificationsManager.${notification.active ? '' : 'un'}subscribed`
         ),
     });
-    orderNotification(notifications.value);
 }
 
-function orderNotification(data) {
-    notifications.value = data.sort((notification) => -+notification.active);
+const swapEntry = (from, to, key) => {
+    const element = from.get(key);
+    to.set(key, element);
+    from.delete(key);
+};
+
+function setNotifications(data) {
+    active.value = new Map(data.active);
+    available.value = new Map(data.available);
 }
 </script>
 
@@ -57,34 +64,53 @@ function orderNotification(data) {
         :default-reset="false"
         :default-remove="false"
         :default-save="false"
-        @on-fetch="orderNotification"
+        @on-fetch="setNotifications"
     >
         <template #body>
-            <div>
+            <div
+                v-for="(notifications, index) in [
+                    [...active.values()],
+                    [...available.values()],
+                ]"
+                :key="notifications"
+            >
                 <QList class="notificationList">
-                    <QCard
-                        v-for="notification in notifications"
-                        :key="notification.notificationFk"
-                        class="q-pa-md"
-                    >
-                        <QItem>
-                            <QItemSection avatar>
-                                <QBtn
-                                    round
-                                    icon="mail"
-                                    :color="notification.active ? 'green' : 'orange'"
-                                    @click="toggleNotification(notification)"
+                    <TransitionGroup>
+                        <QCard
+                            v-for="notification in notifications"
+                            :key="notification.notificationFk"
+                            class="q-pa-md"
+                        >
+                            <QItem>
+                                <QItemSection avatar>
+                                    <QBtn
+                                        round
+                                        icon="mail"
+                                        :color="notification.active ? 'green' : 'grey'"
+                                    />
+                                </QItemSection>
+                                <QItemSection>
+                                    <QItemLabel>{{ notification.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ notification.description }}
+                                    </QItemLabel>
+                                </QItemSection>
+                                <QToggle
+                                    checked-icon="check"
+                                    unchecked-icon="close"
+                                    v-model="notification.active"
+                                    color="green"
+                                    @update:model-value="toggleNotification(notification)"
                                 />
-                            </QItemSection>
-                            <QItemSection>
-                                <QItemLabel>{{ notification.name }}</QItemLabel>
-                                <QItemLabel caption>
-                                    {{ notification.description }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QCard>
+                            </QItem>
+                        </QCard>
+                    </TransitionGroup>
                 </QList>
+                <QSeparator
+                    color="primary"
+                    class="q-my-lg"
+                    v-if="!index && available.size && active.size"
+                />
             </div>
         </template>
     </CrudModel>
@@ -92,17 +118,31 @@ function orderNotification(data) {
 
 <style lang="scss" scoped>
 .notificationList {
-    // display: grid;
-    // grid-template-columns: repeat(4, 1fr);
-    // grid-gap: 10px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    gap: 15px;
-    width: 100%;
-    > .q-card {
-        flex: 1;
-        width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+
+    /* we will explain what these classes do next! */
+    .v-enter-active,
+    .v-leave-active {
+        transition: opacity 0.5s ease;
+    }
+
+    .v-enter-from,
+    .v-leave-to {
+        opacity: 0;
+    }
+}
+
+@media (max-width: $breakpoint-md) {
+    .notificationList {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: $breakpoint-xs) {
+    .notificationList {
+        grid-template-columns: repeat(1, 1fr);
     }
 }
 </style>