4797-workerNotificationManager #107

Merged
alexm merged 9 commits from 4797-workerNotificationManager into dev 2023-11-10 09:39:53 +00:00
2 changed files with 60 additions and 99 deletions
Showing only changes of commit 5350765469 - Show all commits

View File

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

View File

@ -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'),
} else {
const res = await axios.post(`NotificationSubscriptions`, {
notificationFk: notification.notificationFk,
userFk: entityId.value,
});
data = res.data;
}
const { data } = await axios.post(`NotificationSubscriptions`, {
notificationFk: notification.notificationFk,
userFk: entityId.value,
});
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 }">
<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>
</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)"
<template #body>
<div>
<QList class="notificationList">
<QCard
v-for="notification in notifications"
alexm marked this conversation as resolved
Review

NotificationSubscriptions aparece 4 veces en este fichero, como verias de hacer una const para que sólo esté 1 vez?

NotificationSubscriptions aparece 4 veces en este fichero, como verias de hacer una const para que sólo esté 1 vez?
:key="notification.notificationFk"
class="q-pa-md"
>
<QItem>
<QItemSection avatar>
<QBtn
round
icon="mail"
:color="notification.active ? 'green' : 'orange'"
@click="toggleNotification(notification)"
/>
</QItemSection>
<QItemSection>
<QItemLabel>{{ notification.name }}</QItemLabel>
<QItemLabel caption>
{{ notification.description }}
</QItemLabel>
</QItemSection>
</QItem>
</div>
</div>
</QList>
</QCard>
</QPage> -->
</QCard>
</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>