467 lines
14 KiB
Vue
Executable File
467 lines
14 KiB
Vue
Executable File
<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">
|
|
<div class="category-hierarchy">
|
|
<q-chip
|
|
v-for="(recSect, ind) of arrSector"
|
|
:key="'sec-' + ind"
|
|
class="tag-chip sector"
|
|
:style="{
|
|
background: `linear-gradient(135deg, ${recSect.color}, ${recSect.color})`,
|
|
}"
|
|
:color="recSect.color"
|
|
>
|
|
<q-icon
|
|
v-if="recSect.icon"
|
|
:name="recSect.icon"
|
|
size="xs"
|
|
class="q-mr-xs"
|
|
/>
|
|
{{ recSect.descr }}
|
|
</q-chip>
|
|
<q-icon
|
|
v-if="arrSubSector.length > 0"
|
|
name="chevron_right"
|
|
size="sm"
|
|
class="hierarchy-arrow"
|
|
/>
|
|
<q-chip
|
|
v-for="(rec, ind) of arrSubSector"
|
|
:key="'sub-' + ind"
|
|
class="tag-chip subsector"
|
|
:style="{
|
|
background: `linear-gradient(135deg, ${getColorSubSector}, ${getColorSubSector})`,
|
|
opacity: 0.8,
|
|
}"
|
|
:color="getColorSubSector"
|
|
>
|
|
<q-icon
|
|
v-if="rec.icon"
|
|
:name="rec.icon"
|
|
size="xs"
|
|
class="q-mr-xs"
|
|
/>
|
|
{{ rec.descr }}
|
|
</q-chip>
|
|
</div>
|
|
<div class="status-row">
|
|
<div 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>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Preferences (solo per MYHOSPS) -->
|
|
<q-item-label
|
|
v-if="
|
|
table === shared_consts.TABLES_MYHOSPS &&
|
|
myrec.preferences &&
|
|
myrec.preferences.length > 0
|
|
"
|
|
class="preferences-row"
|
|
>
|
|
<div class="preferences-icons-container">
|
|
<q-avatar
|
|
v-for="(prefId, ind) of myrec.preferences"
|
|
:key="ind"
|
|
size="32px"
|
|
:style="`background-color: ${tools.getPreferenceById(prefId)?.color || 'grey'}; opacity: 0.85; cursor: pointer;`"
|
|
class="preference-icon-avatar"
|
|
@click.stop="showPreferencesDialog = true"
|
|
>
|
|
<q-icon
|
|
:name="tools.getPreferenceById(prefId)?.icon || 'help'"
|
|
size="18px"
|
|
color="white"
|
|
/>
|
|
<q-tooltip>{{ tools.getPreferenceById(prefId)?.label }}</q-tooltip>
|
|
</q-avatar>
|
|
</div>
|
|
</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à e Contrib Type -->
|
|
<q-item-label class="cities-contrib-row">
|
|
<div
|
|
v-if="myrec.idContribType && myrec.idContribType.length > 0"
|
|
class="preferences-icons-container"
|
|
>
|
|
<q-avatar
|
|
v-for="(reccontr, index) in myrec.idContribType"
|
|
:key="index"
|
|
size="32px"
|
|
:style="`background-color: ${calendarStore.getColByContribType(reccontr) || 'grey'}; opacity: 0.85; cursor: pointer;`"
|
|
class="preference-icon-avatar"
|
|
>
|
|
<q-icon
|
|
:name="calendarStore.getIconByContribType(reccontr) || ''"
|
|
size="18px"
|
|
color="white"
|
|
/>
|
|
<q-tooltip>{{ calendarStore.getContribtypeById(reccontr) }}</q-tooltip>
|
|
</q-avatar>
|
|
</div>
|
|
<div class="cities-text">
|
|
<span
|
|
v-for="(rec, ind) of myrec.mycities"
|
|
:key="ind"
|
|
class="annuncio-location"
|
|
>
|
|
<span v-if="ind > 0"></span>
|
|
<span v-if="table === shared_consts.TABLES_MYHOSPS" class="cities-text-bold">{{ rec.comune }} ({{ rec.prov }})</span>
|
|
<span v-else>{{ rec.comune }} ({{ rec.prov }})</span>
|
|
</span>
|
|
</div>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
<!-- Menu Azioni -->
|
|
<q-item-section
|
|
v-if="tools.canModifyThisRec(myrec, table) || editOn"
|
|
side
|
|
top
|
|
class="actions-section"
|
|
>
|
|
<q-btn
|
|
round
|
|
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>
|
|
<!-- Categories Dialog -->
|
|
<q-dialog v-model="showPreferencesDialog">
|
|
<q-card
|
|
class="categories-dialog"
|
|
:style="{ minWidth: $q.screen.lt.sm ? '90vw' : '400px' }"
|
|
>
|
|
<q-card-section class="dialog-header">
|
|
<div class="text-h6">Categorie</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-section class="dialog-content">
|
|
<div class="categories-grid">
|
|
<q-chip
|
|
v-for="(rec, ind) of myrec.preferences"
|
|
:key="ind"
|
|
class="category-chip shadow-3"
|
|
:style="`background-color: ${tools.getPreferenceById(rec).color}; opacity: 0.85; color: white;`"
|
|
>
|
|
<q-icon
|
|
:name="tools.getPreferenceById(rec).icon"
|
|
left
|
|
size="18px"
|
|
/>
|
|
{{ tools.getPreferenceById(rec).label }}
|
|
</q-chip>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
flat
|
|
label="Chiudi"
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CMyRecCard.ts"></script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CMyRecCard.scss';
|
|
</style>
|