before delete 3software

src/pages/project-page/ProjectPageChats.vue

@@ -3,7 +3,7 @@
     <pn-scroll-list>
       <template #card-body-header>
         
-        <div class="flex row q-ma-md justify-between">
+        <div class="flex row q-ma-md justify-between" v-if="chats.length !== 0">
           <q-input
             v-model="search"
             clearable
@@ -11,6 +11,7 @@
             :placeholder="$t('project_chats__search')"
             dense
             class="col-grow"
+            v-if="chats.length !== 0"
             >
             <template #prepend>
               <q-icon name="mdi-magnify" />
@@ -18,26 +19,30 @@
           </q-input>
         </div>
       </template>
-      <q-list bordered separator>
+
+      <q-list separator v-if="chats.length !== 0">
         <q-slide-item
           v-for="item in displayChats"
           :key="item.id"
           @right="handleSlide($event, item.id)"
           right-color="red"
+          @click="goChat(item.invite_link)"
           >
           <template #right>
             <q-icon size="lg" name="mdi-link-off"/>
           </template>
 
           <q-item
-            :key="item.id"
-            :clickable="false"
+            clickable
+            v-ripple
             >
             <q-item-section avatar>
-              <q-avatar rounded>
-                <q-img  v-if="item.logo" :src="item.logo"/>
-                <pn-auto-avatar v-else :name="item.name"/>
-              </q-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">
@@ -47,14 +52,14 @@
                 {{ item.description }}
               </q-item-label>
               <q-item-label caption lines="1">
-                <div class = "flex justify-start items-center">
-                  <div class="q-mr-sm flex items-center">
-                    <q-icon name="mdi-account-outline" class="q-mx-sm"/>
-                    <span>{{ item.persons }}</span>
+                <div class = "flex justify-start items-center no-wrap">
+                  <div class="q-mr-sm flex items-center no-wrap">
+                    <q-icon name="mdi-account-multiple-outline" class="q-mr-xs"/>
+                    <span>{{ item.user_count }}</span>
                   </div>
-                  <div class="q-mx-sm flex items-center">
-                    <q-icon name="mdi-key" class="q-mr-sm"/>
-                    <span>{{ item.owner_id }} </span>
+                  <div class="q-mx-sm flex items-center no-wrap ellipsis" v-if="item.owner_id">
+                    <q-icon name="mdi-key" class="q-mr-xs"/>
+                    <span class="ellipsis">{{ usersStore.userNameById(item.owner_id) }} </span>
                   </div>
                 </div>
               </q-item-label>
@@ -63,111 +68,130 @@
         </q-slide-item>
       </q-list>
 
+      <pn-onboard-btn
+        v-if="chats.length === 0 && chatsInit"
+        icon="mdi-chat-plus-outline"
+        :message1="$t('project_chat__onboard_msg1')"
+        :message2="$t('project_chat__onboard_msg2')"
+        @click="showOverlay=true; fabState=true"
+      />
+      <div
+        class="flex column justify-center items-center w100"
+        style="position: absolute; bottom: 0;"
+        v-if="!chatsInit"
+        >
+        <q-linear-progress indeterminate />
+      </div>
     </pn-scroll-list>
 
-
-  </div>
-
   <q-page-sticky
-      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
-      position="bottom-right"
-      :offset="[18, 18]"
+    :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
+    position="bottom-right"
+    :offset="[0, 18]"
+    class="fix-fab-offset"
+    >
+    <transition
+      appear
+      enter-active-class="animated zoomIn"
       >
-      <transition
-        appear
-        enter-active-class="animated slideInUp"
+      <q-fab
+        v-model="fabState"
+        v-if="showFab"
+        icon="add"
+        color="brand"
+        direction="up"
+        vertical-actions-align="right"
+        @click="showOverlay = !showOverlay"
+        :disable="!tg.initData"
         >
-        <q-fab
-            v-if="showFab"
-            icon="add"
-            color="brand"
-            direction="up"
-            vertical-actions-align="right"
-            @click="showOverlay = !showOverlay"
+        <template #tooltip>
+          <q-tooltip
+            v-if="!tg.initData"
+            anchor="center left" self="center end"
+            style="width: calc(min(100vw, var(--body-width)) - 102px) !important;"
             >
-            <q-fab-action
-              v-for="item in fabMenu"
-              :key="item.id"
-              square
-              clickable
-              v-ripple
-              class="bg-white change-fab-action"
-              >
-              <template #icon>
-                <q-item class="q-pa-xs w100">
-                  <q-item-section avatar class="items-center">
-                    <q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
-                  </q-item-section>
+            {{ $t('project_chats_disabled_FAB')}} 
+          </q-tooltip>
+        </template>
+        <q-fab-action
+          v-for="item in fabMenu"
+          :key="item.id"
+          square
+          clickable
+          v-ripple
+          class="bg-white change-fab-action"
+          @click="item.func()"
+          >
+          
+          <template #icon>
+            <q-item class="q-pa-xs w100">
+              <q-item-section avatar class="items-center">
+                <q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
+              </q-item-section>
 
-                  <q-item-section class="items-start">
-                      <q-item-label class="fab-action-item">
-                        {{ $t(item.name) }}
-                      </q-item-label>
-                      <q-item-label caption class="fab-action-item">
-                        {{ $t(item.description) }}
-                      </q-item-label>
+              <q-item-section class="items-start">
+                  <q-item-label class="fab-action-item">
+                    {{ $t(item.name) }}
+                  </q-item-label>
+                  <q-item-label caption class="fab-action-item">
+                    {{ $t(item.description) }}
+                  </q-item-label>
 
