4797-workerNotificationManager #107
|
@ -89,6 +89,7 @@ async function fetch(data) {
|
|||
watch(formData, () => (hasChanges.value = true), { deep: true });
|
||||
|
||||
emit('onFetch', data);
|
||||
return data;
|
||||
}
|
||||
|
||||
async function reset() {
|
||||
|
|
|
@ -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;
|
||||
notification.active = false;
|
||||
return quasar.notify({
|
||||
type: 'positive',
|
||||
message: t('worker.notificationsManager.unsubscribed'),
|
||||
});
|
||||
}
|
||||
|
||||
const { data } = await axios.post(`NotificationSubscriptions`, {
|
||||
} else {
|
||||
const res = 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"
|
||||
alexm marked this conversation as resolved
|
||||
:key="notification.notificationFk"
|
||||
class="q-pa-md"
|
||||
>
|
||||
<QItem>
|
||||
<QItemSection avatar>
|
||||
<QBtn
|
||||
round
|
||||
icon="mail"
|
||||
:color="row.active ? 'green' : 'orange'"
|
||||
@click="toggleNotification(row)"
|
||||
:color="notification.active ? 'green' : 'orange'"
|
||||
@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>{{
|
||||
notification.description
|
||||
}}</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection side top>
|
||||
<QToggle
|
||||
checked-icon="check"
|
||||
unchecked-icon="close"
|
||||
indeterminate-icon="block"
|
||||
v-model="notification.active"
|
||||
@update:model-value="toggleNotification(notification)"
|
||||
/>
|
||||
<QItemLabel caption>
|
||||
{{ notification.description }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</div>
|
||||
</div>
|
||||
</QList>
|
||||
</QCard>
|
||||
</QPage> -->
|
||||
</QList>
|
||||
</div>
|
||||
</template>
|
||||
</CrudModel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.notificationList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 10px;
|
||||
// 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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in New Issue
NotificationSubscriptions aparece 4 veces en este fichero, como verias de hacer una const para que sólo esté 1 vez?