This commit is contained in:
2025-04-14 10:27:58 +03:00
parent f977d6b3d4
commit 7e798a7a83
55 changed files with 5625 additions and 353 deletions

View File

@@ -15,9 +15,10 @@
<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>
@@ -28,10 +29,11 @@
:title="$t('account_helper__confirm_email')"
:done="step > 2"
>
{{$t('account_helper__confirm_email_messege')}}
<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>
@@ -47,7 +49,8 @@
<q-input
v-model="password"
dense
:label = "$t('account_helper_password')"
filled
:label = "$t('account_helper__password')"
/>
<q-stepper-navigation>
@@ -73,7 +76,7 @@
}>()
const step = ref<number>(1)
const login = ref<string>(props.email ? props.email : '')
const login = ref<string>(props.email || '')
const code = ref<string>('')
const password = ref<string>('')

View File

@@ -10,6 +10,7 @@
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"/>
@@ -20,7 +21,10 @@
</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,
@@ -35,6 +39,25 @@
})
})
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

View File

@@ -68,7 +68,7 @@
</g>
</svg>
<span class="text-h4 text-white q-pa-0">
<span class="text-h4 q-pa-0" style="color: var(--logo-color-bg-white);">
projects
</span>
@@ -99,7 +99,7 @@
}
.iconcolor {
--icon-color: white;
--icon-color: var(--logo-color-bg-white);
}
@keyframes blink {

View File

@@ -64,49 +64,47 @@
</q-list>
</pn-scroll-list>
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
:style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
>
<q-fab
icon="add"
color="brand"
direction="up"
vertical-actions-align="right"
@click="showOverlay = !showOverlay;"
>
<q-fab-action
v-for="item in fabMenu"
:key="item.id"
square
clickable
v-ripple
class="bg-white change-fab-action"
>
<template #icon>
<q-item class="q-pa-xs w100">
<q-item-section avatar class="items-center">
<q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
</q-item-section>
<q-fab
v-if="showFab"
icon="add"
color="brand"
direction="up"
vertical-actions-align="right"
@click="showOverlay = !showOverlay"
>
<q-fab-action
v-for="item in fabMenu"
:key="item.id"
square
clickable
v-ripple
class="bg-white change-fab-action"
>
<template #icon>
<q-item class="q-pa-xs w100">
<q-item-section avatar class="items-center">
<q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
</q-item-section>
<q-item-section class="items-start">
<q-item-label class="fab-action-item">
{{ $t(item.name) }}
</q-item-label>
<q-item-label caption class="fab-action-item">
{{ $t(item.description) }}
</q-item-label>
<q-item-section class="items-start">
<q-item-label class="fab-action-item">
{{ $t(item.name) }}
</q-item-label>
<q-item-label caption class="fab-action-item">
{{ $t(item.description) }}
</q-item-label>
</q-item-section>
</q-item>
</template>
</q-fab-action>
</q-fab>
</q-item-section>
</q-item>
</template>
</q-fab-action>
</q-fab>
</q-page-sticky>
<pn-overlay v-if="showOverlay"/>
</div>
<q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
@@ -140,7 +138,7 @@
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useChatsStore } from 'stores/chats'
const search = ref('')
@@ -201,6 +199,16 @@
}
currentSlideEvent.value = null
}
const showFab = ref(false)
onMounted(() => {
setTimeout(() => showFab.value = true, 500)
})
onUnmounted(() => {
showFab.value = false
})
</script>
<style scoped>

View File

@@ -54,16 +54,16 @@
</q-slide-item>
</q-list>
</pn-scroll-list>
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
>
<q-btn
fab
icon="add"
color="brand"
@click="createCompany()"
<q-btn
fab
icon="add"
color="brand"
@click="createCompany()"
v-if="showFab"
/>
</q-page-sticky>
</div>
@@ -98,16 +98,19 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useCompaniesStore } from 'stores/companies'
import { parseIntString } from 'boot/helpers'
const router = useRouter()
const route = useRoute()
const companiesStore = useCompaniesStore()
const showDialogDeleteCompany = ref<boolean>(false)
const deleteCompanyId = ref<number | undefined>(undefined)
const currentSlideEvent = ref<SlideEvent | null>(null)
const closedByUserAction = ref(false)
const projectId = computed(() => parseIntString(route.params.id))
interface SlideEvent {
reset: () => void
@@ -120,11 +123,11 @@
}
async function goCompanyInfo (id :number) {
await router.push({ name: 'company_info', params: { id }})
await router.push({ name: 'company_info', params: { id: projectId.value, companyId: id }})
}
async function createCompany () {
await router.push({ name: 'create_company' })
await router.push({ name: 'add_company' })
}
function handleSlide (event: SlideEvent, id: number) {
@@ -137,40 +140,38 @@
if (!closedByUserAction.value) {
onCancel()
}
closedByUserAction.value = false
}
closedByUserAction.value = false
}
function onCancel() {
closedByUserAction.value = true
if (currentSlideEvent.value) {
currentSlideEvent.value.reset()
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
}
}
function onConfirm() {
closedByUserAction.value = true
if (deleteCompanyId.value) {
companiesStore.deleteCompany(deleteCompanyId.value)
}
currentSlideEvent.value = null
}
const showFab = ref(false)
onMounted(() => {
setTimeout(() => showFab.value = true, 500)
})
onUnmounted(() => {
showFab.value = false
})
</script>
<style scoped>
.change-fab-action .q-fab__label--internal {
max-height: none;
}
.change-fab-action {
width: calc(100vw - 48px) !important;
}
.fab-action-item {
text-wrap: auto !important;
text-align: left;
}
/* fix mini border after slide */
:deep(.q-slide-item__right)

