forked from verdnatura/salix-front
refs #4797 feat(WorkerNotification): use Maps
This commit is contained in:
parent
5350765469
commit
e8aef29512
|
|
@ -13,5 +13,6 @@
|
|||
],
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
},
|
||||
"cSpell.words": ["axios"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -249,9 +249,6 @@ function goToAction() {
|
|||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
}
|
||||
.maxwidth {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue