before liquid glass

src/pages/project-page/ProjectPageChats.vue

@@ -8,14 +8,15 @@
           v-model="search"
           placeholder="chats__search"
           :show-calendar-btn="false"
-          :filter-active="showFiltersDialog"
-          :filter-badge="!checkFiltersSelect"
-           @open-filters="showFiltersDialog = true"
+          :show-filter-btn="false"
         />
       </template>
 
       <template #card-body-btn>
-        <div class="w100 flex justify-end q-px-md">
+        <div
+          v-if="chats.length !== 0 || obsoleteChats.length !== 0"
+          class="w100 flex justify-end q-px-md"
+          >
           <q-btn
             @click="showDialogHelp = !showDialogHelp"
             flat dense no-caps
@@ -66,34 +67,106 @@
             <q-item-section side>
               <div class="row no-wrap items-center">
                 <span class="text-caption q-pr-xs">
-                  {{ showDate(item.bot_access_date) }}
+                  {{ getDate(item.bot_access_date) }}
                 </span>
                 <q-icon 
-                  :name="getChatType(item.bot_access).icon"
-                  :color="getChatType(item.bot_access).color"
+                  :name="chatAccess(item.bot_access).icon"
+                  :color="chatAccess(item.bot_access).color"
                   size="xs"
                 />
               </div>
 
               <div class="flex items-center no-wrap text-caption">
+                <!-- if chat reconnect  -->
                 <q-icon
-                  v-if="item.restore_date"
-                  :name="getChatType('reconnect').icon"
-                  :color="getChatType('reconnect').color"
+                  v-if="item.state === 2" 
+                  :name="chatState(2).icon"
+                  :color="chatState(2).color"
                   size="xs"
                   class="q-pr-sm"
                 />
 
-                <q-icon name="mdi-account-outline"/>
-                <span>{{ item.user_count }}</span>
+                <div class="flex no-wrap items-center">
+                  <q-icon name="mdi-account-outline"/>
+                  <span>{{ item.user_count }}</span>
+                </div>
               </div>
             </q-item-section>
           </q-item>
         </q-slide-item>
       </q-list>
 
+      <div
+        v-if="obsoleteChats.length !== 0"
+        class="flex column items-center w100"
+        :class="showObsoleteChats ? 'bg-grey-12' : ''"
+        >
+        <q-btn
+          class="w100 rotate-icon-btn"
+          color="grey"
+          flat
+          no-caps
+          @click="showObsoleteChats=!showObsoleteChats"
+          icon-right="arrow_drop_down"
+          :class="{ 'rotate-icon': showObsoleteChats }"
+          >
+          <span class="text-caption">
+            {{ !showObsoleteChats
+              ? $t('chats__show_obsolete_chats') + ' (' + obsoleteChats.length +')'
+              : $t('chats__hide_obsolete_chats')
+            }}
+          </span>
+        </q-btn>
+
+        <div class="w100" style="overflow: hidden">    
+          <transition
+            appear
+            enter-active-class="animated slideInDown"
+            leave-active-class="animated slideOutUp"
+            >
+            <q-list separator v-if="showObsoleteChats" class="w100">
+              <q-item
+                v-for = "item in obsoleteChats"
+                :key="item.id"
+                class="w100 text-grey"
+                >
+                <q-item-section avatar>
+                  <pn-auto-avatar
+                    :img="item.logo"
+                    :name="item.name"
+                    type="rounded"
+                    size="lg"
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label lines="1" class="text-bold">
+                    {{ item.name }}
+                  </q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <div
+                    class="row no-wrap items-center"
+                    v-if="item.state_date"
+                    >
+                    <span class="text-caption q-pr-xs">
+                      {{ getDate(item.state_date) }}
+                    </span>
+                    <q-icon 
+                      :name="chatState(item.state).icon"
+                      :color="chatState(item.state).color"
+                      size="xs"
+                    />
+                  </div>
+                </q-item-section>
+
+              </q-item>
+            </q-list>
+          </transition>
+        </div>
+      </div>
+
       <pn-onboard-btn
