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

first commit

Browse Source
This commit is contained in:
CCTVcalc
2025-04-06 20:33:29 +03:00
commit f977d6b3d4
76 changed files with 16809 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/admin/account-page/optionPayment.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="flex row items-center q-pa-none q-ma-none">
<div class="q-ma-xs text-bold">{{ qty }}</div>
<div>
<q-icon name = "mdi-message-outline"/>
<q-icon name = "mdi-close"/>
<span>{{ $t('month') }}</span>
</div>
<div class="q-pa-xs">/</div>
<q-icon name = "mdi-star" class="text-orange" size="sm"/>
<div>{{ stars }}</div>
<q-badge
v-if="discount !== 0"
color="red"
class="q-ml-sm"
>
<span>
{{ '-' + String(discount) + '%' }}
</span>
</q-badge>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
qty: number
stars: number
discount: number
}>()
const qty= ref(props.qty)
const stars = ref(props.stars)
const discount = ref(props.discount)
</script>
<style scoped>
</style>

47
src/components/admin/account-page/qtyChatCard.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div
class="qty-card glossy text-white flex column items-center q-ma-xs"
:style="{ backgroundColor: bgColor }"
>
<div class="qty-card-title q-pa-none text-caption col-grow">
{{$t(title)}}
</div>
<div class="qty-card-text text-bold q-pa-none">
{{ qty }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
qty: number
title?: string
bgColor?: string
}>()
const qty= ref(props.qty)
const title = ref(props.title ? props.title : '')
const bgColor = ref(props.bgColor ? props.bgColor : 'primary')
</script>
<style scoped>
.qty-card {
min-width: 75px;
max-width: 20%;
min-height: 40px;
border-radius: 16%;
font-size: 40px;
opacity: 0.8
}
.qty-card-text {
font-size: 40px;
display: grid;
align-items: end;
margin-bottom: -17px;
margin-top: -17px;
}
</style>

87
src/components/admin/accountHelper.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<q-stepper
v-model="step"
vertical
color="primary"
animated
flat
class="bg-transparent"
>
<q-step
:name="1"
:title="$t('account_helper__enter_email')"
:done="step > 1"
>
<q-input
v-model="login"
dense
:label = "$t('account_helper__email')"
/>
<q-stepper-navigation>
<q-btn @click="step = 2" color="primary" :label="$t('continue')" />
</q-stepper-navigation>
</q-step>
<q-step
:name="2"
:title="$t('account_helper__confirm_email')"
:done="step > 2"
>
{{$t('account_helper__confirm_email_messege')}}
<q-input
v-model="code"
dense
:label = "$t('account_helper__code')"
/>
<q-stepper-navigation>
<q-btn @click="step = 3" color="primary" :label="$t('continue')" />
<q-btn flat @click="step = 1" color="primary" :label="$t('back')" class="q-ml-sm" />
</q-stepper-navigation>
</q-step>
<q-step
:name="3"
:title="$t('account_helper__set_password')"
>
<q-input
v-model="password"
dense
:label = "$t('account_helper_password')"
/>
<q-stepper-navigation>
<q-btn
@click="goProjects"
color="primary"
:label="$t('account_helper__finish')"
/>
<q-btn flat @click="step = 2" color="primary" :label="$t('back')" class="q-ml-sm" />
</q-stepper-navigation>
</q-step>
</q-stepper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps<{
type: string
email?: string
}>()
const step = ref<number>(1)
const login = ref<string>(props.email ? props.email : '')
const code = ref<string>('')
const password = ref<string>('')
async function goProjects() {
console.log('go to projects')
await router.push({ name: 'projects' })
}
</script>
<style>
</style>

57
src/components/admin/companyInfoBlock.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="flex column items-center col-grow q-px-lg q-pt-sm">
<pn-image-selector :size="100" :iconsize="80" class="q-pb-xs" v-model="modelValue.logo"/>
<q-input
v-for="input in textInputs"
:key="input.id"
v-model="modelValue[input.val]"
dense
filled
class = "q-mt-md w100"
:label = "input.label ? $t(input.label) : void 0"
>
<template #prepend>
<q-icon v-if="input.icon" :name="input.icon"/>
</template>
</q-input>
</div>
</template>
<script setup lang="ts">
import type { CompanyParams } from 'src/types'
const modelValue = defineModel<CompanyParams>({
required: false,
default: () => ({
name: '',
logo: '',
description: '',
site: '',
address: '',
phone: '',
email: ''
})
})
interface TextInput {
id: number
label?: string
icon?: string
val: keyof CompanyParams
rules: ((value: string) => boolean | string)[]
}
const textInputs: TextInput[] = [
{ id: 1, val: 'name', label: 'company_info__name', rules: [] },
{ id: 2, val: 'description', label: 'company_info__description', rules: [] },
{ id: 3, val: 'site', icon: 'mdi-web', rules: [] },
{ id: 4, val: 'address', icon: 'mdi-map-marker-outline', rules: [] },
{ id: 5, val: 'phone', icon: 'mdi-phone-outline', rules: [] },
{ id: 6, val: 'email', icon: 'mdi-email-outline', rules: [] },
]
</script>
<style>
</style>

