v11
This commit is contained in:
@@ -1,326 +1,315 @@
|
||||
<template>
|
||||
<div class="q-pa-none flex column col-grow no-scroll">
|
||||
<pn-scroll-list
|
||||
:hideHeader="chats.length === 0"
|
||||
>
|
||||
<template #card-body-header>
|
||||
<pn-action-bar
|
||||
v-model="search"
|
||||
placeholder="chats__search"
|
||||
:show-calendar-btn="false"
|
||||
:show-filter-btn="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #card-body-btn>
|
||||
<div
|
||||
v-if="chats.length !== 0 || obsoleteChats.length !== 0"
|
||||
class="w100 flex justify-end q-px-md"
|
||||
>
|
||||
<q-btn
|
||||
@click="showDialogHelp = !showDialogHelp"
|
||||
flat dense no-caps
|
||||
class="q-my-xs"
|
||||
>
|
||||
<div class="text-caption flex no-wrap items-center q-px-xs text-grey">
|
||||
<span class="q-pr-xs">
|
||||
{{ $t("chats__help_chat_type") }}
|
||||
</span>
|
||||
<q-icon name="mdi-help-circle-outline" size="xs"/>
|
||||
</div>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<q-list separator v-if="chats.length !== 0">
|
||||
<q-slide-item
|
||||
v-for="item in displayChats"
|
||||
:key="item.id"
|
||||
@right="handleSlide($event, item.id)"
|
||||
right-color="red"
|
||||
@click="goChatInfo(item.id)"
|
||||
>
|
||||
<template #right>
|
||||
<q-icon size="lg" name="mdi-link-off"/>
|
||||
</template>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
:img="item.logo"
|
||||
:name="item.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
</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>
|
||||
<div class="row no-wrap items-center">
|
||||
<span class="text-caption q-pr-xs">
|
||||
{{ getDate(item.bot_access_date) }}
|
||||
</span>
|
||||
<q-icon
|
||||
:name="chatAccess(item.bot_access).icon"
|
||||
:color="chatAccess(item.bot_access).color"
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center no-wrap text-caption">
|
||||
<!-- if chat reconnect -->
|
||||
<q-icon
|
||||
v-if="item.state === 2"
|
||||
:name="chatState(2).icon"
|
||||
:color="chatState(2).color"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
|
||||
<div class="flex no-wrap items-center">
|
||||
<q-icon name="mdi-account-outline"/>
|
||||
<span>{{ item.user_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-slide-item>
|
||||
</q-list>
|
||||
|
||||
<div
|
||||
v-if="obsoleteChats.length !== 0"
|
||||
class="flex column items-center w100"
|
||||
:class="showObsoleteChats ? 'bg-grey-12' : ''"
|
||||
>
|
||||
<q-btn
|
||||
class="w100 rotate-icon-btn"
|
||||
color="grey"
|
||||
flat
|
||||
no-caps
|
||||
@click="showObsoleteChats=!showObsoleteChats"
|
||||
icon-right="arrow_drop_down"
|
||||
:class="{ 'rotate-icon': showObsoleteChats }"
|
||||
>
|
||||
<span class="text-caption">
|
||||
{{ !showObsoleteChats
|
||||
? $t('chats__show_obsolete_chats') + ' (' + obsoleteChats.length +')'
|
||||
: $t('chats__hide_obsolete_chats')
|
||||
}}
|
||||
</span>
|
||||
</q-btn>
|
||||
|
||||
<div class="w100" style="overflow: hidden">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated slideInDown"
|
||||
leave-active-class="animated slideOutUp"
|
||||
>
|
||||
<q-list separator v-if="showObsoleteChats" class="w100">
|
||||
<q-item
|
||||
v-for = "item in obsoleteChats"
|
||||
:key="item.id"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
:img="item.logo"
|
||||
:name="item.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1" class="text-bold">
|
||||
{{ item.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div
|
||||
class="row no-wrap items-center"
|
||||
v-if="item.state_date"
|
||||
>
|
||||
<span class="text-caption q-pr-xs">
|
||||
{{ getDate(item.state_date) }}
|
||||
</span>
|
||||
<q-icon
|
||||
:name="chatState(item.state).icon"
|
||||
:color="chatState(item.state).color"
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
</q-item>
|
||||
</q-list>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pn-onboard-btn
|
||||
v-if="chats.length === 0 && obsoleteChats.length === 0 && chatsInit"
|
||||
icon="mdi-chat-plus-outline"
|
||||
:message1="$t('chats__onboard_msg1')"
|
||||
:message2="$t('chats__onboard_msg2')"
|
||||
@click="showOverlay=true; fabState=true"
|
||||
<pn-page-card v-bind="$attrs">
|
||||
<template #card-header>
|
||||
<pn-action-bar
|
||||
v-if="chats.length !== 0"
|
||||
v-model="search"
|
||||
placeholder="chats__search"
|
||||
:show-calendar-btn="false"
|
||||
:show-filter-btn="false"
|
||||
/>
|
||||
<div
|
||||
class="flex column justify-center items-center w100"
|
||||
style="position: absolute; bottom: 0;"
|
||||
v-if="!chatsInit"
|
||||
>
|
||||
<q-linear-progress indeterminate />
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
</template>
|
||||
|
||||
<q-page-sticky
|
||||
:style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
|
||||
position="bottom-right"
|
||||
:offset="[0, 18]"
|
||||
class="fix-fab-offset"
|
||||
<q-list v-if="chats.length !== 0">
|
||||
<q-slide-item
|
||||
v-for="item in displayChats"
|
||||
:key="item.id"
|
||||
@right="handleSlide($event, item.id)"
|
||||
right-color="red"
|
||||
@click="goChatInfo(item.id)"
|
||||
>
|
||||
<template #right>
|
||||
<q-icon size="lg" name="mdi-link-off"/>
|
||||
</template>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
:img="item.logo"
|
||||
:name="item.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
</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>
|
||||
<div class="row no-wrap items-center">
|
||||
<span class="text-caption q-pr-xs">
|
||||
{{ getDate(item.bot_access_date) }}
|
||||
</span>
|
||||
<q-icon
|
||||
:name="chatAccess(item.bot_access).icon"
|
||||
:color="chatAccess(item.bot_access).color"
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center no-wrap text-caption">
|
||||
<!-- if chat reconnect -->
|
||||
<q-icon
|
||||
v-if="item.state === 2"
|
||||
:name="chatState(2).icon"
|
||||
:color="chatState(2).color"
|
||||
size="xs"
|
||||
class="q-pr-sm"
|
||||
/>
|
||||
|
||||
<div class="flex no-wrap items-center">
|
||||
<q-icon name="mdi-account-outline"/>
|
||||
<span>{{ item.user_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-slide-item>
|
||||
</q-list>
|
||||
|
||||
<div
|
||||
v-if="displayObsoleteChats.length !== 0"
|
||||
class="flex column items-center w100"
|
||||
:class="showObsoleteChats ? 'bg-grey-12' : ''"
|
||||
>
|
||||
<q-btn
|
||||
class="w100 rotate-icon-btn"
|
||||
color="grey"
|
||||
flat
|
||||
no-caps
|
||||
@click="showObsoleteChats = !showObsoleteChats"
|
||||
icon-right="arrow_drop_down"
|
||||
:class="{ 'rotate-icon': showObsoleteChats }"
|
||||
>
|
||||
<span class="text-caption">
|
||||
{{ !showObsoleteChats
|
||||
? $t('chats__show_obsolete_chats') + ' (' + displayObsoleteChats.length +')'
|
||||
: $t('chats__hide_obsolete_chats')
|
||||
}}
|
||||
</span>
|
||||
</q-btn>
|
||||
|
||||
<div class="w100" style="overflow: hidden">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated slideInDown"
|
||||
leave-active-class="animated slideOutUp"
|
||||
>
|
||||
<q-list v-if="showObsoleteChats" class="w100">
|
||||
<q-item
|
||||
v-for = "item in displayObsoleteChats"
|
||||
:key="item.id"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
:img="item.logo"
|
||||
:name="item.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1" class="text-bold">
|
||||
{{ item.name }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<div
|
||||
class="row no-wrap items-center"
|
||||
v-if="item.state_date"
|
||||
>
|
||||
<span class="text-caption q-pr-xs">
|
||||
{{ getDate(item.state_date) }}
|
||||
</span>
|
||||
<q-icon
|
||||
:name="chatState(item.state).icon"
|
||||
:color="chatState(item.state).color"
|
||||
size="xs"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
|
||||
</q-item>
|
||||
</q-list>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pn-onboard-btn
|
||||
v-if="chats.length === 0 && obsoleteChats.length === 0 && chatsInit"
|
||||
icon="mdi-chat-plus-outline"
|
||||
message1="chats__onboard_msg1"
|
||||
message2="chats__onboard_msg2"
|
||||
@click="showAttachChatDialog=true; fabState=true"
|
||||
/>
|
||||
<div
|
||||
class="column justify-center items-center w100"
|
||||
style="position: absolute; bottom: 0;"
|
||||
v-if="!chatsInit"
|
||||
>
|
||||
<q-linear-progress indeterminate />
|
||||
</div>
|
||||
<template #card-fab>
|
||||
<div v-if="chats.length !== 0 || obsoleteChats.length !== 0">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated zoomIn"
|
||||
>
|
||||
<pn-glass-btn
|
||||
type="fab"
|
||||
color="grey-2"
|
||||
>
|
||||
<q-btn
|
||||
@click="showDialogHelp = !showDialogHelp"
|
||||
fab
|
||||
icon="mdi-help"
|
||||
color="transparent"
|
||||
class="text-grey"
|
||||
/>
|
||||
</pn-glass-btn>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated zoomIn"
|
||||
>
|
||||
<q-fab
|
||||
v-model="fabState"
|
||||
v-if="showFab"
|
||||
icon="add"
|
||||
color="brand"
|
||||
:class="isEnableChatAdd ? '' : 'fab-disabled'"
|
||||
direction="up"
|
||||
vertical-actions-align="right"
|
||||
@click="showOverlay = !showOverlay"
|
||||
:disable="!tg.initData"
|
||||
<pn-glass-btn
|
||||
type="fab"
|
||||
color="primary"
|
||||
>
|
||||
<q-fab-action
|
||||
square
|
||||
clickable
|
||||
v-ripple
|
||||
class="bg-white change-fab-action q-pa-none"
|
||||
style="cursor: default"
|
||||
label-style=""
|
||||
>
|
||||
|
||||
<template #icon>
|
||||
<q-list class="q-py-sm" v-if="isEnableChatAdd">
|
||||
<q-item
|
||||
v-for="item in fabMenu"
|
||||
:key="item.id"
|
||||
class="w100"
|
||||
:clickable="item.type !== 'header'"
|
||||
v-ripple
|
||||
@click="item.type !== 'header' && item.func ? item?.func() : () => {}"
|
||||
>
|
||||
<template v-if="item.type === 'header'">
|
||||
<div class="w100 column" :class="item.id === 4 ? 'q-pt-md' : ''">
|
||||
<span
|
||||
class="w100 text-center text-bold"
|
||||
:class="'text-' + item.color"
|
||||
style="line-height: 1rem;">
|
||||
{{ $t(item.title) }}
|
||||
</span>
|
||||
<div class="text-caption text-center text-grey fab-action-item">
|
||||
{{ $t(item.description) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<q-item-section avatar class="items-center">
|
||||
<q-avatar :color="item.color" 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.title) }}
|
||||
</q-item-label>
|
||||
<q-item-label caption class="fab-action-item text-left">
|
||||
{{ $t(item.description) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</template>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<div v-else class="w100 bg-white column q-py-md q-px-md rounded-card fab-action-item">
|
||||
<div class="text-negative">
|
||||
{{ $t('chats__disable_add_chat') }}
|
||||
</div>
|
||||
<span class="text-caption text-grey">
|
||||
{{ $t('chats__disable_add_chat_description') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</q-fab-action>
|
||||
</q-fab>
|
||||
<q-btn
|
||||
@click="showAttachChatDialog = !showAttachChatDialog"
|
||||
fab
|
||||
icon="add"
|
||||
color="transparent"
|
||||
:disable="!tg.initData"
|
||||
/>
|
||||
</pn-glass-btn>
|
||||
</transition>
|
||||
</q-page-sticky>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<pn-overlay v-if="showOverlay"/>
|
||||
<pn-simple-scroll-dialog
|
||||
v-model="showAttachChatDialog"
|
||||
title="chats__attach_dialog_title"
|
||||
>
|
||||
<q-list v-if="isEnableChatAdd">
|
||||
<q-item
|
||||
v-for="item in fabMenu"
|
||||
:key="item.id"
|
||||
class="w100"
|
||||
:clickable="item.type !== 'header'"
|
||||
:v-ripple="item.type !== 'header'"
|
||||
@click="item.type !== 'header' && item.func
|
||||
? (showAttachChatDialog = false, item.func())
|
||||
: null"
|
||||
>
|
||||
<template v-if="item.type === 'header'">
|
||||
<div class="w100 column" :class="item.id === 4 ? 'q-pt-md' : ''">
|
||||
<span
|
||||
class="w100 text-center text-bold"
|
||||
:class="'text-' + item.color"
|
||||
style="line-height: 1rem;">
|
||||
{{ $t(item.title) }}
|
||||
</span>
|
||||
<div class="text-caption text-center text-grey fab-action-item">
|
||||
{{ $t(item.description) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<q-item-section avatar class="items-center">
|
||||
<q-avatar :color="item.color" rounded text-color="white" :icon="item.icon" />
|
||||
</q-item-section>
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogDeleteChat"
|
||||
icon="mdi-link-off"
|
||||
color="negative"
|
||||
title="chats__dialog_unlink_title"
|
||||
message1="chats__dialog_unlink_message"
|
||||
message2="chats__dialog_unlink_message2"
|
||||
mainBtnLabel="chats__dialog_unlink_ok"
|
||||
@clickMainBtn="onConfirm()"
|
||||
@close="onCancel()"
|
||||
@before-hide="onDialogBeforeHide()"
|
||||
/>
|
||||
|
||||
<pn-simple-scroll-dialog
|
||||
v-model="showDialogHelp"
|
||||
title="chat__help_title"
|
||||
>
|
||||
<div class="q-py-none q-px-md q-ma-none">
|
||||
<q-list class="q-pt-sm">
|
||||
<pn-chat-type-item :access="2"/>
|
||||
<pn-chat-type-item :access="1"/>
|
||||
<pn-chat-type-item :state="2"/>
|
||||
<pn-chat-type-item :state="3"/>
|
||||
<pn-chat-type-item :state="4"/>
|
||||
<q-item-section class="items-start">
|
||||
<q-item-label class="fab-action-item">
|
||||
{{ $t(item.title) }}
|
||||
</q-item-label>
|
||||
<q-item-label caption class="fab-action-item text-left">
|
||||
{{ $t(item.description) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</template>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<q-separator class="q-mt-md"/>
|
||||
<div class="text-caption q-pt-md">
|
||||
{{ $t('chat_type__dialog_func_title') }}
|
||||
<ol class="q-px-md q-my-xs">
|
||||
<li>{{ $t('chat_type__dialog_func_point1') }}</li>
|
||||
<li>{{ $t('chat_type__dialog_func_point2') }}</li>
|
||||
<li>{{ $t('chat_type__dialog_func_point3') }}</li>
|
||||
</ol>
|
||||
<div class="q-pt-md">
|
||||
{{ $t('chat_type__dialog_administrator_rights')}}
|
||||
|
||||
<div v-else class="w100 bg-white column q-py-md q-px-md rounded-card fab-action-item">
|
||||
<div class="text-negative">
|
||||
{{ $t('chats__disable_add_chat') }}
|
||||
</div>
|
||||
<span class="text-caption text-grey">
|
||||
{{ $t('chats__disable_add_chat_description') }}
|
||||
</span>
|
||||
</div>
|
||||
</pn-simple-scroll-dialog>
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogDeleteChat"
|
||||
icon="mdi-link-off"
|
||||
color="negative"
|
||||
title="chats__dialog_unlink_title"
|
||||
message1="chats__dialog_unlink_message"
|
||||
message2="chats__dialog_unlink_message2"
|
||||
mainBtnLabel="chats__dialog_unlink_ok"
|
||||
@clickMainBtn="onConfirm()"
|
||||
@close="onCancel()"
|
||||
@before-hide="onDialogBeforeHide()"
|
||||
/>
|
||||
|
||||
<pn-simple-scroll-dialog
|
||||
v-model="showDialogHelp"
|
||||
title="chat__help_title"
|
||||
>
|
||||
<div class="q-py-none q-px-md q-ma-none">
|
||||
<q-list>
|
||||
<pn-chat-type-item :access="2"/>
|
||||
<pn-chat-type-item :access="1"/>
|
||||
<pn-chat-type-item :state="2"/>
|
||||
<pn-chat-type-item :state="3"/>
|
||||
<pn-chat-type-item :state="4"/>
|
||||
</q-list>
|
||||
<q-separator class="q-mt-md"/>
|
||||
<div class="text-caption q-pt-md">
|
||||
{{ $t('chat_type__dialog_func_title') }}
|
||||
<ol class="q-px-md q-my-xs">
|
||||
<li>{{ $t('chat_type__dialog_func_point1') }}</li>
|
||||
<li>{{ $t('chat_type__dialog_func_point2') }}</li>
|
||||
<li>{{ $t('chat_type__dialog_func_point3') }}</li>
|
||||
</ol>
|
||||
<div class="q-pt-md">
|
||||
{{ $t('chat_type__dialog_administrator_rights')}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</pn-simple-scroll-dialog>
|
||||
|
||||
</pn-simple-scroll-dialog>
|
||||
<template #overlay>
|
||||
<pn-overlay v-if="showAttachChatDialog" style="z-index:1005;"/>
|
||||
</template>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onActivated, onDeactivated, onBeforeUnmount, inject } from 'vue'
|
||||
import { ref, computed, inject } from 'vue'
|
||||
import { useAuthStore } from 'stores/auth'
|
||||
import { useChatsStore } from 'stores/chats'
|
||||
import type { WebApp } from '@twa-dev/types'
|
||||
import type { Chat } from 'types/Chat'
|
||||
import type { Chat, ObsoleteChat } from 'types/Chat'
|
||||
import { useI18n } from "vue-i18n"
|
||||
import { date } from 'quasar'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import pnChatTypeItem from 'components/pnChatTypeItem.vue'
|
||||
import pnSimpleScrollDialog from 'components/pnSimpleScrollDialog.vue'
|
||||
import pnActionBar from 'components/pnActionBar.vue'
|
||||
import pnGlassBtn from 'components/pnGlassBtn.vue'
|
||||
import { chatAccess, chatState } from 'utils/chats'
|
||||
|
||||
const router = useRouter()
|
||||
@@ -329,7 +318,7 @@
|
||||
const { t } = useI18n()
|
||||
|
||||
const search = ref('')
|
||||
const showOverlay = ref<boolean>(false)
|
||||
const showAttachChatDialog = ref<boolean>(false)
|
||||
const chatsStore = useChatsStore()
|
||||
const showDialogDeleteChat = ref<boolean>(false)
|
||||
const deleteChatId = ref<number | undefined>(undefined)
|
||||
@@ -444,28 +433,6 @@
|
||||
await router.push({ name: 'chat_info', params: { id: route.params.id, chatId }})
|
||||
}
|
||||
|
||||
// fix fab jumping
|
||||
const showFab = ref(false)
|
||||
const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
onActivated(() => {
|
||||
timerId.value = setTimeout(() => {
|
||||
showFab.value = true
|
||||
}, 300)
|
||||
})
|
||||
|
||||
onDeactivated(() => {
|
||||
showFab.value = false
|
||||
if (timerId.value) {
|
||||
clearTimeout(timerId.value)
|
||||
timerId.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timerId.value) clearTimeout(timerId.value)
|
||||
})
|
||||
|
||||
function getDate (d: number) {
|
||||
return new Date(d * 1000).getFullYear() === new Date(Date.now()).getFullYear()
|
||||
? date.formatDate(d * 1000, 'DD MMM')
|
||||
@@ -474,32 +441,20 @@
|
||||
|
||||
const obsoleteChats = computed(() => chatsStore.obsoleteChats)
|
||||
const showObsoleteChats = ref(false)
|
||||
|
||||
|
||||
const displayObsoleteChats = computed(() => {
|
||||
return obsoleteChats.value
|
||||
.filter(searchChats)
|
||||
|
||||
function searchChats (el: ObsoleteChat) {
|
||||
if (!search.value || !(search.value && search.value.trim())) return true
|
||||
const searchValue = search.value.trim().toLowerCase()
|
||||
return el.name.toLowerCase().includes(searchValue)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* width of choose element */
|
||||
.change-fab-action .q-fab__label--internal {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.change-fab-action :deep(.q-focus-helper) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.q-item :deep(.q-focus-helper) {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.change-fab-action {
|
||||
width: calc(min(100vw, var(--body-width)) - 48px) !important;
|
||||
border-radius: var(--top-radius)
|
||||
}
|
||||
|
||||
.fab-action-item {
|
||||
text-wrap: auto !important;
|
||||
}
|
||||
|
||||
/* fix mini border after slide */
|
||||
:deep(.q-slide-item__right)
|
||||
{
|
||||
|
||||
@@ -1,154 +1,147 @@
|
||||
<template>
|
||||
<div class="q-pa-none flex column col-grow no-scroll">
|
||||
<pn-scroll-list
|
||||
hideHeader
|
||||
>
|
||||
<template #card-body-btn>
|
||||
<div class="flex items-center justify-end q-pa-sm w100" v-if="companies.length !== 0">
|
||||
<q-btn
|
||||
:color="companies.length <= 2 ? 'grey-6' : 'primary'"
|
||||
flat
|
||||
no-caps
|
||||
@click="maskCompany"
|
||||
:disable="companies.length <= 2"
|
||||
class="q-pr-md"
|
||||
rounded
|
||||
>
|
||||
<q-icon
|
||||
left
|
||||
size="sm"
|
||||
name="mdi-domino-mask"
|
||||
class="q-mr-xs"
|
||||
/>
|
||||
<div>
|
||||
{{ $t('companies__mask')}}
|
||||
</div>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<q-list separator v-if="companies.length !== 0">
|
||||
<q-slide-item
|
||||
v-for="item in displayCompanies"
|
||||
:key="item.id"
|
||||
@right="handleSlide($event, item.id)"
|
||||
right-color="red"
|
||||
>
|
||||
<template #right v-if="item.id !== myCompany?.id">
|
||||
<q-icon size="lg" name="mdi-account-multiple-minus-outline"/>
|
||||
</template>
|
||||
<q-item
|
||||
:key="item.id"
|
||||
clickable
|
||||
v-ripple
|
||||
class="w100"
|
||||
@click="goCompanyInfo(item.id)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
:img="item.logo"
|
||||
:name="item.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1" class="text-caption text-amber-10" v-if="item.id === myCompany?.id">
|
||||
<div class="flex items-center">
|
||||
<q-icon name="star" class="q-pr-xs"/>
|
||||
{{ $t('companies__my_company') }}
|
||||
</div>
|
||||
</q-item-label>
|
||||
<q-item-label lines="1" class="text-bold">
|
||||
{{ item.name }}
|
||||
<q-icon
|
||||
v-if="companiesStore.checkCompanyMasked(item.id)"
|
||||
name="mdi-domino-mask"
|
||||
color="grey"
|
||||
size="sm"
|
||||
/>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
caption lines="2"
|
||||
style="max-width: -webkit-fill-available; white-space: pre-line"
|
||||
>
|
||||
{{ item.description }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<div class="flex items-end column">
|
||||
<span class="text-caption flex items-center">
|
||||
<q-icon name="mdi-account-outline" color="grey" />
|
||||
<span>{{ getQtyUsers(item.id) }}</span>
|
||||
</span>
|
||||
<div class="flex items-center row text-caption">
|
||||
<q-icon v-if="item.site" name="mdi-web"/>
|
||||
<q-icon v-if="item.address" name="mdi-map-marker-outline"/>
|
||||
<q-icon v-if="item.phone" name="mdi-phone-outline"/>
|
||||
<q-icon v-if="item.email" name="mdi-email-outline"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-slide-item>
|
||||
</q-list>
|
||||
|
||||
<pn-onboard-btn
|
||||
v-if="companies.length <= 1 && companiesInit"
|
||||
icon="mdi-account-multiple-plus-outline"
|
||||
:message1="$t('companies__onboard_msg1')"
|
||||
:message2="$t('companies__onboard_msg2')"
|
||||
@btn-click="createCompany"
|
||||
/>
|
||||
<div
|
||||
class="flex column justify-center items-center w100"
|
||||
style="position: absolute; bottom: 0;"
|
||||
v-if="!companiesInit"
|
||||
<pn-page-card v-bind="$attrs">
|
||||
<q-list v-if="companies.length !== 0">
|
||||
<q-slide-item
|
||||
v-for="item in displayCompanies"
|
||||
:key="item.id"
|
||||
@right="handleSlide($event, item.id)"
|
||||
right-color="red"
|
||||
>
|
||||
<q-linear-progress indeterminate />
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
<template #right v-if="item.id !== myCompany?.id">
|
||||
<q-icon size="lg" name="mdi-account-multiple-minus-outline"/>
|
||||
</template>
|
||||
<q-item
|
||||
:key="item.id"
|
||||
clickable
|
||||
v-ripple
|
||||
class="w100"
|
||||
@click="goCompanyInfo(item.id)"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<pn-auto-avatar
|
||||
:img="item.logo"
|
||||
:name="item.name"
|
||||
type="rounded"
|
||||
size="lg"
|
||||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label lines="1" class="text-caption text-amber-10" v-if="item.id === myCompany?.id">
|
||||
<div class="flex items-center">
|
||||
<q-icon name="star" class="q-pr-xs"/>
|
||||
{{ $t('companies__my_company') }}
|
||||
</div>
|
||||
</q-item-label>
|
||||
<q-item-label lines="1" class="text-bold">
|
||||
{{ item.name }}
|
||||
<q-icon
|
||||
v-if="companiesStore.checkCompanyMasked(item.id)"
|
||||
name="mdi-domino-mask"
|
||||
color="grey"
|
||||
size="sm"
|
||||
/>
|
||||
</q-item-label>
|
||||
<q-item-label
|
||||
caption lines="2"
|
||||
style="max-width: -webkit-fill-available; white-space: pre-line"
|
||||
>
|
||||
{{ item.description }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<div class="flex items-end column">
|
||||
<span class="text-caption flex items-center">
|
||||
<q-icon name="mdi-account-outline" color="grey" />
|
||||
<span>{{ getQtyUsers(item.id) }}</span>
|
||||
</span>
|
||||
<div class="flex items-center row text-caption">
|
||||
<q-icon v-if="item.site" name="mdi-web"/>
|
||||
<q-icon v-if="item.address" name="mdi-map-marker-outline"/>
|
||||
<q-icon v-if="item.phone" name="mdi-phone-outline"/>
|
||||
<q-icon v-if="item.email" name="mdi-email-outline"/>
|
||||
</div>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-slide-item>
|
||||
</q-list>
|
||||
|
||||
<q-page-sticky
|
||||
position="bottom-right"
|
||||
:offset="[0, 18]"
|
||||
class="fix-fab-offset"
|
||||
<pn-onboard-btn
|
||||
v-if="companies.length <= 1 && companiesInit"
|
||||
icon="mdi-account-multiple-plus-outline"
|
||||
message1="companies__onboard_msg1"
|
||||
message2="companies__onboard_msg2"
|
||||
@btn-click="createCompany"
|
||||
/>
|
||||
<div
|
||||
class="column justify-center items-center w100"
|
||||
style="position: absolute; bottom: 0;"
|
||||
v-if="!companiesInit"
|
||||
>
|
||||
<q-linear-progress indeterminate />
|
||||
</div>
|
||||
<template #card-fab>
|
||||
|
||||
<div v-if="companies.length >= 3">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated zoomIn"
|
||||
>
|
||||
<pn-glass-btn
|
||||
type="fab"
|
||||
color="grey-2"
|
||||
>
|
||||
<q-btn
|
||||
@click="maskCompany"
|
||||
fab
|
||||
icon="mdi-domino-mask"
|
||||
color="transparent"
|
||||
class="text-grey"
|
||||
/>
|
||||
</pn-glass-btn>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated zoomIn"
|
||||
>
|
||||
<q-btn
|
||||
v-if="showFab"
|
||||
fab
|
||||
icon="add"
|
||||
<pn-glass-btn
|
||||
type="fab"
|
||||
color="brand"
|
||||
@click="createCompany()"
|
||||
/>
|
||||
>
|
||||
<q-btn
|
||||
fab
|
||||
icon="add"
|
||||
color="transparent"
|
||||
@click="createCompany()"
|
||||
/>
|
||||
</pn-glass-btn>
|
||||
</transition>
|
||||
</q-page-sticky>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogDeleteCompany"
|
||||
icon="mdi-account-multiple-minus-outline"
|
||||
color="negative"
|
||||
title="companies__dialog_delete_title"
|
||||
message1="companies__dialog_delete_message"
|
||||
message2="companies__dialog_delete_message2"
|
||||
mainBtnLabel="companies__dialog_delete_ok"
|
||||
@clickMainBtn="onConfirm()"
|
||||
@close="onCancel()"
|
||||
@before-hide="onDialogBeforeHide()"
|
||||
/>
|
||||
<pn-small-dialog
|
||||
v-model="showDialogDeleteCompany"
|
||||
icon="mdi-account-multiple-minus-outline"
|
||||
color="negative"
|
||||
title="companies__dialog_delete_title"
|
||||
message1="companies__dialog_delete_message"
|
||||
message2="companies__dialog_delete_message2"
|
||||
mainBtnLabel="companies__dialog_delete_ok"
|
||||
@clickMainBtn="onConfirm()"
|
||||
@close="onCancel()"
|
||||
@before-hide="onDialogBeforeHide()"
|
||||
/>
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useCompaniesStore } from 'stores/companies'
|
||||
import { useUsersStore } from 'stores/users'
|
||||
import PnGlassBtn from 'components/pnGlassBtn.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
@@ -222,28 +215,6 @@
|
||||
return arr.length
|
||||
}
|
||||
|
||||
// fix fab jumping
|
||||
const showFab = ref(false)
|
||||
const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||
|
||||
onActivated(() => {
|
||||
timerId.value = setTimeout(() => {
|
||||
showFab.value = true
|
||||
}, 300)
|
||||
})
|
||||
|
||||
|
||||
onDeactivated(() => {
|
||||
showFab.value = false
|
||||
if (timerId.value) {
|
||||
clearTimeout(timerId.value)
|
||||
timerId.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timerId.value) clearTimeout(timerId.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -55,10 +55,8 @@
|
||||
|
||||
<q-btn
|
||||
@click="toProjects"
|
||||
flat
|
||||
no-caps
|
||||
dense
|
||||
rounded
|
||||
flat no-caps
|
||||
dense rounded
|
||||
class="q-ml-lg"
|
||||
>
|
||||
<span class="flex items-center no-wrap q-pl-sm">
|
||||
|
||||
@@ -1,169 +1,166 @@
|
||||
<template>
|
||||
<div class="q-pa-none flex column col-grow no-scroll">
|
||||
<pn-scroll-list
|
||||
:hideHeader="users.length === 0"
|
||||
>
|
||||
<template #card-body-header>
|
||||
<pn-action-bar
|
||||
v-model="search"
|
||||
placeholder="users__search"
|
||||
:show-calendar-btn="false"
|
||||
:show-filter-btn="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<q-list separator v-if="users.length !== 0">
|
||||
<q-slide-item
|
||||
v-for="item in displayUsers"
|
||||
:key="item.id"
|
||||
@right="handleSlide($event, item.id)"
|
||||
right-color="red"
|
||||
>
|
||||
<template #right>
|
||||
<q-icon size="lg" name="mdi-account-remove-outline"/>
|
||||
</template>
|
||||
<q-item
|
||||
:key="item.id"
|
||||
v-ripple
|
||||
clickable
|
||||
class="w100"
|
||||
@click="goUserInfo(item.id)"
|
||||
>
|
||||
<pn-user-list-item-body :item showStatus/>
|
||||
</q-item>
|
||||
</q-slide-item>
|
||||
</q-list>
|
||||
|
||||
<!-- LEAVE USERS SECTION -->
|
||||
<div
|
||||
v-if="leaveUsers.length!==0"
|
||||
class="flex column items-center w100"
|
||||
:class="showLeaveUsers ? 'bg-grey-12' : ''"
|
||||
>
|
||||
<q-btn
|
||||
class="w100 rotate-icon-btn"
|
||||
color="grey"
|
||||
flat
|
||||
no-caps
|
||||
@click="showLeaveUsers=!showLeaveUsers"
|
||||
icon-right="arrow_drop_down"
|
||||
:class="{ 'rotate-icon': showLeaveUsers }"
|
||||
>
|
||||
<span class="text-caption">
|
||||
{{ !showLeaveUsers
|
||||
? $t('users__show_left_users') + ' (' + leaveUsers.length +')'
|
||||
: $t('users__hide_left_users')
|
||||
}}
|
||||
</span>
|
||||
</q-btn>
|
||||
|
||||
<div class="w100" style="overflow: hidden">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated slideInDown"
|
||||
leave-active-class="animated slideOutUp"
|
||||
>
|
||||
<q-list separator v-if="showLeaveUsers" class="w100">
|
||||
<q-item
|
||||
v-for = "item in leaveUsers"
|
||||
:key="item.id"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<pn-user-list-item-body :item/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END LEAVE USERS SECTION -->
|
||||
|
||||
<!-- BLOCKED USERS SECTION -->
|
||||
<div
|
||||
v-if="blockedUsers.length!==0"
|
||||
class="flex column items-center w100"
|
||||
:class="showBlockedUsers ? 'bg-grey-12' : ''"
|
||||
>
|
||||
<q-btn
|
||||
class="w100 rotate-icon-btn"
|
||||
color="grey"
|
||||
flat
|
||||
no-caps
|
||||
@click="showBlockedUsers=!showBlockedUsers"
|
||||
icon-right="arrow_drop_down"
|
||||
:class="{ 'rotate-icon': showBlockedUsers }"
|
||||
>
|
||||
<span class="text-caption">
|
||||
{{ !showBlockedUsers
|
||||
? $t('users__show_blocked_users') + ' (' + blockedUsers.length +')'
|
||||
: $t('users__hide_blocked_users')
|
||||
}}
|
||||
</span>
|
||||
</q-btn>
|
||||
|
||||
<div class="w100" style="overflow: hidden">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated slideInDown"
|
||||
leave-active-class="animated slideOutUp"
|
||||
>
|
||||
<q-list separator v-if="showBlockedUsers" class="w100">
|
||||
<q-item
|
||||
v-for = "item in blockedUsers"
|
||||
:key="item.id"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="handleUnblockUser(item.id)"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<pn-user-list-item-body :item/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END BLOCKED USERS SECTION -->
|
||||
|
||||
<pn-onboard-btn
|
||||
v-if="users.length === 0 && usersInit"
|
||||
icon="mdi-account-outline"
|
||||
:message1="$t('users__onboard_msg1')"
|
||||
:message2="$t('users__onboard_msg2')"
|
||||
noBtn
|
||||
<pn-page-card v-bind="$attrs">
|
||||
<template #card-header>
|
||||
<pn-action-bar
|
||||
v-if="users.length !== 0"
|
||||
v-model="search"
|
||||
placeholder="users__search"
|
||||
:show-calendar-btn="false"
|
||||
:show-filter-btn="false"
|
||||
/>
|
||||
<div
|
||||
class="flex column justify-center items-center w100"
|
||||
style="position: absolute; bottom: 0;"
|
||||
v-if="!usersInit"
|
||||
</template>
|
||||
|
||||
<q-list v-if="users.length !== 0">
|
||||
<q-slide-item
|
||||
v-for="item in displayUsers"
|
||||
:key="item.id"
|
||||
@right="handleSlide($event, item.id)"
|
||||
right-color="red"
|
||||
>
|
||||
<q-linear-progress indeterminate />
|
||||
<template #right>
|
||||
<q-icon size="lg" name="mdi-account-remove-outline"/>
|
||||
</template>
|
||||
<q-item
|
||||
:key="item.id"
|
||||
v-ripple
|
||||
clickable
|
||||
class="w100"
|
||||
@click="goUserInfo(item.id)"
|
||||
>
|
||||
<pn-user-list-item-body :item showStatus/>
|
||||
</q-item>
|
||||
</q-slide-item>
|
||||
</q-list>
|
||||
|
||||
<!-- LEAVE USERS SECTION -->
|
||||
<div
|
||||
v-if="leaveUsers.length!==0"
|
||||
class="flex column items-center w100"
|
||||
:class="showLeaveUsers ? 'bg-grey-12' : ''"
|
||||
>
|
||||
<q-btn
|
||||
class="w100 rotate-icon-btn"
|
||||
color="grey"
|
||||
flat
|
||||
no-caps
|
||||
@click="showLeaveUsers=!showLeaveUsers"
|
||||
icon-right="arrow_drop_down"
|
||||
:class="{ 'rotate-icon': showLeaveUsers }"
|
||||
>
|
||||
<span class="text-caption">
|
||||
{{ !showLeaveUsers
|
||||
? $t('users__show_left_users') + ' (' + leaveUsers.length +')'
|
||||
: $t('users__hide_left_users')
|
||||
}}
|
||||
</span>
|
||||
</q-btn>
|
||||
|
||||
<div class="w100" style="overflow: hidden">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated slideInDown"
|
||||
leave-active-class="animated slideOutUp"
|
||||
>
|
||||
<q-list v-if="showLeaveUsers" class="w100">
|
||||
<q-item
|
||||
v-for = "item in leaveUsers"
|
||||
:key="item.id"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<pn-user-list-item-body :item/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</transition>
|
||||
</div>
|
||||
</pn-scroll-list>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END LEAVE USERS SECTION -->
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogBlockUser"
|
||||
icon="mdi-account-remove-outline"
|
||||
color="negative"
|
||||
title="users__dialog_block_title"
|
||||
message1="users__dialog_block_message"
|
||||
message2="users__dialog_block_message2"
|
||||
mainBtnLabel="users__dialog_block_ok"
|
||||
@clickMainBtn="onConfirmBlockUser()"
|
||||
@close="onCancel()"
|
||||
@before-hide="onDialogBeforeHide()"
|
||||
/>
|
||||
<!-- BLOCKED USERS SECTION -->
|
||||
<div
|
||||
v-if="blockedUsers.length!==0"
|
||||
class="flex column items-center w100"
|
||||
:class="showBlockedUsers ? 'bg-grey-12' : ''"
|
||||
>
|
||||
<q-btn
|
||||
class="w100 rotate-icon-btn"
|
||||
color="grey"
|
||||
flat
|
||||
no-caps
|
||||
@click="showBlockedUsers=!showBlockedUsers"
|
||||
icon-right="arrow_drop_down"
|
||||
:class="{ 'rotate-icon': showBlockedUsers }"
|
||||
>
|
||||
<span class="text-caption">
|
||||
{{ !showBlockedUsers
|
||||
? $t('users__show_blocked_users') + ' (' + blockedUsers.length +')'
|
||||
: $t('users__hide_blocked_users')
|
||||
}}
|
||||
</span>
|
||||
</q-btn>
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogRestoreUser"
|
||||
icon="mdi-account-reactivate-outline"
|
||||
color="green"
|
||||
title="users__dialog_restore_title"
|
||||
message1="users__dialog_restore_message"
|
||||
message2="users__dialog_restore_message2"
|
||||
mainBtnLabel="users__dialog_restore_ok"
|
||||
@clickMainBtn="onConfirmRestoreUser()"
|
||||
/>
|
||||
<div class="w100" style="overflow: hidden">
|
||||
<transition
|
||||
appear
|
||||
enter-active-class="animated slideInDown"
|
||||
leave-active-class="animated slideOutUp"
|
||||
>
|
||||
<q-list v-if="showBlockedUsers" class="w100">
|
||||
<q-item
|
||||
v-for = "item in blockedUsers"
|
||||
:key="item.id"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="handleUnblockUser(item.id)"
|
||||
class="w100 text-grey"
|
||||
>
|
||||
<pn-user-list-item-body :item/>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END BLOCKED USERS SECTION -->
|
||||
|
||||
<pn-onboard-btn
|
||||
v-if="users.length === 0 && usersInit"
|
||||
icon="mdi-account-outline"
|
||||
message1="users__onboard_msg1"
|
||||
message2="users__onboard_msg2"
|
||||
noBtn
|
||||
/>
|
||||
<div
|
||||
class="column justify-center items-center w100"
|
||||
style="position: absolute; bottom: 0;"
|
||||
v-if="!usersInit"
|
||||
>
|
||||
<q-linear-progress indeterminate />
|
||||
</div>
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogBlockUser"
|
||||
icon="mdi-account-remove-outline"
|
||||
color="negative"
|
||||
title="users__dialog_block_title"
|
||||
message1="users__dialog_block_message"
|
||||
message2="users__dialog_block_message2"
|
||||
mainBtnLabel="users__dialog_block_ok"
|
||||
@clickMainBtn="onConfirmBlockUser()"
|
||||
@close="onCancel()"
|
||||
@before-hide="onDialogBeforeHide()"
|
||||
/>
|
||||
|
||||
<pn-small-dialog
|
||||
v-model="showDialogRestoreUser"
|
||||
icon="mdi-account-reactivate-outline"
|
||||
color="green"
|
||||
title="users__dialog_restore_title"
|
||||
message1="users__dialog_restore_message"
|
||||
message2="users__dialog_restore_message2"
|
||||
mainBtnLabel="users__dialog_restore_ok"
|
||||
@clickMainBtn="onConfirmRestoreUser()"
|
||||
/>
|
||||
|
||||
</pn-page-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user