-        v-if="chats.length === 0 && chatsInit"
+        v-if="chats.length === 0 && obsoleteChats.length === 0 && chatsInit"
         icon="mdi-chat-plus-outline"
         :message1="$t('chats__onboard_msg1')"
         :message2="$t('chats__onboard_msg2')"
@@ -123,6 +196,7 @@
           v-if="showFab"
           icon="add"
           color="brand"
+          :class="isEnableChatAdd ? '' : 'fab-disabled'"
           direction="up"
           vertical-actions-align="right"
           @click="showOverlay = !showOverlay"
@@ -138,7 +212,7 @@
             >
             
             <template #icon>
-              <q-list class="q-py-sm">
+              <q-list class="q-py-sm" v-if="isEnableChatAdd">
                 <q-item
                   v-for="item in fabMenu"
                   :key="item.id" 
@@ -176,6 +250,14 @@
                   </template>
                 </q-item>
               </q-list>
+              <div v-else class="w100 bg-white column q-py-md q-px-md rounded-card fab-action-item">
+                <div class="text-negative">
+                  {{ $t('chats__disable_add_chat') }}
+                </div>
+                <span class="text-caption text-grey">
+                  {{ $t('chats__disable_add_chat_description') }}
+                </span>
+              </div>
             </template>
           </q-fab-action>
         </q-fab>
@@ -204,12 +286,11 @@
     >
     <div class="q-py-none q-px-md q-ma-none">
       <q-list class="q-pt-sm">
-        <pn-chat-type-item
-          v-for="item in [0, 1, 2, 9, 10] as const"
-          :key="item"
-          :type="item"
-          class="q-px-none"
-        />
+        <pn-chat-type-item :access="2"/>
+        <pn-chat-type-item :access="1"/>
+        <pn-chat-type-item :state="2"/>
+        <pn-chat-type-item :state="3"/>
+        <pn-chat-type-item :state="4"/>
       </q-list>
       <q-separator class="q-mt-md"/>
       <div class="text-caption q-pt-md">
@@ -226,70 +307,21 @@
     </div>
   </pn-simple-scroll-dialog>
 
-  <!-- filter dialog -->
-   <pn-bottom-sheet-dialog
-    title="chats__filters"
-    v-model="showFiltersDialog"
-    >
-    <template #btnSlot>
-      <div>
-        <q-btn
-          v-if="!checkFiltersSelect"
-          @click="resetFilters"
-          flat
-          no-caps
-          dense
-          color="grey-6"
-          >
-          {{ $t('chats__filters_reset')}}
-        </q-btn>
-      </div>
-    </template>
-
-    <template #footer>
-      <q-btn
-        rounded
-        class="w100"
-        color="primary"
-        @click="showFiltersDialog = false"
-        >
-        {{$t('chats__filters_continue')}}
-      </q-btn>
-    </template>
-
-    <div class="q-pl-sm text-bold text-caption">
-      {{ $t('chats__filters_type') }}
-    </div>
-    <div class="flex column">
-      <div
-        v-for="(item,idx) in chatTypeOptions"
-        :key="idx"
-        >
-        <q-checkbox
-          v-model="filters.chatType"
-          :val="item.value"
-          >
-          {{ $t(item.label) }}
-        </q-checkbox>
-      </div>
-    </div>
-  </pn-bottom-sheet-dialog>
-
 </template>
 
 <script setup lang="ts">
   import { ref, computed, onActivated, onDeactivated, onBeforeUnmount, inject } from 'vue'
+  import { useAuthStore } from 'stores/auth'
   import { useChatsStore } from 'stores/chats'
   import type { WebApp } from '@twa-dev/types'
-  import type { Chat, ChatType } from 'types/Chat'
+  import type { Chat } from 'types/Chat'
   import { useI18n } from "vue-i18n"
   import { date } from 'quasar'
   import { useRouter, useRoute } from 'vue-router'
   import pnChatTypeItem from 'components/pnChatTypeItem.vue'
   import pnSimpleScrollDialog from 'components/pnSimpleScrollDialog.vue'
   import pnActionBar from 'components/pnActionBar.vue'
