before delete 3software
This commit is contained in:
@@ -1,189 +1,119 @@
|
||||
<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;"
|
||||
id="project-info"
|
||||
:style="{ height: headerHeight + 'px', minHeight: '48px' }"
|
||||
class="flex row items-center justify-between no-wrap w100 q-gutter-x-sm"
|
||||
style="overflow: hidden; transition: height 0.3s ease-in-out; margin-left: 0"
|
||||
>
|
||||
<div class="ellipsis overflow-hidden">
|
||||
<div class="ellipsis overflow-hidden q-pa-none q-ma-none">
|
||||
<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"
|
||||
class="text-h6 ellipsis no-wrap w100 q-pa-none q-ma-none"
|
||||
key="compact"
|
||||
>
|
||||
{{project.name}}
|
||||
>
|
||||
{{ project.name }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center no-wrap q-hoverable q-animate--slideUp"
|
||||
class="flex items-center no-wrap q-hoverable q-animate--slideUp q-py-sm"
|
||||
@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>
|
||||
>
|
||||
<pn-auto-avatar
|
||||
:img="project.logo"
|
||||
:name="project.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
|
||||
<div class="q-px-md flex column text-white fit">
|
||||
<div class="flex column text-white fit">
|
||||
<div
|
||||
class="text-h6"
|
||||
:style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }"
|
||||
>
|
||||
{{project.name}}
|
||||
class="text-h6 q-pl-sm text-field"
|
||||
>
|
||||
{{ project.name }}
|
||||
</div>
|
||||
|
||||
<div class="text-caption" :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }">
|
||||
{{project.description}}
|
||||
|
||||
<div
|
||||
class="text-caption q-pl-sm text-field"
|
||||
>
|
||||
{{ 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>
|
||||
<q-btn
|
||||
@click="editProject"
|
||||
flat round
|
||||
color="white"
|
||||
icon="edit"
|
||||
size="md"
|
||||
/>
|
||||
</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('project__archive_warning')}}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none" align="center">
|
||||
{{ $t('project__archive_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('project__archive')"
|
||||
color="negative"
|
||||
v-close-popup
|
||||
@click="archiveProject"
|
||||
/>
|
||||
</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 { ref, computed } from 'vue'
|
||||
import { useRouter } 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'>(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: 'red', func: () => { showDialog.value = true; dialogType.value = 'archive' }}
|
||||
]
|
||||
|
||||
const projectId = computed(() => parseIntString(route.params.id))
|
||||
const project =ref({
|
||||
name: '',
|
||||
description: '',
|
||||
logo: '',
|
||||
is_logo_bg: false
|
||||
const currentProjectId = computed(() => projectsStore.currentProjectId)
|
||||
|
||||
const project = computed(() => {
|
||||
const currentProject =
|
||||
currentProjectId.value && projectsStore.projectById(currentProjectId.value)
|
||||
|
||||
return currentProject
|
||||
? {
|
||||
name: currentProject.name,
|
||||
description: currentProject.description ?? '',
|
||||
logo: currentProject.logo ?? ''
|
||||
}
|
||||
: {
|
||||
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 || '',
|
||||
is_logo_bg: projectFromStore.is_logo_bg || false
|
||||
}
|
||||
|
||||
function toggleExpand () {
|
||||
expandProjectInfo.value = !expandProjectInfo.value
|
||||
}
|
||||
}
|
||||
|
||||
async function abort () {
|
||||
await router.replace({ name: 'projects' })
|
||||
}
|
||||
async function editProject () {
|
||||
if (currentProjectId.value)
|
||||
await router.push({ name: 'project_info', params: { id: currentProjectId.value } })
|
||||
}
|
||||
|
||||
async function editProject () {
|
||||
if (projectId.value) void projectsStore.update(projectId.value, project.value)
|
||||
await router.push({ name: 'project_info' })
|
||||
}
|
||||
|
||||
async function archiveProject () {
|
||||
if (projectId.value) void projectsStore.archive(projectId.value)
|
||||
await router.replace({ name: 'projects' })
|
||||
}
|
||||
|
||||
function toggleExpand () {
|
||||
expandProjectInfo.value = !expandProjectInfo.value
|
||||
}
|
||||
|
||||
interface sizeParams {
|
||||
interface sizeParams {
|
||||
height: number,
|
||||
width: number
|
||||
}
|
||||
|
||||
function onResize (size :sizeParams) {
|
||||
headerHeight.value = size.height
|
||||
}
|
||||
const headerHeight = ref<number>(0)
|
||||
|
||||
watch(projectId, loadProjectData)
|
||||
|
||||
watch(showDialog, () => {
|
||||
if (showDialog.value === false) dialogType.value = null
|
||||
})
|
||||
|
||||
onMounted(() => loadProjectData())
|
||||
function onResize (size :sizeParams) {
|
||||
headerHeight.value = size.height
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.text-field {
|
||||
max-width: -webkit-fill-available;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user