Notifiche - Tutti - non letti

src/layouts/toolbar/messagePopover/messagePopover.ts

@@ -18,7 +18,7 @@ export default defineComponent({
   setup(props) {
     const $router = useRouter()
 
-    const { getNumMsgUnread, getNumMsg, getUsernameChatByMsg, getImgByMsg, getNumNotifUnread } = MixinUsers()
+    const { getNumMsgUnread, getNumMsg, getUsernameChatByMsg, getImgByMsg } = MixinUsers()
 
     // function lasts_messages (state: IUserState) => IMessage[] {
     //
@@ -73,7 +73,6 @@ export default defineComponent({
       getNumMsg,
       getUsernameChatByMsg,
       getImgByMsg,
-      getNumNotifUnread,
       tools,
     }
   },

src/layouts/toolbar/messagePopover/messagePopover.vue

@@ -40,7 +40,7 @@
             </q-menu>
         </q-btn>
         <q-btn v-if="false" flat round dense icon="fas fa-comment">
-            <q-badge v-if="getNumNotifUnread() > 0" floating color="red">{{getNumNotifUnread()}}</q-badge>
+            <q-badge v-if="getNumMsgUnread() > 0" floating color="red">{{getNumMsgUnread()}}</q-badge>
         </q-btn>
     </div>
 </template>

src/layouts/toolbar/notifPopover/notifPopover.scss

@@ -15,3 +15,17 @@
   width: 57px;
   font-size: 13px;
 }
+
+.unread {
+  font-weight: bold;
+}
+
+.read {
+  color: grey;
+}
+
+
+.my-custom-toggle {
+  border: 1px solid #027be3;
+}
+

src/layouts/toolbar/notifPopover/notifPopover.ts

@@ -5,7 +5,6 @@ import {
   IMessage, IMsgUsers, INotif,
 } from '@model'
 
-import './notifPopover.scss'
 import { tools } from '@src/store/Modules/tools'
 
 import { useRouter } from 'vue-router'
@@ -39,7 +38,11 @@ export default defineComponent({
 
     const myuser = ref({})
 
-    const lasts_notifs = computed(() => notifStore.getlasts_notifs)
+    const show_all = ref(true)
+    const username = computed(() => userStore.my.username)
+
+    const lasts_notifs = computed(() => notifStore.getlasts_notifs().filter((rec) => show_all.value ? true : !rec.read))
+    const num_notifs_unread = computed(() => notifStore.getnumNotifUnread())
     const usernotifs = computed(() => userStore.my.profile.notifs)
 
     const userId = ref('')
@@ -50,13 +53,12 @@ export default defineComponent({
       datenotif: new Date()
     })
 
-    const { getNumNotifUnread, getNumNotif, getUsernameChatByNotif, getImgByNotif, getNotifText } = MixinUsers()
+    const { getNumNotifUnread, getNumNotif, getUsernameChatByNotif, getImgByNotif, getNotifText, getTypeNotif } = MixinUsers()
 
     // function lasts_notifs (state: IUserState) => IMessage[] {
     //
     // }
 
-
     watch(() => usernotifs.value, async (to: any, from: any) => {
 
       if (usernotifs.value) {
@@ -70,8 +72,20 @@ export default defineComponent({
       }
     })
 
-    function clickChat(msg: IMessage) {
-      // $router.replace(`/notifs/${ msg.dest.username}`)
+    watch(() => userStore.my.username, async (to: any, from: any) => {
+      if (userStore.my.username) {
+        await refreshdata(userStore.my.username)
+      }
+    })
+
+    function clickNotif(notif: INotif) {
+      if (notif.link) {
+        let mylink = tools.updateQueryStringParameter(notif.link, 'idnotif', notif._id)
+        console.log('mylink', mylink, notif._id)
+        if (mylink) {
+          $router.replace(mylink)
+        }
+      }
     }
 
     function getlastnotif(username: string): any {
@@ -98,44 +112,50 @@ export default defineComponent({
     }
 
 
-    function refreshdata(username: string) {
+    async function refreshdata(username: string) {
       loading.value = true
       userId.value = userStore.my._id
 
       notifsel.value.dest = ''
 
-      return notifStore.updateNotifDataFromServer({
-        username,
-        lastdataread: getlastdataread(username)
-      }).then((ris) => {
-        notifsel.value.dest = username
-        loading.value = false
+      if (!!username) {
 
-        const element = document.getElementById('last')
-        tools.scrollToElement(element)
+        return notifStore.updateNotifDataFromServer({
+          username,
+          lastdataread: getlastdataread(username)
+        }).then((ris) => {
 
-        // changemsgs('', '')
+          notifsel.value.dest = username
+          loading.value = false
 
-      }).catch((err) => {
-        loading.value = false
-      })
+          const element = document.getElementById('last')
+          tools.scrollToElement(element)
+
+          // changemsgs('', '')
+
+        }).catch((err) => {
+          loading.value = false
+        })
+      }
     }
 
-    function mounted() {
+    async function mounted() {
       myuser.value = userStore.my
-      refreshdata(userStore.my.username)
+      await refreshdata(userStore.my.username)
     }
 
     onMounted(mounted)
 
     return {
       lasts_notifs,
-      clickChat,
+      num_notifs_unread,
+      clickNotif,
       getNumNotifUnread,
       getNumNotif,
       getUsernameChatByNotif,
       getImgByNotif,
       getNotifText,
+      getTypeNotif,
       tools,
       usernotifs,
       shared_consts,
@@ -143,6 +163,10 @@ export default defineComponent({
       myuser,
       costanti,
       open,
+      notifStore,
+      show_all,
+      t,
+      username,
     }
   },
 })

src/layouts/toolbar/notifPopover/notifPopover.vue

@@ -1,50 +1,63 @@
 <template>
   <div>
     <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-badge v-if="num_notifs_unread > 0" floating color="red">{{ num_notifs_unread }}</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-badge v-if="num_notifs_unread > 0" floating color="red">{{ num_notifs_unread }}</q-badge>
     </q-btn>
 
+
     <q-drawer v-model="open" side="right" elevated class="text-black">
 
       <q-bar class="bg-primary text-white">
         {{ $t('notifs.notifs') }}
         <q-space/>
+        <q-btn round dense icon="fas fa-pencil-alt" class="q-mx-xs">
+          <q-menu style="min-width: 200px">
+            <q-list style="">
+              <q-item clickable v-close-popup to="/notifs">
+                <q-item-section side>
+                  <q-icon name="fas fa-cog"/>
+                </q-item-section>
+                <q-item-section>{{ $t('notifs.settings') }}</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="notifStore.setAllRead(username)">
+                <q-item-section side>
+                  <q-icon name="fas fa-check"/>
+                </q-item-section>
+                <q-item-section>{{ $t('notifs.setallread') }}</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
         <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>
-            <div>Avvisami se nuovo annuncio:</div>
-
-            <CMyFieldDb
-              title=""
-              table="users"
-              mykey="profile"
-              mysubkey="notifs"
-              jointable="usernotifs"
-              tablesel="usernotifs"
-              :type="costanti.FieldType.binary">
-            </CMyFieldDb>
-
-          </div>
-        </CTitleBanner>
-
+      <div class="row justify-center margin_buttons q-gutter-lg">
+        <q-btn-toggle
+          v-model="show_all"
+          class="my-custom-toggle"
+          no-caps
+          rounded
+          dense
+          unelevated
+          toggle-color="primary"
+          color="white"
+          text-color="primary"
+          :options="[
+          {label: t('notifs.all'), value: true},
+          {label: t('notifs.notread'), value: false}
+        ]"
+        />
       </div>
+
       <div class="clBorderSperator"></div>
 
       <div class="q-ma-xs">
         <q-list bordered class="rounded-borders">
 
-          <div v-if="getNumNotif() === 0">
+          <div v-if="num_notifs_unread === 0">
             <q-item>
               <q-item-label lines="1">{{ $t('notifs.nonotif') }}</q-item-label>
 
@@ -52,30 +65,50 @@
           </div>
 
 
-          <q-item clickable v-ripple v-for="(notif, index) in lasts_notifs()" :key="index" @click="clickChat(notif)">
+          <q-item clickable v-for="(notif, index) in lasts_notifs" :key="index" @click="clickNotif(notif)">
 
-            <q-item-section avatar>
+            <!--<q-item-section avatar>
               <q-avatar>
                 <q-item-label lines="1">{{ getTypeNotif(notif) }}</q-item-label>
               </q-avatar>
-            </q-item-section>
-
-            <!--<q-item-section avatar>
-                <q-avatar>
-                    <img :src="getImgByNotif(notif)" :alt="getUsernameChatByNotif(notif)">
-                </q-avatar>
             </q-item-section>-->
 
-            <q-item-section>
-              <q-item-label lines="1">{{ getUsernameChatByNotif(notif) }}</q-item-label>
+            <q-item-section avatar>
+              <q-avatar>
+                <img :src="getImgByNotif(notif)" :alt="getUsernameChatByNotif(notif)">
+              </q-avatar>
+            </q-item-section>
+
+            <q-item-section v-ripple >
+              <q-item-label lines="1" :class="(!notif.read) ? 'unread' : 'read'">{{ getNotifText(notif, false) }}</q-item-label>
               <q-item-label caption lines="2">
-                {{ getNotifText(notif, false) }}
+                {{ tools.getstrDateTimeShort(notif.datenotif) }}
+                <!--{{ // getUsernameChatByNotif(notif) }}-->
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-item-label>
+                <q-btn rounded icon="fas fa-pencil-alt">
+                  <q-menu>
+                    <q-list style="min-width: 150px">
+                      <q-item clickable v-close-popup @click="notifStore.deleteRec(notif._id)">
+                        <q-item-section side>
+                          <q-icon name="fas fa-trash-alt"/>
+                        </q-item-section>
+                        <q-item-section>{{ $t('notifs.delete_notif') }}</q-item-section>
+                      </q-item>
+                      <q-item clickable v-close-popup @click="notifStore.deactivateRec(notif._id)">
+                        <q-item-section side>
+                          <q-icon name="fas fa-trash-alt"/>
+                        </q-item-section>
+                        <q-item-section>{{ $t('notifs.deactivate_notif') }}</q-item-section>
+                      </q-item>
+                    </q-list>
+                  </q-menu>
+                </q-btn>
               </q-item-label>
             </q-item-section>
 
-            <q-item-section side top>
-              {{ tools.getstrDateTimeShort(notif.datenotif) }}
-            </q-item-section>
           </q-item>
           <q-separator/>
         </q-list>
@@ -86,3 +119,6 @@
 
 <script lang="ts" src="./notifPopover.ts">
 </script>
+<style lang="scss" scoped>
+@import './notifPopover.scss';
+</style>