v4
This commit is contained in:
223
src/components/accountHelper.vue
Normal file
223
src/components/accountHelper.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<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"
|
||||
autofocus
|
||||
dense
|
||||
filled
|
||||
:label = "$t('account_helper__email')"
|
||||
:rules="validationRules.email"
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
@focus="($refs.emailInput as typeof QInput)?.resetValidation()"
|
||||
ref="emailInput"
|
||||
/>
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('continue')"
|
||||
:disabled="!isEmailValid"
|
||||
/>
|
||||
</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
|
||||
autofocus
|
||||
hide-bottom-space
|
||||
:label = "$t('account_helper__code')"
|
||||
num="30"
|
||||
/>
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
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')"
|
||||
:type="isPwd ? 'password' : 'text'"
|
||||
hide-hint
|
||||
:hint="passwordHint"
|
||||
:rules="validationRules.password"
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
@focus="($refs.passwordInput as typeof QInput)?.resetValidation()"
|
||||
ref="passwordInput"
|
||||
>
|
||||
<template #append>
|
||||
<q-icon
|
||||
color="grey-5"
|
||||
:name="isPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
|
||||
class="cursor-pointer"
|
||||
@click="isPwd = !isPwd"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-stepper-navigation>
|
||||
<q-btn
|
||||
@click="handleSubmit"
|
||||
color="primary"
|
||||
:label="$t('account_helper__finish')"
|
||||
:disabled = "!isPasswordValid"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
@click="step = 2"
|
||||
color="primary"
|
||||
:label="$t('back')"
|
||||
class="q-ml-sm"
|
||||
/>
|
||||
</q-stepper-navigation>
|
||||
</q-step>
|
||||
</q-stepper>
|
||||
|
||||
<pn-magic-overlay
|
||||
v-if="showSuccessOverlay"
|
||||
icon="mdi-check-circle-outline"
|
||||
message1="account_helper__ok_message1"
|
||||
message2="account_helper__ok_message2"
|
||||
route-name="projects"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import type { AxiosError } from 'axios'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { QInput } from 'quasar'
|
||||
import { useAuthStore, type AuthFlowType } from 'stores/auth'
|
||||
|
||||
const flowType = computed<AuthFlowType>(() => {
|
||||
return props.type === 'register'
|
||||
? 'register'
|
||||
: props.type === 'forgotPwd'
|
||||
? 'forgot'
|
||||
: 'change'
|
||||
})
|
||||
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const props = defineProps<{
|
||||
type: 'register' | 'forgotPwd' | 'changePwd'
|
||||
email?: string
|
||||
}>()
|
||||
|
||||
type ValidationRule = (val: string) => boolean | string
|
||||
type Step = 1 | 2 | 3
|
||||
|
||||
const step = ref<Step>(1)
|
||||
const login = ref<string>(props.email || '')
|
||||
const code = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
const showSuccessOverlay = ref(false)
|
||||
const isPwd = ref<boolean>(true)
|
||||
const validationRules = {
|
||||
email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
|
||||
password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
|
||||
}
|
||||
|
||||
const isEmailValid = computed(() =>
|
||||
validationRules.email.every(f => f(login.value) === true)
|
||||
)
|
||||
|
||||
const isPasswordValid = computed(() =>
|
||||
validationRules.password.every(f => f(password.value) === true)
|
||||
)
|
||||
|
||||
const passwordHint = computed(() => {
|
||||
const result = validationRules.password[0](password.value)
|
||||
return typeof result === 'string' ? result : ''
|
||||
})
|
||||
|
||||
const stepActions: Record<Step, () => Promise<void>> = {
|
||||
1: async () => {
|
||||
await authStore.initRegistration(flowType.value, login.value)
|
||||
},
|
||||
2: async () => {
|
||||
await authStore.confirmCode(flowType.value, login.value, code.value)
|
||||
},
|
||||
3: async () => {
|
||||
await authStore.setPassword(flowType.value, login.value, code.value, password.value)
|
||||
if (flowType.value === 'register') {
|
||||
await authStore.loginWithCredentials(login.value, password.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleError = (err: AxiosError) => {
|
||||
const error = err as AxiosError<{ error?: { message?: string } }>
|
||||
const message = error.response?.data?.error?.message || t('unknown_error')
|
||||
|
||||
$q.notify({
|
||||
message: `${t('error')}: ${message}`,
|
||||
type: 'negative',
|
||||
position: 'bottom',
|
||||
timeout: 2500
|
||||
})
|
||||
|
||||
if (step.value > 1) {
|
||||
code.value = ''
|
||||
password.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
await stepActions[step.value]()
|
||||
if (step.value < 3) {
|
||||
step.value++
|
||||
} else {
|
||||
showSuccessOverlay.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error as AxiosError)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</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,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>
|
||||
@@ -5,7 +5,7 @@
|
||||
<q-input
|
||||
v-for="input in textInputs"
|
||||
:key="input.id"
|
||||
v-model="modelValue[input.val]"
|
||||
v-model.trim="modelValue[input.val]"
|
||||
dense
|
||||
filled
|
||||
class = "q-mt-md w100"
|
||||
35
src/components/pnAccountBlockName.vue
Normal file
35
src/components/pnAccountBlockName.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="flex items-center no-wrap overflow-hidden w100">
|
||||
<q-icon v-if="user?.email" size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
|
||||
<q-avatar v-else size="32px" class="q-mr-sm">
|
||||
<q-img v-if="tgUser?.photo_url" :src="tgUser.photo_url"/>
|
||||
<q-icon v-else size="md" class="q-mr-sm" name="mdi-account-circle-outline"/>
|
||||
</q-avatar>
|
||||
<span v-if="user?.email" class="ellipsis">
|
||||
{{ user.email }}
|
||||
</span>
|
||||
<span v-else class="ellipsis">
|
||||
{{
|
||||
tgUser?.first_name +
|
||||
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
|
||||
tgUser?.last_name +
|
||||
!(tgUser?.first_name || tgUser?.last_name) ? tgUser?.username : ''
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject } from 'vue'
|
||||
import { useAuthStore } from 'stores/auth'
|
||||
import type { WebApp } from '@twa-dev/types'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const user = authStore.user
|
||||
const tg = inject('tg') as WebApp
|
||||
const tgUser = tg.initDataUnsafe.user
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
73
src/components/pnMagicOverlay.vue
Normal file
73
src/components/pnMagicOverlay.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<q-dialog
|
||||
v-model="visible"
|
||||
maximized
|
||||
persistent
|
||||
transition-show="slide-up"
|
||||
transition-hide="slide-down">
|
||||
<div
|
||||
class="flex items-center justify-center fullscrean-card column"
|
||||
>
|
||||
<q-icon :name = "icon" color="brand" size="160px"/>
|
||||
<div class="text-h5 q-mb-lg">
|
||||
{{ $t(message1) }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="message2"
|
||||
class="absolute-bottom q-py-lg flex justify-center row"
|
||||
>
|
||||
{{ $t(message2) }}
|
||||
</div>
|
||||
</div>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const props = defineProps<{
|
||||
icon: string
|
||||
message1: string
|
||||
message2?: string
|
||||
routeName: string
|
||||
}>()
|
||||
|
||||
const visible = ref(false)
|
||||
const router = useRouter()
|
||||
const timers = ref<number[]>([])
|
||||
|
||||
const setupTimers = () => {
|
||||
visible.value = true
|
||||
|
||||
const timer1 = window.setTimeout(() => {
|
||||
visible.value = false
|
||||
|
||||
const timer2 = window.setTimeout(() => {
|
||||
router.push({ name: props.routeName })
|
||||
}, 300)
|
||||
|
||||
timers.value.push(timer2)
|
||||
}, 2000)
|
||||
|
||||
timers.value.push(timer1)
|
||||
};
|
||||
|
||||
const clearTimers = () => {
|
||||
timers.value.forEach(timer => clearTimeout(timer))
|
||||
timers.value = []
|
||||
}
|
||||
|
||||
onMounted(setupTimers)
|
||||
onUnmounted(clearTimers)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullscrean-card {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<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"
|
||||
class="text-white flex items-center w100 q-pl-md q-pr-sm q-ma-none text-h6 no-scroll"
|
||||
style="min-height: 48px"
|
||||
>
|
||||
<slot name="title"/>
|
||||
Reference in New Issue
Block a user