surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ver 0.5.51

Browse Source
This commit is contained in:
Surya Paolo
2023-01-03 16:51:45 +01:00
parent 3f9f608d4e
commit ce4bf65fc4
49 changed files with 1610 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/user/mygroup/mygroup.ts
View File

@@ -7,6 +7,7 @@ import { CCheckIfIsLogged } from '@/components/CCheckIfIsLogged'
import { CMyFieldRec } from '@/components/CMyFieldRec'
import { CSkill } from '@/components/CSkill'
import { CDateTime } from '@/components/CDateTime'
import { CSaldo } from '@/components/CSaldo'
import { tools } from '@store/Modules/tools'
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { useUserStore } from '@store/UserStore'
@@ -16,19 +17,22 @@ import { useI18n } from '@/boot/i18n'
import { toolsext } from '@store/Modules/toolsext'
import { useQuasar } from 'quasar'
import { costanti } from '@costanti'
import { ICity, IFriends, IMyGroup, ISearchList, IUserFields } from 'model'
import { ICircuit, ICity, IFriends, IMyCircuit, IMyGroup, ISearchList, IUserFields } from 'model'
import { shared_consts } from '@/common/shared_vuejs'
import { colmyUserPeople, colmyUserGroup } from '@store/Modules/fieldsTable'
import { useNotifStore } from '@store/NotifStore'
import { useCircuitStore } from '@src/store/CircuitStore'
export default defineComponent({
name: 'mygroup',
components: { CProfile, CTitleBanner, CMyFieldRec, CSkill, CDateTime, CMyFriends, CGridTableRec, CMyUser, CCheckIfIsLogged },
components: { CProfile, CTitleBanner, CMyFieldRec,
CSaldo, CSkill, CDateTime, CMyFriends, CGridTableRec, CMyUser, CCheckIfIsLogged },
props: {},
setup() {
const userStore = useUserStore()
const notifStore = useNotifStore()
const circuitStore = useCircuitStore()
const $route = useRoute()
const $q = useQuasar()
const { t } = useI18n()
@@ -41,7 +45,7 @@ export default defineComponent({
const filtroutente = ref(<any[]>[])
const showPic = ref(false)
const mygrp = ref(<IMyGroup|null>{})
const mygrp = ref(<IMyGroup | null>{})
const mystatus = ref(<number>0)
const users_in_group = ref(<IFriends[]>[])
@@ -58,6 +62,8 @@ export default defineComponent({
const cities = ref(<ICity[]>[])
const circuitslist = ref(<ICircuit[] | null | undefined>[])
function profile() {
return userStore.my.profile
}
@@ -69,13 +75,18 @@ export default defineComponent({
async function loadGroup() {
// Carica il profilo di quest'utente
if (groupname.value) {
await userStore.loadGroup(groupname.value, idnotif.value).then(({ data, status }: {data: any, status: number}) => {
await userStore.loadGroup(groupname.value, idnotif.value).then(({ data, status }: { data: any, status: number }) => {
console.log('data', data)
circuitslist.value = []
if (data) {
mygrp.value = data.mygroup
cities.value = data.cities
notifStore.setAsRead(idnotif.value)
users_in_group.value = data.users_in_group
if (mygrp.value && tools.iAmAdminGroup(groupname.value)) {
circuitslist.value = circuitStore.getCircuitsListByGroup(mygrp.value)
}
} else {
mygrp.value = null
users_in_group.value = []
@@ -99,7 +110,7 @@ export default defineComponent({
await loadGroup()
searchList.value = []
filtercustom.value = [{ 'profile.mygroups': { $elemMatch: {groupname: {$eq: groupname.value }} } } ]
filtercustom.value = [{ 'profile.mygroups': { $elemMatch: { groupname: { $eq: groupname.value } } } }]
arrfilterand.value = []
filtercustom_rich.value = []
@@ -236,6 +247,7 @@ export default defineComponent({
loading,
mystatus,
cities,
circuitslist,
}
}
})

513
src/views/user/mygroup/mygroup.vue
View File

@@ -1,35 +1,45 @@
<template>
<div class="q-gutter-sm q-pa-sm q-pb-md">
<div v-if="!mygrp && !loading">
<div v-if="mystatus === 403">
<h3>Non hai i permessi per accedere al Gruppo.<br>
<h3>
Non hai i permessi per accedere al Gruppo.<br />
Occorre prima registrarsi alla App </h3>
Occorre prima registrarsi alla App
</h3>
</div>
<div v-else>
<h3>Gruppo non Esistente</h3>
</div>
</div>
<div v-else>
<div v-if="!tools.isLogged()">
<CCheckIfIsLogged></CCheckIfIsLogged>
</div>
<div>
<div v-if="mygrp.descr" class="fit column no-wrap justify-evenly items-center content-start">
<div
v-if="mygrp.descr"
class="fit column no-wrap justify-evenly items-center content-start"
>
<div class="">
<q-avatar size="140px">
<q-img :src="getImgGrp()" :alt="mygrpname()" img-class="imgprofile" height="140px" @click="showPic = true"/>
<q-img
:src="getImgGrp()"
:alt="mygrpname()"
img-class="imgprofile"
height="140px"
@click="showPic = true"
/>
</q-avatar>
</div>
<div class="text-h6">
<span v-if="checkifShow('name')"> {{ mygrp.title }}</span>
</div>
<div v-if="mygrp.title !== mygrp.groupname" class="col-12 text-h7 text-blue text-shadow-2">
<div
v-if="mygrp.title !== mygrp.groupname"
class="col-12 text-h7 text-blue text-shadow-2"
>
{{ mygrp.groupname }}
</div>
@@ -37,58 +47,111 @@
v-if="userStore.IsRefusedGroupByGroupname(mygrp.groupname)"
rounded
class="bg-red text-white"
style="text-align: center;"
style="text-align: center"
>
<em style="font-weight: bold">{{ $t('db.youarerefusedgroup') }}</em><br>
<em style="font-weight: bold">{{ $t('db.youarerefusedgroup') }}</em
><br />
</q-banner>
<div>
<q-btn
v-if="!userStore.IsMyGroupByGroupname(mygrp.groupname) && !userStore.IsAskedGroupByGroupname(mygrp.groupname) && !userStore.IsRefusedGroupByGroupname(mygrp.groupname)"
v-if="
!userStore.IsMyGroupByGroupname(mygrp.groupname) &&
!userStore.IsAskedGroupByGroupname(mygrp.groupname) &&
!userStore.IsRefusedGroupByGroupname(mygrp.groupname)
"
icon="fas fa-user-plus"
color="primary" :label="$t('groups.ask_group')"
@click="tools.setRequestGroup($q, userStore.my.username, mygrp.groupname, true)"
color="primary"
:label="$t('groups.ask_group')"
@click="
tools.setRequestGroup(
$q,
userStore.my.username,
mygrp.groupname,
true
)
"
/>
<q-btn
v-if="userStore.IsMyGroupByGroupname(mygrp.groupname)"
rounded icon="fas fa-ellipsis-h">
rounded
icon="fas fa-ellipsis-h"
>
<q-menu>
<q-list v-if="true" style="min-width: 150px">
<q-item clickable v-close-popup
@click="tools.removeFromMyGroups($q, userStore.my.username, mygrp.groupname, $t('db.domanda_exit_fromgroup', {groupname: mygrp.groupname }))">
<q-item
clickable
v-close-popup
@click="
tools.removeFromMyGroups(
$q,
userStore.my.username,
mygrp.groupname,
$t('db.domanda_exit_fromgroup', {
groupname: mygrp.groupname,
})
)
"
>
<q-item-section avatar>
<q-icon color="negative" name="fas fa-user-minus"/>
<q-icon color="negative" name="fas fa-user-minus" />
</q-item-section>
<q-item-section>{{ $t('groups.exit_group') }}</q-item-section>
<q-item-section>{{
$t('groups.exit_group')
}}</q-item-section>
</q-item>
<q-list v-if="tools.iAmAdminGroup(mygrp.groupname)" style="min-width: 200px">
<q-item clickable v-close-popup @click="tools.setCmd($q, shared_consts.GROUPSCMD.DELETE_GROUP, userStore.my.username, '', mygrp.groupname)">
<q-list
v-if="tools.iAmAdminGroup(mygrp.groupname)"
style="min-width: 200px"
>
<q-item
clickable
v-close-popup
@click="
tools.setCmd(
$q,
shared_consts.GROUPSCMD.DELETE_GROUP,
userStore.my.username,
'',
mygrp.groupname
)
"
>
<q-item-section avatar>
<q-icon color="negative" name="fas fa-trash-alt"/>
<q-icon color="negative" name="fas fa-trash-alt" />
</q-item-section>
<q-item-section>{{ $t('groups.delete_group') }}</q-item-section>
<q-item-section>{{
$t('groups.delete_group')
}}</q-item-section>
</q-item>
</q-list>
</q-list>
</q-menu>
</q-btn>
<q-btn
v-if="userStore.IsAskedGroupByGroupname(mygrp.groupname) && !userStore.IsMyGroupByGroupname(mygrp.groupname)"
v-if="
userStore.IsAskedGroupByGroupname(mygrp.groupname) &&
!userStore.IsMyGroupByGroupname(mygrp.groupname)
"
icon="fas fa-user-minus"
flat :label="$t('shared.cancel_ask_short')"
@click="tools.cancelReqGroups($q, userStore.my.username, mygrp.groupname)"
flat
:label="$t('shared.cancel_ask_short')"
@click="
tools.cancelReqGroups(
$q,
userStore.my.username,
mygrp.groupname
)
"
/>
</div>
</div>
<div v-if="mygrp.descr" class="no-wrap justify-evenly items-center content-start">
<div
v-if="mygrp.descr"
class="no-wrap justify-evenly items-center content-start"
>
<!--
<q-btn
v-if="tools.iAmAdminGroup(groupname)" icon="fas fa-pencil-alt"
@@ -100,10 +163,35 @@
-->
<q-tabs v-model="tabgrp" class="text-blue">
<q-tab :label="t('shared.info1')" name="info" icon="fas fa-info"></q-tab>
<q-tab v-if="!!mygrp.note" :label="t('groups.page')" name="page" icon="fas fa-file-word"></q-tab>
<q-tab v-if="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
:label="t('shared.subscribes')" name="members" icon="fas fa-users"></q-tab>
<q-tab
:label="t('shared.info1')"
name="info"
icon="fas fa-info"
></q-tab>
<q-tab
v-if="!!mygrp.note"
:label="t('groups.page')"
name="page"
icon="fas fa-file-word"
></q-tab>
<q-tab
v-if="
tools.iCanShowGroupsMember(mygrp) ||
tools.iAmAdminGroup(groupname)
"
:label="t('shared.subscribes')"
name="members"
icon="fas fa-users"
></q-tab>
<q-tab
v-if="
tools.iCanShowGroupsMember(mygrp) ||
tools.iAmAdminGroup(groupname)
"
:label="t('groups.circuits')"
name="circuits"
icon="fas fa-coins"
></q-tab>
</q-tabs>
<q-tab-panels v-model="tabgrp" animated>
@@ -114,39 +202,66 @@
<div class="text-h6">{{ t('groups.info') }}</div>
</q-card-section>
<q-separator/>
<q-separator />
<q-card-section>
<div class="element">
<q-icon name="fas fa-lightbulb"></q-icon>
{{ $t('shared.createdby', {
username: mygrp.createdBy,
date: tools.getstrDateYY(mygrp.date_created), })
{{
$t('shared.createdby', {
username: mygrp.createdBy,
date: tools.getstrDateYY(mygrp.date_created),
})
}}
</div>
<div v-if="!!mygrp.date_updated && tools.getstrshortDate(mygrp.date_updated) !== tools.getstrshortDate(mygrp.createdBy)" class="element">
<div
v-if="
!!mygrp.date_updated &&
tools.getstrshortDate(mygrp.date_updated) !==
tools.getstrshortDate(mygrp.createdBy)
"
class="element"
>
<q-icon name="fas fa-pencil-alt"></q-icon>
{{ $t('shared.lastmodify', {
date: tools.getstrDateYY(mygrp.date_updated), })
{{
$t('shared.lastmodify', {
date: tools.getstrDateYY(mygrp.date_updated),
})
}}
</div>
<div v-if="mygrp.visibility.includes(shared_consts.Visibility_Group.PRIVATE)" class="row">
<div
v-if="
mygrp.visibility.includes(
shared_consts.Visibility_Group.PRIVATE
)
"
class="row"
>
<div class="q-pa-xs">
<q-icon name="fas fa-lock"></q-icon>
</div>
<div>
<div class="title_param"> {{ $t('groups.private') }}</div>
<div class="title_param">
{{ $t('groups.private') }}
</div>
{{ $t('groups.private_descr') }}
</div>
</div>
<div v-if="mygrp.visibility.includes(shared_consts.Visibility_Group.HIDDEN)" class="row">
<div
v-if="
mygrp.visibility.includes(
shared_consts.Visibility_Group.HIDDEN
)
"
class="row"
>
<div class="q-pa-xs">
<q-icon name="fas fa-eye-slash"></q-icon>
</div>
<div>
<div class="title_param"> {{ $t('groups.hidden') }}</div>
<div class="title_param">{{ $t('groups.hidden') }}</div>
{{ $t('groups.hidden_descr') }}
</div>
</div>
@@ -166,11 +281,21 @@
<div class="members">
<q-icon name="fas fa-users"></q-icon>
{{ numUsers() }} {{ numUsers() === 1 ? t('shared.member') : t('shared.members') }}
{{ numUsers() }}
{{
numUsers() === 1
? t('shared.member')
: t('shared.members')
}}
</div>
<div class="admins">
<q-icon name="fas fa-user-cog"></q-icon>
{{ numAdmins() }} {{ numAdmins() === 1 ? t('shared.admin') : t('shared.admins') }}
{{ numAdmins() }}
{{
numAdmins() === 1
? t('shared.admin')
: t('shared.admins')
}}
</div>
<div v-for="(user, index) of mygrp.admins" :key="index">
<CMyUser
@@ -183,13 +308,13 @@
</q-card-section>
</q-card>
<br>
<br />
</div>
<q-card v-if="mygrp.title">
<q-card-section>
<div class="text-h6">Descrizione:</div>
</q-card-section>
<q-separator/>
<q-separator />
<q-card-section>
<div class="col-12 text-h7">
@@ -197,187 +322,215 @@
</div>
<div class="col-6 q-ma-xs">
<q-btn
v-if="getLinkGrpTelegram()" icon="fab fa-telegram"
color="blue" type="a"
v-if="getLinkGrpTelegram()"
icon="fab fa-telegram"
color="blue"
type="a"
size="md"
rounded
:label="$t('msgs.telegrammsg')"
:href="getLinkGrpTelegram()" target="__blank">
:href="getLinkGrpTelegram()"
target="__blank"
>
</q-btn>
</div>
<div class="col-6 q-ma-xs">
<q-btn
v-if="getLinkWebSite()" icon="fas fa-globe"
color="blue" type="a"
v-if="getLinkWebSite()"
icon="fas fa-globe"
color="blue"
type="a"
size="md"
rounded
:label="$t('reg.website')"
:href="getLinkWebSite()" target="__blank">
:href="getLinkWebSite()"
target="__blank"
>
</q-btn>
</div>
</q-card-section>
</q-card>
</q-tab-panel>
<q-tab-panel name="page">
<div v-if="mygrp.note">
<br>
<br />
<div class="q-ma-sm q-gutter-sm q-pa-xs">
<div v-if="mygrp.note" v-html="mygrp.note">
</div>
<div v-if="mygrp.note" v-html="mygrp.note"></div>
</div>
</div>
</q-tab-panel>
<q-tab-panel name="members" style="max-width: 500px;" v-if="tools.iCanShowGroupsMember(mygrp)">
<q-tab-panel
name="members"
style="max-width: 500px"
v-if="tools.iCanShowGroupsMember(mygrp)"
>
<q-tabs
v-show="tools.iAmAdminGroup(groupname)"
v-model="tabmembers" class="text-blue">
v-model="tabmembers"
class="text-blue"
>
<q-tab label="Tutti" name="all" icon="fas fa-users"></q-tab>
<q-tab v-if="tools.iAmAdminGroup(groupname)" label="Richieste" name="rich" icon="fas fa-user-plus"></q-tab>
<q-tab v-if="tools.iAmAdminGroup(groupname)" label="Rifiutati" name="refused" icon="fas fa-user-minus"></q-tab>
<q-tab
v-if="tools.iAmAdminGroup(groupname)"
label="Richieste"
name="rich"
icon="fas fa-user-plus"
></q-tab>
<q-tab
v-if="tools.iAmAdminGroup(groupname)"
label="Rifiutati"
name="refused"
icon="fas fa-user-minus"
></q-tab>
</q-tabs>
<q-tab-panels v-model="tabmembers" animated>
<q-tab-panel name="all">
<CGridTableRec
ref="tabMembri"
prop_mytable="users"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title="username"
:vertical="costanti.VISUTABLE_LISTA"
nodataLabel="Nessun Iscritto"
:prop_search="true"
hint="Username da trovare"
:finder="false"
:choose_visutype="true"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
:showCol="false"
:extrafield="groupname"
:extraparams="extraparams()"
:visufind="tools.iAmAdminGroup(groupname) ? costanti.REQ_REMOVE_USER_TO_GROUP : costanti.FIND_PEOPLE"
>
</CGridTableRec>
</q-tab-panel>
<q-tab-panel name="rich">
<CGridTableRec
prop_mytable="mygroups"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title=""
:vertical="costanti.VISUTABLE_USER_TABGROUP"
nodataLabel="Nessuna Richiesta in sospeso"
:prop_search="false"
hint="Username da trovare"
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom_rich"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
keyMain=""
:showCol="false"
:extraparams="extraparams_rich()"
:extrafield="groupname"
:visufind="costanti.REQ_ADD_USER_TO_GROUP"
>
</CGridTableRec>
</q-tab-panel>
<q-tab-panel name="refused">
<CGridTableRec
prop_mytable="mygroups"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title=""
:vertical="costanti.VISUTABLE_USER_TABGROUP"
nodataLabel="Nessun utente Rifiutato"
:prop_search="false"
hint="Username da trovare"
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom_rich"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
keyMain=""
:showCol="false"
:extraparams="extraparams_refused()"
:extrafield="groupname"
:visufind="costanti.REQ_ADD_USER_TO_GROUP"
>
</CGridTableRec>
</q-tab-panel>
<q-tab-panel name="all">
<CGridTableRec
ref="tabMembri"
prop_mytable="users"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title="username"
:vertical="costanti.VISUTABLE_LISTA"
nodataLabel="Nessun Iscritto"
:prop_search="true"
hint="Username da trovare"
:finder="false"
:choose_visutype="true"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
:showCol="false"
:extrafield="groupname"
:extraparams="extraparams()"
:visufind="
tools.iAmAdminGroup(groupname)
? costanti.REQ_REMOVE_USER_TO_GROUP
: costanti.FIND_PEOPLE
"
>
</CGridTableRec>
</q-tab-panel>
<q-tab-panel name="rich">
<CGridTableRec
prop_mytable="mygroups"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title=""
:vertical="costanti.VISUTABLE_USER_TABGROUP"
nodataLabel="Nessuna Richiesta in sospeso"
:prop_search="false"
hint="Username da trovare"
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom_rich"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
keyMain=""
:showCol="false"
:extraparams="extraparams_rich()"
:extrafield="groupname"
:visufind="costanti.REQ_ADD_USER_TO_GROUP"
>
</CGridTableRec>
</q-tab-panel>
<q-tab-panel name="refused">
<CGridTableRec
prop_mytable="mygroups"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title=""
:vertical="costanti.VISUTABLE_SCHEDA_GROUP"
nodataLabel="Nessun utente Rifiutato"
:prop_search="false"
hint="Username da trovare"
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom_rich"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
keyMain=""
:showCol="false"
:extraparams="extraparams_refused()"
:extrafield="groupname"
:visufind="costanti.REQ_ADD_USER_TO_GROUP"
>
</CGridTableRec>
</q-tab-panel>
</q-tab-panels>
</q-tab-panel>
<q-tab-panel name="circuits">
<div v-for="(circuit, ind) of circuitslist" :key="ind">
circuit.account: {{ circuit.account}}
<CSaldo
:account="circuit.account"
:symbol="circuit.symbol"
:color="circuit.color"
:saldo="circuit.account"
:qtarem="circuit.account ? circuitStore.getRemainingCoinsToSend(circuit.account) : 0"
>
</CSaldo>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
<div v-else class="fit column no-wrap justify-evenly items-center content-start">
<q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
<div
v-else
class="fit column no-wrap justify-evenly items-center content-start"
>
<q-skeleton
type="QAvatar"
size="140px"
height="140px"
animation="fade"
/>
<q-card flat bordered style="width: 250px">
<div class="text-h6">
<q-skeleton :animation="animation"/>
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h7 text-grey text-center">
{{ groupname }}
</div>
<div class="col-12 text-h7">
<q-skeleton :animation="animation"/>
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h8 q-mt-sm">
<q-skeleton :animation="animation"/>
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h8 q-mt-sm">
<q-skeleton :animation="animation"/>
<q-skeleton :animation="animation" />
</div>
</q-card>
</div>
</div>
<q-dialog
v-model="showPic"
full-height full-width
>
<img :src="getImgGrp()" :alt="groupname" class="full-width">
<q-dialog v-model="showPic" full-height full-width>
<img :src="getImgGrp()" :alt="groupname" class="full-width" />
</q-dialog>
</div>
</div>
</template>
<script lang="ts" src="./mygroup.ts">