verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 64 Releases Wiki Activity

refs #4797 style(workerNotificationManager)
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Alex Moreno 2023-11-06 15:33:18 +01:00
parent 4de39452ca
commit 5350765469
2 changed files with 60 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/CrudModel.vue
View File

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

158
src/pages/Worker/Card/WorkerNotificationsManager.vue
View File

@ -14,35 +14,38 @@ const $props = defineProps({
default: null, default: null,
}, },
}); });
const entityId = computed(() => $props.id || route.params.id);
onUpdated(() => console.log('updated'));
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
const entityId = computed(() => $props.id || route.params.id);
const notifications = ref();
async function toggleNotification(notification) { async function toggleNotification(notification) {
let data = {};
if (notification.active) { if (notification.active) {
await axios.delete(`NotificationSubscriptions/${notification.id}`); await axios.delete(`NotificationSubscriptions/${notification.id}`);
notification.id = null; } else {
notification.active = false; const res = await axios.post(`NotificationSubscriptions`, {
return quasar.notify({ notificationFk: notification.notificationFk,
type: 'positive', userFk: entityId.value,
message: t('worker.notificationsManager.unsubscribed'),
}); });
data = res.data;
} }
const { data } = await axios.post(`NotificationSubscriptions`, {
notificationFk: notification.notificationFk,
userFk: entityId.value,
});
notification.id = data.id; notification.id = data.id;
notification.active = !notification.active;
quasar.notify({ quasar.notify({
type: 'positive', 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> </script>
@ -51,98 +54,55 @@ async function toggleNotification(notification) {
auto-load auto-load
data-key="NotificationSubscriptions" data-key="NotificationSubscriptions"
:url="`NotificationSubscriptions/${entityId}/getList`" :url="`NotificationSubscriptions/${entityId}/getList`"
:default-reset="false"
:default-remove="false" :default-remove="false"
:default-save="false"
@on-fetch="orderNotification"
> >
<template #body="{ rows }"> <template #body>
<QList class="notificationList"> <div>
<QCard v-for="row in rows" :key="row.id" class="q-pa-md"> <QList class="notificationList">
<QItem> <QCard
<QItemSection avatar> v-for="notification in notifications"
<QBtn :key="notification.notificationFk"
round class="q-pa-md"
icon="mail" >
:color="row.active ? 'green' : 'orange'" <QItem>
@click="toggleNotification(row)" <QItemSection avatar>
/> <QBtn
</QItemSection> round
<QItemSection> icon="mail"
<QItemLabel>{{ row.name }}</QItemLabel> :color="notification.active ? 'green' : 'orange'"
<QItemLabel caption> {{ row.description }} </QItemLabel> @click="toggleNotification(notification)"
</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)"
/> />
</QItemSection> </QItemSection>
<QItemSection>
<QItemLabel>{{ notification.name }}</QItemLabel>
<QItemLabel caption>
{{ notification.description }}
</QItemLabel>
</QItemSection>
</QItem> </QItem>
</div> </QCard>
</div> </QList>
</QList> </div>
</QCard> </template>
</QPage> --> </CrudModel>
</template> </template>
<style scoped> <style lang="scss" scoped>
.notificationList { .notificationList {
display: grid; // display: grid;
grid-template-columns: repeat(4, 1fr); // grid-template-columns: repeat(4, 1fr);
grid-gap: 10px; // grid-gap: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 15px;
width: 100%;
> .q-card {
flex: 1;
width: 100%;
}
} }
</style> </style>