57
src/components/admin/companyInfoPersons.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="q-pt-md">
<span class="q-pl-md text-h6">
{{ $t('company_info__persons') }}
</span>
<q-list separator>
<q-item
v-for="item in persons"
: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.role}}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const persons = [
{id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps' },
{id: "p2", name: 'Пупкин Василий Александрович', logo: '', tname: 'Pupkin', tusername: '@super_pupkin', role: 'Руководитель проекта' },
{id: "p3", name: 'Макарова Полина', logo: 'https://cdn.quasar.dev/img/avatar6.jpg', tname: 'Unikorn', tusername: '@unicorn_stars', role: 'Администратор' },
{id: "p4", name: 'Жабов Максим', logo: '', tname: 'Zhaba', tusername: '@Zhabchenko', role: 'Аналитик' },
]
async function goPersonInfo () {
console.log('update')
await router.push({ name: 'person_info' })
}
</script>
<style scoped>
</style>

118
src/components/admin/login-page/loginLogo.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div class="flex row items-center">
<svg
class="iconcolor q-mr-sm"
viewBox="0 0 8.4666662 8.4666662"
width="32"
height="32"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<defs id="defs1" />
<g id="layer1">
<rect
style="fill:var(--icon-color);stroke-width:0.233149"
id="rect5"
width="6.9885192"
height="0.35581663"
x="3.114475"
y="0.86827624"
transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
/>
<rect
style="fill:var(--icon-color);stroke-width:0.24961"
id="rect5-7"
width="7.4819207"
height="0.3809379"
x="-3.9267058"
y="5.7988153"
transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
/>
<circle
style="fill:var(--icon-color);stroke-width:0.134869"
id="path5-8"
cx="1.5875"
cy="6.8791666"
r="1.0583333"
/>
<circle
style="fill:var(--icon-color);stroke-width:0.168586"
id="path5-8-5"
cx="7.1437502"
cy="7.1437502"
r="1.3229166"
/>
<circle
style="fill:var(--icon-color);stroke-width:0.118011"
id="path5-8-5-1"
cx="1.4552083"
cy="2.5135417"
r="0.92604166"
/>
<circle
style="fill:var(--icon-color);stroke-width:0.101152"
id="path5-8-5-1-7"
cx="7.1437502"
cy="1.3229166"
r="0.79374999"
/>
<circle
style="stroke-width:0.23602"
id="path5"
cx="3.96875"
cy="4.4979167"
r="1.8520833"
/>
</g>
</svg>
<span class="text-h4 text-white q-pa-0">
projects
</span>
<span class="text-h4 text-brand text-bold q-pa-0">
Node
</span>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss">
body {
background: white;
margin: 0rem;
min-height: 100vh;
font-family: Futura, sans-serif;
}
#canvas {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: -1;
}
.iconcolor {
--icon-color: white;
}
@keyframes blink {
100%,
0% {
fill: $light-green-14;
}
60% {
fill: $green-14;
}
}
#path5 {
animation: blink 3s infinite;
}
</style>

