before delete 3software

src/pages/project-page/ProjectPageCompanies.vue

@@ -2,29 +2,37 @@
   <div class="q-pa-none flex column col-grow no-scroll">
     <pn-scroll-list>
       <template #card-body-header>
-        <div class="w100 flex items-center justify-end q-pa-sm">
-            <q-btn color="primary" flat no-caps dense @click="maskCompany()">
-              <q-icon
-                left
-                size="sm"
-                name="mdi-drama-masks"
-              />
-              <div>
-                {{ $t('company__mask')}}
-              </div>
-            </q-btn>
-          </div>
-      </template>  
+        <div class="flex items-center justify-end q-pa-sm w100" v-if="companies.length !== 0">
+          <q-btn
+            :color="companies.length <= 2 ? 'grey-6' : 'primary'"
+            flat
+            no-caps
+            @click="maskCompany()"
+            :disable="companies.length <= 2"
+            class="q-pr-md"
+            rounded
+            >
+            <q-icon
+              left
+              size="sm"
+              name="mdi-domino-mask"
+            />
+            <div>
+              {{ $t('company__mask')}}
+            </div>
+          </q-btn>
+        </div>
+      </template>
 
-      <q-list separator>
+      <q-list separator v-if="companies.length !== 0">
         <q-slide-item
-          v-for="item in companies"
+          v-for="item in displayCompanies"
           :key="item.id"
           @right="handleSlide($event, item.id)"
           right-color="red"
           >
-          <template #right>
-            <q-icon size="lg" name="mdi-delete-outline"/>
+          <template #right v-if="item.id !== myCompany?.id">
+            <q-icon size="lg" name="mdi-account-multiple-minus-outline"/>
           </template>
           <q-item
             :key="item.id"
@@ -33,34 +41,79 @@
             class="w100"
             @click="goCompanyInfo(item.id)"
             >
-              <q-item-section avatar>
-                <q-avatar rounded>
-                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="max-width: unset; height:40px;"/>
-                  <pn-auto-avatar v-else :name="item.name"/>
-                </q-avatar>
-              </q-item-section>
-              <q-item-section>
-                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
-                <q-item-label caption lines="2">{{ item.description }}</q-item-label>
-              </q-item-section>
-              <!-- <q-item-section side top>
-                  <div class="flex items-center">
-                    <q-icon v-if="item.masked" name="mdi-drama-masks" color="black" size="sm"/>
+            <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-caption text-amber-10" v-if="item.id === myCompany?.id">
+                <div class="flex items-center">
+                  <q-icon name="star" class="q-pr-xs"/>
+                  {{ $t('company__my_company') }}
+                </div>
+              </q-item-label>
+              <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+              <q-item-label
+                caption lines="2"
+                style="max-width: -webkit-fill-available; white-space: pre-line"
+                >
+                {{ item.description }}
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side top>
+                <div class="flex items-end column">
+                  <span class="text-caption flex items-center">
                     <q-icon name="mdi-account-outline" color="grey" />
-                    <span>{{ item.qtyPersons }}</span>
+                    <span>{{ getQtyUsers(item.id) }}</span>
+                  </span>
+
+                  <q-icon
+                    v-if="companiesStore.checkCompanyMasked(item.id)"
+                    name="mdi-domino-mask"
+                    color="grey"
+                    size="xs"
+                  />
+
+                  <div class="flex items-center row text-caption">
+                    <q-icon v-if="item.site" name="mdi-web"/>
+                    <q-icon v-if="item.address" name="mdi-map-marker-outline"/>
+                    <q-icon v-if="item.phone" name="mdi-phone-outline"/>
+                    <q-icon v-if="item.email" name="mdi-email-outline"/>
                   </div>
-                </q-item-section> -->
+                </div>
+              </q-item-section>
           </q-item>
         </q-slide-item>
       </q-list>
