myprojplanet_vite/src/views/user/mygroup/mygroup.vue

<template>
  <CNotifAtTop />
  <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 />Occorre prima registrarsi alla App
        </h3>
      </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) &&
              !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-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')" name="circuits" 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>
                </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-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">
              <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.name }}:</div>
                  <CInfoAccount :circuitname="circuit.name" :grp="mygrp" :account="circuit.account"
                    :admin="tools.iAmAdminCircuit(circuit.name)" />
                </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>
  <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>