-  import pnBottomSheetDialog from 'components/pnBottomSheetDialog.vue'
-  import { getChatType } from 'utils/chats'
+  import { chatAccess, chatState } from 'utils/chats'
   
   const router = useRouter()
   const route = useRoute()
@@ -312,6 +344,15 @@
     reset: () => void
   }
 
+  const authStore = useAuthStore()
+  const isEnableChatAdd = computed(() => {
+    if (!authStore.customer?.plan) return false
+    const a = authStore.customer?.plan?.chat_limit
+    if (a === null) return true
+    const b = authStore.customer?.plan?.used_chats
+    return a >= b
+  })
+  
   const chats = computed(() => chatsStore.chats)
   const chatsInit = computed(() => chatsStore.isInit)
 
@@ -327,7 +368,6 @@
   const displayChats = computed(() => {
     return chats.value
       .filter(searchChats)
-      .filter(chatsType)
 
     function searchChats (el: Chat) {
       if (!search.value || !(search.value && search.value.trim())) return true
@@ -335,11 +375,6 @@
       return el.name.toLowerCase().includes(searchValue) ||
         el.description && el.description.toLowerCase().includes(searchValue)
     }
-
-    function chatsType (el: Chat) {
-      if (filters.value.chatType.length === 0) return true
-      return filters.value.chatType.includes(el.bot_access)
-    }
   })
 
   function handleSlide (event: SlideEvent, id: number) {
@@ -431,39 +466,14 @@
     if (timerId.value) clearTimeout(timerId.value)
   })
 
-  // filter chat
-  const showFiltersDialog = ref(false)
-  interface Filters {
-    chatType: number[]
-  }
-  
-  const defaultFilters = {
-    chatType: []
-  }
-  
-  const filters = ref<Filters>({ ...defaultFilters })
-
-  const checkFiltersSelect = computed(() => (
-    Object.values(filters.value).every(el => el.length === 0)
-  ))
-
-  function resetFilters() {
-    (Object.keys(filters.value) as (keyof Filters)[]).forEach(key => filters.value[key] = [])
-  }
-
-  const chatTypeOptions = computed(() => {
-    return [2, 1, 0, 9].map(el => ({
-      id: el,
-      value: el,
-      label: getChatType(el as Partial<ChatType>).label
-    }))
-  })
-
- function showDate (d: number) {
+ function getDate (d: number) {
     return new Date(d * 1000).getFullYear() === new Date(Date.now()).getFullYear()
     ? date.formatDate(d * 1000, 'DD MMM')
     : date.formatDate(d * 1000, 'MMM YY')
   }
+
+  const obsoleteChats = computed(() => chatsStore.obsoleteChats)
+  const showObsoleteChats = ref(false)
    
 </script>
 
@@ -496,4 +506,24 @@
     align-self: center;
     height: 98%;
   }
+
+  /* icon for obsolete btn chats */
+  .rotate-icon-btn {
+    transition: transform 0.3s;
+  }
+
+  .rotate-icon-btn.rotate-icon :deep(.q-icon) {
+    transform: rotate(180deg);
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  }
+
+  .rotate-icon-btn :deep(.q-icon) {
+    transform: rotate(0deg);
+    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+  }
+
+  .fab-disabled :deep(.q-btn--fab) {
+    opacity: 0.65
+  }
+
 </style>

src/pages/project-page/ProjectPageUsers.vue

@@ -4,20 +4,12 @@
       :hideHeader="users.length === 0"
       >
       <template #card-body-header>
-        <div class="flex row q-ma-md justify-between">
-          <q-input
-            v-model="search"
-            clearable
-            clear-icon="close"
-            :placeholder="$t('users__search')"
-            dense filled
-            class="col-grow"
-            >
-            <template #prepend>
-              <q-icon name="mdi-magnify" />
-            </template>
-          </q-input>
-        </div>
+        <pn-action-bar
+          v-model="search"
+          placeholder="users__search"
+          :show-calendar-btn="false"
+          :show-filter-btn="false"
+        />
       </template>
 
       <q-list separator v-if="users.length !== 0">
@@ -37,32 +29,7 @@
             class="w100"
             @click="goUserInfo(item.id)"
             >
