394 lines
12 KiB
Vue
394 lines
12 KiB
Vue
<template>
|
|
<pn-page-card>
|
|
<template #title>
|
|
{{ $t(title) }}
|
|
</template>
|
|
<template #footer>
|
|
<q-btn
|
|
rounded color="primary"
|
|
class="w100 q-mt-md q-mb-xs"
|
|
@click = "emit('update', newFiles)"
|
|
>
|
|
{{ $t(btnText) }}
|
|
</q-btn>
|
|
</template>
|
|
<pn-scroll-list>
|
|
<div class="flex column items-center q-pa-md q-pb-sm">
|
|
<div class="q-gutter-y-lg w100">
|
|
|
|
<q-select
|
|
v-model="modelValue.chat_id"
|
|
:options="displayChats"
|
|
dense
|
|
filled
|
|
class="w100"
|
|
:label = "$t('task_block__attach_chat')"
|
|
option-value="id"
|
|
option-label="name"
|
|
emit-value
|
|
map-options
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-chat-outline"/>
|
|
</template>
|
|
<template #option="scope">
|
|
<q-item v-bind="scope.itemProps">
|
|
<q-item-section avatar>
|
|
<q-avatar rounded size="md">
|
|
<template v-if="scope.opt.id">
|
|
<pn-auto-avatar
|
|
:img="scope.opt.logo"
|
|
:name="scope.opt.name"
|
|
size="md"
|
|
/>
|
|
</template>
|
|
<template v-else>
|
|
<q-icon size="32px" color="grey" name="mdi-cancel"/>
|
|
</template>
|
|
</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-input
|
|
v-model.trim="modelValue.name"
|
|
dense
|
|
filled
|
|
class = "w100 fix-bottom-padding q-pt-sm"
|
|
:rules="[rules.name]"
|
|
no-error-icon
|
|
label-slot
|
|
>
|
|
<template #label>
|
|
{{ $t('task_block__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('task_block__description')"
|
|
/>
|
|
|
|
<pn-file-uploader
|
|
v-model:exist-files ="modelValue.files"
|
|
v-model:new-files ="newFiles"
|
|
:existFileData="files"
|
|
:label="$t('meeting_block__attach_files')"
|
|
class="q-pt-sm"
|
|
/>
|
|
|
|
<div class="flex column">
|
|
<div class="text-caption">
|
|
{{ $t('task_block__plan') }}
|
|
</div>
|
|
<div class="flex no-wrap justify-between q-gutter-x-md">
|
|
<q-input
|
|
v-model="taskDate"
|
|
dense filled
|
|
mask="##/##/####"
|
|
:rules=[rules.date]
|
|
no-error-icon
|
|
:label="$t('task_block__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="taskDate"
|
|
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="taskTime"
|
|
dense filled
|
|
mask="time"
|
|
:rules="[rules.time]"
|
|
no-error-icon
|
|
:label="$t('task_block__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="taskTime"
|
|
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>
|
|
</div>
|
|
|
|
<q-select
|
|
v-model="modelValue.assigned_to"
|
|
:options="displayUsers"
|
|
dense
|
|
filled
|
|
class="w100 file-input-fix q-pt-sm"
|
|
:label = "$t('task_block__assigned_to')"
|
|
option-value="id"
|
|
option-label="displayName"
|
|
emit-value
|
|
map-options
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-account-arrow-left-outline"/>
|
|
</template>
|
|
<template #option="scope">
|
|
<q-item v-bind="scope.itemProps">
|
|
<q-item-section avatar>
|
|
<pn-auto-avatar
|
|
:img="scope.opt.photo"
|
|
:name="scope.opt.displayName"
|
|
size="md"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{ scope.opt.displayName }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|
|
</q-select>
|
|
|
|
<q-select
|
|
v-model="modelValue.observers"
|
|
:options="displayUsers"
|
|
dense
|
|
filled
|
|
class="w100 file-input-fix q-pt-sm"
|
|
:label = "$t('task_block__observers')"
|
|
option-value="id"
|
|
option-label="displayName"
|
|
emit-value
|
|
map-options
|
|
use-chips
|
|
multiple
|
|
>
|
|
<template #prepend>
|
|
<q-icon name="mdi-account-eye-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>
|
|
|
|
|
|
<div class="flex column">
|
|
|
|
<div class="q-py-none q-my-none text-caption flex items-baseline">
|
|
<span>{{$t('task_block__priority')}}</span>
|
|
<q-icon
|
|
name="mdi-flag-triangle"
|
|
class="q-ml-xs"
|
|
:color="getToogleColor()"
|
|
/>
|
|
</div>
|
|
|
|
<q-btn-toggle
|
|
v-model="modelValue.priority"
|
|
no-caps
|
|
:toggle-color="getToogleColor()"
|
|
spread
|
|
unelevated
|
|
dense
|
|
:options="priority"
|
|
class="w100"
|
|
>
|
|
<template
|
|
v-for="item in priority"
|
|
:key="item.id" #[item.slot]
|
|
>
|
|
<div class="row items-center no-wrap gap-xs text-weight-regular">
|
|
<span
|
|
:class="modelValue.priority === item.value ? '' : 'text-grey'"
|
|
>
|
|
{{ $t(item.translationKey) }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</q-btn-toggle>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</pn-scroll-list>
|
|
</pn-page-card>
|
|
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, onMounted } from 'vue'
|
|
import type { TaskParams } from 'types/Task'
|
|
import { useChatsStore } from 'stores/chats'
|
|
import { useUsersStore } from 'stores/users'
|
|
import { useFilesStore } from 'stores/files'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { date } from 'quasar'
|
|
const { t } = useI18n()
|
|
const filesStore = useFilesStore()
|
|
const files = filesStore.getFiles
|
|
const newFiles=ref<File[]>([])
|
|
|
|
const modelValue = defineModel<TaskParams>({
|
|
required: true
|
|
})
|
|
|
|
defineProps<{
|
|
title: string,
|
|
btnText: string
|
|
}>()
|
|
|
|
const emit = defineEmits(['update'])
|
|
|
|
const chatsStore = useChatsStore()
|
|
const chats = chatsStore.getChats
|
|
const displayChats = computed(() => [
|
|
...chats.map(el => ({
|
|
id: el.id,
|
|
name: el.name,
|
|
logo: el.logo
|
|
})),
|
|
{
|
|
id: null,
|
|
name: t('task_block__no_chat'),
|
|
logo: ''
|
|
}
|
|
])
|
|
|
|
const usersStore = useUsersStore()
|
|
const users = usersStore.getUsers
|
|
|
|
const displayUsers = computed(() => {
|
|
return users
|
|
.map(el => ({ ...el, displayName: usersStore.userNameById(el.id) }))
|
|
})
|
|
|
|
const taskDate = computed({
|
|
get: () => date.formatDate(modelValue.value.plan_date * 1000, 'DD/MM/YYYY'),
|
|
set: (d) => updateDateTime(d, taskTime.value)
|
|
})
|
|
|
|
const taskTime = computed({
|
|
get: () => date.formatDate(modelValue.value.plan_date * 1000, 'HH:mm'),
|
|
set: (t) => updateDateTime(taskDate.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.plan_date = newDate.getTime() / 1000
|
|
}
|
|
}
|
|
}
|
|
|
|
const priority = [
|
|
{ id: 1, slot: 's1', label: '', translationKey: 'task_block__priority_normal', value: 0, props: { color: 'green' } },
|
|
{ id: 2, slot: 's2', label: '', translationKey: 'task_block__priority_important', value: 1, props: { color: 'amber' } },
|
|
{ id: 3, slot: 's3', label: '', translationKey: 'task_block__priority_critical', value: 2, props: { color: 'red' } }
|
|
]
|
|
|
|
function getToogleColor () {
|
|
const priorityItem = priority.find(el => el.value === modelValue.value.priority)
|
|
return priorityItem
|
|
? priorityItem.props.color
|
|
: 'primary'
|
|
}
|
|
|
|
const rulesErrorMessage = {
|
|
name: t('task_block__error_name'),
|
|
date: t('task_block__error_date'),
|
|
time: t('task_block__error_time')
|
|
}
|
|
|
|
const rules = {
|
|
name: (val: TaskParams['name']) => !!val?.trim() || rulesErrorMessage['name'],
|
|
date: () => (!!modelValue.value.plan_date && modelValue.value.plan_date > Date.now() / 1000) || rulesErrorMessage['date'],
|
|
time: () => (!!modelValue.value.plan_date && modelValue.value.plan_date > Date.now() / 1000) || rulesErrorMessage['time']
|
|
}
|
|
|
|
const isFormValid = computed(() => {
|
|
const validations = {
|
|
name: rules.name(modelValue.value.name) === true,
|
|
date: rules.date() === true,
|
|
time: rules.time() === true
|
|
}
|
|
|
|
return Object.values(validations).every(Boolean)
|
|
})
|
|
|
|
const initialTask = ref({} as TaskParams)
|
|
|
|
onMounted(() => {
|
|
if (!modelValue.value.assigned_to) modelValue.value.assigned_to = usersStore.myId.id
|
|
initialTask.value = { ...modelValue.value }
|
|
})
|
|
|
|
</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>
|