newfreeplanet_OLD/src/layouts/toolbar/coinsPopover/coinsPopover.vue

<template>
  <div>
    <q-btn flat round dense icon="fas fa-coins" class="q-mx-xs" @click="open = !open">
      <q-badge v-if="num_notifs_unread > 0" floating color="red">{{ num_notifs_unread }}</q-badge>
    </q-btn>
    <q-btn v-if="false" flat round dense icon="fas fa-coins">
      <q-badge v-if="num_notifs_unread > 0" floating color="red">{{ num_notifs_unread }}</q-badge>
    </q-btn>

    <q-drawer v-model="open" side="right" elevated
              :overlay="true"
              :breakpoint="1200"
              :width="q.screen.lt.sm ? tools.getwidth($q) : 450"
    >
      <q-bar class="bg-primary text-white">
        {{ $t('notifs.coins') }}
        <q-space/>
        <q-btn round dense icon="fas fa-pencil-alt" class="q-mx-xs">
          <q-menu style="min-width: 200px">
            <q-list style="">
              <q-item clickable v-close-popup @click="notifStore.setAllRead(username, shared_consts.QualiNotifs.CIRCUITS)">
                <q-item-section side>
                  <q-icon name="fas fa-check"/>
                </q-item-section>
                <q-item-section>{{ $t('notifs.setallread') }}</q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="notifStore.deleteAll(username, shared_consts.QualiNotifs.CIRCUITS)">
                <q-item-section side>
                  <q-icon name="fas fa-trash-alt"/>
                </q-item-section>
                <q-item-section>{{ $t('notifs.deleteall') }}</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
        <q-btn flat round color="white" icon="close" @click="open = false"></q-btn>
      </q-bar>

      <div v-if="tools.isLogged()">
        <CMyCircuits
          v-model="filter"
          :finder="true"
          :showfinder="false"
          :showBarSelection="false"
          :username="username"
        >

          <CFinder
            :ind="tools.getIndMainCardsByTable(toolsext.TABMYBACHECAS)"
            :table="toolsext.TABCIRCUITS"
            :noButtAdd="true"
            :showFilterPersonal="false"
            :showBarSelection="false"
          />

        </CMyCircuits>

        

        <div class="row justify-center margin_buttons q-gutter-lg">
          <q-btn-toggle
            v-model="show_all"
            class="my-custom-toggle"
            no-caps
            rounded
            dense
            unelevated
            toggle-color="primary"
            color="white"
            text-color="primary"
            :options="[
          {label: t('notifs.all'), value: true},
          {label: t('notifs.notread'), value: false}
        ]"
          />
        </div>

        <div class="clBorderSperator"></div>        

        <div class="q-ma-xs">
          <q-list bordered class="rounded-borders">

            <div v-if="num_notifs_unread === 0">
              <q-item>
                <q-item-label lines="1">{{ $t('notifs.nocoins') }}</q-item-label>

              </q-item>
            </div>


            <q-item clickable v-for="(notif, index) in getlasts_coins" :key="index">

              <!--<q-item-section avatar>
                <q-avatar>
                  <q-item-label lines="1">{{ getTypeDirNotif(notif) }}</q-item-label>
                </q-avatar>
              </q-item-section>-->

              <q-item-section avatar>
                <q-avatar >
                  <img :src="notif.myimgsender" :alt="notif.sender">
                </q-avatar>
              </q-item-section>


              <q-item-section v-ripple>
                <q-item-label lines="5" :class="(!notif.read) ? 'unread' : 'read'" @click="clickNotif(notif)">
                  <div v-html="getNotifText($t, notif, false)"></div>
                </q-item-label>
                <q-item-label caption lines="2"
                              v-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_CIRCUITS && notif.status === shared_consts.CircuitsNotif.STATUS_NONE && notif.typeid === shared_consts.TypeNotifs.ID_CIRCUIT_REQUEST_TO_ENTER"
                              v-ripple>

                  <div class="row no-wrap justify-evenly" v-if="tools.iAmAdminCircuit(notif.extrafield)">
                    <q-btn
                      dense
                      rounded
                      size="sm"
                      icon="fas fa-user-plus"
                      color="positive" :label="$t('circuit.accept')"
                      @click="tools.addFidoToMyCircuits(q, notif.sender, notif.extrafield)"
                    />
                    <!--<q-btn
                      dense
                      rounded
                      size="sm"
                      icon="fas fa-user-minus"
                      color="negative" :label="$t('shared.refuse_ask')"
                      @click="tools.refuseReqCircuit(q, notif.sender, notif.extrafield)"
                    />-->
                  </div>
                </q-item-label>
                <q-item-label caption lines="2"
                              v-if="notif.typedir === shared_consts.TypeNotifs.TYPEDIR_CIRCUITS && notif.status === shared_consts.CircuitsNotif.STATUS_NONE && notif.typeid === shared_consts.TypeNotifs.ID_CIRCUIT_SENDCOINSREQ"
                              v-ripple>

                  <div class="row no-wrap justify-evenly">
                    <q-btn
                      dense
                      rounded
                      size="sm"
                      icon="fas fa-user-plus"
                      color="positive" :label="$t('circuit.accept_coins')"
                      @click="tools.acceptCoins(q, notif.sender, notif)"
                    />
                    <q-btn
                      dense
                      rounded
                      size="sm"
                      icon="fas fa-user-minus"
                      color="negative" :label="$t('circuit.refuse_coins')"
                      @click="tools.refuseCoins(q, notif.sender, notif)"
                    />
                  </div>
                </q-item-label>

                <q-item-label caption lines="1" :class="(!notif.read) ? 'unread-date' : 'read-date'" @click="clickNotif(notif)">
                              <CTimeAgo :datetime="notif.datenotif" />

                  <!--{{ // getUsernameChatByNotif(notif) }}-->
                </q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-item-label>
                  <q-btn dense rounded icon="fas fa-ellipsis-h">
                    <q-menu>
                      <q-list style="min-width: 150px">
                        <q-item clickable v-close-popup @click="notifStore.setRead(notif._id, true)">
                          <q-item-section side>
                            <q-icon name="fas fa-trash-alt"/>
                          </q-item-section>
                          <q-item-section>{{ $t('notifs.read') }}</q-item-section>
                        </q-item>
                        <q-item clickable v-close-popup @click="notifStore.deleteRec(username, notif._id, true)">
                          <q-item-section side>
                            <q-icon name="fas fa-trash-alt"/>
                          </q-item-section>
                          <q-item-section>{{ $t('notifs.delete_notif') }}</q-item-section>
                        </q-item>
                      </q-list>
                    </q-menu>
                  </q-btn>
                </q-item-label>
              </q-item-section>

            </q-item>
            <q-separator/>
          </q-list>
          <br><br><br>
        </div>
      </div>
    </q-drawer>
  </div>
</template>

<script lang="ts" src="./coinsPopover.ts">
</script>
<style lang="scss" scoped>
@import './coinsPopover.scss';
</style>