myprojplanet_vite/src/components/CMyRecCard/CMyRecCard.vue

<template>
  <div
    class="rec-card-wrapper"
    :class="{ 'is-even': indexRow % 2 === 0, 'is-odd': indexRow % 2 !== 0 }"
    :style="{ maxWidth: computedWidth() }"
  >
    <!-- Evento Calendar con data grande -->
    <div
      v-if="myrec && table === shared_consts.TABLES_MYBACHECAS"
      class="event-card"
    >
      <div class="event-date-column">
        <div class="date-stack">
          <span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeStart) }}</span>
          <span class="day-number">{{ tools.getstrDay(myrec.dateTimeStart) }}</span>
          <span class="month-name">{{
            tools.getstrMonth3Letters(myrec.dateTimeStart)
          }}</span>
          <span class="time-start">{{ tools.getstrTime(myrec.dateTimeStart) }}</span>
          <span
            v-if="
              tools.getstrDay(myrec.dateTimeStart) === tools.getstrDay(myrec.dateTimeEnd)
            "
            class="time-end"
          >
            {{ tools.getstrTime(myrec.dateTimeEnd) }}
          </span>

          <!-- Data fine se diversa -->
          <template
            v-if="
              tools.getstrDay(myrec.dateTimeStart) !== tools.getstrDay(myrec.dateTimeEnd)
            "
          >
            <div class="date-separator">→</div>
            <span class="day-of-week">{{ tools.getDayOfWeek(myrec.dateTimeEnd) }}</span>
            <span class="day-number">{{ tools.getstrDay(myrec.dateTimeEnd) }}</span>
            <span class="month-name">{{
              tools.getstrMonth3Letters(myrec.dateTimeEnd)
            }}</span>
            <span class="time-end">{{ tools.getstrTime(myrec.dateTimeEnd) }}</span>
          </template>

          <q-avatar
            size="40px"
            class="user-avatar"
          >
            <q-img
              :src="getImgUser(myrec)"
              :alt="myrec.username"
            />
          </q-avatar>
        </div>
      </div>

      <div
        class="event-image-container"
        :style="{ height: computedEventImageHeight() }"
      >
        <q-img
          :src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
          :alt="myrec.descr"
          class="event-image"
          @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
        />
      </div>
    </div>

    <!-- Card Record Principale -->
    <q-item
      v-if="myrec"
      clickable
      v-ripple
      class="modern-rec-card"
      :class="{ 'is-attending': tools.isPartecipero(myrec) }"
    >
      <!-- Avatar / Immagine -->
      <q-item-section
        v-if="
          (shared_consts.TABLES_VISU_IMG.includes(table) &&
            myrec.photos &&
            myrec.photos?.length > 0) ||
          (myrec.mygrp && myrec.mygrp.photos?.length > 0)
        "
        avatar
        @click="cmdExt(costanti.CMD_SHOW_PAGE, null, myrec)"
        class="avatar-section"
      >
        <q-badge
          v-if="showBadge()"
          :color="fieldsTable.getColByAdType(myrec.adType)"
          class="type-badge"
        >
          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
        </q-badge>

        <q-avatar
          size="56px"
          class="record-avatar"
        >
          <q-img
            v-if="
              myrec.mygrp &&
              myrec.mygrp.groupname &&
              tools.getValue(myrec.mygrp, 'photos', '')
            "
            :src="
              tools.getFullFileName(
                tools.getValue(myrec.mygrp, 'photos', ''),
                'mygroups',
                myrec.username,
                myrec.groupname
              )
            "
            alt="immagine del gruppo"
          />
          <q-img
            v-else
            :src="tools.getFullFileName(myrec.photos, table, myrec.username, '')"
            :alt="myrec.descr"
          />
        </q-avatar>
      </q-item-section>

      <q-item-section
        v-else-if="!myrec.organisedBy && table !== shared_consts.TABLES_MYBACHECAS"
        avatar
        @click="naviga(`/my/` + myrec.username)"
        class="avatar-section"
      >
        <q-badge
          v-if="showBadge()"
          :color="fieldsTable.getColByAdType(myrec.adType)"
          class="type-badge"
        >
          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
        </q-badge>
        <q-avatar
          size="56px"
          class="record-avatar"
        >
          <q-img
            :src="getImgUser(myrec)"
            :alt="myrec.username"
          />
        </q-avatar>
      </q-item-section>

      <!-- Contenuto Principale -->
      <q-item-section
        @click="navigaExt(myrec)"
        class="content-section"
      >
        <!-- Tags e Chips -->
        <q-item-label class="tags-row">
          <q-chip
            v-for="(rec, ind) of tools.getArrSubSector(table, myrec)"
            :key="'sub-' + ind"
            dense
            class="tag-chip subsector"
          >
            {{ rec.descr }}
          </q-chip>
          <q-chip
            v-for="(rec, ind) of tools.getArrSector(table, myrec)"
            :key="'sec-' + ind"
            dense
            class="tag-chip sector"
          >
            {{ rec.descr }}
          </q-chip>
          <template v-for="(recstatus, index) in myrec.idStatusSkill">
            <q-badge
              v-if="
                recstatus === shared_consts.STATUSSKILL_ONLINE ||
                myrec.idStatusSkill?.length > 1
              "
              :key="'stat-' + index"
              :color="globalStore.getColByStatusSkills(recstatus)"
              class="status-badge"
            >
              <q-icon
                :name="globalStore.getStatusSkillIconById(recstatus)"
                size="14px"
              />
              {{ globalStore.getStatusSkillById(recstatus) }}
            </q-badge>
          </template>
        </q-item-label>

        <!-- Descrizione -->
        <q-item-label
          lines="3"
          :class="[
            'description-text',
            { 'event-title': table === shared_consts.TABLES_MYBACHECAS },
          ]"
          v-if="myrec.descr"
        >
          {{ myrec.descr }}
        </q-item-label>

        <!-- Info Utente e Stats -->
        <q-item-label class="user-stats-row">
          <div class="user-name">
            <span v-if="table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy">
              {{ myrec.organisedBy }}
            </span>
            <span v-else>{{ getNameToShow(myrec) }}</span>
          </div>
          <div class="stats-container">
            (
            <template
              v-if="
                table === shared_consts.TABLES_MYBACHECAS &&
                tools.getNumPartecipantes(myrec) > 0
              "
            >
              <span class="stat-item">
                {{ tools.getNumPartecipantes(myrec) }}
                <q-icon
                  name="check_circle"
                  size="14px"
                  color="positive"
                />
              </span>
            </template>
            <span class="stat-item">
              {{ myrec.numseen || 0 }}
              <q-icon
                name="visibility"
                size="14px"
                color="primary"
              />
            </span>
            <span class="stat-item">
              {{ myrec.numfav || 0 }}
              <q-icon
                :name="
                  userStore.isFavorite(myrec._id, table) ? 'favorite' : 'favorite_border'
                "
                size="14px"
                color="negative"
              />
            </span>
            )
          </div>
        </q-item-label>

        <!-- Badge Partecipazione -->
        <q-item-label
          v-if="tools.isPartecipero(myrec)"
          class="attending-badge"
        >
          <q-icon
            name="check_circle"
            size="16px"
          />
          {{ t('event.attend') }}
        </q-item-label>

        <!-- Città -->
        <q-item-label
          lines="2"
          class="cities-text"
        >
          <span
            v-for="(rec, ind) of myrec.mycities"
            :key="ind"
          >
            <span v-if="ind > 0">, </span>{{ rec.comune }} ({{ rec.prov }})
          </span>
        </q-item-label>
      </q-item-section>

      <!-- Menu Azioni -->
      <q-item-section
        v-if="tools.canModifyThisRec(myrec, table) || editOn"
        side
        class="actions-section"
      >
        <q-btn
          round
          flat
          dense
          icon="more_vert"
          size="sm"
          class="action-menu-btn"
        >
          <q-menu>
            <q-list dense>
              <q-item
                clickable
                v-close-popup
                @click="cmdExt(costanti.CMD_MODIFY, myrec._id, null)"
              >
                <q-item-section avatar>
                  <q-icon
                    name="edit"
                    size="18px"
                    color="primary"
                  />
                </q-item-section>
                <q-item-section>{{ t('reg.edit') }}</q-item-section>
              </q-item>
              <q-item
                clickable
                v-close-popup
                @click="cmdExt(costanti.CMD_CLONE, myrec._id, null)"
              >
                <q-item-section avatar>
                  <q-icon
                    name="content_copy"
                    size="18px"
                    color="primary"
                  />
                </q-item-section>
                <q-item-section>{{ t('event.duplicate') }}</q-item-section>
              </q-item>
              <q-separator />
              <q-item
                clickable
                v-close-popup
                @click="cmdExt(costanti.CMD_DELETE, myrec._id, null)"
              >
                <q-item-section avatar>
                  <q-icon
                    name="delete"
                    size="18px"
                    color="negative"
                  />
                </q-item-section>
                <q-item-section>{{ t('reg.elimina') }}</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-item-section>
    </q-item>
    <q-separator />
  </div>
</template>

<script lang="ts" src="./CMyRecCard.ts"></script>

<style lang="scss" scoped>
@import './CMyRecCard.scss';
</style>