v2
This commit is contained in:
@@ -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>('')
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user