-                  </q-item-section>
-                </q-item>
-              </template>
-            </q-fab-action>
-      
-        </q-fab>
-      </transition>
-    </q-page-sticky>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-fab-action>
+      </q-fab>
+    </transition>
+  </q-page-sticky>
+</div>
 
-    <pn-overlay  v-if="showOverlay"/>
-  <q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
-    <q-card class="q-pa-none q-ma-none">
-      <q-card-section align="center">
-        <div class="text-h6 text-negative ">{{ $t('project_chat__delete_warning') }}</div>
-      </q-card-section>
+<pn-overlay v-if="showOverlay"/>
 
-      <q-card-section class="q-pt-none" align="center">
-        {{ $t('project_chat__delete_warning_message') }}
-      </q-card-section>
+<pn-small-dialog
+  v-model="showDialogDeleteChat"
+  icon="mdi-link-off"
+  color="negative"
+  title="project_chat__delete_warning"
+  message1="project_chat__delete_warning_message"
+  mainBtnLabel="project_chat__dialog_cancel_ok"
+  @clickMainBtn="onConfirm()"
+  @close="onCancel()"
+  @before-hide="onDialogBeforeHide()"
+/>
 
-      <q-card-actions align="center">
-        <q-btn
-          flat
-          :label="$t('back')"
-          color="primary"
-          v-close-popup
-          @click="onCancel()"
-        />
-        <q-btn
-          flat
-          :label="$t('delete')"
-          color="primary"
-          v-close-popup
-          @click="onConfirm()"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
+  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount, inject } from 'vue'
   import { useChatsStore } from 'stores/chats'
+  import { useUsersStore } from 'stores/users'
+  import type { WebApp } from '@twa-dev/types'
+  import { useI18n } from "vue-i18n"
+  const { t } = useI18n()
 
   const search = ref('')
   const showOverlay = ref<boolean>(false)
   const chatsStore = useChatsStore()
+  const usersStore = useUsersStore()
   const showDialogDeleteChat = ref<boolean>(false)
   const deleteChatId = ref<number | undefined>(undefined)
   const currentSlideEvent = ref<SlideEvent | null>(null)
   const closedByUserAction = ref(false)
+  const tg = inject('tg') as WebApp
+
+  const fabState = ref(false)
 
   interface SlideEvent {
     reset: () => void
   }
 
-  const chats = chatsStore.chats
+  const chats = chatsStore.getChats
+  const chatsInit = computed(() => chatsStore.isInit)
 
   const fabMenu = [
-    {id: 1, icon: 'mdi-chat-plus-outline', name: 'project_chats__attach_chat', description: 'project_chats__attach_chat_description', func: 'attachChat'},
-    {id: 2, icon: 'mdi-share-outline', name: 'project_chats__send_chat', description: 'project_chats__send_chat_description', func: 'sendChat'},
+    {id: 1, icon: 'mdi-chat-plus-outline', name: 'project_chats__attach_chat', description: 'project_chats__attach_chat_description', func: attachChat},
+    {id: 2, icon: 'mdi-share-outline', name: 'project_chats__send_chat', description: 'project_chats__send_chat_description', func: sendChat},
   ]
 
   const displayChats = computed(() => {
@@ -181,7 +205,7 @@
     return arrOut
   })
 
-    function handleSlide (event: SlideEvent, id: number) {
+  function handleSlide (event: SlideEvent, id: number) {
     currentSlideEvent.value = event
     showDialogDeleteChat.value = true
     deleteChatId.value = id
@@ -202,14 +226,42 @@
     }
   }
 
-  function onConfirm() {
+  async function onConfirm() {
     closedByUserAction.value = true
     if (deleteChatId.value) {
-      chatsStore.deleteChat(deleteChatId.value)
+      await chatsStore.unlink(deleteChatId.value)
     }
     currentSlideEvent.value = null
   }
 
+  const botName = 'ready_or_not_2025_bot'
+  const urlAdmin = 'https://t.me/' + botName + '?startgroup='
+  const urlAdminPermission='&admin=' +
+  'post_messages+' +
+  'edit_messages+' + 
+  'delete_messages+' +
+  'pin_messages+' +
+  'restrict_members+' +
+  'invite_users'
+  
+  async function attachChat () {
+    const key = await chatsStore.getKey()
+    tg.openTelegramLink(urlAdmin + key + urlAdminPermission)
+  }
+
+  async function sendChat () {
+    const key = await chatsStore.getKey()
+    const message = urlAdmin + key + urlAdminPermission
+    const tgShareUrl = 'https://t.me/share/url?url=' +
+      encodeURIComponent( t('project_chats__send_chat_title')) +
+      '&text=' + `${encodeURIComponent(message)}`
+    tg.openTelegramLink(tgShareUrl)
+  }
+
+  function goChat (invite: string) {
+    tg.openTelegramLink(invite)
+  }
+
   // fix fab jumping
   const showFab = ref(false)
   const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
@@ -236,6 +288,7 @@
 </script>
 
 <style scoped>
+  /* width of choose element */
   .change-fab-action .q-fab__label--internal {
     max-height: none;
   }
@@ -255,10 +308,4 @@
     align-self: center;
     height: 98%;
   }
-
-  .fix-fab {
-    top: calc(100vh - 92px);
-    left: calc(100vw - 92px);
-    padding: 18px;
-  }
 </style>