Notifiche all'Utente

Pannello Utente (backoffice)

src/layouts/toolbar/notifPopover/notifPopover.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
 
 import {
   IChat,
@@ -13,19 +13,37 @@ import MixinUsers from '../../../mixins/mixin-users'
 import { useNotifStore } from '@store/NotifStore'
 import { useUserStore } from '@store/UserStore'
 
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CMyFieldRec } from '@/components/CMyFieldRec'
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { shared_consts } from '@/common/shared_vuejs'
+import { useI18n } from '@/boot/i18n'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+
 const namespace = 'notifModule'
 
 export default defineComponent({
   name: 'notifPopover',
+  components: { CTitleBanner, CMyFieldRec, CMyFieldDb },
 
   setup(props) {
     const $router = useRouter()
     const userStore = useUserStore()
     const notifStore = useNotifStore()
 
+    const { t } = useI18n()
+    const $q = useQuasar()
+
     const loading = ref(false)
 
+    const myuser = ref({})
+
     const lasts_notifs = computed(() => notifStore.getlasts_notifs)
+    const usernotifs = computed(() => userStore.my.profile.notifs)
+
+    const userId = ref('')
+    const open = ref(false)
 
     const notifsel = ref(<INotif>{
       dest: '',
@@ -39,6 +57,19 @@ export default defineComponent({
     // }
 
 
+    watch(() => usernotifs.value, async (to: any, from: any) => {
+
+      if (usernotifs.value) {
+        console.log('usernotifs.value', usernotifs.value, to)
+        const ret = await userStore.setUserNotifs(usernotifs.value)
+        if (ret) {
+          tools.showPositiveNotif($q, t('db.recupdated'))
+        } else {
+          tools.showNegativeNotif($q, t('db.recfailed'))
+        }
+      }
+    })
+
     function clickChat(msg: IMessage) {
       // $router.replace(`/notifs/${ msg.dest.username}`)
     }
@@ -69,6 +100,7 @@ export default defineComponent({
 
     function refreshdata(username: string) {
       loading.value = true
+      userId.value = userStore.my._id
 
       notifsel.value.dest = ''
 
@@ -90,9 +122,12 @@ export default defineComponent({
     }
 
     function mounted() {
+      myuser.value = userStore.my
       refreshdata(userStore.my.username)
     }
 
+    onMounted(mounted)
+
     return {
       lasts_notifs,
       clickChat,
@@ -102,6 +137,12 @@ export default defineComponent({
       getImgByNotif,
       getNotifText,
       tools,
+      usernotifs,
+      shared_consts,
+      userId,
+      myuser,
+      costanti,
+      open,
     }
   },
 })

src/layouts/toolbar/notifPopover/notifPopover.vue

@@ -1,32 +1,57 @@
 <template>
   <div>
-    <q-btn flat round dense icon="fas fa-bell" class="q-mx-xs">
+    <q-btn flat round dense icon="fas fa-bell" class="q-mx-xs" @click="open = !open">
       <q-badge v-if="getNumNotifUnread() > 0" floating color="red">{{ getNumNotifUnread() }}</q-badge>
+    </q-btn>
+    <q-btn v-if="false" flat round dense icon="fas fa-bell">
+      <q-badge v-if="getNumNotifUnread() > 0" floating color="red">{{ getNumNotifUnread() }}</q-badge>
+    </q-btn>
 
-      <q-menu anchor="bottom right" self="top right">
-        <q-bar class="bg-primary text-white">
-          {{ $t('notifs.notifs') }}
-          <q-space/>
-          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
-        </q-bar>
-        <div>
-          Imposta notifiche:<br>
+    <q-drawer v-model="open" side="right" elevated class="text-black">
 
-          <q-toggle dark v-model="notifs[0]" :label="$t('notifs.warn_province')"/>
+      <q-bar class="bg-primary text-white">
+        {{ $t('notifs.notifs') }}
+        <q-space/>
+        <q-btn flat round color="white" icon="close" @click="open = false"></q-btn>
+      </q-bar>
 
+      <div class="">
+        <CTitleBanner
+          class="q-pa-xs"
+          title="Imposta notifiche"
+          bgcolor="bg-green" clcolor="text-white"
+          mystyle="" myclass="myshad" :canopen="true">
 
-        </div>
-        <q-list bordered class="rounded-borders" style="max-width: 350px; min-width: 250px;">
+          <div>
+            <div>Avvisami se nuovo annuncio:</div>
 
-          <q-separator/>
+            <CMyFieldDb
+              title=""
+              table="users"
+              mykey="profile"
+              mysubkey="notifs"
+              jointable="usernotifs"
+              tablesel="usernotifs"
+              :type="costanti.FieldType.binary">
+            </CMyFieldDb>
+
+          </div>
+        </CTitleBanner>
+
+      </div>
+      <div class="clBorderSperator"></div>
+
+      <div class="q-ma-xs">
+        <q-list bordered class="rounded-borders">
 
           <div v-if="getNumNotif() === 0">
             <q-item>
-              {{ $t('notifs.nonotif') }}
+              <q-item-label lines="1">{{ $t('notifs.nonotif') }}</q-item-label>
 
             </q-item>
           </div>
 
+
           <q-item clickable v-ripple v-for="(notif, index) in lasts_notifs()" :key="index" @click="clickChat(notif)">
 
             <q-item-section avatar>
@@ -52,14 +77,10 @@
               {{ tools.getstrDateTimeShort(notif.datenotif) }}
             </q-item-section>
           </q-item>
-
           <q-separator/>
         </q-list>
-      </q-menu>
-    </q-btn>
-    <q-btn v-if="false" flat round dense icon="fas fa-bell">
-      <q-badge v-if="getNumNotifUnread() > 0" floating color="red">{{ getNumNotifUnread() }}</q-badge>
-    </q-btn>
+      </div>
+    </q-drawer>
   </div>
 </template>