Files
myprojplanet_vite/src/views/user/mygroup/mygroup.vue
Surya Paolo 4985e7565d - Sistemato INVITI alla App
- Completamento Profilo
- Registrazione tramite Invito, senza richiedere conferma email.
2025-11-18 23:56:08 +01:00

960 lines
33 KiB
Vue
Executable File

<template>
<CNotifAtTop />
<div class="q-gutter-sm q-pa-sm q-pb-md">
<div v-if="!mygrp && !loading">
<div v-if="mystatus === 401">
<h3>
Non hai i permessi per accedere al Gruppo.
<br />Occorre prima registrarsi alla App
</h3>
<div v-if="!tools.isLogged()">
<CCheckIfIsLogged></CCheckIfIsLogged>
</div>
</div>
<div v-else>
<h3>Gruppo non Esistente</h3>
</div>
</div>
<div v-else>
<div>
<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-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"
>
{{ mygrp.groupname }}
</div>
<q-banner
v-if="userStore.IsRefusedGroupByGroupname(mygrp.groupname)"
rounded
class="bg-red text-white"
style="text-align: center"
>
<em style="font-weight: bold">{{ t('db.youarerefusedgroup') }}</em>
<br />
</q-banner>
<q-btn
v-if="circuitslistOpt.length > 0"
icon-right="img: /images/1ris_rosso_100.png"
color="green"
size="md"
class="q-ma-md"
:label="t('circuit.sendcoins')"
dense
rounded
@click="showsendCoinTo = true"
>
</q-btn>
<div>
<q-btn
v-if="userStore.IsMyGroupByGroupname(mygrp.groupname)"
rounded
icon="fas fa-ellipsis-h"
>
<q-menu>
<q-list
v-if="true"
style="min-width: 150px"
>
<q-item
v-if="userStore.IsMyGroupByGroupname(mygrp.groupname)"
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-item-section>
<q-item-section>
{{ t('groups.exit_group') }}
</q-item-section>
</q-item>
<q-list
v-if="
userStore.IsMyGroupByGroupname(mygrp.groupname) &&
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-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)
"
icon="fas fa-user-minus"
outline
flat
:label="$t('shared.cancel_ask_short')"
@click="tools.cancelReqGroups($q, userStore.my.username, mygrp.groupname)"
/>
</div>
</div>
<div class="absolute-top-right q-mr-sm q-my-md q-pt-lg">
<div class="column">
<q-btn
flat
round
color="blue"
icon="share"
style="z-index: 1"
@click.stop="tools.copyToClip($q, getlinkpage(), true)"
></q-btn>
</div>
</div>
<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"
color="blue"
size="md"
:label="$t('otherpages.modifgrp')"
to="/editgrp">
</q-btn>
-->
<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="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
:label="t('shared.subscribes')"
name="members"
icon="fas fa-users"
></q-tab>
<q-tab
v-if="tools.iCanShowAnnunci(mygrp)"
:label="t('profile.annunci')"
name="annunci"
icon="fas fa-pencil-alt"
></q-tab>
<q-tab
v-if="tools.iCanShowGroupsMember(mygrp) || tools.iAmAdminGroup(groupname)"
:label="t('groups.circuits') + ' (' + circuitslist.length + ')'"
name="circuits"
:style="
circuitslist.length > 0
? `background-color: ${circuitslist.length > 0 ? 'rgba(0, 200, 0, 0.8)' : ''}; color: white; font-weight: bold;`
: ''
"
icon="img: /images/1ris_rosso_100.png"
></q-tab>
</q-tabs>
<q-tab-panels
v-model="tabgrp"
animated
keep-alive
>
<q-tab-panel name="info">
<q-card v-if="mygrp.title">
<q-card-section>
<div class="col-12 text-h7">
<span v-if="checkifShow('descr')">{{ mygrp.descr }}</span>
</div>
<div class="col-6 q-ma-xs">
<q-btn
v-if="getLinkGrpTelegram()"
icon="fab fa-telegram"
color="blue"
type="a"
size="md"
rounded
:label="$t('msgs.telegrammsg')"
: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"
size="md"
rounded
:label="t('reg.website') + ' ' + tools.getMainUrl(getLinkWebSite())"
:href="getLinkWebSite()"
target="__blank"
></q-btn>
</div>
</q-card-section>
</q-card>
<div>
<q-card>
<q-card-section>
<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>
{{ t('groups.private_descr') }}
</div>
</div>
<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>
{{ t('groups.hidden_descr') }}
</div>
</div>
<div class="members">
{{ t('products.category') }}
<q-item>
<q-item-section>
<q-item-label class="full-width">
<div
v-for="(rec, ind) of mygrp.recCatGrp"
:key="ind"
>
<q-chip
dense
class="text-center shadow-5 glossy chipmodif text-white"
:style="`background-color: ${rec.color};`"
>
<q-icon
:name="rec.icon"
left
/>
{{ rec.descr }}</q-chip
>
</div>
</q-item-label>
</q-item-section>
</q-item>
<q-icon name="fas fa-users"></q-icon>
{{ 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') }}
</div>
<div
v-for="(user, index) of mygrp.admins"
:key="index"
>
<CMyUser
:mycontact="user"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
></CMyUser>
</div>
<div
v-if="cities.length > 0"
class="row"
>
<div class="q-pa-xs">
<q-icon name="fas fa-map-marker-alt"></q-icon>
</div>
<div>
<div class="title_param">
<div
v-for="(city, index) of cities"
:key="index"
>
{{ city.comune }} ({{ city.prov }})
</div>
</div>
</div>
</div>
<div class="element">
<q-icon name="fas fa-lightbulb"></q-icon>
{{
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"
>
<q-icon name="fas fa-pencil-alt"></q-icon>
{{
t('shared.lastmodify', {
date: tools.getstrDateYY(mygrp.date_updated),
})
}}
</div>
</q-card-section>
<div v-if="circuitslist.length <= 1">
<q-banner
v-if="circuitslist.length === 0"
rounded
dense
class="bg-grey-2 text-grey-9 q-pa-sm items-center"
>
<q-icon
name="info"
color="primary"
class="q-mr-sm"
/>
<span
>Nessun circuito RIS è ancora stato abilitato per questo
gruppo.</span
>
</q-banner>
<q-select
v-if="
tools.iAmAdminGroup(groupname) &&
circuitslist.length <= 1 &&
!requestToEnterCircuit
"
v-model="circuitSel"
class="q-pa-md q-ma-sm"
:options="
userStore.my.profile.mycircuits
.filter(
(circuit) =>
!userStore.IsMyCircuitByNameAndGroup(
circuit.circuitname,
mygrp.groupname
)
)
.map((circuit) => ({
label: circuit.circuitname,
value: circuit.circuitname,
}))
"
emit-value
map-options
:label="$t('circuit.select_circuit')"
:hint="$t('circuit.select_circuit_hint')"
>
<template v-slot:append>
<q-btn
v-if="circuitSel"
icon="fas fa-user-plus"
color="primary"
:label="$t('circuit.add_circuit')"
@click="requestToEnterCircuit = true"
/>
</template>
</q-select>
<br />
</div>
</q-card>
<br />
</div>
<q-card v-if="mygrp.note">
<q-card-section>
<div class="text-h7">Pagina:</div>
</q-card-section>
<q-separator />
<q-card-section>
<div v-if="mygrp.note">
<br />
<div class="q-ma-sm q-gutter-sm q-pa-xs">
<div
v-if="mygrp.note"
v-html="mygrp.note"
></div>
</div>
</div>
</q-card-section>
</q-card>
</q-tab-panel>
<q-tab-panel
name="members"
style="max-width: 500px"
v-if="tools.iCanShowGroupsMember(mygrp)"
>
<q-btn
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)
"
/>
<q-tabs
v-show="tools.iAmAdminGroup(groupname)"
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"
outline
></q-tab>
</q-tabs>
<q-tab-panels
v-model="tabmembers"
animated
keep-alive
>
<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"
: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"
: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-if="circuitslist.length === 0">
<q-banner
rounded
class="bg-grey-2 text-grey-9 q-pa-sm items-center"
>
Nessun Circuito RIS ancora abilitato da parte del gruppo
</q-banner>
</div>
<div
v-for="(circuit, index) in circuitslist"
:key="index"
>
<CMyCircuit
:mycircuit="circuit"
:visu="costanti.USER_CIRCUITS"
:prop_groupnameSel="mygrp.groupname"
>
</CMyCircuit>
</div>
<q-select
v-if="circuitslistOpt.length > 0"
v-model="circuitIndex"
:options="circuitslistOpt"
emit-value
map-options
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
>
<template v-slot:prepend></template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps">
<q-item-section>
<q-item-label>{{ scope.opt.label }}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
<q-tabs
v-if="circuitslistOpt.length > 0"
v-model="tabcircuit"
class="text-blue"
no-caps
>
<q-tab
:label="t('shared.info1')"
name="info"
icon="fas fa-info"
></q-tab>
<q-tab
:label="t('circuit.movements')"
name="mov"
icon="img: /images/1ris_rosso_100.png"
></q-tab>
</q-tabs>
</q-tab-panel>
<q-tab-panel name="annunci"></q-tab-panel>
</q-tab-panels>
<div v-if="tabgrp === 'circuits' && tabcircuit === 'info'">
<q-tab-panels
v-model="tabcircuit"
animated
keep-alive
>
<q-tab-panel
name="info"
style="max-width: 500px"
>
<div
v-for="(circuit, ind) of circuitslist"
:key="ind"
>
<div class="circuit_name">{{ circuit.circuitname }}:</div>
<CInfoAccount
:circuitname="circuit.circuitname"
:grp="mygrp"
:account="circuit.account"
:admin="tools.iAmAdminCircuit(circuit.circuitname)"
/>
</div>
</q-tab-panel>
</q-tab-panels>
</div>
<div v-if="tabgrp === 'circuits' && tabcircuit === 'mov'">
<div v-if="circuitslist && circuitslist.length > 0">
<q-toggle
v-model="tabellare"
label="Tabella"
></q-toggle>
<CGridTableRec
v-if="tabellare && !loading"
prop_mytable="movements"
prop_mytitle
:prop_mycolumns="colmyMovementTable"
prop_colkey="_id"
col_title="Lista Movimenti"
:vertical="0"
nodataLabel="Nessun Movimento effettuato"
:prop_search="true"
:enableExport="true"
hint="nota da trovare (tabella)"
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="movimenti non trovati con questa ricerca"
filterextra
:prop_pagination="{
sortBy: 'transactionDate',
descending: true,
page: 1,
rowsNumber: 0,
rowsPerPage: 20,
}"
:showType="costanti.SHOW_MOVEMENTS"
:showCol="true"
:showHeaderCol="true"
:extraparams="getExtraparams_movs_grp(circuitslist[circuitIndex])"
extrafield
:visufind="costanti.FRIENDS"
></CGridTableRec>
<CGridTableRec
v-else-if="!loading"
prop_mytable="movements"
prop_mytitle
:prop_mycolumns="colmyMovement"
prop_colkey="_id"
col_title="Lista Movimenti"
:vertical="costanti.VISUTABLE_LISTA"
nodataLabel="Nessun Movimento effettuato"
:enableExport="true"
:prop_search="true"
hint="nota da trovare"
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="movimenti non trovati con questa ricerca"
:prop_pagination="{
sortBy: 'transactionDate',
descending: true,
page: 1,
rowsNumber: 20,
rowsPerPage: 20,
}"
:showType="costanti.SHOW_MOVEMENTS"
:showCol="false"
:showHeaderCol="false"
:extraparams="getExtraparams_movs_grp(circuitslist[circuitIndex])"
extrafield
:visufind="costanti.FRIENDS"
></CGridTableRec>
</div>
</div>
<div v-if="tabgrp === 'annunci'">
<div
v-for="(card, ind) of mycards"
:key="ind"
:name="card.table"
>
<div v-if="card.table !== 'mygroups' && card.table !== 'circuits'">
<div v-if="card.table !== 'mygroups' && card.table !== 'circuits'">
<div v-if="card.table === shared_consts.TABLES_MYBACHECAS">
<q-tabs
v-model="tabevents"
class="text-teal"
>
<q-tab
label="Eventi Passati"
name="past"
></q-tab>
<q-tab
label="Prossimi Eventi"
name="new"
></q-tab>
</q-tabs>
<q-tab-panels
v-model="tabevents"
animated
>
<q-tab-panel name="past">
<CSkill
:groupname="mygrp.groupname"
:table="card.table"
:filtercustom="filtrotables(card.table, tabevents)"
:butt_modif_new="tools.iAmAdminGroup(groupname)"
:visuinpage="true"
:noaut="false"
:title="card.title"
/>
</q-tab-panel>
<q-tab-panel name="new">
<CSkill
:groupname="mygrp.groupname"
:table="card.table"
:filtercustom="filtrotables(card.table, tabevents)"
:butt_modif_new="tools.iAmAdminGroup(groupname)"
:visuinpage="true"
:noaut="false"
:title="card.title"
/>
</q-tab-panel>
</q-tab-panels>
</div>
<div v-else>
<CSkill
:groupname="mygrp.groupname"
:table="card.table"
:filtercustom="filtrotables(card.table, '')"
:butt_modif_new="tools.iAmAdminGroup(groupname)"
:visuinpage="true"
:noaut="false"
:title="card.title"
/>
</div>
</div>
</div>
</div>
</div>
<div v-if="tabgrp === 'members' && tabmembers === '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="tools.extraparams(shared_consts.TABMYGROUPS)"
:visufind="
tools.iAmAdminGroup(groupname)
? costanti.REQ_REMOVE_USER_TO_GROUP
: costanti.FIND_PEOPLE
"
></CGridTableRec>
</div>
</div>
<div
v-else
class="fit column no-wrap justify-evenly items-center content-start"
>
<q-skeleton
type="QAvatar"
size="140px"
height="140px"
:animation="animation"
/>
<q-card
flat
bordered
style="width: 250px"
>
<div class="text-h6">
<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" />
</div>
<div class="col-12 text-h8 q-mt-sm">
<q-skeleton :animation="animation" />
</div>
<div class="col-12 text-h8 q-mt-sm">
<q-skeleton :animation="animation" />
</div>
</q-card>
</div>
</div>
<div v-if="!tools.isLogged()">
<CCheckIfIsLogged></CCheckIfIsLogged>
</div>
<q-dialog
v-model="showPic"
full-height
full-width
>
<img
:src="getImgGrp()"
:alt="groupname"
class="full-width"
/>
</q-dialog>
</div>
</div>
<q-dialog
v-model="requestToEnterCircuit"
maximized
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card
v-if="circuitSel"
class="dialog_card"
>
<q-toolbar
class="bg-primary text-white"
dense
>
<!--<q-toolbar :class="tools.displayClasses(myevent)"-->
<!--:style="tools.displayStyles(myevent) + ` min-width: `+ tools.myheight_dialog() + `px;`">-->
<q-toolbar-title>
{{ circuitSel }}
<div v-if="mygrp.groupname">Gruppo: {{ mygrp.groupname }}</div>
</q-toolbar-title>
<q-btn
flat
round
color="white"
icon="close"
v-close-popup
></q-btn>
</q-toolbar>
<q-card-section class="inset-shadow">
<div style="font-weight: bold; font-size: 1.25rem">
{{ t('circuit.regulation') }} {{ circuitSel }}
</div>
<br />
</q-card-section>
<q-card-section class="inset-shadow">
<div style="font-weight: bold; font-size: 1.25rem">Regolamento:</div>
<q-btn
label="vedi Regolamento"
@click="showrules = !showrules"
></q-btn>
<div
v-if="showrules"
v-html="getRegulation(circuit.regulation)"
></div>
</q-card-section>
<q-card-actions align="center">
<q-btn
class="centeritems"
icon="fas fa-user-plus"
color="positive"
:label="$t('circuit.acceptregulation')"
@click="
tools.setRequestCircuit(
$q,
userStore.my.username,
circuitSel,
true,
mygrp.groupname
);
loadGroup();
requestToEnterCircuit = false;
"
/>
<q-btn
outline
:label="$t('dialog.cancel')"
icon="close"
v-close-popup
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<div v-if="showsendCoinTo">
<CSendCoins
:showprop="showsendCoinTo"
:to_group="mygrp"
circuitname=""
@close="showsendCoinTo = false"
>
</CSendCoins>
</div>
</template>
<script lang="ts" src="./mygroup.ts"></script>
<style lang="scss" scoped>
@import './mygroup.scss';
</style>