v1
This commit is contained in:
@@ -1,40 +0,0 @@
|
||||
<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>
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="qty-card glossy text-white flex column items-center"
|
||||
: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>
|
||||
@@ -1,89 +0,0 @@
|
||||
<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
|
||||
filled
|
||||
:label = "$t('account_helper__email')"
|
||||
/>
|
||||
<div class="q-pt-md text-red">{{$t('account_helper__code_error')}}</div>
|
||||
<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"
|
||||
>
|
||||
<div class="q-pb-md">{{$t('account_helper__confirm_email_message')}}</div>
|
||||
<q-input
|
||||
v-model="code"
|
||||
dense
|
||||
filled
|
||||
: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
|
||||
filled
|
||||
: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 || '')
|
||||
const code = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
|
||||
async function goProjects() {
|
||||
await router.push({ name: 'projects' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,80 +0,0 @@
|
||||
<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"
|
||||
:rules="input.val === 'name' ? [rules[input.val]] : []"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon v-if="input.icon" :name="input.icon"/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch, computed } from 'vue'
|
||||
import type { CompanyParams } from 'src/types'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t }= useI18n()
|
||||
|
||||
const modelValue = defineModel<CompanyParams>({
|
||||
required: false,
|
||||
default: () => ({
|
||||
name: '',
|
||||
logo: '',
|
||||
description: '',
|
||||
site: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
email: ''
|
||||
})
|
||||
})
|
||||
|
||||
const emit = defineEmits(['valid'])
|
||||
const rulesErrorMessage = {
|
||||
name: t('company_card__error_name')
|
||||
}
|
||||
|
||||
const rules = {
|
||||
name: (val :CompanyParams['name']) => !!val?.trim() || rulesErrorMessage['name']
|
||||
}
|
||||
|
||||
const isValid = computed(() => {
|
||||
const checkName = rules.name(modelValue.value.name)
|
||||
return { name: checkName && (checkName !== rulesErrorMessage['name']) }
|
||||
})
|
||||
|
||||
watch(isValid, (newVal) => {
|
||||
const allValid = Object.values(newVal).every(v => v)
|
||||
emit('valid', allValid)
|
||||
}, { immediate: true})
|
||||
|
||||
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>
|
||||
@@ -1,118 +0,0 @@
|
||||
<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 q-pa-0" style="color: var(--logo-color-bg-white);">
|
||||
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: var(--logo-color-bg-white);
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
100%,
|
||||
0% {
|
||||
fill: $light-green-14;
|
||||
}
|
||||
60% {
|
||||
fill: $green-14;
|
||||
}
|
||||
}
|
||||
|
||||
#path5 {
|
||||
animation: blink 3s infinite;
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<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>
|
||||
@@ -1,132 +0,0 @@
|
||||
<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>
|
||||
@@ -1,256 +0,0 @@
|
||||
<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>
|
||||
|
||||
|
||||
</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="fixShowFab"
|
||||
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, watch } from 'vue'
|
||||
import { useChatsStore } from 'stores/chats'
|
||||
|
||||
const props = defineProps<{
|
||||
showFab: boolean
|
||||
}>()
|
||||
|
||||
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 fixShowFab = ref(true)
|
||||
const showFabFixTrue = () => fixShowFab.value = true
|
||||
|
||||
watch(() => props.showFab, (newVal) => {
|
||||
const timerId = setTimeout(showFabFixTrue, 700)
|
||||
if (newVal === false) {
|
||||
clearTimeout(timerId)
|
||||
fixShowFab.value = false
|
||||
}
|
||||
}, {immediate: true})
|
||||
</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>
|
||||
@@ -1,193 +0,0 @@
|
||||
<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="fixShowFab"
|
||||
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, watch } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useCompaniesStore } from 'stores/companies'
|
||||
import { parseIntString } from 'boot/helpers'
|
||||
|
||||
const props = defineProps<{
|
||||
showFab: boolean
|
||||
}>()
|
||||
|
||||
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 fixShowFab = ref(false)
|
||||
const showFabFixTrue = () => fixShowFab.value = true
|
||||
|
||||
watch(() => props.showFab, (newVal) => {
|
||||
const timerId = setTimeout(showFabFixTrue, 500)
|
||||
if (newVal === false) {
|
||||
clearTimeout(timerId)
|
||||
fixShowFab.value = false
|
||||
}
|
||||
}, {immediate: true})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
/* fix mini border after slide */
|
||||
:deep(.q-slide-item__right)
|
||||
{
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,202 +0,0 @@
|
||||
<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>
|
||||
@@ -1,90 +0,0 @@
|
||||
<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>
|
||||
265
src/components/meetingBlock.vue
Normal file
265
src/components/meetingBlock.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="flex column items-center q-pa-lg">
|
||||
<div class="q-gutter-y-lg w100">
|
||||
<q-input
|
||||
v-model.trim="modelValue.name"
|
||||
dense
|
||||
filled
|
||||
class = "w100 fix-bottom-padding"
|
||||
:rules="[rules.name]"
|
||||
no-error-icon
|
||||
label-slot
|
||||
>
|
||||
<template #label>
|
||||
{{$t('meeting_info__name') }}
|
||||
<span class="text-red">*</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="modelValue.description"
|
||||
dense
|
||||
filled
|
||||
autogrow
|
||||
class="w100 q-pt-sm"
|
||||
:label="$t('meeting_info__description')"
|
||||
/>
|
||||
|
||||
<div class="flex no-wrap justify-between q-gutter-x-md q-pt-sm">
|
||||
<q-input
|
||||
v-model="meetingDate"
|
||||
dense filled
|
||||
mask="##/##/####"
|
||||
:label="$t('meeting_info__date')"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-date
|
||||
v-model="meetingDate"
|
||||
mask="DD/MM/YYYY"
|
||||
class="relative-position"
|
||||
:options="d => d >= date.formatDate(Date.now(), 'YYYY/MM/DD')"
|
||||
:navigation-min-year-month="date.formatDate(Date.now(), 'YYYY/MM')"
|
||||
>
|
||||
<div class="absolute" style="top: 0; right: 0;">
|
||||
<q-btn
|
||||
v-close-popup
|
||||
round flat
|
||||
color="white"
|
||||
icon="mdi-close"
|
||||
class="q-ma-sm"
|
||||
/>
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="meetingTime"
|
||||
dense filled
|
||||
mask="time"
|
||||
:rules="['time']"
|
||||
:label="$t('meeting_info__time')"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="access_time" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-time
|
||||
v-model="meetingTime"
|
||||
mask="HH:mm"
|
||||
format24h
|
||||
class="relative-position"
|
||||
>
|
||||
<div class="absolute" style="top: 0; right: 0;">
|
||||
<q-btn
|
||||
v-close-popup
|
||||
round flat
|
||||
color="white"
|
||||
icon="mdi-close"
|
||||
class="q-ma-sm"
|
||||
/>
|
||||
</div>
|
||||
</q-time>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-select
|
||||
v-model="modelValue.chat_attach"
|
||||
:options="chats"
|
||||
dense
|
||||
filled
|
||||
class="w100 q-pt-sm"
|
||||
:label = "$t('meeting_info__attach_chat')"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
label-slot
|
||||
:disable="chats.length<=1"
|
||||
:placeholder="chats.length<=1 ? undefined : t('meeting_info__choose_chat_placeholder')"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-chat-outline"/>
|
||||
</template>
|
||||
<template #label>
|
||||
{{$t('meeting_info__attach_chat') }}
|
||||
<span class="text-red" v-if="chats.length>1">*</span>
|
||||
</template>
|
||||
<template #option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<q-avatar rounded size="md">
|
||||
<img v-if="scope.opt.logo" :src="scope.opt.logo"/>
|
||||
<pn-auto-avatar v-else :name="scope.opt.name"/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ scope.opt.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-select
|
||||
v-model="modelValue.participants"
|
||||
:options="displayUsers"
|
||||
dense
|
||||
filled
|
||||
class="w100 file-input-fix q-pt-sm"
|
||||
:label = "$t('meeting_info__participants')"
|
||||
option-value="id"
|
||||
option-label="displayName"
|
||||
emit-value
|
||||
map-options
|
||||
use-chips
|
||||
multiple
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-account-outline"/>
|
||||
</template>
|
||||
<template #option="scope">
|
||||
<q-item v-bind="scope.itemProps">
|
||||
<q-item-section avatar>
|
||||
<q-avatar round size="md">
|
||||
<img v-if="scope.opt.photo" :src="scope.opt.photo"/>
|
||||
<pn-auto-avatar v-else :name="scope.opt.name"/>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ scope.opt.displayName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-select>
|
||||
|
||||
<q-file
|
||||
v-model="modelValue.files"
|
||||
:label="$t('meeting_info__attach_files')"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
dense
|
||||
class="file-input-fix q-pt-sm"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="attach_file"/>
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, watch, computed } from 'vue'
|
||||
import type { MeetingParams } from 'types/Meeting'
|
||||
import { useChatsStore } from 'stores/chats'
|
||||
import { useUsersStore } from 'stores/users'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { date } from 'quasar'
|
||||
const { t }= useI18n()
|
||||
|
||||
const modelValue = defineModel<MeetingParams>({
|
||||
required: true
|
||||
})
|
||||
|
||||
const emit = defineEmits(['valid'])
|
||||
const rulesErrorMessage = {
|
||||
name: t('meeting_info__error_name'),
|
||||
dateMeeting: t('meeting_info__error_date'),
|
||||
timeMeeting: t('meeting_info__error_time')
|
||||
}
|
||||
|
||||
const chatsStore = useChatsStore()
|
||||
const chats = computed(() => chatsStore.chats)
|
||||
|
||||
const usersStore = useUsersStore()
|
||||
const users = computed(() => usersStore.users)
|
||||
|
||||
const displayUsers = computed(() => {
|
||||
return users.value
|
||||
.map(el => ({ ...el, displayName: usersStore.userNameById(el.id) }))
|
||||
})
|
||||
|
||||
const meetingDate = computed({
|
||||
get: () => date.formatDate(modelValue.value.meet_date, 'DD/MM/YYYY'),
|
||||
set: (d) => updateDateTime(d, meetingTime.value)
|
||||
})
|
||||
|
||||
const meetingTime = computed({
|
||||
get: () => date.formatDate(modelValue.value.meet_date, 'HH:mm'),
|
||||
set: (t) => updateDateTime(meetingDate.value, t)
|
||||
})
|
||||
|
||||
function updateDateTime(dateStr: string, timeStr: string) {
|
||||
if (dateStr.length === 10 && timeStr.length === 5) {
|
||||
const newDate = date.extractDate(`${dateStr} ${timeStr}`, 'DD/MM/YYYY HH:mm')
|
||||
if (!isNaN(newDate.getTime())) {
|
||||
modelValue.value.meet_date = newDate.getTime()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rules = {
|
||||
name: (val: MeetingParams['name']) => !!val?.trim() || rulesErrorMessage['name']
|
||||
}
|
||||
|
||||
const isValid = computed(() => {
|
||||
const checkName = rules.name(modelValue.value.name)
|
||||
return { name: checkName && (checkName !== rulesErrorMessage['name']) }
|
||||
})
|
||||
|
||||
watch(isValid, (newVal) => {
|
||||
const allValid = Object.values(newVal).every(v => v)
|
||||
emit('valid', allValid)
|
||||
}, { immediate: true})
|
||||
|
||||
onMounted(() => {
|
||||
if (chats.value.length === 1 && !modelValue.value.chat_attach) {
|
||||
modelValue.value.chat_attach = chats.value[0]?.id ?? null
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fix-bottom-padding.q-field--with-bottom {
|
||||
padding-bottom: 0 !important
|
||||
}
|
||||
|
||||
.file-input-fix :deep(.q-field__append) {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.file-input-fix :deep(.q-field__prepend) {
|
||||
height: auto !important;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
:style="{ backgroundColor: stringToColour(props.name) } "
|
||||
class="fit flex items-center justify-center text-white"
|
||||
>
|
||||
{{ props.name.substring(0, 1) }}
|
||||
{{ props.name ? props.name.substring(0, 1) : '' }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
}>()
|
||||
|
||||
const stringToColour = (str: string) => {
|
||||
if (!str) return '#eee'
|
||||
let hash = 0
|
||||
str.split('').forEach(char => {
|
||||
hash = char.charCodeAt(0) + ((hash << 5) - hash)
|
||||
37
src/components/pnDialogBody.vue
Normal file
37
src/components/pnDialogBody.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<q-card class="q-pa-none q-ma-none w100" align="center">
|
||||
<q-card-section>
|
||||
<q-avatar :color :icon size="60px" font-size="45px" text-color="white"/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section
|
||||
class="text-h6 text-bold q-pt-none wrap no-scroll"
|
||||
style="overflow-wrap: break-word"
|
||||
>
|
||||
{{ $t(title)}}
|
||||
</q-card-section>
|
||||
<q-card-section v-if="message1">
|
||||
{{ $t(message1)}}
|
||||
</q-card-section>
|
||||
<q-card-section v-if="message2">
|
||||
{{ $t(message2)}}
|
||||
</q-card-section>
|
||||
<q-card-actions align="center" vertical>
|
||||
<slot name="actions"/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
icon?: string
|
||||
color?: string
|
||||
title: string
|
||||
message1?: string
|
||||
message2?: string
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
20
src/components/pnPageCard.vue
Normal file
20
src/components/pnPageCard.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-between q-ma-none q-py-none q-px-md text-white text-h6 no-scroll no-wrap w100"
|
||||
style="min-height: 48px"
|
||||
>
|
||||
<slot name="title"/>
|
||||
</div>
|
||||
<slot/>
|
||||
<slot name="footer"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.glass-card {
|
||||
opacity: 1 !important;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
180
src/components/pnScrollList.vue
Normal file
180
src/components/pnScrollList.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div
|
||||
id="page-card"
|
||||
class="w100 flex column glass-card top-rounded-card no-scroll no-wrap"
|
||||
>
|
||||
<div
|
||||
id="card-body-header"
|
||||
style="flex-shrink: 0"
|
||||
>
|
||||
<q-resize-observer @resize="onHeaderResize"/>
|
||||
<slot name="card-body-header"/>
|
||||
</div>
|
||||
|
||||
<div id="card-body">
|
||||
<q-resize-observer @resize="onBodyResize"/>
|
||||
<q-scroll-area
|
||||
v-if="!isResizing"
|
||||
:style="{ height: scrollAreaHeight + 'px' }"
|
||||
class="w100 q-pa-none q-ma-none"
|
||||
@scroll="onScroll"
|
||||
:class=" {
|
||||
'shadow-top': hasScrolled,
|
||||
'shadow-bottom': hasScrolledBottom
|
||||
}"
|
||||
>
|
||||
<slot/>
|
||||
<div class="q-pa-sm"/>
|
||||
</q-scroll-area>
|
||||
<q-scroll-area
|
||||
v-if="isResizing"
|
||||
:style="{ height: scrollAreaHeight + 'px' }"
|
||||
class="w100 q-pa-none q-ma-none"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<slot/>
|
||||
<div class="q-pa-sm"/>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, nextTick } from 'vue'
|
||||
import type { QScrollArea } from 'quasar'
|
||||
|
||||
const heightCard = ref(100)
|
||||
const scrollAreaHeight = ref(100)
|
||||
const headerHeight = ref(0)
|
||||
const hasScrolled = ref(false)
|
||||
const hasScrolledBottom = ref(false)
|
||||
|
||||
interface sizeParams {
|
||||
height: number,
|
||||
width: number
|
||||
}
|
||||
|
||||
interface ScrollInfo {
|
||||
verticalPosition: number;
|
||||
verticalPercentage: number;
|
||||
verticalSize: number;
|
||||
verticalContainerSize: number;
|
||||
}
|
||||
|
||||
async function onHeaderResize(size: sizeParams) {
|
||||
headerHeight.value = size.height
|
||||
await updateScrollAreaHeight()
|
||||
}
|
||||
|
||||
async function onBodyResize(size: sizeParams) {
|
||||
heightCard.value = size.height
|
||||
await updateScrollAreaHeight()
|
||||
}
|
||||
|
||||
async function updateScrollAreaHeight() {
|
||||
await nextTick(() => {
|
||||
scrollAreaHeight.value = Math.max(0, heightCard.value)
|
||||
})
|
||||
}
|
||||
|
||||
function onScroll(info: ScrollInfo) {
|
||||
hasScrolled.value = info.verticalPosition > 0
|
||||
const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
|
||||
hasScrolledBottom.value = !scrollEnd
|
||||
}
|
||||
|
||||
watch(heightCard, updateScrollAreaHeight)
|
||||
watch(headerHeight, updateScrollAreaHeight)
|
||||
|
||||
const isResizing = ref(false)
|
||||
let resizeTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
watch(heightCard, () => {
|
||||
isResizing.value = true
|
||||
|
||||
if (resizeTimer) {
|
||||
clearTimeout(resizeTimer)
|
||||
resizeTimer = null
|
||||
}
|
||||
|
||||
resizeTimer = setTimeout(() => {
|
||||
isResizing.value = false
|
||||
resizeTimer = null
|
||||
}, 500)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#page-card {
|
||||
flex: 1 0 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#card-body {
|
||||
overflow: hidden;
|
||||
flex: 1 1 0;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#card-body :deep(.q-scrollarea__content ) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.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>
|
||||
24
src/components/pnTaskPriorityIcon.vue
Normal file
24
src/components/pnTaskPriorityIcon.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<q-icon
|
||||
v-if="priority === 'important' || priority === 1"
|
||||
name="mdi-alert-circle-outline"
|
||||
color="warning"
|
||||
class="q-px-xs"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="priority === 'critical' || priority === 2"
|
||||
name="mdi-fire"
|
||||
color="negative"
|
||||
class="q-px-xs"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
priority?: 'normal' | 0 | 'important' | 1 | 'critical' | 2
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
</style>
|
||||
51
src/components/taskItem.vue
Normal file
51
src/components/taskItem.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<q-item-section avatar>
|
||||
<q-avatar color="primary" rounded text-color="white" icon="mdi-tray-arrow-down" size="md" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-bold flex items-center">
|
||||
<span>
|
||||
{{item.name}}
|
||||
</span>
|
||||
<pn-task-priority-icon v-if="item?.priority" :priority="item.priority"/>
|
||||
</q-item-label>
|
||||
<q-item-label caption class="flex items-center">
|
||||
<span v-if="item.attach && item.files.length !== 0" class="q-mr-sm flex items-center">
|
||||
<q-icon name="mdi-paperclip"/>
|
||||
<span>{{ item.files.length }}</span>
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<q-icon name="mdi-chat-outline"/>
|
||||
{{ item.owner_id }}
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side class="flex column">
|
||||
<q-item-label v-if="item.plan_date" caption>
|
||||
{{ dayjs(item.plan_date).format('ddd MMM') }}
|
||||
</q-item-label>
|
||||
<q-item-label v-if="item.date_end" caption>
|
||||
{{ dayjs(item.plan_date).format('hh:mm') }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>
|
||||
<div class="flex items-center">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Task } from 'types/Task'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
defineProps<{
|
||||
item: Task
|
||||
}>()
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user