v4

src/pages/project-page/ProjectPageHeader.vue

@@ -0,0 +1,202 @@
+<template>
+  <div
+  id="project-info"
+    :style="{ height: headerHeight + 'px' }"
+    class="flex row items-center justify-between no-wrap q-my-sm w100"
+    style="overflow: hidden; transition: height 0.3s ease-in-out;"
+    >
+    <div class="ellipsis overflow-hidden">
+      <q-resize-observer @resize="onResize" />
+      <transition
+        enter-active-class="animated slideInUp"
+        leave-active-class="animated slideOutUp"
+        mode="out-in"
+      >
+        <div
+          v-if="!expandProjectInfo"
+          @click="toggleExpand"
+          class="text-h6 ellipsis no-wrap w100"
+          key="compact"
+        >
+          {{project.name}}
+        </div>
+
+        <div
+          v-else
+          class="flex items-center no-wrap q-hoverable q-animate--slideUp"
+          @click="toggleExpand"
+          key="expanded"
+        >
+          <q-avatar rounded>
+            <q-img v-if="project.logo" :src="project.logo" fit="cover" style="height: 100%;"/>
+            <pn-auto-avatar v-else :name="project.name"/>
+          </q-avatar>
+
+          <div class="q-px-md flex column text-white fit">
+            <div
+              class="text-h6"
+              :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }"
+            >
+              {{project.name}}
+            </div>
+
+            <div class="text-caption" :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }">
+              {{project.description}}
+              
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <q-btn flat round color="white" icon="mdi-pencil" size="sm" class="q-ml-xl q-mr-sm">
+      <q-menu anchor="bottom right" self="top right">
+        <q-list>
+          <q-item
+            v-for="item in menuItems"
+            :key="item.id"
+            @click="item.func"
+            clickable
+            v-close-popup 
+            class="flex items-center"
+            >
+              <q-icon :name="item.icon" size="sm" :color="item.iconColor"/>
+              <span class="q-ml-xs">{{ $t(item.title) }}</span>
+            </q-item>
+          </q-list>
+      </q-menu>
+    </q-btn>
+  </div>
+  <q-dialog v-model="showDialog">
+    <q-card class="q-pa-none q-ma-none">
+      <q-card-section align="center">
+        <div class="text-h6 text-negative ">
+          {{ $t( 
+            dialogType === 'archive'
+              ? 'project__archive_warning'
+              : 'project__delete_warning'
+          )}}
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none" align="center">
+        {{ $t( 
+            dialogType === 'archive'
+              ? 'project__archive_warning_message'
+              : 'project__delete_warning_message'
+          )}}
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          flat
+          :label="$t('back')"
+          color="primary"
+          v-close-popup
+        />
+        <q-btn
+          flat
+          :label="$t(
+            dialogType === 'archive'
+              ? 'project__archive'
+              : 'project__delete'
+          )"
+          color="negative"
+          v-close-popup
+          @click="dialogType === 'archive' ? archiveProject() : deleteProject()"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch, onMounted } from 'vue'
+  import { useRouter, useRoute  } from 'vue-router'
+  import { useProjectsStore } from 'stores/projects'
+  import { parseIntString } from 'boot/helpers'
+  
+  const router = useRouter()
+  const route = useRoute()
+  const projectsStore = useProjectsStore()
+
+  const expandProjectInfo = ref<boolean>(false)
+  const showDialog = ref<boolean>(false)
+  const dialogType = ref<null | 'archive' | 'delete'>(null)
+
+  const headerHeight = ref<number>(0)
+
+  const menuItems = [
+    { id: 1, title: 'project__edit', icon:  'mdi-square-edit-outline', iconColor:  '', func: editProject },
+    // { id: 2, title: 'project__backup', icon:  'mdi-content-save-outline', iconColor:  '', func: () => {} },
+    { id: 3, title: 'project__archive', icon:  'mdi-archive-outline', iconColor:  '', func:  () => { showDialog.value = true; dialogType.value = 'archive' }},
+    { id: 4, title: 'project__delete', icon:  'mdi-trash-can-outline', iconColor:  'red', func:  () => { showDialog.value = true; dialogType.value = 'delete' }},
+  ]
+
+  const projectId = computed(() => parseIntString(route.params.id))
+  const project =ref({
+    name: '',
+    description: '',
+    logo: ''
+  })
+
+  const loadProjectData = async () => {
+  if (!projectId.value) {
+    await abort()
+    return
+  } else {
+    const projectFromStore = projectsStore.projectById(projectId.value)
+    if (!projectFromStore) {
+      await abort()
+      return
+    }
+
+    project.value = {
+      name: projectFromStore.name,
+      description: projectFromStore.description || '',
+      logo: projectFromStore.logo || ''
+    }
+  }
+}
+
+async function abort () {
+  await router.replace({ name: 'projects' })
+}
+
+async function editProject () {
+  await router.push({ name: 'project_info' })
+}
+
+function archiveProject () {
+  console.log('archive project')
+}
+
+function deleteProject () {
+  console.log('delete project')
+}
+
+function toggleExpand () {
+  expandProjectInfo.value = !expandProjectInfo.value
+}
+
+interface sizeParams {
+    height: number,
+    width: number
+  }
+
+function onResize (size :sizeParams) {
+  headerHeight.value = size.height
+}
+
+watch(projectId, loadProjectData)
+
+watch(showDialog, () => {
+  if (showDialog.value === false) dialogType.value = null
+})
+
+onMounted(() => loadProjectData())
+
+</script>
+
+<style>
+</style>