Files
salvato.newfreeplanet/src/components/CMyRecCard/CMyRecCard.vue

298 lines
9.4 KiB
Vue
Executable File

<!--suppress ALL -->
<template>
<div
class="q-py-xs centermydiv cardrec"
:style="
`max-width: ` +
(tools.getwidth($q) - 20) +
`px; ` +
($q.screen.lt.sm
? `min-width: ` + (tools.getwidth($q) - (20 + margin_right)) + `px;`
: ``)
"
>
<div v-if="myrec && table === shared_consts.TABLES_MYBACHECAS">
<div class="row">
<div class="col-2 q-my-sm">
<div class="column">
<span class="ev_dayofweek">{{
tools.getDayOfWeek(myrec.dateTimeStart)
}}</span>
<span class="ev_day">{{
tools.getstrDay(myrec.dateTimeStart)
}}</span>
</div>
</div>
<div class="col-10">
<q-img
:src="
tools.getFullFileName(myrec.photos, table, myrec.username, '')
"
:alt="myrec.descr"
img-class="imgprofile"
height="270px"
fit="contain"
@click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)"
/>
<div>
{{tools.getstrDateTimeEvent($t, myrec, false)}}</div>
</div>
</div>
</div>
<q-item
v-if="myrec"
clickable
v-ripple
:class="
`shadow-2 butt_rounded ` +
(tools.isPartecipero(myrec) ? ` butt_green ` : '')
"
>
<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, myrec)"
>
<q-badge
v-if="showBadge()"
class="q-my-xs self-center"
:color="fieldsTable.getColByAdType(myrec.adType)"
>
{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
<q-icon
:name="fieldsTable.getIconByAdType(myrec.adType)"
color="white"
class="q-ml-xs"
/>
</q-badge>
<q-avatar size="60px">
<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
)
"
class="img"
alt="immagine del gruppo"
>
</q-img>
<q-img
v-else
:src="
tools.getFullFileName(myrec.photos, table, myrec.username, '')
"
:alt="myrec.descr"
img-class="imgprofile"
height="60px"
/>
</q-avatar>
</q-item-section>
<q-item-section v-else-if="!myrec.organisedBy" avatar @click="naviga(`/my/` + myrec.username)">
<q-badge
v-if="showBadge()"
class="q-my-xs self-center"
:color="fieldsTable.getColByAdType(myrec.adType)"
>
{{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
<q-icon
:name="fieldsTable.getIconByAdType(myrec.adType)"
color="white"
class="q-ml-xs"
/>
</q-badge>
<q-avatar size="60px">
<q-img
:src="getImgUser(myrec)"
:alt="myrec.username"
img-class="imgprofile"
height="60px"
/>
</q-avatar>
</q-item-section>
<q-item-section @click="navigaExt(myrec)">
<q-item-label lines="2" class="full-width">
<span
v-for="(rec, ind) of tools.getArrSubSector(table, myrec)"
:key="ind"
>
<q-chip
dense
class="text-center shadow-5 glossy text-white bg-green"
>{{ rec.descr }}</q-chip
>
</span>
<span>
<span
v-for="(rec, ind) of tools.getArrSector(table, myrec)"
:key="ind"
>
<q-chip
dense
class="text-center shadow-5 glossy text-white bg-blue"
>{{ rec.descr }}</q-chip
></span
>
</span>
<!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
</span>-->
</q-item-label>
<q-item-label lines="4" :class="(table === shared_consts.TABLES_MYBACHECAS) ? 'text-bold':''" v-if="myrec.descr"
>{{ myrec.descr }}<br />
</q-item-label>
<q-item-label lines="1" style="" class="text_user_city">
<div class="row justify-between">
<div class="text-weight-bold text-italic">
<span
v-if="
table === shared_consts.TABLES_MYBACHECAS && myrec.organisedBy
"
>
<span>{{ myrec.organisedBy }} </span>
</span>
<span v-else>
{{ getNameToShow(myrec) }}
</span>
</div>
<div class="q-mx-sm">
(
<span v-if="table === shared_consts.TABLES_MYBACHECAS && tools.getNumPartecipantes(myrec) > 0">
<span class="q-mx-xxs text-bold">{{
tools.getNumPartecipantes(myrec)
}}</span>
<span class="q-mx-xxs"
><q-icon dense color="blue" name="far fa-check-circle" />
</span>
</span>
<span class="q-mx-xxs">{{ myrec.myseen ? myrec.myseen.length : 0 }}</span>
<span class="q-mx-xxs"
><q-icon dense color="blue" name="far fa-eye" />
</span>
<span class="q-mx-xxs">&nbsp;</span>
<span class="">{{ myrec.myfav ? myrec.myfav.length : 0 }}</span>
<span class="q-mx-xxs"
><q-icon
dense
color="red"
:name="
userStore.isFavorite(myrec._id, table)
? 'favorite'
: 'far fa-heart'
"
/>
</span>
<!--<span class="q-mx-xxs">&nbsp;</span>
<span class="">{{ myrec.mybook.length }}</span>
<span class="q-mx-xxs"
><q-icon
dense
color="teal"
:name="
userStore.isBookmarked(myrec._id, table)
? 'bookmark'
: 'far fa-bookmark'
"
/>
</span>
-->
)
</div>
</div>
</q-item-label>
<q-item-label
v-if="tools.isPartecipero(myrec)"
lines="1"
style="text-align: left"
class="text_user_city"
>
<span class="text-bold text-green text-h7">
<q-icon name="fas fa-user-check" color="green"></q-icon>
{{ $t('event.attend') }}</span
>
</q-item-label>
<q-item-label
lines="1"
style="text-align: right"
class="text_user_city"
>
<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>
<q-item-section side v-if="tools.canModifyThisRec(myrec) || editOn">
<q-item-label>
<q-btn rounded dense icon="fas fa-pencil-alt">
<q-menu>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="cmdExt(costanti.CMD_MODIFY, myrec._id)"
>
<q-item-section side>
<q-icon name="fas fa-pencil-alt" />
</q-item-section>
<q-item-section>{{ $t('reg.edit') }}</q-item-section>
</q-item>
</q-list>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="cmdExt(costanti.CMD_CLONE, myrec._id)"
>
<q-item-section side>
<q-icon name="fas fa-copy" />
</q-item-section>
<q-item-section>{{ $t('event.duplicate') }}</q-item-section>
</q-item>
</q-list>
<q-list style="min-width: 150px">
<q-item
clickable
v-close-popup
@click="cmdExt(costanti.CMD_DELETE, myrec._id)"
>
<q-item-section side>
<q-icon name="fas fa-trash-alt" />
</q-item-section>
<q-item-section>{{ $t('reg.elimina') }}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-item-label>
</q-item-section>
</q-item>
<q-separator inset="item" />
</div>
</template>
<script lang="ts" src="./CMyRecCard.ts">
</script>
<style lang="scss" scoped>
@import './CMyRecCard.scss';
</style>