View File

@@ -2,7 +2,7 @@
<div
id="project-info"
:style="{ height: headerHeight + 'px' }"
class="flex row items-center justify-between no-wrap q-py-sm w100"
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">
@@ -15,7 +15,7 @@
<div
v-if="!expandProjectInfo"
@click="toggleExpand"
class="text-h6 ellipsis no-wrap w100 cursor-pointer"
class="text-h6 ellipsis no-wrap w100"
key="compact"
>
{{project.name}}
@@ -27,10 +27,8 @@
@click="toggleExpand"
key="expanded"
>
<div class="q-focus-helper"></div>
<q-avatar rounded>
<q-img v-if="project.logo" :src="project.logo" fit="cover"/>
<q-img v-if="project.logo" :src="project.logo" fit="cover" style="height: 100%;"/>
<pn-auto-avatar v-else :name="project.name"/>
</q-avatar>
@@ -69,14 +67,24 @@
</q-menu>
</q-btn>
</div>
<q-dialog v-model="showDialogDeleteProject">
<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('project__delete_warning') }}</div>
<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('project__delete_warning_message') }}
{{ $t(
dialogType === 'archive'
? 'project__archive_warning_message'
: 'project__delete_warning_message'
)}}
</q-card-section>
<q-card-actions align="center">
@@ -88,10 +96,14 @@
/>
<q-btn
flat
:label="$t('continue')"
color="primary"
:label="$t(
dialogType === 'archive'
? 'project__archive'
: 'project__delete'
)"
color="negative"
v-close-popup
@click="deleteProject()"
@click="dialogType === 'archive' ? archiveProject() : deleteProject()"
/>
</q-card-actions>
</q-card>
@@ -109,17 +121,16 @@
const projectsStore = useProjectsStore()
const expandProjectInfo = ref<boolean>(false)
const showDialogDeleteProject = ref<boolean>(false)
const showDialogArchiveProject = 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: () => { showDialogArchiveProject.value = true }},
{ id: 4, title: 'project__delete', icon: 'mdi-trash-can-outline', iconColor: 'red', func: () => { showDialogDeleteProject.value = true }},
// { 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))
@@ -156,6 +167,10 @@ async function editProject () {
await router.push({ name: 'project_info' })
}
function archiveProject () {
console.log('archive project')
}
function deleteProject () {
console.log('delete project')
}
@@ -175,6 +190,10 @@ function onResize (size :sizeParams) {
watch(projectId, loadProjectData)
watch(showDialog, () => {
if (showDialog.value === false) dialogType.value = null
})
onMounted(() => loadProjectData())
</script>

View File

@@ -1,20 +1,20 @@
<template>
<div class="flex column">
<div class="flex column items-center col-grow q-pa-lg">
<pn-image-selector
:size="100"
:iconsize="80"
class="q-pb-lg"
v-model="modelValue.logo"
/>
<div class="flex column items-center q-pa-lg">
<pn-image-selector
v-model="modelValue.logo"
:size="100"
:iconsize="80"
class="q-pb-lg"
/>
<div class="q-gutter-y-lg w100">
<q-input
v-model="modelValue.name"
no-error-icon
dense
filled
class="q-mt-sm w100"
class = "w100 fix-bottom-padding"
:label="$t('project_card__project_name')"
:rules="[val => !!val || $t('validation.required')]"
:rules="[rules.name]"
/>
<q-input
@@ -22,7 +22,7 @@
dense
filled
autogrow
class="q-my-lg w100"
class="w100"
:label="$t('project_card__project_description')"
/>
@@ -30,6 +30,7 @@
v-if="modelValue.logo"
v-model="modelValue.logo_as_bg"
class="w100"
dense
>
{{ $t('project_card__image_use_as_background_chats') }}
</q-checkbox>
@@ -39,9 +40,35 @@
</template>
<script setup lang="ts">
import { watch, computed } from 'vue'
import type { ProjectParams } from 'src/types'
import { useI18n } from 'vue-i18n'
const { t }= useI18n()
const modelValue = defineModel<ProjectParams>({ required: true })
const emit = defineEmits(['valid'])
const rulesErrorMessage = {
name: t('project_card__error_name')
}
const rules = {
name: (val :ProjectParams['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 })
</script>
<style>
.q-field--with-bottom.fix-bottom-padding {
padding-bottom: 0 !important
}
</style>