+
+      <pn-onboard-btn
+        v-if="companies.length <= 1 && companiesInit"
+        icon="mdi-account-multiple-plus-outline"
+        :message1="$t('company__onboard_msg1')"
+        :message2="$t('company__onboard_msg2')"
+        @btn-click="createCompany()"
+      />
+      <div
+        class="flex column justify-center items-center w100"
+        style="position: absolute; bottom: 0;"
+        v-if="!companiesInit"
+        >
+        <q-linear-progress indeterminate />
+      </div>
     </pn-scroll-list>
+
     <q-page-sticky
       position="bottom-right"
-      :offset="[18, 18]"
+      :offset="[0, 18]"
+      class="fix-fab-offset"
       >
       <transition
         appear
-        enter-active-class="animated slideInUp"
+        enter-active-class="animated zoomIn"
         >
         <q-btn
           v-if="showFab"
@@ -72,63 +125,58 @@
       </transition>
     </q-page-sticky>
   </div>
-  <q-dialog v-model="showDialogDeleteCompany" @before-hide="onDialogBeforeHide()">
-    <q-card class="q-pa-none q-ma-none">
-      <q-card-section align="center">
-        <div class="text-h6 text-negative ">{{ $t('company__delete_warning') }}</div>
-      </q-card-section>
 
-      <q-card-section class="q-pt-none" align="center">
-        {{ $t('company__delete_warning_message') }}
-      </q-card-section>
-
-      <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>
+  <pn-small-dialog
+    v-model="showDialogDeleteCompany"
+    icon="mdi-account-multiple-minus-outline"
+    color="negative"
+    title="company__dialog_delete_title"
+    message1="company__dialog_delete_message"
+    mainBtnLabel="company__dialog_delete_ok"
+    @clickMainBtn="onConfirm()"
+    @close="onCancel()"
+    @before-hide="onDialogBeforeHide()"
+  />
 </template>
     
 <script setup lang="ts">
   import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
-  import { useRouter, useRoute  } from 'vue-router'
+  import { useRouter, useRoute } from 'vue-router'
   import { useCompaniesStore } from 'stores/companies'
-  import { parseIntString } from 'boot/helpers'
+  import { useUsersStore } from 'stores/users'
   
   const router = useRouter()
   const route = useRoute()
   const companiesStore = useCompaniesStore()
+  const usersStore = useUsersStore()
   const showDialogDeleteCompany = ref<boolean>(false)
   const deleteCompanyId = ref<number | undefined>(undefined)
   const currentSlideEvent = ref<SlideEvent | null>(null)
   const closedByUserAction = ref(false)
-  const projectId = computed(() => parseIntString(route.params.id))
 
   interface SlideEvent {
     reset: () => void
   }
 
-  const companies = companiesStore.companies
+  const users = computed(() => usersStore.users)
+  const companies = companiesStore.getCompanies
+  const companiesInit = computed(() => companiesStore.isInit)
+
+  const myCompany = computed(() => companies.find(el => el.is_own))
+
+  const displayCompanies = computed(() => {
+    const otherComp = companies.filter(el => !el.is_own)
+    return myCompany.value
+      ? [myCompany.value, ...otherComp]
+      : otherComp
+  })
 
   async function maskCompany () {
     await router.push({ name: 'company_mask' })
   }
 
-  async function goCompanyInfo (id :number) {
-    await router.push({ name: 'company_info', params: { id: projectId.value, companyId: id }})
+  async function goCompanyInfo (companyId: number) {
+    await router.push({ name: 'company_info', params: { id: route.params.id, companyId }})
   }
 
   async function createCompany () {
@@ -156,14 +204,19 @@
     }
   }
 
-  function onConfirm() {
+  async function onConfirm() {
     closedByUserAction.value = true
     if (deleteCompanyId.value) {
-      companiesStore.deleteCompany(deleteCompanyId.value)
+      await companiesStore.remove(deleteCompanyId.value)
     }
     currentSlideEvent.value = null
   }
 
+  function getQtyUsers (companyId: number) {
+    const arr = users.value.filter(el => el.company_id === companyId)
+    return arr.length
+  }
+
   // fix fab jumping
   const showFab = ref(false)
   const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
@@ -195,5 +248,5 @@
   {
     align-self: center;
   }
-</style>
 
+</style>