tgCrewAdmin/src/pages/project-page/ProjectPageCompanies.vue

<template>
  <div class="q-pa-none flex column col-grow no-scroll">
    <pn-scroll-list>
      <template #card-body-header>
        <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 v-if="companies.length !== 0">
        <q-slide-item
          v-for="item in displayCompanies"
          :key="item.id"
          @right="handleSlide($event, item.id)"
          right-color="red"
          >
          <template #right v-if="item.id !== myCompany?.id">
            <q-icon size="lg" name="mdi-account-multiple-minus-outline"/>
          </template>
          <q-item
            :key="item.id"
            clickable
            v-ripple
            class="w100"
            @click="goCompanyInfo(item.id)"
            >
            <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>{{ 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>
                </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="[0, 18]"
      class="fix-fab-offset"
      >
      <transition
        appear
        enter-active-class="animated zoomIn"
        >
        <q-btn
          v-if="showFab"
          fab 
          icon="add"
          color="brand"
          @click="createCompany()"
        />
      </transition>
    </q-page-sticky>
  </div>

  <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 { useCompaniesStore } from 'stores/companies'
  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)

  interface SlideEvent {
    reset: () => void
  }

  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 (companyId: number) {
    await router.push({ name: 'company_info', params: { id: route.params.id, companyId }})
  }

  async function createCompany () {
    await router.push({ name: 'add_company' })
  }

  function handleSlide (event: SlideEvent, id: number) {
    currentSlideEvent.value = event
    showDialogDeleteCompany.value = true
    deleteCompanyId.value = id
  }

  function onDialogBeforeHide () {
    if (!closedByUserAction.value) {
      onCancel()
    }
    closedByUserAction.value = false
  }

  function onCancel() {
    closedByUserAction.value = true
    if (currentSlideEvent.value) {
      currentSlideEvent.value.reset()
      currentSlideEvent.value = null
    }
  }

  async function onConfirm() {
    closedByUserAction.value = true
    if (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)

  onActivated(() => {
    timerId.value = setTimeout(() => {
      showFab.value = true
    }, 300)
  })


  onDeactivated(() => {
    showFab.value = false
    if (timerId.value) {
      clearTimeout(timerId.value)
      timerId.value = null
    }
  })

  onBeforeUnmount(() => {
    if (timerId.value) clearTimeout(timerId.value)
  })
</script>

<style scoped>

  /* fix mini border after slide */
  :deep(.q-slide-item__right)
  {
    align-self: center;
  }

</style>