145
src/components/admin/meshBackground.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<div id="background-canvas-wrapper" class="flex fit column">
<canvas id="canvas"/>
</div>
</template>
<script setup> // eslint-disable-line
import { onMounted } from 'vue'
onMounted(() => {
const canvasBody = document.getElementById("canvas")
const drawArea = canvasBody.getContext("2d")
const opts = {
particleColor: "rgb(200,200,200)",
lineColor: "rgb(200,200,200)",
particleAmount: 30,
defaultSpeed: 0.1,
variantSpeed: 1,
defaultRadius: 2,
variantRadius: 2,
linkRadius: 200
}
const delay = 200
let tid
const rgb = opts.lineColor.match(/\d+/g)
let w
let h
const particles = []
function resizeReset () {
w = canvasBody.width = window.innerWidth
h = canvasBody.height = window.innerHeight
}
function deBouncer () {
clearTimeout(tid)
tid = setTimeout(function() {
resizeReset()
}, delay)
}
function checkDistance (x1, y1, x2, y2) {
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
}
function setup () {
resizeReset()
for (let i = 0; i < opts.particleAmount; i++){
particles.push(new Particle())
}
window.requestAnimationFrame(loop)
}
function loop() {
window.requestAnimationFrame(loop)
drawArea.clearRect(0, 0, w, h)
for (let i = 0; i < particles.length; i++){
particles[i].update()
particles[i].draw()
}
for (let i = 0; i < particles.length; i++){
linkPoints(particles[i], particles)
}
}
function linkPoints (point1, hubs){
for (let i = 0; i < hubs.length; i++) {
const distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y)
const opacity = 1 - distance / opts.linkRadius
if (opacity > 0) {
drawArea.lineWidth = 0.5
drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
drawArea.beginPath()
drawArea.moveTo(point1.x, point1.y)
drawArea.lineTo(hubs[i].x, hubs[i].y)
drawArea.closePath()
drawArea.stroke()
}
}
}
function Particle () {
this.x = Math.random() * w
this.y = Math.random() * h
this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed
this.directionAngle = Math.floor(Math.random() * 360)
this.color = opts.particleColor
this.radius = opts.defaultRadius + Math.random() * opts. variantRadius
this.vector = {
x: Math.cos(this.directionAngle) * this.speed,
y: Math.sin(this.directionAngle) * this.speed
};
this.update = function(){
this.border();
this.x += this.vector.x
this.y += this.vector.y
};
this.border = function(){
if (this.x >= w || this.x <= 0) {
this.vector.x *= -1;
}
if (this.y >= h || this.y <= 0) {
this.vector.y *= -1;
}
if (this.x > w) this.x = w
if (this.y > h) this.y = h
if (this.x < 0) this.x = 0
if (this.y < 0) this.y = 0
}
this.draw = function(){
drawArea.beginPath()
drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2)
drawArea.closePath()
drawArea.fillStyle = this.color
drawArea.fill()
}
}
window.addEventListener("resize", function(){ deBouncer() })
resizeReset()
setup()
})
</script>
<style>
#background-canvas-wrapper {
position: absolute !important;
display: block;
top: 0;
left: 0;
z-index: -1;
background: var(--q-primary);
margin: 0;
min-height: 100%;
}
</style>

32
src/components/admin/pnAutoAvatar.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div
:style="{ backgroundColor: stringToColour(props.name) } "
class="fit flex items-center justify-center text-white"
>
{{ props.name.substring(0, 1) }}
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
name: string
}>()
const stringToColour = (str: string) => {
let hash = 0
str.split('').forEach(char => {
hash = char.charCodeAt(0) + ((hash << 5) - hash)
})
let colour = '#'
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff
colour += value.toString(16).padStart(2, '0')
}
return colour
}
</script>
<style>
</style>

