admin/tgCrewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4

Browse Source
This commit is contained in:
CCTVcalc
2025-04-30 13:11:35 +03:00
parent c8f3c9801f
commit cda54b1e95
60 changed files with 1054 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/pages/project-page/ProjectPageChats.vue Normal file
View File

@@ -0,0 +1,264 @@
<template>
<div class="q-pa-none flex column col-grow no-scroll">
<pn-scroll-list>
<template #card-body-header>
<div class="flex row q-ma-md justify-between">
<q-input
v-model="search"
clearable
clear-icon="close"
:placeholder="$t('project_chats__search')"
dense
class="col-grow"
>
<template #prepend>
<q-icon name="mdi-magnify" />
</template>
</q-input>
</div>
</template>
<q-list bordered separator>
<q-slide-item
v-for="item in displayChats"
:key="item.id"
@right="handleSlide($event, item.id)"
right-color="red"
>
<template #right>
<q-icon size="lg" name="mdi-link-off"/>
</template>
<q-item
:key="item.id"
:clickable="false"
>
<q-item-section avatar>
<q-avatar rounded>
<q-img v-if="item.logo" :src="item.logo"/>
<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-label caption lines="1">
<div class = "flex justify-start items-center">
<div class="q-mr-sm flex items-center">
<q-icon name="mdi-account-outline" class="q-mx-sm"/>
<span>{{ item.persons }}</span>
</div>
<div class="q-mx-sm flex items-center">
<q-icon name="mdi-key" class="q-mr-sm"/>
<span>{{ item.owner_id }} </span>
</div>
</div>
</q-item-label>
</q-item-section>
</q-item>
</q-slide-item>
</q-list>
</pn-scroll-list>
</div>
<q-page-sticky
:style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
position="bottom-right"
:offset="[18, 18]"
>
<transition
appear
enter-active-class="animated slideInUp"
>
<q-fab
v-if="showFab"
icon="add"
color="brand"
direction="up"
vertical-actions-align="right"
@click="showOverlay = !showOverlay"
>
<q-fab-action
v-for="item in fabMenu"
:key="item.id"
square
clickable
v-ripple
class="bg-white change-fab-action"
>
<template #icon>
<q-item class="q-pa-xs w100">
<q-item-section avatar class="items-center">
<q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
</q-item-section>
<q-item-section class="items-start">
<q-item-label class="fab-action-item">
{{ $t(item.name) }}
</q-item-label>
<q-item-label caption class="fab-action-item">
{{ $t(item.description) }}
</q-item-label>
</q-item-section>
</q-item>
</template>
</q-fab-action>
</q-fab>
</transition>
</q-page-sticky>
<pn-overlay v-if="showOverlay"/>
<q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
<q-card class="q-pa-none q-ma-none">
<q-card-section align="center">
<div class="text-h6 text-negative ">{{ $t('project_chat__delete_warning') }}</div>
</q-card-section>
<q-card-section class="q-pt-none" align="center">
{{ $t('project_chat__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 { useChatsStore } from 'stores/chats'
const search = ref('')
const showOverlay = ref<boolean>(false)
const chatsStore = useChatsStore()
const showDialogDeleteChat = ref<boolean>(false)
const deleteChatId = ref<number | undefined>(undefined)
const currentSlideEvent = ref<SlideEvent | null>(null)
const closedByUserAction = ref(false)
interface SlideEvent {
reset: () => void
}
const chats = chatsStore.chats
const fabMenu = [
{id: 1, icon: 'mdi-chat-plus-outline', name: 'project_chats__attach_chat', description: 'project_chats__attach_chat_description', func: 'attachChat'},
{id: 2, icon: 'mdi-share-outline', name: 'project_chats__send_chat', description: 'project_chats__send_chat_description', func: 'sendChat'},
]
const displayChats = computed(() => {
if (!search.value || !(search.value && search.value.trim())) return chats
const searchValue = search.value.trim().toLowerCase()
const arrOut = chats
.filter(el =>
el.name.toLowerCase().includes(searchValue) ||
el.description && el.description.toLowerCase().includes(searchValue)
)
return arrOut
})
function handleSlide (event: SlideEvent, id: number) {
currentSlideEvent.value = event
showDialogDeleteChat.value = true
deleteChatId.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 (deleteChatId.value) {
chatsStore.deleteChat(deleteChatId.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>
.change-fab-action .q-fab__label--internal {
max-height: none;
}
.change-fab-action {
width: calc(min(100vw, var(--body-width)) - 48px) !important;
}
.fab-action-item {
text-wrap: auto !important;
text-align: left;
}
/* fix mini border after slide */
:deep(.q-slide-item__right)
{
align-self: center;
height: 98%;
}
.fix-fab {
top: calc(100vh - 92px);
left: calc(100vw - 92px);
padding: 18px;
}
</style>

199
src/pages/project-page/ProjectPageCompanies.vue Normal file
View File

@@ -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>

202
src/pages/project-page/ProjectPageHeader.vue Normal file
View File

@@ -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>

90
src/pages/project-page/ProjectPagePersons.vue Normal file
View File

@@ -0,0 +1,90 @@
<template>
<div class="q-pa-none flex column col-grow no-scroll">
<pn-scroll-list>
<template #card-body-header>
<div class="flex row q-ma-md justify-between">
<q-input
v-model="search"
clearable
clear-icon="close"
:placeholder="$t('project_persons__search')"
dense
class="col-grow"
>
<template #prepend>
<q-icon name="mdi-magnify" />
</template>
</q-input>
</div>
</template>
<q-list separator>
<q-item
v-for="item in displayPersons"
:key="item.id"
v-ripple
clickable
@click="goPersonInfo()"
>
<q-item-section avatar>
<q-avatar>
<img v-if="item.logo" :src="item.logo"/>
<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">
<span>{{item.tname}}</span>
<span class="text-blue q-ml-sm">{{item.tusername}}</span>
</q-item-label>
<q-item-label lines="1">
{{ item.company.name +', ' + item.role }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</pn-scroll-list>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
defineOptions({ inheritAttrs: false })
const router = useRouter()
const search = ref('')
const persons = [
{id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: {id: "com11", name: 'Рога и копытца', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false }},
{id: "p2", name: 'Пупкин Василий Александрович', logo: '', tname: 'Pupkin', tusername: '@super_pupkin', role: 'Руководитель проекта', company: {id: "com11", name: 'Рога и копытца', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false }},
{id: "p3", name: 'Макарова Полина', logo: 'https://cdn.quasar.dev/img/avatar6.jpg', tname: 'Unikorn', tusername: '@unicorn_stars', role: 'Администратор', company: {id: "com21", name: 'ООО "Василек"', logo: '', qtyPersons: 2, masked: true }},
{id: "p4", name: 'Жабов Максим', logo: '', tname: 'Zhaba', tusername: '@Zhabchenko', role: 'Аналитик', company: {id: "com21", name: 'ООО "Василек"', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', qtyPersons: 2, masked: true }},
]
const displayPersons = computed(() => {
if (!search.value || !(search.value && search.value.trim())) return persons
const searchValue = search.value.trim().toLowerCase()
const arrOut = persons
.filter(el =>
el.name.toLowerCase().includes(searchValue) ||
el.tname && el.tname.toLowerCase().includes(searchValue) ||
el.tusername && el.tusername.toLowerCase().includes(searchValue) ||
el.role && el.role.toLowerCase().includes(searchValue) ||
el.company.name && el.company.name.toLowerCase().includes(searchValue)
)
return arrOut
})
async function goPersonInfo () {
console.log('update')
await router.push({ name: 'person_info' })
}
</script>
<style>
</style>