admin/tgCrewAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2

Browse Source
This commit is contained in:
CCTVcalc
2025-04-14 10:27:58 +03:00
parent f977d6b3d4
commit 7e798a7a83
55 changed files with 5625 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/App.vue
View File

@@ -3,5 +3,24 @@
</template>
<script setup lang="ts">
//
import { inject, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import type { WebApp } from '@twa-dev/types'
import { useTextSizeStore } from './stores/textSize'
const router = useRouter()
const tg = inject('tg') as WebApp
tg.onEvent('settingsButtonClicked', async () => {
await router.push({ name: 'settings' })
})
const textSizeStore = useTextSizeStore()
onMounted(async () => {
try {
await textSizeStore.initialize()
} catch (err) {
console.error('Error load font size:', err)
}
})
</script>

6
src/boot/auth-init.ts Normal file
View File

@@ -0,0 +1,6 @@
import { useAuthStore } from 'stores/auth'
export default async () => {
const authStore = useAuthStore()
await authStore.initialize()
}

27
src/boot/axios.ts
View File

@@ -1,5 +1,6 @@
import { defineBoot } from '#q-app/wrappers';
import axios, { type AxiosInstance } from 'axios';
import { defineBoot } from '#q-app/wrappers'
import axios, { type AxiosInstance } from 'axios'
import { useAuthStore } from 'src/stores/auth'
declare module 'vue' {
interface ComponentCustomProperties {
@@ -14,16 +15,32 @@ declare module 'vue' {
// good idea to move this instance creation inside of the
// "export default () => {}" function below (which runs individually
// for each client)
const api = axios.create({ baseURL: 'https://api.example.com' });
const api = axios.create({
baseURL: '/',
withCredentials: true // Важно для работы с cookies
})
api.interceptors.response.use(
response => response,
async error => {
if (error.response?.status === 401) {
const authStore = useAuthStore()
await authStore.logout()
}
console.error(error)
return Promise.reject(new Error())
}
)
export default defineBoot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios;
app.config.globalProperties.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api;
app.config.globalProperties.$api = api
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
});

36
src/boot/helpers.ts
View File

@@ -1,8 +1,34 @@
export function isObjEqual<Type>(obj1: Type, obj2: Type): boolean {
return obj1 && obj2 && Object.keys(obj1).length === Object.keys(obj2).length &&
(Object.keys(obj1) as (keyof typeof obj1)[]).every(key => {
return Object.prototype.hasOwnProperty.call(obj2, key) && obj1[key] === obj2[key]
})
export function isObjEqual(a: object, b: object): boolean {
// Сравнение примитивов и null/undefined
if (a === b) return true
if (!a || !b) return false
if (Object.keys(a).length !== Object.keys(b).length) return false
// Получаем все уникальные ключи из обоих объектов
const allKeys = new Set([
...Object.keys(a),
...Object.keys(b)
])
// Проверяем каждое свойство
for (const key of allKeys) {
const valA = a[key as keyof typeof a]
const valB = b[key as keyof typeof b]
// Если одно из значений undefined - объекты разные
if (valA === undefined || valB === undefined) return false
// Рекурсивное сравнение для вложенных объектов
if (typeof valA === 'object' && typeof valB === 'object') {
if (!isObjEqual(valA, valB)) return false
}
// Сравнение примитивов
else if (!Object.is(valA, valB)) {
return false
}
}
return true
}
export function parseIntString (s: string | string[] | undefined) :number | null {

18
src/boot/telegram-boot.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { BootParams } from '@quasar/app'
export default ({ app }: BootParams) => {
// Инициализация Telegram WebApp
if (window.Telegram?.WebApp) {
const webApp = window.Telegram.WebApp
// Помечаем приложение как готовое
webApp.ready()
// window.Telegram.WebApp.requestFullscreen()
// Опционально: сохраняем объект в Vue-приложение для глобального доступа
webApp.SettingsButton.isVisible = true
// webApp.BackButton.isVisible = true
app.config.globalProperties.$tg = webApp
// Для TypeScript: объявляем тип для инжекции
app.provide('tg', webApp)
}
}

11
src/components/admin/accountHelper.vue
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>('')

23
src/components/admin/companyInfoBlock.vue
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

4
src/components/admin/login-page/loginLogo.vue
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 {

80
src/components/admin/project-page/ProjectPageChats.vue
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>

73
src/components/admin/project-page/ProjectPageCompanies.vue
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)

53
src/components/admin/project-page/ProjectPageHeader.vue
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>

51
src/components/admin/projectInfoBlock.vue
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>

7
src/css/app.scss
View File

@@ -22,6 +22,13 @@ $base-height: 100;
:root {
--body-width: 600px;
--top-raduis: 12px;
--logo-color-bg-white: grey;
--dynamic-font-size: 16px;
}
#q-app {
padding-bottom: env(safe-area-inset-bottom, 0);
padding-bottom: constant(safe-area-inset-bottom, 0); // Для старых iOS
}
body {

1
src/css/quasar.variables.scss
View File

@@ -26,3 +26,4 @@ $warning : #F2C037;
$lightgrey : #DCDCDC;
$body-font-size: var(--dynamic-font-size)

2
src/i18n/en-US/index.ts
View File

@@ -1 +1 @@
export default { EN: 'EN', RU: 'RU', continue: 'Continue', back: 'Back', month: 'month', months: 'months', login__email: 'E-mail', login__password: 'Password', login__forgot_password: 'Forgot Password?', login__sign_in: 'Log in', login__incorrect_login_data: 'User data not found. Edit your auth details before continuing', login__or_continue_as: 'or continue as', login__terms_of_use: 'Terms of use', login__accept_terms_of_use: 'I accept the', login__register: 'Create account', login__registration_message_ok: 'We sent message with instructions to your email', login__registration_message_error: 'Error', login__licensing_agreement: 'Licensing agreement', login__have_account: 'Already have an accont?', login__forgot_password_message: 'Enter your e-mail to recover your password. We will send instructions to the specified email address. If you havent received the email, check the Spam folder.', login__forgot_password_message_ok: 'We sent message with instructions to your email', login__forgot_password_message_error: 'Error', user__logout: 'Logout', projects__projects: 'Projects', projects__show_archive: 'Show archive', projects__hide_archive: 'Hide archive', projects__restore_archive_warning: 'Attention!', projects__restore_archive_warning_message: 'To restore a project from an archive, you must manually attach chats to it.', project__chats: 'Chats', project__persons: 'Persons', project__companies: 'Companies', project__edit: 'Edit', project__backup: 'Backup', project__archive: 'Archive', project__delete: 'Delete', project_chats__search: 'Search', project_chats__send_chat: 'Request for attach chat', project_chats__send_chat_description: 'Provide instructions to the chat admin', project_chats__attach_chat: 'Attach chat', project_chats__attach_chat_description: 'Requires chat administrator privileges', project_chat__delete_warning: 'Warning!', project_chat__delete_warning_message: 'Chat tracking will be discontinued. If necessary, the cat can be attached again.', project_card__add_project: 'Add project', project_card__project_name: 'Name', project_card__project_description: 'Desription', project_card__btn_accept: 'Accept', project_card__btn_back: 'Back', forgot_password__password_recovery: 'Password recovery', forgot_password__enter_email: 'Enter account e-mail', forgot_password__email: 'E-mail', forgot_password__confirm_email: 'Confirm e-mail', forgot_password__confirm_email_messege: 'Enter the Code from e-mail to continue recover your password. If you haven\'t received an e-mail with the Code, check the Spam folder.', forgot_password__code: 'Code', forgot_password__create_new_password: 'Set new password', forgot_password__password: 'Password', forgot_password__finish: 'Create', account__user_settings: 'User settings', account__your_company: 'Your company', account__change_auth: 'Change authorization method', account__change_auth_message_1: 'In case of corporate use, it is recommended to log in with a username and password.', account__change_auth_message_2: 'After creating a user, all data from the Telegram account will be transferred to the new account.', account__change_auth_btn: 'Create system account', account__change_auth_warning: 'WARNING!', account__change_auth_warning_message: 'Reverse data transfer is not possible.', account__chats: 'Chats', account__chats_active: 'Active', account__chats_archive: 'Archive', account__chats_free: 'Free', account__chats_total: 'Total', account__subscribe: 'Subscribe', account__subscribe_info: 'With a subscription, you can attach more chats. Archived chats are not counted.', account__subscribe_current_balance: 'Current balance', account__subscribe_about: 'about', account__subscribe_select_payment_1: 'You can pay for your subscription using ', account__subscribe_select_payment_2: 'Telegram stars', company__mask: 'Company cloacking', mask__title_table: 'Ignore cloaking', mask__title_table2: '(exclusion list)', mask__help_title: 'Cloacking', mask__help_message: 'It is possible to cloacking a company by representing its personnel as your own to companies other than those on the exclusion list.', company_info__title_card: 'Company card', company_info__name: 'Name', company_info__description: 'Description', company_info__persons: 'Persons', company_create__title_card: 'Add company', project_persons__search: 'Search', person_card__title: 'Person card', person_card__name: 'Name', person_card__company: 'Company name', person_card__department: 'Department', person_card__role: 'Role' }
export default { EN: 'EN', RU: 'RU', continue: 'Continue', back: 'Back', month: 'month', months: 'months', slogan: 'Work together - it\'s magic!', login__email: 'E-mail', login__password: 'Password', login__forgot_password: 'Forgot Password?', login__sign_in: 'Log in', login__incorrect_login_data: 'User data not found. Edit your auth details before continuing', login__or_continue_as: 'or continue as', login__terms_of_use: 'Terms of use', login__accept_terms_of_use: 'I accept the', login__register: 'Create account', login__registration_message_error: 'Error', login__licensing_agreement: 'Licensing agreement', login__have_account: 'Already have an accont?', user__logout: 'Logout', projects__projects: 'Projects', projects__show_archive: 'Show archive', projects__hide_archive: 'Hide archive', projects__restore_archive_warning: 'Attention!', projects__restore_archive_warning_message: 'To restore a project from an archive, you must manually attach chats to it.', project__chats: 'Chats', project__persons: 'Persons', project__companies: 'Companies', project__edit: 'Edit', project__backup: 'Backup', project__archive: 'Archive', project__archive_warning: 'Are you sure?', project__archive_warning_message: 'Chat tracking in the project will be disabled after moving to the archive.', project__delete: 'Delete', project__delete_warning: 'Warning!', project__delete_warning_message: 'All project data will be removed. This action cannot be undone.', project_chats__search: 'Search', project_chats__send_chat: 'Request for attach chat', project_chats__send_chat_description: 'Provide instructions to the chat admin', project_chats__attach_chat: 'Attach chat', project_chats__attach_chat_description: 'Requires chat administrator privileges', project_chat__delete_warning: 'Warning!', project_chat__delete_warning_message: 'Chat tracking will be discontinued. If necessary, the cat can be attached again.', project_card__project_card: 'Project card', project_card__add_project: 'Add project', project_card__project_name: 'Name', project_card__project_description: 'Description', project_card__btn_accept: 'Accept', project_card__btn_back: 'Back', project_card__image_use_as_background_chats: 'logo as background for chats', project_card__error_name: 'Field is required', forgot_password__password_recovery: 'Password recovery', account_helper__enter_email: 'Enter account e-mail', account_helper__email: 'E-mail', account_helper__confirm_email: 'Confirm e-mail', account_helper__confirm_email_message: 'Enter the Code from e-mail to continue recover your password. If you haven\'t received an e-mail with the Code, check the Spam folder.', account_helper__code: 'Code', account_helper__code_error: 'Incorrect code. Ensure your e-mail is correct and try again.', account_helper__set_password: 'Set password', account_helper__password: 'Password', account_helper__finish: 'Finish', account_helper__finish_after_message: 'Done!', account__user_settings: 'User settings', account__your_company: 'Your company', account__change_auth: 'Change authorization method', account__change_auth_message_1: 'In case of corporate use, it is recommended to log in with a username and password.', account__change_auth_message_2: 'After creating a user, all data from the Telegram account will be transferred to the new account.', account__change_auth_btn: 'Create system account', account__change_auth_warning: 'WARNING!', account__change_auth_warning_message: 'Reverse data transfer is not possible.', account__chats: 'Chats', account__chats_active: 'Active', account__chats_archive: 'Archive', account__chats_free: 'Free', account__chats_total: 'Total', account__subscribe: 'Subscribe', account__subscribe_info: 'With a subscription, you can attach more chats. Archived chats are not counted.', account__subscribe_current_balance: 'Current balance', account__subscribe_about: 'about', account__subscribe_select_payment_1: 'You can pay for your subscription using ', account__subscribe_select_payment_2: 'Telegram stars', company__mask: 'Company cloacking', mask__title_table: 'Ignore cloaking', mask__title_table2: '(exclusion list)', mask__help_title: 'Cloacking', mask__help_message: 'It is possible to cloacking a company by representing its personnel as your own to companies other than those on the exclusion list.', company_info__title_card: 'Company card', company_info__name: 'Name', company_info__description: 'Description', company_info__persons: 'Persons', company_create__title_card: 'Add company', project_persons__search: 'Search', person_card__title: 'Person card', person_card__name: 'Name', person_card__company: 'Company name', person_card__department: 'Department', person_card__role: 'Role', settings__title: 'Settings', settings__language: 'Language', settings__font_size: 'Font size', terms__title: 'Terms of use' }

2
src/i18n/ru-RU/index.ts
View File

File diff suppressed because one or more lines are too long

32
src/index copy.ts
View File

@@ -1,32 +0,0 @@
import { defineStore } from '#q-app/wrappers'
import { createPinia } from 'pinia'
/*
* When adding new properties to stores, you should also
* extend the `PiniaCustomProperties` interface.
* @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
*/
declare module 'pinia' {
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface PiniaCustomProperties {
// add your custom properties here, if any
}
}
/*
* If not building with SSR mode, you can
* directly export the Store instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Store instance.
*/
export default defineStore((/* { ssrContext } */) => {
const pinia = createPinia()
// You can add Pinia plugins here
// pinia.use(SomePiniaPlugin)
return pinia
})

21
src/layouts/MainLayout.vue
View File

@@ -4,8 +4,22 @@
fit
class="fit no-scroll bg-transparent"
>
<q-drawer show-if-above side="left" class="drawer no-scroll" :width="drawerWidth" :breakpoint="bodyWidth"/>
<q-drawer show-if-above side="right" class="drawer no-scroll" :width="drawerWidth" :breakpoint="bodyWidth"/>
<q-drawer
v-if="existDrawer"
show-if-above
side="left"
class="drawer no-scroll"
:width="drawerWidth"
:breakpoint="bodyWidth"
/>
<q-drawer
v-if="existDrawer"
show-if-above
side="right"
class="drawer no-scroll"
:width="drawerWidth"
:breakpoint="bodyWidth"
/>
<q-page-container
class="q-pa-none q-ma-none no-scroll bg-transparent page-width"
@@ -20,6 +34,8 @@
<script setup lang="ts">
import { ref } from 'vue'
import meshBackground from '../components/admin/meshBackground.vue'
const existDrawer = ref<boolean>(true)
function getCSSVar (varName: string) {
const root = document.documentElement
return getComputedStyle(root).getPropertyValue(varName).trim()
@@ -30,6 +46,7 @@
function onResize () {
const clientWidth = document.documentElement.clientWidth;
drawerWidth.value = (clientWidth - bodyWidth)/2
existDrawer.value = clientWidth > bodyWidth
}
</script>

132
src/pages/AccountPage.vue
View File

@@ -3,43 +3,63 @@
<template #title>
<div class="flex justify-between items-center text-white q-pa-sm w100">
<div class="flex items-center justify-center row">
<q-avatar size="48px" class="q-mr-xs">
<img src="https://cdn.quasar.dev/img/avatar2.jpg">
<q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
<q-img :src="tgUser.photo_url"/>
</q-avatar>
<div class="flex column">
<span class="q-ml-xs text-h5">
Alex mart
{{
tgUser?.first_name +
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
tgUser?.last_name
}}
</span>
<span class="q-ml-xs text-caption">
@alexmart80
{{ tgUser?.username }}
</span>
</div>
</div>
<q-btn
@click = "goProjects()"
flat round
icon="mdi-check"
/>
</div>
</template>
<pn-scroll-list>
<div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
<div class="text-caption text-bold self-start q-pl-sm q-pb-sm">
{{ $t('account__user_settings') }}
</div>
<div class="flex w100">
<q-input
v-model="company"
dense
filled
class = "q-mb-md q-mr-md col-grow"
:label = "$t('account__your_company')"
/>
<pn-image-selector v-if="company" :size="40" :iconsize="40"/>
<div class="flex w100 justify-between items-center q-pl-sm">
<div class="text-caption text-bold">
{{ $t('account__user_settings') }}</div>
<q-btn
@click = "goProjects()"
flat round
color="primary"
icon="mdi-check"
/>
</div>
<q-transition-group
tag="div"
class="flex w100 company-container"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
appear
>
<template v-if="company">
<pn-image-selector
key="image"
class="q-mr-sm company-logo"
:size="40"
:iconsize="40"
/>
</template>
<q-input
key="input"
v-model="company"
dense
filled
class="q-mb-md col-grow company-input"
:label="$t('account__your_company')"
:style="{ marginLeft: !company ? '0' : '48px', transition: 'all 0.3s' }"
/>
</q-transition-group>
<q-expansion-item
dense
id="warning"
@@ -78,7 +98,6 @@
<div id="qty_chats" class="flex column q-pt-lg w100 q-pl-sm">
<div class="text-caption text-bold flex items-center">
<span>{{ $t('account__chats') }}</span>
<q-icon name = "mdi-message-outline" class="q-ma-xs"/>
</div>
<div class="flex row justify-between">
<qty-chat-card
@@ -95,54 +114,42 @@
<div class="text-caption text-bold">
{{ $t('account__subscribe') }}
</div>
<div
class="bg-info q-pa-sm text-white"
:style="{ borderRadius: '5px' }"
>
<q-item class="q-pa-none q-ma-none">
<q-item class="q-pa-sm text-caption">
<q-item-section
avatar
class="q-pr-none"
:style="{ minWidth: 'inherit !important' }"
>
<q-icon name = "mdi-message-plus-outline" size="md"/>
<q-icon name = "mdi-crown-circle-outline" color="orange" size="md"/>
</q-item-section>
<q-item-section class="q-pl-sm">
<span>{{ $t('account__subscribe_info') }}</span>
<span>{{ $t('account__subscribe_select_payment_1') }}</span>
<q-icon name = "mdi-star" class="text-orange" size="sm"/>
<span>{{ $t('account__subscribe_select_payment_2') }}</span>
</q-item-section>
</q-item>
</div>
<div class="flex w100 justify-between items-center no-wrap q-pt-sm">
<div class="flex column">
<div>
{{ $t('account__subscribe_current_balance') }}
</div>
<div class="text-caption text-grey">
{{ $t('account__subscribe_about') }} 3 {{ $t('months') }}
</div>
</div>
<div class="flex items-center">
<div class="text-bold q-pa-sm text-h6">
<q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
<div class="text-bold q-pa-xs text-h6">
50
</div>
<span class="text-grey">
<q-icon name = "mdi-message-outline"/>
<q-icon name = "mdi-close"/>
<span>
{{ $t('month') }}
</span>
</span>
</div>
</div>
<div id="payment-selector">
<div class="q-py-sm">
<span>{{ $t('account__subscribe_select_payment_1') }}</span>
<q-icon name = "mdi-star" class="text-orange" size="sm"/>
<span>{{ $t('account__subscribe_select_payment_2') }}</span>
</div>
<q-list>
<q-item
@@ -199,16 +206,21 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, inject } from 'vue'
import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
import optionPayment from 'components/admin/account-page/optionPayment.vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from 'stores/auth'
import type { WebApp } from '@twa-dev/types'
const router = useRouter()
const authStore = useAuthStore()
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
const company = ref<string>('')
const showChangeAuthDialog = ref<boolean>(false)
const chats = ref([
{ title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
{ title: 'account__chats_archive', qty: 2, color: 'grey' },
@@ -225,6 +237,7 @@
async function change_auth () {
console.log('update')
console.log(authStore)
await router.push({ name: 'login' })
}
@@ -232,7 +245,6 @@
await router.push({ name: 'projects' })
}
</script>
<style lang="scss">
@@ -241,6 +253,24 @@
padding: 0 !important;
}
}
</style>
<style scoped>
.company-container {
position: relative;
overflow: hidden;
min-height: 60px;
}
.company-logo {
position: absolute;
left: 0;
z-index: 1;
}
:deep(.animate__animated) {
--animate-duration: 0.4s;
animation-fill-mode: both;
}
</style>

52
src/pages/CompanyInfoPage.vue
View File

@@ -6,35 +6,69 @@
{{$t('company_info__title_card')}}
</div>
<q-btn
v-if="!isObjEqual<Company | undefined>(companyFromStore, companyMod)"
@click = "companiesStore.updateCompany(companyId, companyMod)"
v-if="isFormValid && isDirty()"
@click = "updateCompany()"
flat round
icon="mdi-check"
/>
</div>
</template>
<pn-scroll-list>
<company-info-block v-model="companyMod"/>
<company-info-block
v-if="company"
v-model="company"
@valid="isFormValid = $event"
/>
<company-info-persons/>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
import companyInfoPersons from 'components/admin/companyInfoPersons.vue'
import { useCompaniesStore } from 'stores/companies'
import type { Company } from 'src/types'
import { isObjEqual } from 'boot/helpers'
import { parseIntString, isObjEqual } from 'boot/helpers'
const router = useRouter()
const route = useRoute()
const companiesStore = useCompaniesStore()
const companyId = Number(route.params.id)
const companyFromStore = companiesStore.companyById(companyId)
const companyMod = ref({...(companyFromStore ? companyFromStore : <Company>{})})
const company = ref<Company>()
const companyId = parseIntString(route.params.companyId)
const isFormValid = ref(false)
const originalCompany = ref<Company>({} as Company)
const isDirty = () => {
return company.value && !isObjEqual(originalCompany.value, company.value)
}
onMounted(async () => {
if (companyId && companiesStore.companyById(companyId)) {
const initial = companiesStore.companyById(companyId)
company.value = { ...initial } as Company
originalCompany.value = JSON.parse(JSON.stringify(company.value))
} else {
await abort()
}
})
function updateCompany () {
if (companyId && company.value) {
companiesStore.updateCompany(companyId, company.value)
router.back()
}
}
async function abort () {
await router.replace({name: 'projects'})
}
</script>

6
src/pages/CreateAccountPage.vue
View File

@@ -2,10 +2,12 @@
<pn-page-card>
<template #title>
<div class="col-grow">
{{$t('create_account')}}
{{$t('login__register')}}
</div>
</template>
<account-helper :type />
<pn-scroll-list>
<account-helper :type />
</pn-scroll-list>
</pn-page-card>
</template>

26
src/pages/CreateProjectPage.vue
View File

@@ -6,7 +6,7 @@
{{$t('project_card__add_project')}}
</div>
<q-btn
v-if="(Object.keys(project).length !== 0)"
v-if="isFormValid && isDirty"
@click = "addProject(project)"
flat round
icon="mdi-check"
@@ -14,13 +14,16 @@
</div>
</template>
<pn-scroll-list>
<project-info-block v-model="project"/>
<project-info-block
v-model="project"
@valid="isFormValid = $event"
/>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
import { useProjectsStore } from 'stores/projects'
@@ -29,13 +32,26 @@
const router = useRouter()
const projectsStore = useProjectsStore()
const project = ref<ProjectParams>({
const initialProject: ProjectParams = {
name: '',
logo: '',
description: '',
logo_as_bg: false
})
}
const project = ref<ProjectParams>({ ...initialProject })
const isFormValid = ref(false)
const isDirty = computed(() => {
return (
project.value.name !== initialProject.name ||
project.value.logo !== initialProject.logo ||
project.value.description !== initialProject.description ||
project.value.logo_as_bg !== initialProject.logo_as_bg
)
})
async function addProject (data: ProjectParams) {
const newProject = projectsStore.addProject(data)
await router.push({name: 'chats', params: { id: newProject.id}})

9
src/pages/ForgotPasswordPage.vue
View File

@@ -5,11 +5,18 @@
{{$t('forgot_password__password_recovery')}}
</div>
</template>
<account-helper :type />
<pn-scroll-list>
<account-helper :type :email="email"/>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router' // Добавляем импорт
import accountHelper from 'components/admin/accountHelper.vue'
const route = useRoute()
const type = 'forgot'
const email = ref(route.query.email as string)
</script>

66
src/pages/LoginPage.vue
View File

@@ -1,6 +1,5 @@
<template>
<q-page class="flex column items-center justify-between">
<q-card
id="login_block"
flat
@@ -9,7 +8,7 @@
<login-logo
class="col-grow q-pa-md"
:style="{ alignItems: 'flex-end' }"
/>
/>
<div class = "q-ma-md flex column input-login">
<q-input
@@ -18,7 +17,6 @@
filled
class = "q-mb-md"
:label = "$t('login__email')"
:rules="['email']"
/>
<q-input
@@ -71,6 +69,7 @@
</div>
<div
v-if="isTelegramApp"
id="alt_login"
class="w80 q-flex column items-center q-pt-xl"
>
@@ -85,11 +84,18 @@
no-caps
color="primary"
:disabled="!acceptTermsOfUse"
@click="handleTelegramLogin"
>
<span class="text-blue">
<div class="flex items-center text-blue">
<q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
Alex mart
</span>
<div class="q-ml-xs ellipsis" style="max-width: 100px">
{{
tgUser?.first_name +
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
tgUser?.last_name
}}
</div>
</div>
</q-btn>
</div>
</q-card>
@@ -114,22 +120,36 @@
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ref, computed, inject } from 'vue'
import { useQuasar } from 'quasar'
import { useRouter } from 'vue-router'
import loginLogo from 'components/admin/login-page/loginLogo.vue'
// import { useI18n } from "vue-i18n"
import { useI18n } from "vue-i18n"
import { useAuthStore } from 'src/stores/auth'
import type { WebApp } from '@twa-dev/types'
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
const authStore = useAuthStore()
const router = useRouter()
// const { t } = useI18n()
const $q = useQuasar()
const { t } = useI18n()
const login = ref<string>('')
const password = ref<string>('')
const isPwd = ref<boolean>(true)
const acceptTermsOfUse = ref<boolean>(true)
/* function rules () :Record<string, Array<(value: string) => boolean | string>> {
return {
email: [value => (value.length <= 25) || t('login__incorrect_email')]}
} */
function onErrorLogin () {
$q.notify({
message: t('login__incorrect_login_data'),
type: 'negative',
position: 'bottom',
timeout: 2000,
multiLine: true
})
}
async function sendAuth() {
console.log('1')
@@ -137,12 +157,30 @@
}
async function forgotPwd() {
await router.push({ name: 'forgot_password' })
await router.push({
name: 'recovery_password',
query: { email: login.value }
})
}
async function createAccount() {
await router.push({ name: 'create_account' })
}
const isTelegramApp = computed(() => {
// @ts-expect-ignore
return !!window.Telegram?.WebApp?.initData
})
/* const handleSubmit = async () => {
await authStore.loginWithCredentials(email.value, password.value)
} */
async function handleTelegramLogin () {
// @ts-expect-ignore
const initData = window.Telegram.WebApp.initData
await authStore.loginWithTelegram(initData)
}
</script>

107
src/pages/PersonInfoPage.vue
View File

@@ -14,70 +14,71 @@
</template>
<pn-scroll-list>
<div class="flex column">
<div class="flex column items-center col-grow q-pa-lg">
<div class="flex column items-center q-ma-lg">
<q-avatar size="100px">
<q-img :src="person.logo"/>
</q-avatar>
<div class="flex row items-start justify-center no-wrap">
<div class="flex row items-start justify-center no-wrap q-pb-lg">
<div class="flex column justify-center">
<div class="text-bold q-pr-xs text-center">{{ person.tname }}</div>
<div caption class="text-blue text-caption">{{ person.tusername }}</div>
</div>
</div>
<q-input
v-model="person.name"
dense
filled
class = "q-my-sm w100"
:label = "$t('person_card__name')"
/>
<div class="q-gutter-y-lg w100">
<q-input
v-model="person.name"
dense
filled
class = "w100"
:label = "$t('person_card__name')"
/>
<q-select
v-if="companies"
v-model="person.company"
:options="companies"
dense
filled
class="q-my-sm w100"
:label = "$t('person_card__company')"
>
<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>
<template v-slot:selected>
{{ JSON.parse(JSON.stringify(person.company)).name }}
</template>
</q-select>
<q-select
v-if="companies"
v-model="person.company"
:options="companies"
dense
filled
class="w100"
:label = "$t('person_card__company')"
>
<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>
<template #selected>
{{ JSON.parse(JSON.stringify(person.company)).name }}
</template>
</q-select>
<q-input
v-model="person.department"
dense
filled
class = "q-my-sm w100"
:label = "$t('person_card__department')"
/>
<q-input
v-model="person.department"
dense
filled
class = "w100"
:label = "$t('person_card__department')"
/>
<q-input
v-model="person.role"
dense
filled
class = "q-my-sm w100"
:label = "$t('person_card__role')"
/>
</div>
<q-input
v-model="person.role"
dense
filled
class = "w100"
:label = "$t('person_card__role')"
/>
</div>
</div>
</pn-scroll-list>
</pn-page-card>
@@ -108,5 +109,5 @@
}
</script>
<style lang="scss">
<style>
</style>

33
src/pages/ProjectInfoPage.vue
View File

@@ -1,5 +1,4 @@
<template>
>>{{ project }}
<pn-page-card>
<template #title>
<div class="flex items-center justify-between col-grow">
@@ -7,6 +6,7 @@
<span>{{ $t('project_card__project_card') }}</span>
</div>
<q-btn
v-if="isFormValid && isDirty()"
@click="updateProject()"
flat
round
@@ -16,7 +16,11 @@
</template>
<pn-scroll-list>
<project-info-block v-if="project" v-model="project"/>
<project-info-block
v-if="project"
v-model="project"
@valid="isFormValid = $event"
/>
</pn-scroll-list>
</pn-page-card>
</template>
@@ -27,9 +31,7 @@ import { useRouter, useRoute } from 'vue-router'
import { useProjectsStore } from 'stores/projects'
import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
import type { Project } from '../types'
import { parseIntString } from 'boot/helpers'
// import { isObjEqual } from '../boot/helpers'
import { parseIntString, isObjEqual } from 'boot/helpers'
const router = useRouter()
const route = useRoute()
@@ -38,12 +40,23 @@ const projectsStore = useProjectsStore()
const project = ref<Project>()
const id = parseIntString(route.params.id)
const isFormValid = ref(false)
const originalProject = ref<Project>({} as Project)
const isDirty = () => {
return project.value && !isObjEqual(originalProject.value, project.value)
}
onMounted(async () => {
if (id && projectsStore.projectById(id)) {
project.value = projectsStore.projectById(id)
} else {
await abort()
}
if (id && projectsStore.projectById(id)) {
const initial = projectsStore.projectById(id)
project.value = { ...initial } as Project
originalProject.value = JSON.parse(JSON.stringify(project.value))
} else {
await abort()
}
})
function updateProject () {

5
src/pages/ProjectPage.vue
View File

@@ -27,7 +27,6 @@
v-model="tabSelect"
dense
align="justify"
switch-indicator
>
<q-route-tab
v-for="tab in tabs"
@@ -50,7 +49,7 @@
{{ currentProject?.[tab.name as keyof typeof currentProject] ?? 0 }}
</q-badge>
</q-icon>
<span>{{$t(tab.label)}}</span>
<span class="text-caption">{{$t(tab.label)}}</span>
</div>
</template>
</q-route-tab>
@@ -78,7 +77,7 @@
}
const tabs = [
{name: 'chats', label: 'project__chats', icon: 'mdi-message-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
{name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
{name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', component: tabComponents.projectPagePersons, to: { name: 'persons'} },
{name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
]

47
src/pages/ProjectsPage.vue
View File

@@ -15,11 +15,15 @@
dense
>
<div class="flex items-center">
<q-avatar size="32px">
<img src="https://cdn.quasar.dev/img/avatar2.jpg">
<q-avatar v-if="tgUser?.photo_url" size="32px">
<q-img :src="tgUser.photo_url"/>
</q-avatar>
<div class="q-ml-xs ellipsis" style="max-width: 100px">
Alex mart
{{
tgUser?.first_name +
(tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
tgUser?.last_name
}}
</div>
</div>
</q-btn>
@@ -62,28 +66,25 @@
<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-message-outline" class="q-mr-sm"/>
<span>{{ item.chats }} </span>
</div>
<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-account-group-outline" class="q-mr-sm"/>
<span>{{ item.companies }} </span>
</div>
</div>
</q-item-label>
</q-item-section>
<q-item-section side class="text-caption ">
<div class="flex items-center column">
<div class="flex items-center">
<q-icon name="mdi-chat-outline"/>
<span>{{ item.chats }} </span>
</div>
<div class="flex items-center">
<q-icon name="mdi-account-outline"/>
<span>{{ item.persons }}</span>
</div>
</div>
</q-item-section>
</q-item>
</q-list>
<div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
<div id="btn_show_archive">
<q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_down">
<q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
<template #label>
<span class="text-caption">
<span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
@@ -159,9 +160,13 @@
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ref, computed, watch, inject } from 'vue'
import { useRouter } from 'vue-router'
import { useProjectsStore } from 'stores/projects'
import type { WebApp } from '@twa-dev/types'
const tg = inject('tg') as WebApp
const tgUser = tg.initDataUnsafe.user
const router = useRouter()
const projectsStore = useProjectsStore()

93
src/pages/SettingsPage.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<pn-page-card>
<template #title>
<div class="flex items-center justify-between col-grow">
<div>
{{ $t('settings__title') }}
</div>
</div>
</template>
<pn-scroll-list>
<q-list separator>
<q-item>
<q-item-section avatar>
<q-avatar color="primary" rounded text-color="white" icon="mdi-translate" size="md" />
</q-item-section>
<q-item-section>
<span>{{ $t('settings__language') }}</span>
</q-item-section>
<q-item-section>
<q-select
class="fix-input-right text-body1"
v-model="locale"
:options="localeOptions"
dense
borderless
emit-value
map-options
hide-bottom-space
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-avatar color="primary" rounded text-color="white" icon="mdi-format-size" size="md" />
</q-item-section>
<q-item-section>
<span>{{ $t('settings__font_size') }}</span>
</q-item-section>
<q-item-section>
<div class="flex justify-end">
<q-btn
@click="textSizeStore.decreaseFontSize()"
color="negative" flat
icon="mdi-format-font-size-decrease"
class="q-pa-sm q-mx-xs"
:disable="currentTextSize <= minTextSize"
/>
<q-btn
@click="textSizeStore.increaseFontSize()"
color="positive" flat
icon="mdi-format-font-size-increase"
class="q-pa-sm q-mx-xs"
:disable="currentTextSize >= maxTextSize"
/>
</div>
</q-item-section>
</q-item>
</q-list>
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { watch, ref } from 'vue'
import { useTextSizeStore } from 'src/stores/textSize'
const { locale } = useI18n()
const savedLocale = localStorage.getItem('locale') || 'en-US'
locale.value = savedLocale
const localeOptions = ref([
{ value: 'en-US', label: 'English' },
{ value: 'ru-RU', label: 'Русский' }
])
watch(locale, (newLocale) => {
localStorage.setItem('locale', newLocale)
})
const textSizeStore = useTextSizeStore()
const currentTextSize = textSizeStore.currentFontSize
const maxTextSize = textSizeStore.maxFontSize
const minTextSize = textSizeStore.minFontSize
</script>
<style scoped>
.fix-input-right :deep(.q-field__native) {
justify-content: end;
}
</style>

22
src/pages/TermsPage.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<pn-page-card>
<template #title>
<div class="flex items-center justify-between col-grow">
<div>
{{ $t('terms__title') }}
</div>
</div>
</template>
<pn-scroll-list>
Фигня которую никто не читает!
</pn-scroll-list>
</pn-page-card>
</template>
<script setup lang="ts">
</script>
<style>
</style>

57
src/router/index.ts
View File

@@ -6,7 +6,8 @@ import {
createWebHistory,
} from 'vue-router'
import routes from './routes'
import { useProjectsStore } from '../stores/projects'
import { useAuthStore } from 'stores/auth'
import { useProjectsStore } from 'stores/projects'
/*
* If not building with SSR mode, you can
@@ -31,8 +32,62 @@ export default defineRouter(function (/* { store, ssrContext } */) {
// quasar.conf.js -> build -> publicPath
history: createHistory(process.env.VUE_ROUTER_BASE),
})
const publicPaths = ['/login', '/terms-of-use', '/create-account', '/recovery-password']
Router.beforeEach(async (to) => {
const authStore = useAuthStore()
// Инициализация хранилища перед проверкой
if (!authStore.isInitialized) {
await authStore.initialize()
}
// Проверка авторизации для непубличных маршрутов
if (!publicPaths.includes(to.path)) {
if (!authStore.isAuthenticated) {
return {
path: '/login',
query: { redirect: to.fullPath }
}
}
}
// Редирект авторизованных пользователей с публичных маршрутов
if (publicPaths.includes(to.path) && authStore.isAuthenticated) {
return { path: '/' }
}
})
const handleBackButton = async () => {
const currentRoute = Router.currentRoute.value
if (currentRoute.meta.backRoute) {
await Router.push(currentRoute.meta.backRoute);
} else {
if (window.history.length > 1) {
Router.go(-1)
} else {
await Router.push('/projects')
}
}
}
Router.afterEach((to) => {
const BackButton = window.Telegram?.WebApp?.BackButton;
if (BackButton) {
// Управление видимостью
if (to.meta.hideBackButton) {
BackButton.hide()
} else {
BackButton.show()
}
// Обновляем обработчик клика
BackButton.offClick(handleBackButton as () => void)
BackButton.onClick(handleBackButton as () => void)
}
if (!to.params.id) {
const projectsStore = useProjectsStore()
projectsStore.setCurrentProjectId(null)

54
src/router/routes.ts
View File

@@ -21,7 +21,8 @@ const routes: RouteRecordRaw[] = [
{
name: 'projects',
path: '/projects',
component: () => import('pages/ProjectsPage.vue')
component: () => import('pages/ProjectsPage.vue'),
meta: { hideBackButton: true }
},
{
name: 'project_add',
@@ -55,48 +56,81 @@ const routes: RouteRecordRaw[] = [
{
name: 'chats',
path: 'chats',
component: () => import('../components/admin/project-page/ProjectPageChats.vue')
component: () => import('components/admin/project-page/ProjectPageChats.vue'),
meta: { backRoute: '/projects' }
},
{
name: 'persons',
path: 'persons',
component: () => import('../components/admin/project-page/ProjectPagePersons.vue')
component: () => import('components/admin/project-page/ProjectPagePersons.vue'),
meta: { backRoute: '/projects' }
},
{
name: 'companies',
path: 'companies',
component: () => import('../components/admin/project-page/ProjectPageCompanies.vue')
component: () => import('components/admin/project-page/ProjectPageCompanies.vue'),
meta: { backRoute: '/projects' }
}
]
},
{
path: '/account',
name: 'company_info',
path: '/project/:id(\\d+)/company/:companyId',
component: () => import('pages/CompanyInfoPage.vue'),
beforeEnter: setProjectBeforeEnter
},
{
name: 'person_info',
path: '/project/:id(\\d+)/person/:personId',
component: () => import('pages/PersonInfoPage.vue'),
beforeEnter: setProjectBeforeEnter
},
{
name: 'account',
path: '/account',
component: () => import('pages/AccountPage.vue')
},
{
name: 'create_account',
path: '/create-account',
component: () => import('pages/CreateAccountPage.vue')
},
{
path: '/login',
name: 'login',
path: '/login',
component: () => import('pages/LoginPage.vue')
},
{
path: '/recovery-password',
name: 'recovery_password',
path: '/recovery-password',
component: () => import('pages/ForgotPasswordPage.vue')
},
{
path: '/create-company',
name: 'create_company',
name: 'add_company',
path: '/add-company',
component: () => import('pages/CreateCompanyPage.vue')
},
{
path: '/person-info',
name: 'person_info',
path: '/person-info',
component: () => import('pages/PersonInfoPage.vue')
},
{
name: 'settings',
path: '/settings',
component: () => import('pages/SettingsPage.vue')
},
{
name: 'terms',
path: '/terms-of-use',
component: () => import('pages/TermsPage.vue')
}
]
},

65
src/stores/auth.ts Normal file
View File

@@ -0,0 +1,65 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { api } from 'boot/axios'
interface User {
id: string
email?: string
username: string
first_name?: string
last_name?: string
avatar?: string
}
export const useAuthStore = defineStore('auth', () => {
// State
const user = ref<User | null>(null)
const isInitialized = ref(false)
// Getters
const isAuthenticated = computed(() => !!user.value)
// Actions
const initialize = async () => {
try {
const { data } = await api.get('/customer/profile')
user.value = data
} catch (error) {
console.error(error)
user.value = null
} finally {
isInitialized.value = true
}
}
const loginWithCredentials = async (email: string, password: string) => {
// будет переделано на беке - нужно сменить урл
await api.post('/api/admin/customer/login', { email, password }, { withCredentials: true })
await initialize()
}
const loginWithTelegram = async (initData: string) => {
await api.post('/api/admin/customer/login', { initData }, { withCredentials: true })
await initialize()
}
const logout = async () => {
try {
await api.get('/customer/logout', {})
} finally {
user.value = null
// @ts-expect-ignore
// window.Telegram?.WebApp.close()
}
}
return {
user,
isAuthenticated,
isInitialized,
initialize,
loginWithCredentials,
loginWithTelegram,
logout
}
})

121
src/stores/textSize.ts Normal file
View File

@@ -0,0 +1,121 @@
import { api } from 'boot/axios'
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
interface FontSizeResponse {
fontSize: number
}
interface FontSizeError {
message: string
code: number
}
export const useTextSizeStore = defineStore('textSize', () => {
// State
const baseSize = ref<number>(16) // Значение по умолчанию
const isLoading = ref<boolean>(false)
const error = ref<FontSizeError | null>(null)
const isInitialized = ref<boolean>(false)
// Константы
const minFontSize = 12
const maxFontSize = 20
const fontSizeStep = 2
// Getters
const currentFontSize = computed(() => baseSize.value)
const canIncrease = computed(() => baseSize.value < maxFontSize)
const canDecrease = computed(() => baseSize.value > minFontSize)
// Actions
const fetchFontSize = async () => {
try {
isLoading.value = true
const response = await api.get<FontSizeResponse>('customer/settings')
baseSize.value = clampFontSize(response.data.fontSize)
updateCssVariable()
} catch (err) {
handleError(err, 'Failed to fetch font size')
baseSize.value = 16 // Fallback к значению по умолчанию
throw err
} finally {
isLoading.value = false
}
}
const updateFontSize = async (newSize: number) => {
try {
const validatedSize = clampFontSize(newSize)
await api.put('customer/settings', { fontSize: validatedSize })
baseSize.value = validatedSize
updateCssVariable()
error.value = null
} catch (err) {
handleError(err, 'Failed to update font size')
throw err
}
}
const increaseFontSize = async () => {
if (!canIncrease.value) return
await updateFontSize(baseSize.value + fontSizeStep)
}
const decreaseFontSize = async () => {
if (!canDecrease.value) return
await updateFontSize(baseSize.value - fontSizeStep)
}
// Helpers
const clampFontSize = (size: number): number => {
return Math.max(minFontSize, Math.min(size, maxFontSize))
}
const updateCssVariable = () => {
document.documentElement.style.setProperty(
'--dynamic-font-size',
`${baseSize.value}px`
)
}
const handleError = (err: unknown, defaultMessage: string) => {
const apiError = err as { response?: { data: { message: string; code: number } } }
error.value = {
message: apiError?.response?.data?.message || defaultMessage,
code: apiError?.response?.data?.code || 500
}
console.error('FontSize Error:', error.value)
}
// Инициализация при первом использовании
const initialize = async () => {
if (isInitialized.value) return
try {
await fetchFontSize()
} catch {
// Оставляем значение по умолчанию
} finally {
isInitialized.value = true
}
}
return {
baseSize,
currentFontSize,
minFontSize,
maxFontSize,
isLoading,
error,
canIncrease,
canDecrease,
fetchFontSize,
increaseFontSize,
decreaseFontSize,
updateFontSize,
initialize
}
})

10
src/types.ts
View File

@@ -1,3 +1,13 @@
import type { WebApp } from "@twa-dev/types"
declare global {
interface Window {
Telegram: {
WebApp: WebApp
}
}
}
interface ProjectParams {
name: string
description?: string