127
src/components/admin/pnImageSelector.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<div>
<div
class="relative-position"
:style="{
width: sizePx,
height: sizePx,
display: 'block'
}"
>
<q-file
ref="imgFileSelector"
v-model="imageFile"
:style="{ display: 'none' }"
@update:model-value="handleUpload()"
:filter="checkImgType"
accept="image/*"
/>
<q-icon
v-if="modelValue === '' || modelValue === undefined"
name="mdi-camera-plus-outline"
class="absolute-full fit text-grey-4"
:style="{ fontSize: String(iconsize) + 'px'}"
@click = "imgFileSelectorClick"
/>
<q-img
v-else
fit="cover"
:src="modelValue"
:style="{
height: sizePx,
maxWidth: sizePx,
borderRadius: avatar ? String(size/2) + 'px' : 'var(--top-raduis)',
}"
@click="showDialog = true"
/>
</div>
<q-dialog v-model="showDialog">
<q-card class="w100 relative-position" style="height: auto;">
<q-img :src="modelValue"/>
<div
class="flex row items-center jutsify-center q-pb-sm"
style="bottom: 0; position: absolute; left: 50%; transform: translate(-50%, 0%);">
<q-btn
v-for="btn in menuBtns"
:key="btn.name"
:icon="btn.icon"
@click="btn.f"
class="q-mx-xs bg-white"
round flat
style="opacity: 0.8"
color="primary"
/>
</div>
</q-card>
</q-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, Ref, computed } from 'vue' // eslint-disable-line
import { QFile } from 'quasar'
const modelValue = defineModel<string>()
const props = defineProps<{
size?: number
iconsize?: number
avatar?: boolean
}>()
const imageFile = ref(null) // file-from selector
const imgFileSelector= ref() as Ref<QFile> // input file DOM
const size = ref<number>(props.size ? props.size : 100)
const iconsize = ref<number>(props.iconsize ? props.iconsize : 75)
const showDialog = ref<boolean>(false)
const menuBtns = [
{ name: 'change', icon: 'mdi-swap-horizontal', f: imgFileSelectorClick },
{ name: 'delete', icon: 'mdi-delete-outline', f: deleteImage },
{ name: 'close', icon: 'mdi-close', f: () => showDialog.value = false }
]
const sizePx = computed(() => {
return String(size.value) + 'px'
})
async function handleUpload () {
if (imageFile.value) {
const img = await imgToBase64(imageFile.value)
modelValue.value = typeof img === 'string' ? img : ''
}
}
function imgFileSelectorClick () {
imgFileSelector.value.pickFiles()
}
function deleteImage () {
showDialog.value = false
imageFile.value = null
modelValue.value = ''
}
function imgToBase64(file: File): Promise<string | ArrayBuffer | null> {
const reader: FileReader = new FileReader()
reader.readAsDataURL(file)
return new Promise((resolve, reject) => {
reader.onerror = () => {
reader.abort()
reject(new Error('Something went wrong'))
}
reader.onload = () => {
resolve(reader.result)
}
})
}
function checkImgType(files: File[]): File[] {
return files.filter((file: File) => file.type === 'image/x-png' || file.type === 'image/jpeg' || file.type === 'image/webp' )
}
</script>
<style scope>
</style>

18
src/components/admin/pnOverlay.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div
id="overlay"
class="fixed-full q-dialog__backdrop"
style="z-index: 5000; --q-transition-duration: 300ms;"
@click.prevent.stop
@touchstart.prevent.stop
@touchmove.prevent.stop
@touchend.prevent.stop
/>
</template>
<script setup lang="ts">
</script>
<style>
</style>

23
src/components/admin/pnPageCard.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<q-page class="column items-center no-scroll">
<div
class="text-white flex items-center w100 q-pl-md q-ma-none text-h6 no-scroll"
style="min-height: 48px"
>
<slot name="title"/>
</div>
<slot/>
<slot name="footer"/>
</q-page>
</template>
<script setup lang="ts">
</script>
<style>
.glass-card {
opacity: 1 !important;
background-color: white;
}
</style>

132
src/components/admin/pnScrollList.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<div id="card-body" class="w100 col-grow flex column" style="position: relative">
<div
class="glass-card fit top-rounded-card flex column"
style="position: absolute; top: 0; left: 0"
/>
<div
id="card-body-header"
style="min-height: var(--top-raduis);"
>
<slot name="card-body-header"/>
</div>
<div class="fit flex column col-grow">
<q-resize-observer @resize="onResize" />
<div id="card-scroll-area" class="noscroll">
<q-scroll-area
ref="scrollArea"
:style="{height: heightCard+'px'}"
class="w100 q-pa-none q-ma-none"
id="scroll-area"
@scroll="onScroll"
:class="{
'shadow-top': hasScrolled,
'shadow-bottom': hasScrolledBottom
}"
>
<slot/>
<div class="q-pa-sm"/>
</q-scroll-area>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { QScrollArea } from 'quasar'
const heightCard = ref(100)
const hasScrolled = ref(false)
const hasScrolledBottom = ref(false)
interface sizeParams {
height: number,
width: number
}
interface ScrollInfo {
verticalPosition: number;
verticalPercentage: number;
verticalSize: number;
verticalContainerSize: number;
horizontalPosition: number;
horizontalPercentage: number;
}
const scrollArea = ref<InstanceType<typeof QScrollArea> | null>(null)
function onResize (size :sizeParams) {
heightCard.value = size.height
}
function onScroll (info: ScrollInfo) {
hasScrolled.value = info.verticalPosition > 0
const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
hasScrolledBottom.value = !scrollEnd
}
</script>
<style>
#scroll-area div > .q-scrollarea__content {
width: 100% !important;
}
</style>
<style scoped>
.q-scrollarea {
position: relative;
transform: translateY(0);
}
.q-scrollarea::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(to bottom,
rgba(0,0,0,0.12) 0%,
rgba(0,0,0,0.08) 50%,
transparent 100%
);
pointer-events: none;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(-8px);
will-change: opacity, transform;
z-index: 1;
}
.q-scrollarea::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background: linear-gradient(to top,
rgba(0,0,0,0.12) 0%,
rgba(0,0,0,0.08) 50%,
transparent 100%
);
pointer-events: none;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
transform: translateY(8px);
will-change: opacity, transform;
z-index: 1;
}
.q-scrollarea.shadow-top::before {
opacity: 1;
transform: translateY(0);
}
.q-scrollarea.shadow-bottom::after {
opacity: 1;
transform: translateY(0);
}
</style>