-            <q-item-section avatar>
-              <pn-auto-avatar
-                :img="item.photo"
-                :name="item.section1"
-              />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label lines="1" v-if="getUserStatus(item) && getUserStatus(item)?.status">
-                <q-badge  :color="getUserStatus(item)?.color">
-                  {{ $t(getUserStatus(item)?.text ?? '') }}
-                </q-badge>
-              </q-item-label>
-              <q-item-label lines="1" class="text-bold" v-if="item.section1">
-                {{item.section1}}
-              </q-item-label>
-              <q-item-label lines="2" caption v-if="item.section3">
-                {{item.section3}}
-              </q-item-label>
-              <q-item-label caption lines="2">
-                <div class="flex items-center">
-                  <q-icon name="telegram" v-if="item.section2_1 || item.section2_2" class="q-pr-xs" style="color: #27a7e7"/>
-                  <div v-if="item.section2_1" class="q-mr-sm text-bold">{{item.section2_1}}</div>
-                  <div class="text-blue" v-if="item.section2_2">{{'@' + item.section2_2}}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
+            <pn-user-list-item-body :item showStatus/>
           </q-item>
         </q-slide-item>  
       </q-list>
@@ -102,27 +69,7 @@
                 :key="item.id"
                 class="w100 text-grey"
                 >
-                <q-item-section avatar>
-                  <pn-auto-avatar
-                    :img="item.photo"
-                    :name="item.section1"
-                  />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label lines="1" class="text-bold" v-if="item.section1">
-                    {{item.section1}}
-                  </q-item-label>
-                  <q-item-label lines="1" caption v-if="item.section3">
-                    {{item.section3}}
-                  </q-item-label>
-                  <q-item-label caption lines="2">
-                    <div class="flex items-center">
-                      <q-icon name="telegram" v-if="item.section2_1 || item.section2_2" class="q-pr-xs" style="color: #27a7e7"/>
-                      <div v-if="item.section2_1" class="q-mr-sm text-bold">{{item.section2_1}}</div>
-                      <div class="text-blue" v-if="item.section2_2">{{'@' + item.section2_2}}</div>
-                    </div>
-                  </q-item-label>
-                </q-item-section>
+                <pn-user-list-item-body :item/>
               </q-item>
             </q-list>
           </transition>
@@ -130,7 +77,6 @@
       </div>
       <!-- END LEAVE USERS SECTION -->
 
-
       <!-- BLOCKED USERS SECTION -->
       <div
         v-if="blockedUsers.length!==0"
@@ -169,27 +115,7 @@
                 @click="handleUnblockUser(item.id)"
                 class="w100 text-grey"
                 >
-                <q-item-section avatar>
-                  <pn-auto-avatar
-                    :img="item.photo"
-                    :name="item.section1"
-                  />
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label lines="1" class="text-bold" v-if="item.section1">
-                    {{item.section1}}
-                  </q-item-label>
-                  <q-item-label lines="2" caption v-if="item.section3">
-                    {{item.section3}}
-                  </q-item-label>
-                  <q-item-label caption lines="2">
-                    <div class="flex items-center">
-                      <q-icon name="telegram" v-if="item.section2_1 || item.section2_2" class="q-pr-xs" style="color: #27a7e7"/>
-                      <div v-if="item.section2_1" class="q-mr-sm text-bold">{{item.section2_1}}</div>
-                      <div class="text-blue" v-if="item.section2_2">{{'@' + item.section2_2}}</div>
-                    </div>
-                  </q-item-label>
-                </q-item-section>
+                <pn-user-list-item-body :item/>
               </q-item>
             </q-list>
           </transition>
@@ -246,7 +172,8 @@
   import { useUsersStore } from 'stores/users'
   import { useCompaniesStore } from 'stores/companies'
   import { useUserSection } from 'composables/useUserSection'
-  import { getUserStatus } from 'utils/users'
+  import pnUserListItemBody from 'components/pnUserListItemBody.vue'
+  import pnActionBar from 'components/pnActionBar.vue'
   
   defineOptions({ inheritAttrs: false })