v4

src/pages/project-page/ProjectPageCompanies.vue

@@ -0,0 +1,199 @@
+<template>
+  <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>  
+
+      <q-list separator>
+        <q-slide-item
+          v-for="item in companies"
+          :key="item.id"
+          @right="handleSlide($event, item.id)"
+          right-color="red"
+          >
+          <template #right>
+            <q-icon size="lg" name="mdi-delete-outline"/>
+          </template>
+          <q-item
+            :key="item.id"
+            clickable
+            v-ripple
+            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-icon name="mdi-account-outline" color="grey" />
+                    <span>{{ item.qtyPersons }}</span>
+                  </div>
+                </q-item-section> -->
+          </q-item>
+        </q-slide-item>
+      </q-list>
+    </pn-scroll-list>
+    <q-page-sticky
+      position="bottom-right"
+      :offset="[18, 18]"
+      >
+      <transition
+        appear
+        enter-active-class="animated slideInUp"
+        >
+        <q-btn
+          v-if="showFab"
+          fab 
+          icon="add"
+          color="brand"
+          @click="createCompany()"
+        />
+      </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>
+</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 { parseIntString } from 'boot/helpers'
+  
+  const router = useRouter()
+  const route = useRoute()
+  const companiesStore = useCompaniesStore()
+  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
+
+  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 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
+    }
+  }
+
+  function onConfirm() {
+    closedByUserAction.value = true
+    if (deleteCompanyId.value) {
+      companiesStore.deleteCompany(deleteCompanyId.value)
+    }
+    currentSlideEvent.value = null
+  }
+
+  // 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>
+