first commit
This commit is contained in:
7
src/App.vue
Normal file
7
src/App.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<router-view/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
//
|
||||
</script>
|
||||
63
src/assets/pN-logo-2.svg
Normal file
63
src/assets/pN-logo-2.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
id="layer1">
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.233149"
|
||||
id="rect5"
|
||||
width="6.9885192"
|
||||
height="0.35581663"
|
||||
x="3.114475"
|
||||
y="0.86827624"
|
||||
transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.24961"
|
||||
id="rect5-7"
|
||||
width="7.4819207"
|
||||
height="0.3809379"
|
||||
x="-3.9267058"
|
||||
y="5.7988153"
|
||||
transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.134869"
|
||||
id="path5-8"
|
||||
cx="1.5875"
|
||||
cy="6.8791666"
|
||||
r="1.0583333" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.168586"
|
||||
id="path5-8-5"
|
||||
cx="7.1437502"
|
||||
cy="7.1437502"
|
||||
r="1.3229166" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.118011"
|
||||
id="path5-8-5-1"
|
||||
cx="1.4552083"
|
||||
cy="2.5135417"
|
||||
r="0.92604166" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.101152"
|
||||
id="path5-8-5-1-7"
|
||||
cx="7.1437502"
|
||||
cy="1.3229166"
|
||||
r="0.79374999" />
|
||||
<circle
|
||||
style="fill:var(--base-color);stroke-width:0.23602"
|
||||
id="path5"
|
||||
cx="3.96875"
|
||||
cy="4.4979167"
|
||||
r="1.8520833" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
58
src/assets/pN-logo-3.svg
Normal file
58
src/assets/pN-logo-3.svg
Normal file
@@ -0,0 +1,58 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.233149"
|
||||
id="rect5"
|
||||
width="6.9885192"
|
||||
height="0.35581663"
|
||||
x="3.114475"
|
||||
y="0.86827624"
|
||||
transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:0.24961"
|
||||
id="rect5-7"
|
||||
width="7.4819207"
|
||||
height="0.3809379"
|
||||
x="-3.9267058"
|
||||
y="5.7988153"
|
||||
transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.134869"
|
||||
id="path5-8"
|
||||
cx="1.5875"
|
||||
cy="6.8791666"
|
||||
r="1.0583333" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.168586"
|
||||
id="path5-8-5"
|
||||
cx="7.1437502"
|
||||
cy="7.1437502"
|
||||
r="1.3229166" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.118011"
|
||||
id="path5-8-5-1"
|
||||
cx="1.4552083"
|
||||
cy="2.5135417"
|
||||
r="0.92604166" />
|
||||
<circle
|
||||
style="fill:#000000;stroke-width:0.101152"
|
||||
id="path5-8-5-1-7"
|
||||
cx="7.1437502"
|
||||
cy="1.3229166"
|
||||
r="0.79374999" />
|
||||
<circle
|
||||
style="fill:var(--base-color);stroke-width:0.23602"
|
||||
id="path5"
|
||||
cx="3.96875"
|
||||
cy="4.4979167"
|
||||
r="1.8520833" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
87
src/assets/pN-logo.svg
Normal file
87
src/assets/pN-logo.svg
Normal file
@@ -0,0 +1,87 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4 (86a8ad7, 2024-10-11)"
|
||||
sodipodi:docname="pN-1.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="true"
|
||||
inkscape:zoom="15.78348"
|
||||
inkscape:cx="8.0780662"
|
||||
inkscape:cy="19.672467"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1001"
|
||||
inkscape:window-x="-9"
|
||||
inkscape:window-y="-9"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1">
|
||||
<inkscape:grid
|
||||
id="grid5"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="0.26458332"
|
||||
spacingy="0.26458332"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="2"
|
||||
enabled="true"
|
||||
visible="true" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Слой 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<path
|
||||
id="rect5"
|
||||
style="fill:#00d400;stroke-width:0.233149"
|
||||
d="M 5.4832926 -3.3867493 L 5.7392718 -0.88528268 A 2.075472 1.6881261 45 0 0 4.6544407 -0.46135405 A 2.075472 1.6881261 45 0 0 4.2505334 0.86798056 L 3.1143835 0.86822985 L 3.114654 1.2242079 L 4.3268544 1.2240716 A 2.075472 1.6881261 45 0 0 4.9283355 2.1999117 A 2.075472 1.6881261 45 0 0 6.1216465 2.8549985 L 6.2608319 4.214514 L 6.6480286 4.2539966 L 6.5088433 2.894481 A 2.075472 1.6881261 45 0 0 7.5896013 2.4738066 A 2.075472 1.6881261 45 0 0 8.0016857 1.2239238 L 10.102884 1.2241825 L 10.103023 0.86861392 L 7.9375784 0.86872246 A 2.075472 1.6881261 45 0 0 7.3157064 -0.18745917 A 2.075472 1.6881261 45 0 0 6.1262119 -0.8447245 L 5.8704894 -3.3472668 L 5.4832926 -3.3867493 z "
|
||||
transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)" />
|
||||
<circle
|
||||
style="fill:#ff0000;stroke-width:0.134869"
|
||||
id="path5-8"
|
||||
cx="1.5875"
|
||||
cy="6.8791666"
|
||||
r="1.0583333" />
|
||||
<circle
|
||||
style="fill:#ff0000;stroke-width:0.168586"
|
||||
id="path5-8-5"
|
||||
cx="7.1437502"
|
||||
cy="7.1437502"
|
||||
r="1.3229166" />
|
||||
<circle
|
||||
style="fill:#ff0000;stroke-width:0.118011"
|
||||
id="path5-8-5-1"
|
||||
cx="1.4552083"
|
||||
cy="2.5135417"
|
||||
r="0.92604166" />
|
||||
<circle
|
||||
style="fill:#ff0000;stroke-width:0.101152"
|
||||
id="path5-8-5-1-7"
|
||||
cx="7.1437502"
|
||||
cy="1.3229166"
|
||||
r="0.79374999" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
0
src/boot/.gitkeep
Normal file
0
src/boot/.gitkeep
Normal file
31
src/boot/axios.ts
Normal file
31
src/boot/axios.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { defineBoot } from '#q-app/wrappers';
|
||||
import axios, { type AxiosInstance } from 'axios';
|
||||
|
||||
declare module 'vue' {
|
||||
interface ComponentCustomProperties {
|
||||
$axios: AxiosInstance;
|
||||
$api: AxiosInstance;
|
||||
}
|
||||
}
|
||||
|
||||
// Be careful when using SSR for cross-request state pollution
|
||||
// due to creating a Singleton instance here;
|
||||
// If any client changes this (global) instance, it might be a
|
||||
// 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' });
|
||||
|
||||
export default defineBoot(({ app }) => {
|
||||
// for use inside Vue files (Options API) through this.$axios and this.$api
|
||||
|
||||
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;
|
||||
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
|
||||
// so you can easily perform requests against your app's API
|
||||
});
|
||||
|
||||
export { api };
|
||||
14
src/boot/global-components.ts
Normal file
14
src/boot/global-components.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { boot } from 'quasar/wrappers'
|
||||
import pnPageCard from '../components/admin/pnPageCard.vue'
|
||||
import pnScrollList from '../components/admin/pnScrollList.vue'
|
||||
import pnAutoAvatar from '../components/admin/pnAutoAvatar.vue'
|
||||
import pnOverlay from '../components/admin/pnOverlay.vue'
|
||||
import pnImageSelector from '../components/admin/pnImageSelector.vue'
|
||||
|
||||
export default boot(async ({ app }) => { // eslint-disable-line
|
||||
app.component('pnPageCard', pnPageCard)
|
||||
app.component('pnScrollList', pnScrollList)
|
||||
app.component('pnAutoAvatar', pnAutoAvatar)
|
||||
app.component('pnOverlay', pnOverlay)
|
||||
app.component('pnImageSelector', pnImageSelector)
|
||||
})
|
||||
12
src/boot/helpers.ts
Normal file
12
src/boot/helpers.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
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 parseIntString (s: string | string[] | undefined) :number | null {
|
||||
if (typeof s !== 'string') return null
|
||||
const regex = /^[+-]?\d+$/
|
||||
return regex.test(s) ? Number(s) : null
|
||||
}
|
||||
33
src/boot/i18n.ts
Normal file
33
src/boot/i18n.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { defineBoot } from '#q-app/wrappers';
|
||||
import { createI18n } from 'vue-i18n';
|
||||
|
||||
import messages from 'src/i18n';
|
||||
|
||||
export type MessageLanguages = keyof typeof messages;
|
||||
// Type-define 'en-US' as the master schema for the resource
|
||||
export type MessageSchema = typeof messages['en-US'];
|
||||
|
||||
// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
|
||||
/* eslint-disable @typescript-eslint/no-empty-object-type */
|
||||
declare module 'vue-i18n' {
|
||||
// define the locale messages schema
|
||||
export interface DefineLocaleMessage extends MessageSchema {}
|
||||
|
||||
// define the datetime format schema
|
||||
export interface DefineDateTimeFormat {}
|
||||
|
||||
// define the number format schema
|
||||
export interface DefineNumberFormat {}
|
||||
}
|
||||
/* eslint-enable @typescript-eslint/no-empty-object-type */
|
||||
|
||||
export default defineBoot(({ app }) => {
|
||||
const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
|
||||
locale: 'en-US',
|
||||
legacy: false,
|
||||
messages,
|
||||
});
|
||||
|
||||
// Set i18n instance on app
|
||||
app.use(i18n);
|
||||
});
|
||||
40
src/components/admin/account-page/optionPayment.vue
Normal file
40
src/components/admin/account-page/optionPayment.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="flex row items-center q-pa-none q-ma-none">
|
||||
<div class="q-ma-xs text-bold">{{ qty }}</div>
|
||||
<div>
|
||||
<q-icon name = "mdi-message-outline"/>
|
||||
<q-icon name = "mdi-close"/>
|
||||
<span>{{ $t('month') }}</span>
|
||||
</div>
|
||||
<div class="q-pa-xs">/</div>
|
||||
<q-icon name = "mdi-star" class="text-orange" size="sm"/>
|
||||
<div>{{ stars }}</div>
|
||||
<q-badge
|
||||
v-if="discount !== 0"
|
||||
color="red"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<span>
|
||||
{{ '-' + String(discount) + '%' }}
|
||||
</span>
|
||||
</q-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
qty: number
|
||||
stars: number
|
||||
discount: number
|
||||
}>()
|
||||
|
||||
const qty= ref(props.qty)
|
||||
const stars = ref(props.stars)
|
||||
const discount = ref(props.discount)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
47
src/components/admin/account-page/qtyChatCard.vue
Normal file
47
src/components/admin/account-page/qtyChatCard.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div
|
||||
class="qty-card glossy text-white flex column items-center q-ma-xs"
|
||||
:style="{ backgroundColor: bgColor }"
|
||||
>
|
||||
<div class="qty-card-title q-pa-none text-caption col-grow">
|
||||
{{$t(title)}}
|
||||
</div>
|
||||
<div class="qty-card-text text-bold q-pa-none">
|
||||
{{ qty }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
qty: number
|
||||
title?: string
|
||||
bgColor?: string
|
||||
}>()
|
||||
|
||||
const qty= ref(props.qty)
|
||||
const title = ref(props.title ? props.title : '')
|
||||
const bgColor = ref(props.bgColor ? props.bgColor : 'primary')
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qty-card {
|
||||
min-width: 75px;
|
||||
max-width: 20%;
|
||||
min-height: 40px;
|
||||
border-radius: 16%;
|
||||
font-size: 40px;
|
||||
opacity: 0.8
|
||||
}
|
||||
|
||||
.qty-card-text {
|
||||
font-size: 40px;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
margin-bottom: -17px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
</style>
|
||||
87
src/components/admin/accountHelper.vue
Normal file
87
src/components/admin/accountHelper.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<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
|
||||
:label = "$t('account_helper__email')"
|
||||
/>
|
||||
|
||||
<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"
|
||||
>
|
||||
{{$t('account_helper__confirm_email_messege')}}
|
||||
<q-input
|
||||
v-model="code"
|
||||
dense
|
||||
: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
|
||||
: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 ? props.email : '')
|
||||
const code = ref<string>('')
|
||||
const password = ref<string>('')
|
||||
|
||||
async function goProjects() {
|
||||
console.log('go to projects')
|
||||
await router.push({ name: 'projects' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
57
src/components/admin/companyInfoBlock.vue
Normal file
57
src/components/admin/companyInfoBlock.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="flex column items-center col-grow q-px-lg q-pt-sm">
|
||||
<pn-image-selector :size="100" :iconsize="80" class="q-pb-xs" v-model="modelValue.logo"/>
|
||||
|
||||
<q-input
|
||||
v-for="input in textInputs"
|
||||
:key="input.id"
|
||||
v-model="modelValue[input.val]"
|
||||
dense
|
||||
filled
|
||||
class = "q-mt-md w100"
|
||||
:label = "input.label ? $t(input.label) : void 0"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon v-if="input.icon" :name="input.icon"/>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CompanyParams } from 'src/types'
|
||||
|
||||
const modelValue = defineModel<CompanyParams>({
|
||||
required: false,
|
||||
default: () => ({
|
||||
name: '',
|
||||
logo: '',
|
||||
description: '',
|
||||
site: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
email: ''
|
||||
})
|
||||
})
|
||||
|
||||
interface TextInput {
|
||||
id: number
|
||||
label?: string
|
||||
icon?: string
|
||||
val: keyof CompanyParams
|
||||
rules: ((value: string) => boolean | string)[]
|
||||
}
|
||||
const textInputs: TextInput[] = [
|
||||
{ id: 1, val: 'name', label: 'company_info__name', rules: [] },
|
||||
{ id: 2, val: 'description', label: 'company_info__description', rules: [] },
|
||||
{ id: 3, val: 'site', icon: 'mdi-web', rules: [] },
|
||||
{ id: 4, val: 'address', icon: 'mdi-map-marker-outline', rules: [] },
|
||||
{ id: 5, val: 'phone', icon: 'mdi-phone-outline', rules: [] },
|
||||
{ id: 6, val: 'email', icon: 'mdi-email-outline', rules: [] },
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
57
src/components/admin/companyInfoPersons.vue
Normal file
57
src/components/admin/companyInfoPersons.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="q-pt-md">
|
||||
<span class="q-pl-md text-h6">
|
||||
{{ $t('company_info__persons') }}
|
||||
</span>
|
||||
|
||||
<q-list separator>
|
||||
<q-item
|
||||
v-for="item in persons"
|
||||
: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.role}}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const persons = [
|
||||
{id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps' },
|
||||
{id: "p2", name: 'Пупкин Василий Александрович', logo: '', tname: 'Pupkin', tusername: '@super_pupkin', role: 'Руководитель проекта' },
|
||||
{id: "p3", name: 'Макарова Полина', logo: 'https://cdn.quasar.dev/img/avatar6.jpg', tname: 'Unikorn', tusername: '@unicorn_stars', role: 'Администратор' },
|
||||
{id: "p4", name: 'Жабов Максим', logo: '', tname: 'Zhaba', tusername: '@Zhabchenko', role: 'Аналитик' },
|
||||
]
|
||||
|
||||
async function goPersonInfo () {
|
||||
console.log('update')
|
||||
await router.push({ name: 'person_info' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
118
src/components/admin/login-page/loginLogo.vue
Normal file
118
src/components/admin/login-page/loginLogo.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="flex row items-center">
|
||||
<svg
|
||||
class="iconcolor q-mr-sm"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
width="32"
|
||||
height="32"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs id="defs1" />
|
||||
<g id="layer1">
|
||||
<rect
|
||||
style="fill:var(--icon-color);stroke-width:0.233149"
|
||||
id="rect5"
|
||||
width="6.9885192"
|
||||
height="0.35581663"
|
||||
x="3.114475"
|
||||
y="0.86827624"
|
||||
transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
|
||||
/>
|
||||
<rect
|
||||
style="fill:var(--icon-color);stroke-width:0.24961"
|
||||
id="rect5-7"
|
||||
width="7.4819207"
|
||||
height="0.3809379"
|
||||
x="-3.9267058"
|
||||
y="5.7988153"
|
||||
transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
|
||||
/>
|
||||
<circle
|
||||
style="fill:var(--icon-color);stroke-width:0.134869"
|
||||
id="path5-8"
|
||||
cx="1.5875"
|
||||
cy="6.8791666"
|
||||
r="1.0583333"
|
||||
/>
|
||||
<circle
|
||||
style="fill:var(--icon-color);stroke-width:0.168586"
|
||||
id="path5-8-5"
|
||||
cx="7.1437502"
|
||||
cy="7.1437502"
|
||||
r="1.3229166"
|
||||
/>
|
||||
<circle
|
||||
style="fill:var(--icon-color);stroke-width:0.118011"
|
||||
id="path5-8-5-1"
|
||||
cx="1.4552083"
|
||||
cy="2.5135417"
|
||||
r="0.92604166"
|
||||
/>
|
||||
<circle
|
||||
style="fill:var(--icon-color);stroke-width:0.101152"
|
||||
id="path5-8-5-1-7"
|
||||
cx="7.1437502"
|
||||
cy="1.3229166"
|
||||
r="0.79374999"
|
||||
/>
|
||||
<circle
|
||||
style="stroke-width:0.23602"
|
||||
id="path5"
|
||||
cx="3.96875"
|
||||
cy="4.4979167"
|
||||
r="1.8520833"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<span class="text-h4 text-white q-pa-0">
|
||||
projects
|
||||
</span>
|
||||
|
||||
<span class="text-h4 text-brand text-bold q-pa-0">
|
||||
Node
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body {
|
||||
background: white;
|
||||
margin: 0rem;
|
||||
min-height: 100vh;
|
||||
font-family: Futura, sans-serif;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.iconcolor {
|
||||
--icon-color: white;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
100%,
|
||||
0% {
|
||||
fill: $light-green-14;
|
||||
}
|
||||
60% {
|
||||
fill: $green-14;
|
||||
}
|
||||
}
|
||||
|
||||
#path5 {
|
||||
animation: blink 3s infinite;
|
||||
}
|
||||
</style>
|
||||
145
src/components/admin/meshBackground.vue
Normal file
145
src/components/admin/meshBackground.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div id="background-canvas-wrapper" class="flex fit column">
|
||||
<canvas id="canvas"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup> // eslint-disable-line
|
||||
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
const canvasBody = document.getElementById("canvas")
|
||||
const drawArea = canvasBody.getContext("2d")
|
||||
|
||||
const opts = {
|
||||
particleColor: "rgb(200,200,200)",
|
||||
lineColor: "rgb(200,200,200)",
|
||||
particleAmount: 30,
|
||||
defaultSpeed: 0.1,
|
||||
variantSpeed: 1,
|
||||
defaultRadius: 2,
|
||||
variantRadius: 2,
|
||||
linkRadius: 200
|
||||
}
|
||||
|
||||
const delay = 200
|
||||
let tid
|
||||
const rgb = opts.lineColor.match(/\d+/g)
|
||||
let w
|
||||
let h
|
||||
const particles = []
|
||||
|
||||
function resizeReset () {
|
||||
w = canvasBody.width = window.innerWidth
|
||||
h = canvasBody.height = window.innerHeight
|
||||
}
|
||||
|
||||
function deBouncer () {
|
||||
clearTimeout(tid)
|
||||
tid = setTimeout(function() {
|
||||
resizeReset()
|
||||
}, delay)
|
||||
}
|
||||
|
||||
function checkDistance (x1, y1, x2, y2) {
|
||||
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
|
||||
}
|
||||
|
||||
function setup () {
|
||||
|
||||
resizeReset()
|
||||
for (let i = 0; i < opts.particleAmount; i++){
|
||||
particles.push(new Particle())
|
||||
}
|
||||
window.requestAnimationFrame(loop)
|
||||
}
|
||||
|
||||
function loop() {
|
||||
window.requestAnimationFrame(loop)
|
||||
drawArea.clearRect(0, 0, w, h)
|
||||
for (let i = 0; i < particles.length; i++){
|
||||
particles[i].update()
|
||||
particles[i].draw()
|
||||
}
|
||||
for (let i = 0; i < particles.length; i++){
|
||||
linkPoints(particles[i], particles)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function linkPoints (point1, hubs){
|
||||
for (let i = 0; i < hubs.length; i++) {
|
||||
const distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y)
|
||||
const opacity = 1 - distance / opts.linkRadius
|
||||
if (opacity > 0) {
|
||||
drawArea.lineWidth = 0.5
|
||||
drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
|
||||
drawArea.beginPath()
|
||||
drawArea.moveTo(point1.x, point1.y)
|
||||
drawArea.lineTo(hubs[i].x, hubs[i].y)
|
||||
drawArea.closePath()
|
||||
drawArea.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function Particle () {
|
||||
this.x = Math.random() * w
|
||||
this.y = Math.random() * h
|
||||
this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed
|
||||
this.directionAngle = Math.floor(Math.random() * 360)
|
||||
this.color = opts.particleColor
|
||||
this.radius = opts.defaultRadius + Math.random() * opts. variantRadius
|
||||
this.vector = {
|
||||
x: Math.cos(this.directionAngle) * this.speed,
|
||||
y: Math.sin(this.directionAngle) * this.speed
|
||||
};
|
||||
this.update = function(){
|
||||
this.border();
|
||||
this.x += this.vector.x
|
||||
this.y += this.vector.y
|
||||
};
|
||||
this.border = function(){
|
||||
if (this.x >= w || this.x <= 0) {
|
||||
this.vector.x *= -1;
|
||||
}
|
||||
if (this.y >= h || this.y <= 0) {
|
||||
this.vector.y *= -1;
|
||||
}
|
||||
if (this.x > w) this.x = w
|
||||
if (this.y > h) this.y = h
|
||||
if (this.x < 0) this.x = 0
|
||||
if (this.y < 0) this.y = 0
|
||||
}
|
||||
this.draw = function(){
|
||||
drawArea.beginPath()
|
||||
drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2)
|
||||
drawArea.closePath()
|
||||
drawArea.fillStyle = this.color
|
||||
drawArea.fill()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("resize", function(){ deBouncer() })
|
||||
resizeReset()
|
||||
setup()
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#background-canvas-wrapper {
|
||||
position: absolute !important;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
background: var(--q-primary);
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
32
src/components/admin/pnAutoAvatar.vue
Normal file
32
src/components/admin/pnAutoAvatar.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{ backgroundColor: stringToColour(props.name) } "
|
||||
class="fit flex items-center justify-center text-white"
|
||||
>
|
||||
{{ props.name.substring(0, 1) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const props = defineProps<{
|
||||
name: string
|
||||
}>()
|
||||
|
||||
const stringToColour = (str: string) => {
|
||||
let hash = 0
|
||||
str.split('').forEach(char => {
|
||||
hash = char.charCodeAt(0) + ((hash << 5) - hash)
|
||||
})
|
||||
let colour = '#'
|
||||
for (let i = 0; i < 3; i++) {
|
||||
const value = (hash >> (i * 8)) & 0xff
|
||||
colour += value.toString(16).padStart(2, '0')
|
||||
}
|
||||
return colour
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
127
src/components/admin/pnImageSelector.vue
Normal file
127
src/components/admin/pnImageSelector.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="relative-position"
|
||||
:style="{
|
||||
width: sizePx,
|
||||
height: sizePx,
|
||||
display: 'block'
|
||||
}"
|
||||
>
|
||||
<q-file
|
||||
ref="imgFileSelector"
|
||||
v-model="imageFile"
|
||||
:style="{ display: 'none' }"
|
||||
@update:model-value="handleUpload()"
|
||||
:filter="checkImgType"
|
||||
accept="image/*"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="modelValue === '' || modelValue === undefined"
|
||||
name="mdi-camera-plus-outline"
|
||||
class="absolute-full fit text-grey-4"
|
||||
:style="{ fontSize: String(iconsize) + 'px'}"
|
||||
@click = "imgFileSelectorClick"
|
||||
/>
|
||||
<q-img
|
||||
v-else
|
||||
fit="cover"
|
||||
:src="modelValue"
|
||||
:style="{
|
||||
height: sizePx,
|
||||
maxWidth: sizePx,
|
||||
borderRadius: avatar ? String(size/2) + 'px' : 'var(--top-raduis)',
|
||||
}"
|
||||
@click="showDialog = true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-dialog v-model="showDialog">
|
||||
<q-card class="w100 relative-position" style="height: auto;">
|
||||
<q-img :src="modelValue"/>
|
||||
<div
|
||||
class="flex row items-center jutsify-center q-pb-sm"
|
||||
style="bottom: 0; position: absolute; left: 50%; transform: translate(-50%, 0%);">
|
||||
<q-btn
|
||||
v-for="btn in menuBtns"
|
||||
:key="btn.name"
|
||||
:icon="btn.icon"
|
||||
@click="btn.f"
|
||||
class="q-mx-xs bg-white"
|
||||
round flat
|
||||
style="opacity: 0.8"
|
||||
color="primary"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, Ref, computed } from 'vue' // eslint-disable-line
|
||||
import { QFile } from 'quasar'
|
||||
|
||||
const modelValue = defineModel<string>()
|
||||
|
||||
const props = defineProps<{
|
||||
size?: number
|
||||
iconsize?: number
|
||||
avatar?: boolean
|
||||
}>()
|
||||
|
||||
const imageFile = ref(null) // file-from selector
|
||||
const imgFileSelector= ref() as Ref<QFile> // input file DOM
|
||||
const size = ref<number>(props.size ? props.size : 100)
|
||||
const iconsize = ref<number>(props.iconsize ? props.iconsize : 75)
|
||||
const showDialog = ref<boolean>(false)
|
||||
const menuBtns = [
|
||||
{ name: 'change', icon: 'mdi-swap-horizontal', f: imgFileSelectorClick },
|
||||
{ name: 'delete', icon: 'mdi-delete-outline', f: deleteImage },
|
||||
{ name: 'close', icon: 'mdi-close', f: () => showDialog.value = false }
|
||||
]
|
||||
|
||||
const sizePx = computed(() => {
|
||||
return String(size.value) + 'px'
|
||||
})
|
||||
|
||||
async function handleUpload () {
|
||||
if (imageFile.value) {
|
||||
const img = await imgToBase64(imageFile.value)
|
||||
modelValue.value = typeof img === 'string' ? img : ''
|
||||
}
|
||||
}
|
||||
|
||||
function imgFileSelectorClick () {
|
||||
imgFileSelector.value.pickFiles()
|
||||
}
|
||||
|
||||
function deleteImage () {
|
||||
showDialog.value = false
|
||||
imageFile.value = null
|
||||
modelValue.value = ''
|
||||
}
|
||||
|
||||
function imgToBase64(file: File): Promise<string | ArrayBuffer | null> {
|
||||
const reader: FileReader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
reader.onerror = () => {
|
||||
reader.abort()
|
||||
reject(new Error('Something went wrong'))
|
||||
}
|
||||
|
||||
reader.onload = () => {
|
||||
resolve(reader.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function checkImgType(files: File[]): File[] {
|
||||
return files.filter((file: File) => file.type === 'image/x-png' || file.type === 'image/jpeg' || file.type === 'image/webp' )
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scope>
|
||||
</style>
|
||||
18
src/components/admin/pnOverlay.vue
Normal file
18
src/components/admin/pnOverlay.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div
|
||||
id="overlay"
|
||||
class="fixed-full q-dialog__backdrop"
|
||||
style="z-index: 5000; --q-transition-duration: 300ms;"
|
||||
@click.prevent.stop
|
||||
@touchstart.prevent.stop
|
||||
@touchmove.prevent.stop
|
||||
@touchend.prevent.stop
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
23
src/components/admin/pnPageCard.vue
Normal file
23
src/components/admin/pnPageCard.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<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"
|
||||
style="min-height: 48px"
|
||||
>
|
||||
<slot name="title"/>
|
||||
</div>
|
||||
<slot/>
|
||||
<slot name="footer"/>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.glass-card {
|
||||
opacity: 1 !important;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
132
src/components/admin/pnScrollList.vue
Normal file
132
src/components/admin/pnScrollList.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div id="card-body" class="w100 col-grow flex column" style="position: relative">
|
||||
<div
|
||||
class="glass-card fit top-rounded-card flex column"
|
||||
style="position: absolute; top: 0; left: 0"
|
||||
/>
|
||||
<div
|
||||
id="card-body-header"
|
||||
style="min-height: var(--top-raduis);"
|
||||
>
|
||||
<slot name="card-body-header"/>
|
||||
</div>
|
||||
<div class="fit flex column col-grow">
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<div id="card-scroll-area" class="noscroll">
|
||||
|
||||
<q-scroll-area
|
||||
ref="scrollArea"
|
||||
:style="{height: heightCard+'px'}"
|
||||
class="w100 q-pa-none q-ma-none"
|
||||
id="scroll-area"
|
||||
@scroll="onScroll"
|
||||
:class="{
|
||||
'shadow-top': hasScrolled,
|
||||
'shadow-bottom': hasScrolledBottom
|
||||
}"
|
||||
>
|
||||
<slot/>
|
||||
<div class="q-pa-sm"/>
|
||||
</q-scroll-area>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { QScrollArea } from 'quasar'
|
||||
const heightCard = ref(100)
|
||||
const hasScrolled = ref(false)
|
||||
const hasScrolledBottom = ref(false)
|
||||
|
||||
interface sizeParams {
|
||||
height: number,
|
||||
width: number
|
||||
}
|
||||
|
||||
interface ScrollInfo {
|
||||
verticalPosition: number;
|
||||
verticalPercentage: number;
|
||||
verticalSize: number;
|
||||
verticalContainerSize: number;
|
||||
horizontalPosition: number;
|
||||
horizontalPercentage: number;
|
||||
}
|
||||
|
||||
const scrollArea = ref<InstanceType<typeof QScrollArea> | null>(null)
|
||||
|
||||
function onResize (size :sizeParams) {
|
||||
heightCard.value = size.height
|
||||
}
|
||||
|
||||
function onScroll (info: ScrollInfo) {
|
||||
hasScrolled.value = info.verticalPosition > 0
|
||||
const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
|
||||
hasScrolledBottom.value = !scrollEnd
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#scroll-area div > .q-scrollarea__content {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.q-scrollarea {
|
||||
position: relative;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.q-scrollarea::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(0,0,0,0.12) 0%,
|
||||
rgba(0,0,0,0.08) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
will-change: opacity, transform;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.q-scrollarea::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
background: linear-gradient(to top,
|
||||
rgba(0,0,0,0.12) 0%,
|
||||
rgba(0,0,0,0.08) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
will-change: opacity, transform;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.q-scrollarea.shadow-top::before {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.q-scrollarea.shadow-bottom::after {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
226
src/components/admin/project-page/ProjectPageChats.vue
Normal file
226
src/components/admin/project-page/ProjectPageChats.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<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>
|
||||
|
||||
<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-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-page-sticky>
|
||||
|
||||
<pn-overlay v-if="showOverlay"/>
|
||||
</div>
|
||||
<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 } from 'vue'
|
||||
import { useChatsStore } from 'stores/chats'
|
||||
|
||||
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
|
||||
}
|
||||
</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%;
|
||||
}
|
||||
</style>
|
||||
181
src/components/admin/project-page/ProjectPageCompanies.vue
Normal file
181
src/components/admin/project-page/ProjectPageCompanies.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<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]"
|
||||
>
|
||||
<q-btn
|
||||
fab
|
||||
icon="add"
|
||||
color="brand"
|
||||
@click="createCompany()"
|
||||
/>
|
||||
</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 } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useCompaniesStore } from 'stores/companies'
|
||||
|
||||
const router = useRouter()
|
||||
const companiesStore = useCompaniesStore()
|
||||
const showDialogDeleteCompany = ref<boolean>(false)
|
||||
const deleteCompanyId = ref<number | undefined>(undefined)
|
||||
const currentSlideEvent = ref<SlideEvent | null>(null)
|
||||
const closedByUserAction = ref(false)
|
||||
|
||||
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 }})
|
||||
}
|
||||
|
||||
async function createCompany () {
|
||||
await router.push({ name: 'create_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
|
||||
}
|
||||
|
||||
</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)
|
||||
{
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
183
src/components/admin/project-page/ProjectPageHeader.vue
Normal file
183
src/components/admin/project-page/ProjectPageHeader.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div
|
||||
id="project-info"
|
||||
:style="{ height: headerHeight + 'px' }"
|
||||
class="flex row items-center justify-between no-wrap q-py-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 cursor-pointer"
|
||||
key="compact"
|
||||
>
|
||||
{{project.name}}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center no-wrap q-hoverable q-animate--slideUp"
|
||||
@click="toggleExpand"
|
||||
key="expanded"
|
||||
>
|
||||
<div class="q-focus-helper"></div>
|
||||
|
||||
<q-avatar rounded>
|
||||
<q-img v-if="project.logo" :src="project.logo" fit="cover"/>
|
||||
<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="showDialogDeleteProject">
|
||||
<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>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none" align="center">
|
||||
{{ $t('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('continue')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="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 showDialogDeleteProject = ref<boolean>(false)
|
||||
const showDialogArchiveProject = ref<boolean>(false)
|
||||
|
||||
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 }},
|
||||
]
|
||||
|
||||
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 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)
|
||||
|
||||
onMounted(() => loadProjectData())
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
89
src/components/admin/project-page/ProjectPagePersons.vue
Normal file
89
src/components/admin/project-page/ProjectPagePersons.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<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'
|
||||
|
||||
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>
|
||||
47
src/components/admin/projectInfoBlock.vue
Normal file
47
src/components/admin/projectInfoBlock.vue
Normal file
@@ -0,0 +1,47 @@
|
||||
<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"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="modelValue.name"
|
||||
dense
|
||||
filled
|
||||
class="q-mt-sm w100"
|
||||
:label="$t('project_card__project_name')"
|
||||
:rules="[val => !!val || $t('validation.required')]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="modelValue.description"
|
||||
dense
|
||||
filled
|
||||
autogrow
|
||||
class="q-my-lg w100"
|
||||
:label="$t('project_card__project_description')"
|
||||
/>
|
||||
|
||||
<q-checkbox
|
||||
v-if="modelValue.logo"
|
||||
v-model="modelValue.logo_as_bg"
|
||||
class="w100"
|
||||
>
|
||||
{{ $t('project_card__image_use_as_background_chats') }}
|
||||
</q-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ProjectParams } from 'src/types'
|
||||
const modelValue = defineModel<ProjectParams>({ required: true })
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
39
src/css/app.scss
Normal file
39
src/css/app.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// app global css in SCSS form
|
||||
.text-brand {
|
||||
color: $green-14 !important;
|
||||
}
|
||||
|
||||
.bg-brand {
|
||||
background: $green-14 !important;
|
||||
}
|
||||
|
||||
$base-width: 100;
|
||||
@while $base-width > 0 {
|
||||
.w#{$base-width} { width: #{$base-width}+'%'; }
|
||||
$base-width: $base-width - 10;
|
||||
}
|
||||
|
||||
$base-height: 100;
|
||||
@while $base-height > 0 {
|
||||
.h#{$base-height} { height: #{$base-height}+'%'; }
|
||||
$base-height: $base-height - 10;
|
||||
}
|
||||
|
||||
:root {
|
||||
--body-width: 600px;
|
||||
--top-raduis: 12px;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.projects-header {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.top-rounded-card {
|
||||
border-top-left-radius: var(--top-raduis);
|
||||
border-top-right-radius: var(--top-raduis);
|
||||
}
|
||||
|
||||
28
src/css/quasar.variables.scss
Normal file
28
src/css/quasar.variables.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
// Quasar SCSS (& Sass) Variables
|
||||
// --------------------------------------------------
|
||||
// To customize the look and feel of this app, you can override
|
||||
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
|
||||
|
||||
// Check documentation for full list of Quasar variables
|
||||
|
||||
// Your own variables (that are declared here) and Quasar's own
|
||||
// ones will be available out of the box in your .vue/.scss/.sass files
|
||||
|
||||
// It's highly recommended to change the default colors
|
||||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
|
||||
$primary : #1976D2;
|
||||
$secondary : #26A69A;
|
||||
$accent : #9C27B0;
|
||||
|
||||
$dark : #1D1D1D;
|
||||
$dark-page : #121212;
|
||||
|
||||
$positive : #21BA45;
|
||||
$negative : #C10015;
|
||||
$info : #31CCEC;
|
||||
$warning : #F2C037;
|
||||
|
||||
$lightgrey : #DCDCDC;
|
||||
|
||||
18
src/i18n/en-US/index — копия.ts
Normal file
18
src/i18n/en-US/index — копия.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
// This is just an example,
|
||||
// so you can safely delete all default props below
|
||||
|
||||
export default {
|
||||
login__forgot_password: 'Forgot password?',
|
||||
login__login: 'Login',
|
||||
login__password: 'Password',
|
||||
login__sign_in: 'Sign in',
|
||||
login__sign_up: 'Register',
|
||||
login__welcome: 'Welcome!',
|
||||
project__companies: 'Companies',
|
||||
project__persons: 'Persons',
|
||||
project__chats: 'Chats',
|
||||
projects__projects: 'Projects',
|
||||
projects__account: 'Account',
|
||||
failed: 'Action failed',
|
||||
success: 'Action was successful'
|
||||
}
|
||||
1
src/i18n/en-US/index.ts
Normal file
1
src/i18n/en-US/index.ts
Normal file
@@ -0,0 +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' }
|
||||
7
src/i18n/index.ts
Normal file
7
src/i18n/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import enUS from './en-US'
|
||||
import ruRU from './ru-RU'
|
||||
|
||||
export default {
|
||||
'en-US': enUS,
|
||||
'ru-RU': ruRU
|
||||
};
|
||||
1
src/i18n/ru-RU/index.ts
Normal file
1
src/i18n/ru-RU/index.ts
Normal file
File diff suppressed because one or more lines are too long
32
src/index copy.ts
Normal file
32
src/index copy.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
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
|
||||
})
|
||||
43
src/layouts/MainLayout.vue
Normal file
43
src/layouts/MainLayout.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<q-layout
|
||||
view="lHr lpR lFr"
|
||||
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-page-container
|
||||
class="q-pa-none q-ma-none no-scroll bg-transparent page-width"
|
||||
>
|
||||
<router-view />
|
||||
</q-page-container>
|
||||
<meshBackground/>
|
||||
<q-resize-observer @resize="onResize"></q-resize-observer>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import meshBackground from '../components/admin/meshBackground.vue'
|
||||
function getCSSVar (varName: string) {
|
||||
const root = document.documentElement
|
||||
return getComputedStyle(root).getPropertyValue(varName).trim()
|
||||
}
|
||||
|
||||
const bodyWidth = parseInt(getCSSVar('--body-width'))
|
||||
const drawerWidth = ref<number>(300)
|
||||
function onResize () {
|
||||
const clientWidth = document.documentElement.clientWidth;
|
||||
drawerWidth.value = (clientWidth - bodyWidth)/2
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
aside {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
246
src/pages/AccountPage.vue
Normal file
246
src/pages/AccountPage.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<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>
|
||||
<div class="flex column">
|
||||
<span class="q-ml-xs text-h5">
|
||||
Alex mart
|
||||
</span>
|
||||
<span class="q-ml-xs text-caption">
|
||||
@alexmart80
|
||||
</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>
|
||||
<q-expansion-item
|
||||
dense
|
||||
id="warning"
|
||||
class="q-mt-sm w100 q-pa-sm"
|
||||
style="border: solid 1px var(--q-warning)"
|
||||
>
|
||||
<template #header>
|
||||
<q-item-section>
|
||||
<div class="flex row w100 items-center">
|
||||
<q-icon name="mdi-alert-decagram-outline" color="warning " size="sm" />
|
||||
<span class="q-pl-xs">{{$t('account__change_auth')}}</span>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</template>
|
||||
<q-card class="q-pa-none">
|
||||
<q-card-section class="q-pa-sm">
|
||||
<div class="flex justify-center column">
|
||||
<span>{{$t('account__change_auth_message_1')}}</span>
|
||||
<span>{{$t('account__change_auth_message_2')}}</span>
|
||||
<div class="flex justify-end">
|
||||
<q-btn
|
||||
@click="showChangeAuthDialog = true"
|
||||
flat
|
||||
color="primary"
|
||||
no-caps
|
||||
class="q-pb-none"
|
||||
>
|
||||
{{$t('account__change_auth_btn')}} ►
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
|
||||
<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
|
||||
v-for = "chat in chats"
|
||||
:key = chat.title
|
||||
:qty = chat.qty
|
||||
:bgColor = chat.color
|
||||
:title = chat.title
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="subscribe" class="flex column q-pt-lg w100 q-pl-sm">
|
||||
<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-section
|
||||
avatar
|
||||
class="q-pr-none"
|
||||
:style="{ minWidth: 'inherit !important' }"
|
||||
>
|
||||
<q-icon name = "mdi-message-plus-outline" size="md"/>
|
||||
</q-item-section>
|
||||
<q-item-section class="q-pl-sm">
|
||||
<span>{{ $t('account__subscribe_info') }}</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">
|
||||
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
|
||||
v-for="item in payment"
|
||||
:key="item.id"
|
||||
>
|
||||
<q-radio
|
||||
v-model="paymentSelect"
|
||||
:val="item.stars"
|
||||
dense
|
||||
>
|
||||
<option-payment
|
||||
:qty="item.qty"
|
||||
:stars="item.stars"
|
||||
:discount="item.discount"
|
||||
/>
|
||||
</q-radio>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
|
||||
<q-dialog v-model="showChangeAuthDialog">
|
||||
<q-card>
|
||||
<q-card-section align="center">
|
||||
<div class="text-h6 text-negative ">{{ $t('account__change_auth_warning') }}</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none" align="center">
|
||||
{{ $t('account__change_auth_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('continue')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="change_auth()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } 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'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
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' },
|
||||
{ title: 'account__chats_free', qty: 5, color: 'green' },
|
||||
{ title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
|
||||
])
|
||||
const payment=ref([
|
||||
{ id: 1, qty: 50, stars: 200, discount: 0 },
|
||||
{ id: 2, qty: 120, stars: 400, discount: 20 },
|
||||
{ id: 3, qty: 220, stars: 500, discount: 30 }
|
||||
])
|
||||
|
||||
const paymentSelect = ref(200)
|
||||
|
||||
async function change_auth () {
|
||||
console.log('update')
|
||||
await router.push({ name: 'login' })
|
||||
}
|
||||
|
||||
async function goProjects () {
|
||||
await router.push({ name: 'projects' })
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#warning {
|
||||
& >div .q-item {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
40
src/pages/CompanyInfoPage.vue
Normal file
40
src/pages/CompanyInfoPage.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between col-grow">
|
||||
<div>
|
||||
{{$t('company_info__title_card')}}
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="!isObjEqual<Company | undefined>(companyFromStore, companyMod)"
|
||||
@click = "companiesStore.updateCompany(companyId, companyMod)"
|
||||
flat round
|
||||
icon="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<pn-scroll-list>
|
||||
<company-info-block v-model="companyMod"/>
|
||||
<company-info-persons/>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { 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'
|
||||
|
||||
const route = useRoute()
|
||||
const companiesStore = useCompaniesStore()
|
||||
|
||||
const companyId = Number(route.params.id)
|
||||
const companyFromStore = companiesStore.companyById(companyId)
|
||||
const companyMod = ref({...(companyFromStore ? companyFromStore : <Company>{})})
|
||||
|
||||
</script>
|
||||
|
||||
157
src/pages/CompanyMaskPage.vue
Normal file
157
src/pages/CompanyMaskPage.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="col-grow">
|
||||
{{$t('company__mask')}}
|
||||
</div>
|
||||
</template>
|
||||
<pn-scroll-list>
|
||||
<template #card-body-header>
|
||||
<div style="min-height: var(--top-raduis);"/>
|
||||
</template>
|
||||
<q-list
|
||||
separator
|
||||
>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<div>
|
||||
<q-btn flat round color="primary" icon="mdi-help-circle-outline" @click="showDialogHelp = true" />
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-item-section></q-item-section>
|
||||
<q-item-section align="end">
|
||||
{{ $t('mask__title_table') }}
|
||||
<span class="text-caption">
|
||||
{{ $t('mask__title_table2') }}
|
||||
</span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-for = "company in companies"
|
||||
:key="company.id"
|
||||
class="w100"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-checkbox
|
||||
v-model="company.masked"
|
||||
:label="company.name"
|
||||
unchecked-icon="mdi-drama-masks"
|
||||
checked-icon="mdi-drama-masks"
|
||||
:class="company.masked ? 'masked' : 'unmasked'"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-select
|
||||
v-if="company.masked"
|
||||
v-model="company.unmasked"
|
||||
multiple
|
||||
:options="companiesSelect(company.id)"
|
||||
dense
|
||||
borderless
|
||||
dropdown-icon="mdi-plus"
|
||||
class="fix-select"
|
||||
>
|
||||
<template #selected>
|
||||
<div
|
||||
v-for="(comp, idx) in company.unmasked"
|
||||
:key=idx
|
||||
class="q-pa-xs"
|
||||
>
|
||||
<q-avatar rounded size="md">
|
||||
<img v-if="comp['logo']" :src="comp['logo']"/>
|
||||
<pn-auto-avatar v-else :name="comp['name']"/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
class="q-pa-none q-ma-none"
|
||||
style="min-height: 18px"
|
||||
>
|
||||
<div class="q-py-none flex column w100"/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</pn-scroll-list>
|
||||
|
||||
<q-dialog v-model="showDialogHelp">
|
||||
<q-card class="q-ma-sm w100">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">{{ $t('mask__help_title')}}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense v-close-popup />
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-sm">
|
||||
{{ $t('mask__help_message')}}
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
// import { useCompaniesStore } from 'src/stores/companies'
|
||||
|
||||
const showDialogHelp = ref<boolean>(false)
|
||||
// const companiesStore = useCompaniesStore()
|
||||
|
||||
// const companies = computed(() => companiesStore.companies)
|
||||
|
||||
const companies = ref([
|
||||
{id: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
|
||||
{id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
|
||||
{id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией', qtyPersons: 5, masked: false, unmasked: [] },
|
||||
{id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то', qtyPersons: 5, masked: false, unmasked: [] },
|
||||
{id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
|
||||
{id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
|
||||
{id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией', qtyPersons: 5, masked: false, unmasked: [] },
|
||||
])
|
||||
|
||||
function companiesSelect (id :string) {
|
||||
return companies.value
|
||||
.map(el => ({
|
||||
id: el.id,
|
||||
name: el.name,
|
||||
logo: el.logo
|
||||
}))
|
||||
.filter(el => el.id !== id)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
:deep(.fix-select .q-field__control) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.fix-select .q-icon) {
|
||||
color: $green-14 !important;
|
||||
}
|
||||
|
||||
:deep(.masked .q-icon) {
|
||||
color: red;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:deep(.unmasked .q-icon) {
|
||||
color: grey;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
15
src/pages/CreateAccountPage.vue
Normal file
15
src/pages/CreateAccountPage.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="col-grow">
|
||||
{{$t('create_account')}}
|
||||
</div>
|
||||
</template>
|
||||
<account-helper :type />
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import accountHelper from 'components/admin/accountHelper.vue'
|
||||
const type = 'new'
|
||||
</script>
|
||||
39
src/pages/CreateCompanyPage.vue
Normal file
39
src/pages/CreateCompanyPage.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between col-grow">
|
||||
<div>
|
||||
{{$t('company_create__title_card')}}
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="(Object.keys(companyMod).length !== 0)"
|
||||
@click = "addCompany(companyMod)"
|
||||
flat round
|
||||
icon="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<pn-scroll-list>
|
||||
<company-info-block v-model="companyMod"/>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
|
||||
import { useCompaniesStore } from 'stores/companies'
|
||||
import type { Company } from 'src/types'
|
||||
|
||||
const router = useRouter()
|
||||
const companiesStore = useCompaniesStore()
|
||||
|
||||
const companyMod = ref(<Company>{})
|
||||
|
||||
function addCompany (data: Company) {
|
||||
companiesStore.addCompany(data)
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
</script>
|
||||
44
src/pages/CreateProjectPage.vue
Normal file
44
src/pages/CreateProjectPage.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between col-grow">
|
||||
<div>
|
||||
{{$t('project_card__add_project')}}
|
||||
</div>
|
||||
<q-btn
|
||||
v-if="(Object.keys(project).length !== 0)"
|
||||
@click = "addProject(project)"
|
||||
flat round
|
||||
icon="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<pn-scroll-list>
|
||||
<project-info-block v-model="project"/>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
|
||||
import { useProjectsStore } from 'stores/projects'
|
||||
import type { ProjectParams } from 'src/types'
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const projectsStore = useProjectsStore()
|
||||
const project = ref<ProjectParams>({
|
||||
name: '',
|
||||
logo: '',
|
||||
description: '',
|
||||
logo_as_bg: false
|
||||
})
|
||||
|
||||
async function addProject (data: ProjectParams) {
|
||||
const newProject = projectsStore.addProject(data)
|
||||
await router.push({name: 'chats', params: { id: newProject.id}})
|
||||
}
|
||||
|
||||
</script>
|
||||
27
src/pages/ErrorNotFound.vue
Normal file
27
src/pages/ErrorNotFound.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
|
||||
<div>
|
||||
<div style="font-size: 30vh">
|
||||
404
|
||||
</div>
|
||||
|
||||
<div class="text-h2" style="opacity:.4">
|
||||
Oops. Nothing here...
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
class="q-mt-xl"
|
||||
color="white"
|
||||
text-color="blue"
|
||||
unelevated
|
||||
to="/"
|
||||
label="Go Home"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
//
|
||||
</script>
|
||||
15
src/pages/ForgotPasswordPage.vue
Normal file
15
src/pages/ForgotPasswordPage.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="col-grow">
|
||||
{{$t('forgot_password__password_recovery')}}
|
||||
</div>
|
||||
</template>
|
||||
<account-helper :type />
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import accountHelper from 'components/admin/accountHelper.vue'
|
||||
const type = 'forgot'
|
||||
</script>
|
||||
177
src/pages/LoginPage.vue
Normal file
177
src/pages/LoginPage.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<q-page class="flex column items-center justify-between">
|
||||
|
||||
<q-card
|
||||
id="login_block"
|
||||
flat
|
||||
class="flex column items-center w80 justify-between q-py-lg login-card "
|
||||
>
|
||||
<login-logo
|
||||
class="col-grow q-pa-md"
|
||||
:style="{ alignItems: 'flex-end' }"
|
||||
/>
|
||||
|
||||
<div class = "q-ma-md flex column input-login">
|
||||
<q-input
|
||||
v-model="login"
|
||||
dense
|
||||
filled
|
||||
class = "q-mb-md"
|
||||
:label = "$t('login__email')"
|
||||
:rules="['email']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="password"
|
||||
dense
|
||||
filled
|
||||
:label = "$t('login__password')"
|
||||
class = "q-mb-md"
|
||||
:type="isPwd ? 'password' : 'text'"
|
||||
>
|
||||
<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>
|
||||
|
||||
<div class="self-end">
|
||||
<q-btn
|
||||
@click="forgotPwd"
|
||||
flat
|
||||
no-caps
|
||||
dense
|
||||
class="text-grey"
|
||||
>
|
||||
{{$t('login__forgot_password')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-btn
|
||||
@click="sendAuth"
|
||||
color="primary"
|
||||
:disabled="!acceptTermsOfUse"
|
||||
>
|
||||
{{$t('login__sign_in')}}
|
||||
</q-btn>
|
||||
<div class="q-pt-lg">
|
||||
<q-btn
|
||||
flat
|
||||
sm
|
||||
no-caps
|
||||
color="primary"
|
||||
@click="createAccount()"
|
||||
>
|
||||
{{$t('login__register')}}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="alt_login"
|
||||
class="w80 q-flex column items-center q-pt-xl"
|
||||
>
|
||||
<div
|
||||
class="orline w100 text-grey"
|
||||
>
|
||||
<span class="q-mx-sm">{{$t('login__or_continue_as')}}</span>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
sm
|
||||
no-caps
|
||||
color="primary"
|
||||
:disabled="!acceptTermsOfUse"
|
||||
>
|
||||
<span class="text-blue">
|
||||
<q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
|
||||
Alex mart
|
||||
</span>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div id="term-of-use" class="q-py-lg text-white q-flex row">
|
||||
<q-checkbox
|
||||
v-model="acceptTermsOfUse"
|
||||
checked-icon="task_alt"
|
||||
unchecked-icon="highlight_off"
|
||||
:color="acceptTermsOfUse ? 'brand' : 'red'"
|
||||
dense
|
||||
keep-color
|
||||
/>
|
||||
<span class="q-px-xs">
|
||||
{{$t('login__accept_terms_of_use') + ' '}}
|
||||
</span>
|
||||
<span class="text-cyan-12">
|
||||
{{$t('login__terms_of_use') }}
|
||||
</span>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import loginLogo from 'components/admin/login-page/loginLogo.vue'
|
||||
// import { useI18n } from "vue-i18n"
|
||||
const router = useRouter()
|
||||
// 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')]}
|
||||
} */
|
||||
|
||||
async function sendAuth() {
|
||||
console.log('1')
|
||||
await router.push({ name: 'projects' })
|
||||
}
|
||||
|
||||
async function forgotPwd() {
|
||||
await router.push({ name: 'forgot_password' })
|
||||
}
|
||||
|
||||
async function createAccount() {
|
||||
await router.push({ name: 'create_account' })
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.maxh15 {
|
||||
max-height: calc(100Vh *0.15);
|
||||
}
|
||||
|
||||
.input-login {
|
||||
width: calc(100% * 0.8);
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.orline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.orline:before,
|
||||
.orline:after {
|
||||
content: "";
|
||||
flex: 1 1;
|
||||
border-bottom: 1px solid;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
opacity: 0.9 !important;
|
||||
border-radius: var(--top-raduis);
|
||||
}
|
||||
</style>
|
||||
112
src/pages/PersonInfoPage.vue
Normal file
112
src/pages/PersonInfoPage.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between col-grow">
|
||||
<div>
|
||||
{{ $t('person_card__title') }}
|
||||
</div>
|
||||
<q-btn
|
||||
@click = "goProject()"
|
||||
flat round
|
||||
icon="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<pn-scroll-list>
|
||||
<div class="flex column">
|
||||
<div class="flex column items-center col-grow q-pa-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 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')"
|
||||
/>
|
||||
|
||||
<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-input
|
||||
v-model="person.department"
|
||||
dense
|
||||
filled
|
||||
class = "q-my-sm 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>
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const person = ref({id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: '', department: 'test' })
|
||||
|
||||
const companies = ref([
|
||||
{id: "com11", value: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
|
||||
{id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
|
||||
{id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией', qtyPersons: 5, masked: false, unmasked: [] },
|
||||
{id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то', qtyPersons: 5, masked: false, unmasked: [] },
|
||||
{id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
|
||||
{id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
|
||||
{id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией', qtyPersons: 5, masked: false, unmasked: [] },
|
||||
])
|
||||
|
||||
|
||||
async function goProject () {
|
||||
|
||||
await router.push({ name: 'project' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
62
src/pages/ProjectInfoPage.vue
Normal file
62
src/pages/ProjectInfoPage.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
>>{{ project }}
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between col-grow">
|
||||
<div>
|
||||
<span>{{ $t('project_card__project_card') }}</span>
|
||||
</div>
|
||||
<q-btn
|
||||
@click="updateProject()"
|
||||
flat
|
||||
round
|
||||
icon="mdi-check"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<pn-scroll-list>
|
||||
<project-info-block v-if="project" v-model="project"/>
|
||||
</pn-scroll-list>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
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'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const projectsStore = useProjectsStore()
|
||||
|
||||
const project = ref<Project>()
|
||||
const id = parseIntString(route.params.id)
|
||||
|
||||
onMounted(async () => {
|
||||
if (id && projectsStore.projectById(id)) {
|
||||
project.value = projectsStore.projectById(id)
|
||||
} else {
|
||||
await abort()
|
||||
}
|
||||
})
|
||||
|
||||
function updateProject () {
|
||||
if (id && project.value) {
|
||||
projectsStore.updateProject(id, project.value)
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
async function abort () {
|
||||
await router.replace({name: 'projects'})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
105
src/pages/ProjectPage.vue
Normal file
105
src/pages/ProjectPage.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<project-page-header/>
|
||||
</template>
|
||||
|
||||
<q-tab-panels
|
||||
v-model="tabSelect"
|
||||
animated
|
||||
class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
|
||||
>
|
||||
<q-tab-panel
|
||||
v-for="tab in tabs"
|
||||
:key="tab.name"
|
||||
:name="tab.name"
|
||||
class="q-pa-none flex column col-grow no-scroll"
|
||||
style="flex-grow: 2"
|
||||
>
|
||||
<component :is="tab.component"/>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
<template #footer>
|
||||
<q-footer class="bg-grey-1 text-grey">
|
||||
<q-tabs
|
||||
style = "z-index: 1000"
|
||||
v-model="tabSelect"
|
||||
dense
|
||||
align="justify"
|
||||
switch-indicator
|
||||
>
|
||||
<q-route-tab
|
||||
v-for="tab in tabs"
|
||||
:to="tab.to"
|
||||
:name="tab.name"
|
||||
:key="tab.name"
|
||||
no-caps
|
||||
dense
|
||||
:class="tabSelect === tab.name ? 'active' : ''"
|
||||
class="w100 flex column"
|
||||
>
|
||||
<template #default>
|
||||
<div class="flex column items-center">
|
||||
<q-icon :name="tab.icon" size="sm">
|
||||
<q-badge
|
||||
color="brand" align="top"
|
||||
rounded floating
|
||||
style="font-style: normal;"
|
||||
>
|
||||
{{ currentProject?.[tab.name as keyof typeof currentProject] ?? 0 }}
|
||||
</q-badge>
|
||||
</q-icon>
|
||||
<span>{{$t(tab.label)}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-route-tab>
|
||||
</q-tabs>
|
||||
</q-footer>
|
||||
</template>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useProjectsStore } from 'stores/projects'
|
||||
import projectPageHeader from 'components/admin/project-page/ProjectPageHeader.vue'
|
||||
import projectPageChats from 'components/admin/project-page/ProjectPageChats.vue'
|
||||
import projectPageCompanies from 'components/admin/project-page/ProjectPageCompanies.vue'
|
||||
import projectPagePersons from 'components/admin/project-page/ProjectPagePersons.vue'
|
||||
|
||||
const projectStore = useProjectsStore()
|
||||
const currentProject = computed(() => projectStore.getCurrentProject() )
|
||||
|
||||
const tabComponents = {
|
||||
projectPageChats,
|
||||
projectPagePersons,
|
||||
projectPageCompanies
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{name: 'chats', label: 'project__chats', icon: 'mdi-message-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'} },
|
||||
]
|
||||
|
||||
const tabSelect = ref<string>(tabs[0]?.name ? tabs[0]?.name : '')
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.active {
|
||||
color: var(--q-primary)
|
||||
}
|
||||
|
||||
.tab-panel-color {
|
||||
background: transparent
|
||||
}
|
||||
|
||||
.full-height-panel > .q-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 2;
|
||||
width: 100%
|
||||
}
|
||||
</style>
|
||||
228
src/pages/ProjectsPage.vue
Normal file
228
src/pages/ProjectsPage.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<pn-page-card>
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between col-grow">
|
||||
|
||||
<div>{{ $t('projects__projects') }}</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<q-btn
|
||||
@click="goAccount()"
|
||||
flat
|
||||
no-caps
|
||||
icon-right="mdi-chevron-right"
|
||||
align="right"
|
||||
dense
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<q-avatar size="32px">
|
||||
<img src="https://cdn.quasar.dev/img/avatar2.jpg">
|
||||
</q-avatar>
|
||||
<div class="q-ml-xs ellipsis" style="max-width: 100px">
|
||||
Alex mart
|
||||
</div>
|
||||
</div>
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<pn-scroll-list>
|
||||
<template #card-body-header>
|
||||
<q-input
|
||||
v-model="searchProject"
|
||||
clearable
|
||||
clear-icon="close"
|
||||
:placeholder="$t('project_chats__search')"
|
||||
dense
|
||||
class="col-grow q-px-md q-py-md"
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
||||
<q-list separator>
|
||||
<q-item
|
||||
v-for = "item in activeProjects"
|
||||
:key="item.id"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="goProject(item.id)"
|
||||
class="w100"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar rounded >
|
||||
<q-img v-if="item.logo" :src="item.logo" fit="cover" style="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-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>
|
||||
</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">
|
||||
<template #label>
|
||||
<span class="text-caption">
|
||||
<span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
|
||||
<span v-else>{{ $t('projects__hide_archive') }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</q-btn-dropdown>
|
||||
</div>
|
||||
|
||||
<q-list separator v-if="showArchive" class="w100">
|
||||
<q-item
|
||||
v-for = "item in archiveProjects"
|
||||
:key="item.id"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="handleArchiveList(item.id)"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar rounded >
|
||||
<q-img v-if="item.logo" :src="item.logo" fit="cover" style="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>
|
||||
</q-list>
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
|
||||
<q-page-sticky
|
||||
position="bottom-right"
|
||||
:offset="[18, 18]"
|
||||
>
|
||||
<q-btn
|
||||
fab
|
||||
icon="add"
|
||||
color="brand"
|
||||
@click="createNewProject"
|
||||
/>
|
||||
</q-page-sticky>
|
||||
</pn-page-card>
|
||||
<q-dialog v-model="showDialogArchive">
|
||||
<q-card class="q-pa-none q-ma-none">
|
||||
<q-card-section align="center">
|
||||
<div class="text-h6 text-negative ">{{ $t('projects__restore_archive_warning') }}</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none" align="center">
|
||||
{{ $t('projects__restore_archive_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('continue')"
|
||||
color="primary"
|
||||
v-close-popup
|
||||
@click="restoreFromArchive()"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useProjectsStore } from 'stores/projects'
|
||||
|
||||
const router = useRouter()
|
||||
const projectsStore = useProjectsStore()
|
||||
const projects = projectsStore.projects
|
||||
|
||||
const searchProject = ref('')
|
||||
const showArchive = ref(false)
|
||||
const showDialogArchive = ref(false)
|
||||
const archiveProjectId = ref<number | undefined> (undefined)
|
||||
|
||||
async function goProject (id: number) {
|
||||
await router.push({ name: 'chats', params: { id }})
|
||||
}
|
||||
|
||||
async function goAccount () {
|
||||
await router.push({ name: 'account' })
|
||||
}
|
||||
|
||||
async function createNewProject () {
|
||||
await router.push({ name: 'project_add' })
|
||||
}
|
||||
|
||||
function handleArchiveList (id: number) {
|
||||
showDialogArchive.value = true
|
||||
archiveProjectId.value = id
|
||||
}
|
||||
|
||||
function restoreFromArchive () {
|
||||
if (archiveProjectId.value) {
|
||||
const projectTemp = projectsStore.projectById(archiveProjectId.value)
|
||||
if (projectTemp) {
|
||||
projectTemp.is_archive = false
|
||||
projectsStore.updateProject(archiveProjectId.value, projectTemp)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const displayProjects = computed(() => {
|
||||
if (!searchProject.value || !(searchProject.value && searchProject.value.trim())) return projects
|
||||
const searchChatValue = searchProject.value.trim().toLowerCase()
|
||||
const arrOut = projects
|
||||
.filter(el =>
|
||||
el.name.toLowerCase().includes(searchChatValue) ||
|
||||
el.description && el.description.toLowerCase().includes(searchProject.value)
|
||||
)
|
||||
return arrOut
|
||||
})
|
||||
|
||||
const activeProjects = computed(() => {
|
||||
return displayProjects.value.filter(el => !el.is_archive)
|
||||
})
|
||||
|
||||
const archiveProjects = computed(() => {
|
||||
return displayProjects.value.filter(el => el.is_archive)
|
||||
})
|
||||
|
||||
watch(showDialogArchive, (newD :boolean) => {
|
||||
if (!newD) archiveProjectId.value = undefined
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
43
src/router/index.ts
Normal file
43
src/router/index.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { defineRouter } from '#q-app/wrappers'
|
||||
import {
|
||||
createMemoryHistory,
|
||||
createRouter,
|
||||
createWebHashHistory,
|
||||
createWebHistory,
|
||||
} from 'vue-router'
|
||||
import routes from './routes'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
|
||||
/*
|
||||
* If not building with SSR mode, you can
|
||||
* directly export the Router instantiation;
|
||||
*
|
||||
* The function below can be async too; either use
|
||||
* async/await or return a Promise which resolves
|
||||
* with the Router instance.
|
||||
*/
|
||||
|
||||
export default defineRouter(function (/* { store, ssrContext } */) {
|
||||
const createHistory = process.env.SERVER
|
||||
? createMemoryHistory
|
||||
: (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
|
||||
|
||||
const Router = createRouter({
|
||||
scrollBehavior: () => ({ left: 0, top: 0 }),
|
||||
routes,
|
||||
|
||||
// Leave this as is and make changes in quasar.conf.js instead!
|
||||
// quasar.conf.js -> build -> vueRouterMode
|
||||
// quasar.conf.js -> build -> publicPath
|
||||
history: createHistory(process.env.VUE_ROUTER_BASE),
|
||||
})
|
||||
|
||||
Router.afterEach((to) => {
|
||||
if (!to.params.id) {
|
||||
const projectsStore = useProjectsStore()
|
||||
projectsStore.setCurrentProjectId(null)
|
||||
}
|
||||
})
|
||||
|
||||
return Router
|
||||
})
|
||||
110
src/router/routes.ts
Normal file
110
src/router/routes.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
import type { RouteRecordRaw, RouteLocationNormalized } from 'vue-router'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
|
||||
const setProjectBeforeEnter = (to: RouteLocationNormalized) => {
|
||||
const id = Number(to.params.id)
|
||||
const projectsStore = useProjectsStore()
|
||||
projectsStore.setCurrentProjectId(
|
||||
!isNaN(id) && projectsStore.projectById(id) ? id : null
|
||||
)
|
||||
}
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('layouts/MainLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
redirect: '/projects'
|
||||
},
|
||||
{
|
||||
name: 'projects',
|
||||
path: '/projects',
|
||||
component: () => import('pages/ProjectsPage.vue')
|
||||
},
|
||||
{
|
||||
name: 'project_add',
|
||||
path: '/project/add',
|
||||
component: () => import('pages/CreateProjectPage.vue')
|
||||
},
|
||||
|
||||
{
|
||||
name: 'project_info',
|
||||
path: '/project/:id(\\d+)/info',
|
||||
component: () => import('pages/ProjectInfoPage.vue'),
|
||||
beforeEnter: setProjectBeforeEnter
|
||||
},
|
||||
{
|
||||
name: 'company_mask',
|
||||
path: '/project/:id(\\d+)/company-mask',
|
||||
component: () => import('pages/CompanyMaskPage.vue'),
|
||||
beforeEnter: setProjectBeforeEnter
|
||||
},
|
||||
|
||||
{
|
||||
path: '/project/:id(\\d+)',
|
||||
component: () => import('pages/ProjectPage.vue'),
|
||||
beforeEnter: setProjectBeforeEnter,
|
||||
children: [
|
||||
{
|
||||
name: 'project',
|
||||
path: '',
|
||||
redirect: { name: 'chats' }
|
||||
},
|
||||
{
|
||||
name: 'chats',
|
||||
path: 'chats',
|
||||
component: () => import('../components/admin/project-page/ProjectPageChats.vue')
|
||||
},
|
||||
{
|
||||
name: 'persons',
|
||||
path: 'persons',
|
||||
component: () => import('../components/admin/project-page/ProjectPagePersons.vue')
|
||||
},
|
||||
{
|
||||
name: 'companies',
|
||||
path: 'companies',
|
||||
component: () => import('../components/admin/project-page/ProjectPageCompanies.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/account',
|
||||
name: 'account',
|
||||
component: () => import('pages/AccountPage.vue')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('pages/LoginPage.vue')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/recovery-password',
|
||||
name: 'recovery_password',
|
||||
component: () => import('pages/ForgotPasswordPage.vue')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/create-company',
|
||||
name: 'create_company',
|
||||
component: () => import('pages/CreateCompanyPage.vue')
|
||||
},
|
||||
|
||||
{
|
||||
path: '/person-info',
|
||||
name: 'person_info',
|
||||
component: () => import('pages/PersonInfoPage.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:catchAll(.*)*',
|
||||
component: () => import('pages/ErrorNotFound.vue'),
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
export default routes
|
||||
36
src/stores/chats.ts
Normal file
36
src/stores/chats.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { Chat } from '../types'
|
||||
|
||||
export const useChatsStore = defineStore('chats', () => {
|
||||
const chats = ref<Chat[]>([])
|
||||
|
||||
chats.value.push(
|
||||
{id: 11, name: 'Аудит ИБ', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', persons: 8, owner_id: 111},
|
||||
{id: 12, name: 'Разработка BI', logo: '', persons: 2, owner_id: 111},
|
||||
{id: 3, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 4, owner_id: 112},
|
||||
{id: 4, name: 'Расстрел нерадивых', logo: '', persons: 3, owner_id: 113},
|
||||
{id: 15, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 5, owner_id: 112},
|
||||
{id: 16, name: 'Разработка BI', logo: '', persons: 6, owner_id: 114},
|
||||
{id: 17, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 58, owner_id: 111},
|
||||
{id: 18, name: 'Расстрел нерадивых', logo: '', persons: 3, owner_id: 112},
|
||||
{id: 19, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 11, owner_id: 113},
|
||||
{id: 20, name: 'Разработка BI', logo: '', persons: 18, owner_id: 114},
|
||||
{id: 113, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 11, owner_id: 115},
|
||||
{id: 124, name: 'Расстрел нерадивых', logo: '', persons: 12, owner_id: 113},
|
||||
{id: 217, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 5, owner_id: 112},
|
||||
{id: 2113, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 4, owner_id: 111},
|
||||
{id: 124, name: 'Расстрел нерадивых', logo: '', persons: 3, owner_id: 112},
|
||||
{id: 2117, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 5, owner_id: 111},
|
||||
)
|
||||
|
||||
function chatById (id :number) {
|
||||
return chats.value.find(el =>el.id === id)
|
||||
}
|
||||
function deleteChat (id :number) {
|
||||
const idx = chats.value.findIndex(item => item.id === id)
|
||||
chats.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
return { chats, deleteChat, chatById }
|
||||
})
|
||||
37
src/stores/companies.ts
Normal file
37
src/stores/companies.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { Company, CompanyParams } from '../types'
|
||||
|
||||
export const useCompaniesStore = defineStore('companies', () => {
|
||||
const companies = ref<Company[]>([])
|
||||
|
||||
companies.value.push(
|
||||
{id: 11, project_id: 11, name: 'Рога и копытца', logo: '', description: 'Монтажники вывески' },
|
||||
{id: 21, project_id: 12, name: 'ООО "Василек33"', logo: '' },
|
||||
{id: 13, project_id: 13, name: 'Откат и деньги', logo: '', description: 'Договариваются с администрацией' },
|
||||
)
|
||||
|
||||
function companyById (id :number) {
|
||||
return companies.value.find(el =>el.id === id)
|
||||
}
|
||||
|
||||
function addCompany (company: CompanyParams) {
|
||||
companies.value.push({
|
||||
id: Date.now(),
|
||||
project_id: Date.now() * 1000,
|
||||
...company
|
||||
})
|
||||
}
|
||||
|
||||
function updateCompany (id :number, company: CompanyParams) {
|
||||
const idx = companies.value.findIndex(item => item.id === id)
|
||||
Object.assign(companies.value[idx] || {}, company)
|
||||
}
|
||||
|
||||
function deleteCompany (id :number) {
|
||||
const idx = companies.value.findIndex(item => item.id === id)
|
||||
companies.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
return { companies, addCompany, updateCompany, deleteCompany, companyById }
|
||||
})
|
||||
32
src/stores/index.ts
Normal file
32
src/stores/index.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
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
|
||||
})
|
||||
77
src/stores/projects.ts
Normal file
77
src/stores/projects.ts
Normal file
@@ -0,0 +1,77 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { Project, ProjectParams } from '../types'
|
||||
|
||||
export const useProjectsStore = defineStore('projects', () => {
|
||||
const projects = ref<Project[]>([])
|
||||
const currentProjectId = ref<number | null>(null)
|
||||
|
||||
projects.value.push(
|
||||
{ id: 1, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 3, companies: 1, persons: 5, is_archive: false, logo_as_bg: false },
|
||||
{ id: 2, name: 'Разделка бобра на куски', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 8, companies: 12, persons: 1, is_archive: false, logo_as_bg: false },
|
||||
{ id: 3, name: 'Комплекс мер', description: '', logo: '', chats: 8, companies: 3, persons: 4, is_archive: true, logo_as_bg: false },
|
||||
{ id: 4, name: 'Тестовый проект 2', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
|
||||
{ id: 11, name: 'Тестовый проект 12', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 5, companies: 2, persons: 5, is_archive: false, logo_as_bg: false },
|
||||
{ id: 12, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
|
||||
{ id: 13, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: true },
|
||||
{ id: 14, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
|
||||
{ id: 112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false},
|
||||
{ id: 113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
|
||||
{ id: 114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: true, logo_as_bg: false },
|
||||
{ id: 1112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
|
||||
{ id: 1113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
|
||||
{ id: 1114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
|
||||
)
|
||||
|
||||
function projectById (id :number) {
|
||||
return projects.value.find(el =>el.id === id)
|
||||
}
|
||||
|
||||
function addProject (project: ProjectParams) {
|
||||
const newProject = {
|
||||
id: Date.now(),
|
||||
is_archive: false,
|
||||
chats: 0,
|
||||
persons: 0,
|
||||
companies: 0,
|
||||
...project
|
||||
}
|
||||
projects.value.push(newProject)
|
||||
return newProject
|
||||
}
|
||||
|
||||
function updateProject (id :number, project :Project) {
|
||||
const idx = projects.value.findIndex(item => item.id === id)
|
||||
Object.assign(projects.value[idx] || {}, project)
|
||||
}
|
||||
|
||||
function archiveProject (id :number, status :boolean) {
|
||||
const idx = projects.value.findIndex(item => item.id === id)
|
||||
if (projects.value[idx]) projects.value[idx].is_archive = status
|
||||
}
|
||||
|
||||
function deleteProject (id :number) {
|
||||
const idx = projects.value.findIndex(item => item.id === id)
|
||||
projects.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
function setCurrentProjectId (id: number | null) {
|
||||
currentProjectId.value = id
|
||||
}
|
||||
|
||||
function getCurrentProject () {
|
||||
return currentProjectId.value ? projectById(currentProjectId.value) : <Project>{}
|
||||
}
|
||||
|
||||
return {
|
||||
projects,
|
||||
currentProjectId,
|
||||
projectById,
|
||||
addProject,
|
||||
updateProject,
|
||||
archiveProject,
|
||||
deleteProject,
|
||||
setCurrentProjectId,
|
||||
getCurrentProject
|
||||
}
|
||||
})
|
||||
47
src/types.ts
Normal file
47
src/types.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
interface ProjectParams {
|
||||
name: string
|
||||
description?: string
|
||||
logo?: string
|
||||
logo_as_bg: boolean
|
||||
}
|
||||
|
||||
interface Project extends ProjectParams {
|
||||
id: number
|
||||
is_archive: boolean
|
||||
chats: number
|
||||
companies: number
|
||||
persons: number
|
||||
}
|
||||
|
||||
interface Chat {
|
||||
id: number
|
||||
// project_id: number
|
||||
name: string
|
||||
description?: string
|
||||
logo?: string
|
||||
persons: number
|
||||
owner_id: number
|
||||
}
|
||||
|
||||
interface CompanyParams {
|
||||
name: string
|
||||
description?: string
|
||||
address?: string
|
||||
site?: string
|
||||
phone?: string
|
||||
email?: string
|
||||
logo?: string
|
||||
}
|
||||
|
||||
interface Company extends CompanyParams {
|
||||
id: number
|
||||
project_id: number
|
||||
}
|
||||
|
||||
export type {
|
||||
Project,
|
||||
ProjectParams,
|
||||
Chat,
|
||||
Company,
|
||||
CompanyParams
|
||||
}
|
||||
Reference in New Issue
Block a user