226
src/components/admin/project-page/ProjectPageChats.vue Normal file
View File

@@ -0,0 +1,226 @@
<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">
<q-icon name="mdi-account-outline" class="q-mx-sm"/>
<span>{{ item.persons }}</span>
</div>
<div class="q-mx-sm">
<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>
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
:style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
>
<q-fab
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>
</q-page-sticky>
<pn-overlay v-if="showOverlay"/>
</div>
<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 } 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
}
</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%;
}
</style>

181
src/components/admin/project-page/ProjectPageCompanies.vue Normal file
View File

@@ -0,0 +1,181 @@
<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]"
>
<q-btn
fab
icon="add"
color="brand"
@click="createCompany()"
/>
</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 } from 'vue'
import { useRouter } from 'vue-router'
import { useCompaniesStore } from 'stores/companies'
const router = useRouter()
const companiesStore = useCompaniesStore()
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 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 }})
}
async function createCompany () {
await router.push({ name: 'create_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
}
</script>
<style scoped>
.change-fab-action .q-fab__label--internal {
max-height: none;
}
.change-fab-action {
width: calc(100vw - 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;
}
</style>

183
src/components/admin/project-page/ProjectPageHeader.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<div
id="project-info"
:style="{ height: headerHeight + 'px' }"
class="flex row items-center justify-between no-wrap q-py-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 cursor-pointer"
key="compact"
>
{{project.name}}
</div>
<div
v-else
class="flex items-center no-wrap q-hoverable q-animate--slideUp"
@click="toggleExpand"
key="expanded"
>
<div class="q-focus-helper"></div>
<q-avatar rounded>
<q-img v-if="project.logo" :src="project.logo" fit="cover"/>
<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="showDialogDeleteProject">
<q-card class="q-pa-none q-ma-none">
<q-card-section align="center">
<div class="text-h6 text-negative ">{{ $t('project__delete_warning') }}</div>
</q-card-section>
<q-card-section class="q-pt-none" align="center">
{{ $t('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('continue')"
color="primary"
v-close-popup
@click="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 showDialogDeleteProject = ref<boolean>(false)
const showDialogArchiveProject = ref<boolean>(false)
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: () => { showDialogArchiveProject.value = true }},
{ id: 4, title: 'project__delete', icon: 'mdi-trash-can-outline', iconColor: 'red', func: () => { showDialogDeleteProject.value = true }},
]
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 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)
onMounted(() => loadProjectData())
</script>
<style>
</style>

89
src/components/admin/project-page/ProjectPagePersons.vue Normal file
View File

@@ -0,0 +1,89 @@
<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'
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>

47
src/components/admin/projectInfoBlock.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<div class="flex column">
<div class="flex column items-center col-grow q-pa-lg">
<pn-image-selector
:size="100"
:iconsize="80"
class="q-pb-lg"
v-model="modelValue.logo"
/>
<q-input
v-model="modelValue.name"
dense
filled
class="q-mt-sm w100"
:label="$t('project_card__project_name')"
:rules="[val => !!val || $t('validation.required')]"
/>
<q-input
v-model="modelValue.description"
dense
filled
autogrow
class="q-my-lg w100"
:label="$t('project_card__project_description')"
/>
<q-checkbox
v-if="modelValue.logo"
v-model="modelValue.logo_as_bg"
class="w100"
>
{{ $t('project_card__image_use_as_background_chats') }}
</q-checkbox>
</div>
</div>
</template>
<script setup lang="ts">
import type { ProjectParams } from 'src/types'
const modelValue = defineModel<ProjectParams>({ required: true })
</script>
<style>
</style>