Files
salvato.newfreeplanet/src/components/CMyCardService/CMyCardService.vue
Surya Paolo d4e0f2cf1a - corretto img profilo
- corretto coordinata non obbligatoria
2024-09-17 18:50:05 +02:00

1312 lines
47 KiB
Vue

<template>
<div
v-if="myrec && myrec._id"
:class="$q.screen.lt.sm ? ' fulldiv ' : ' well-positioned-dialog'"
>
<div
:class="'items-start ' + (!isSmall ? ' q-gutter-xs full-height ' : '')"
>
<div class="row">
<q-toolbar class="bg-white text-black riempi">
<q-toolbar-title> </q-toolbar-title>
<q-btn
v-if="!isSmall && showAnteprima"
:label="isSmall ? 'Apri scheda' : 'Riduci scheda'"
@click="toggleShowScheda"
text-color="purple"
:icon="!isSmall ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
class="q-mr-sm"
/>
<q-btn flat round color="black" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card
ref="cardRef"
:style="cardStyle"
:class="'my-card visudialog no-padding '"
bordered
>
<q-card-section>
<div v-if="!isSmall">
<CGalleryImages
v-if="myrec.photos.length > 0"
:imgGallery="myrec.photos"
:directory="
'upload/' + tools.getDirectoryGall(myrec, table, '')
"
>
</CGalleryImages>
<div v-else class="text-center">
<img
class="text-center"
:src="tools.getimglogo()"
height="50"
alt="Immagine Logo"
/>
</div>
</div>
<div v-if="!isSmall" class="absolute-top-right q-mr-sm q-my-md">
<div class="column">
<q-btn flat round icon="fas fa-ellipsis-h" style="z-index: 1">
<q-menu>
<q-list v-if="true" style="min-width: 200px">
<q-item
v-if="myrec.profile && myrec.profile.username_telegram"
clickable
v-close-popup
@click.stop="tools.copyToClip($q, getlinkpage(), true)"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-share" />
</q-item-section>
<q-item-section>
{{ $t('reaction.condividi') }}
</q-item-section>
</q-item>
<q-item
v-if="myrec.profile && myrec.profile.username_telegram"
clickable
v-close-popup
>
<q-item-section avatar>
<q-icon color="blue" name="telegram" />
</q-item-section>
<q-item-section>
<a
v-if="
myrec.profile && myrec.profile.username_telegram
"
:href="
tools.getHttpForTelegram(
myrec.profile.username_telegram
)
"
target="_blank"
>{{ $t('dialog.telegram') }} -
{{ tools.getNomeUtenteByRecUser(myrec) }}</a
>
</q-item-section>
</q-item>
<q-item
v-if="!nopopup && myrec.myreact"
clickable
v-close-popup
@click.stop="
naviga(tools.getPathByTableAndRec(table, myrec))
"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-globe" />
</q-item-section>
<q-item-section>
{{ $t('event.openpage') }}
</q-item-section>
</q-item>
<q-separator />
<q-item
v-if="myrec"
clickable
v-close-popup
@click.stop="
clicca(
costanti.TIPOFAVBOOK.SEEN,
false,
$t('cmd.seen', {
num: myrec.numseen ? myrec.numseen : 0,
})
)
"
>
<q-item-section avatar>
<q-icon color="blue" name="far fa-eye" />
</q-item-section>
<q-item-section>
{{
$t('cmd.seen', {
num: myrec.numseen ? myrec.numseen : 0,
})
}}
</q-item-section>
</q-item>
<q-item
v-if="myrec"
clickable
v-close-popup
@click.stop="
clicca(
costanti.TIPOFAVBOOK.FAVORITE,
false,
$t('cmd.favorite', {
num: myrec.numfav ? myrec.numfav : 0,
})
)
"
>
<q-item-section avatar>
<q-icon color="red" name="favorite" />
</q-item-section>
<q-item-section>
{{
$t('cmd.favorite', {
num: myrec.numfav ? myrec.numfav : 0,
})
}}
</q-item-section>
</q-item>
<q-item
v-if="table === shared_consts.TABLES_MYBACHECAS"
clickable
v-close-popup
@click.stop="
clicca(
costanti.TIPOFAVBOOK.ATTEND,
false,
$t('cmd.attend', {
num: calendarStore.getNumParticipants(
myrec,
true,
tools.peopleWhere.participants
),
})
)
"
>
<q-item-section avatar>
<q-icon color="green" name="fas fa-user-check" />
</q-item-section>
<q-item-section>
{{
$t('cmd.attend', {
num: calendarStore.getNumParticipants(
myrec,
true,
tools.peopleWhere.participants
),
})
}}
</q-item-section>
</q-item>
<q-item
v-if="myrec"
clickable
v-close-popup
@click.stop="
clicca(
costanti.TIPOFAVBOOK.BOOKMARK,
false,
$t('cmd.bookmark', {
num: myrec.numbook ? myrec.numbook : 0,
})
)
"
>
<q-item-section avatar>
<q-icon color="teal" name="bookmark" />
</q-item-section>
<q-item-section>
{{
$t('cmd.bookmark', {
num: myrec.numbook ? myrec.numbook : 0,
})
}}
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
flat
round
color="blue"
icon="share"
style="z-index: 1"
@click.stop="tools.copyToClip($q, getlinkpage(), true)"
>
</q-btn>
<q-btn
flat
round
color="blue"
icon="far fa-eye"
style="z-index: 1"
>
<q-badge
v-if="myrec"
text-color="primary"
color="white"
class="badge-favbook"
:label="myrec.numseen ? myrec.numseen : 0"
floating
transparent
/>
</q-btn>
<q-btn
style="z-index: 1"
v-if="table === shared_consts.TABLES_MYBACHECAS"
flat
round
color="green"
:icon="
calendarStore.isPartecipero(myrec._id, table)
? 'fas fa-user-check'
: 'far fa-check-circle'
"
@click.stop="EditBookEvent(true)"
>
<q-badge
v-if="myrec.mybookings"
style="z-index: 1"
text-color="primary"
color="white"
class="badge-favbook"
:label="
calendarStore.getNumParticipants(
myrec,
true,
tools.peopleWhere.participants
)
"
floating
transparent
/>
</q-btn>
<q-btn
style="z-index: 1"
flat
round
color="red"
:icon="
userStore.isFavorite(myrec._id, table)
? 'favorite'
: 'far fa-heart'
"
@click.stop="clicca(costanti.TIPOFAVBOOK.FAVORITE, true, '')"
>
<q-badge
v-if="myrec"
text-color="primary"
color="white"
class="badge-favbook"
:label="myrec.numfav ? myrec.numfav : 0"
floating
transparent
/>
</q-btn>
<div class="">
<q-btn
style="z-index: 1"
flat
round
color="teal"
:icon="
userStore.isBookmarked(myrec._id, table)
? 'bookmark'
: 'far fa-bookmark'
"
@click.stop="
clicca(costanti.TIPOFAVBOOK.BOOKMARK, true, '')
"
>
<q-badge
v-if="myrec"
text-color="primary"
color="white"
class="badge-favbook"
:label="myrec.numbook ? myrec.numbook : 0"
floating
transparent
/>
</q-btn>
</div>
</div>
</div>
<q-separator v-if="!isSmall" />
<q-list style="z-index: 5">
<q-item v-if="myrec.tipodiAttivita">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-balance-scale" />
</q-item-section>
<q-item-section>
<q-item-label class="text-bold text-h7">
<q-chip dense color="green" text-color="white"
>{{ getTipodiAttivita() }}
</q-chip>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.adType">
<q-item-section avatar>
<div v-if="showBadge()" class="text-center">
<q-chip
dense
:color="fieldsTable.getColByAdType(myrec.adType)"
text-color="white"
>{{
fieldsTable.getValByTabAndId(
table,
'adType',
myrec.adType
)
}}
</q-chip>
</div>
</q-item-section>
</q-item>
<q-item v-if="myrec.typeHosp">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-balance-scale" />
</q-item-section>
<q-item-section>
<q-item-label class="text-bold text-h7">
<q-chip dense color="green" text-color="white"
>{{ getTypeHosps() }}
</q-chip>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.descr">
<q-item-section>
<q-item-label class="text-h7">{{ myrec.descr }}</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
myrec.idStatusSkill &&
myrec.idStatusSkill.length > 0 &&
JSON.stringify(myrec.idStatusSkill) !== '[1]'
"
>
<q-item-section avatar>
<q-icon color="green" name="mood" />
</q-item-section>
<q-item-section>
<q-item-label>
<span
v-for="(recstatus, index) in myrec.idStatusSkill"
:key="index"
>
<q-chip
dense
:color="globalStore.getColByStatusSkills(recstatus)"
text-color="white"
>
{{ globalStore.getStatusSkillById(recstatus) }}
</q-chip>
</span>
</q-item-label>
</q-item-section>
</q-item>
<div v-if="!isSmall">
<q-item v-if="myrec.dateTimeStart">
<q-item-section avatar>
<q-icon color="green" name="far fa-calendar-alt" />
</q-item-section>
<q-item-section>
<q-item-label>
<span>{{
tools.getstrDateMonthTimeLong(myrec.dateTimeStart)
}}</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.dateTimeEnd">
<q-item-section avatar>
<q-icon color="red" name="far fa-calendar-alt" />
</q-item-section>
<q-item-section>
<q-item-label>
<span>{{
tools.getstrDateMonthTimeLong(myrec.dateTimeEnd)
}}</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="getSectorByRec(myrec)">
<q-item-section avatar>
<q-icon color="blue" name="category" />
</q-item-section>
<q-item-section>
<q-item-label>
<q-chip
v-if="
getSectorByRec(myrec) &&
getSectorByRec(myrec)[0].descr
"
class="glossy"
color="blue"
text-color="white"
dense
>
<span class="cal__quota-content">{{
getSectorByRec(myrec)[0].descr
}}</span>
</q-chip>
<q-chip
v-if="
getRecGoodSkillByRec(myrec) &&
getRecGoodSkillByRec(myrec).length > 0 &&
getRecGoodSkillByRec(myrec)[0].descr
"
class="glossy"
dense
color="blue"
text-color="white"
>
<span class="cal__quota-content">{{
getRecGoodSkillByRec(myrec)[0].descr
}}</span>
</q-chip>
</q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.numMaxPeopleHosp" class="q-mt-sm">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-users" />
</q-item-section>
<q-item-section>
<q-item-label class="q-px-xs q-ma-xs">
<span class="accom_maxosp">{{
myrec.numMaxPeopleHosp
}}</span
>{{ t('hosps.numMaxPeopleHosp') }}
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="!!myrec.accomodation && myrec.accomodation.length > 0"
>
<q-item-section avatar>
<q-icon color="orange" name="fas fa-bed" />
</q-item-section>
<q-item-section>
<q-item-label>
<CAccomodation
v-if="!!myrec.accomodation"
:mylist="myrec.accomodation"
:isInModif="false"
:edit="false"
:canModify="false"
>
</CAccomodation>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="!!myrec.preferences && myrec.preferences.length > 0"
>
<q-item-section avatar>
<q-icon color="red" name="fas fa-asterisk" />
</q-item-section>
<q-item-section>
<q-item-label>
<CMyChipList
:rec="myrec"
:type="costanti.FieldType.multiselect"
:value="myrec.preferences"
:options="
globalStore.getTableJoinByName(
toolsext.TABPREF,
false,
false,
null
)
"
:optval="fieldsTable.getKeyByTable(toolsext.TABPREF)"
:optlab="fieldsTable.getLabelByTable(toolsext.TABPREF)"
:opticon="fieldsTable.getIconByTable(toolsext.TABPREF)"
></CMyChipList>
</q-item-label>
</q-item-section>
</q-item>
<q-separator />
<q-item-label v-if="myrec.note"
><div
v-html="myrec.note"
class="q-my-sm clBorderService clDescrEstesa"
></div
></q-item-label>
<q-item clickable v-if="table === 'mybachecas'">
<q-item-section avatar>
<q-icon color="green" name="fas fa-house-user" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
{{ $t('event.organisedBy') }}: {{ myrec.organisedBy }}
</q-item-label>
</q-item-section>
</q-item>
<q-card
v-if="
table === 'mybachecas' &&
myrec.mygrp &&
myrec.mygrp.groupname
"
class="my-card clBorderUser"
bordered
@click="
naviga(
tools.getPathByGroup(
myrec.mygrp,
shared_consts.TABLES_MYGROUPS
)
)
"
>
<CMyGroup
:mygrp="myrec.mygrp"
:visu="costanti.USER_GROUPS"
:noaut="true"
>
</CMyGroup>
</q-card>
<q-card
v-else-if="
!myrec.organisedBy &&
shared_consts.TABLES_VISU_LISTA_USER.includes(table)
"
class="my-card clBorderUser"
bordered
>
<CMyUser
:mycontact="myrec"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
>
</CMyUser>
</q-card>
<q-item
clickable
v-if="table === 'mybachecas' && myrec.contact_phone"
>
<q-item-section avatar>
<q-icon color="green" name="fas fa-phone" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<CLabel
v-bind="$attrs"
:copy="true"
:value="myrec.contact_phone"
:label="$t('event.contact_phone')"
/>
</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="table === 'mybachecas' && myrec.contact_telegram"
>
<q-item-section avatar>
<q-icon color="blue" name="fab fa-telegram" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<a
:href="tools.getHttpForTelegram(myrec.contact_telegram)"
target="_blank"
>{{ $t('msgs.telegrammsg') }}: @{{
myrec.contact_telegram
}}
</a>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
myrec.mycities &&
myrec.mycities.length > 0 &&
myrec.mycities[0].comune
"
>
<q-item-section avatar>
<q-icon color="amber" name="fas fa-map-marker-alt" />
</q-item-section>
<q-item-section>
<q-item-label>
<div v-if="myrec.address">
{{ myrec.address }}
</div>
<span
v-for="(city, index) in myrec.mycities"
:key="index"
>
<span v-if="city.comune">
{{ city.comune }} ({{ city.prov }})</span
><span v-if="myrec.mycities.length > 1"> - </span>
</span>
</q-item-label>
<q-item-label v-if="myrec.profile.qualifica" caption>{{
myrec.biografia
}}</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="
myrec.coordinate_gps.address ||
myrec.coordinate_gps.coordinates
"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-crosshairs" />
</q-item-section>
<q-item-section>
<q-item-label>
<div v-if="myrec.coordinate_gps.address">
{{ myrec.coordinate_gps.address }}
</div>
</q-item-label>
<q-item-label>
<div v-if="myrec.coordinate_gps.coordinates">
{{ tools.getCoordinatesToShow(myrec.coordinate_gps) }}
</div>
<q-btn
:label="t('attivita.vediinmappa')"
v-if="myrec.coordinate_gps.coordinates"
color="primary"
icon="fas fa-map-marker-alt"
size="md"
class="q-my-sm"
@click="showInMap(myrec)"
/>
</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-if="myrec.link_maplocation">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-map-marker-alt" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<span
v-html="
tools.getlinkhref(
myrec.link_maplocation,
'Apri Mappa'
)
"
/></q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-if="myrec.website">
<q-item-section avatar>
<q-icon color="blue" name="fas fa-globe" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<span
v-html="
tools.getlinkhref(
myrec.website,
t('services.visit_website')
)
"
/></q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-if="myrec.email">
<q-item-section avatar>
<q-icon color="blue-grey-6" name="fas fa-envelope" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<span
v-html="
tools.getlinkEmail(myrec.email, t('services.email'))
"
/></q-item-label>
</q-item-section>
</q-item>
<q-item v-if="myrec.telegram_username" clickable>
<q-item-section avatar>
<q-icon color="blue" name="telegram" />
</q-item-section>
<q-item-section>
<a
v-if="myrec.telegram_username"
:href="tools.getHttpForTelegram(myrec.telegram_username)"
target="_blank"
>@{{ myrec.telegram_username }}</a
>
</q-item-section>
</q-item>
<q-item clickable v-if="myrec.whatsapp">
<q-item-section avatar>
<q-icon color="green" name="fab fa-whatsapp" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
{{ myrec.whatsapp }}
</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-if="myrec.cell_phone">
<q-item-section avatar>
<q-icon color="green" name="fas fa-mobile-alt" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<span> {{ myrec.cell_phone }}: </span>
</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="
table === 'mybachecas' &&
calendarStore.getNumParticipants(
myrec,
true,
tools.peopleWhere.participants
) > 0
"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-user-check" />
</q-item-section>
<q-item-section>
<q-item-label lines="1" v-if="myrec.myattend">
<q-btn
v-if="table === shared_consts.TABLES_MYBACHECAS"
rounded
color="primary"
:label="
$t('cmd.attend', {
num: calendarStore.getNumParticipants(
myrec,
true,
tools.peopleWhere.participants
),
})
"
@click="
clicca(
costanti.TIPOFAVBOOK.ATTEND,
false,
$t('cmd.attend', {
num: calendarStore.getNumParticipants(
myrec,
true,
tools.peopleWhere.participants
),
})
)
"
>
</q-btn>
</q-item-label>
</q-item-section>
</q-item>
<q-item
clickable
v-if="
table === 'mybachecas' &&
(myrec.min_partecip || myrec.max_partecip)
"
>
<q-item-section avatar>
<q-icon color="blue" name="fas fa-users" />
</q-item-section>
<q-item-section>
<q-item-label lines="1">
<span v-if="myrec.min_partecip"
>{{ $t('event.min_partecip') }}:
{{ myrec.min_partecip }}</span
><br />
<span v-if="myrec.max_partecip"
>{{ $t('event.max_partecip') }}:
{{ myrec.max_partecip }}</span
>
</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="myrec.idContribType && myrec.idContribType.length > 0"
>
<q-item-section avatar>
<q-icon color="green" name="fas fa-hand-holding" />
</q-item-section>
<q-item-section>
<q-item-label>
<span v-if="myrec.contribstr"
><br />{{ myrec.contribstr }}</span
>
<span
v-for="(reccontr, index) in myrec.idContribType"
:key="index"
>
<q-chip
dense
:color="calendarStore.getColByContribType(reccontr)"
text-color="white"
>
{{ calendarStore.getContribtypeById(reccontr) }}
</q-chip>
</span>
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar>
<q-icon color="blue" name="far fa-edit" />
</q-item-section>
<q-item-section>
<q-item-label>
{{ $t('reg.pub_updated') }}
<span v-if="myrec.date_updated">{{
tools.getstrDateMonthLong(myrec.date_updated)
}}</span
><span v-else>{{
tools.getstrDateMonthLong(myrec.date_created)
}}</span>
<span v-if="myrec.organisedBy || myrec.groupname"
><br />{{ $t('reg.who_updated') }}
<span class="text-bold"
><a :href="'my/' + myrec.username">{{
tools.getNomeUtenteByRecUser(myrec)
}}</a></span
></span
>
<span v-if="myrec.createdBy"
><br />{{ $t('services.createdBy') }}
<span class="text-bold"
><a :href="'my/' + createdBy">{{
createdBy
}}</a></span
></span
>
</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-if="false">
<q-item-section avatar>
<q-icon color="red" name="local_gas_station" />
</q-item-section>
<q-item-section>
<q-item-label></q-item-label>
<q-item-label caption>Fill your gas tank.</q-item-label>
</q-item-section>
</q-item>
</div>
</q-list>
<q-separator />
<div
v-if="table === shared_consts.TABLES_MYBACHECAS"
class="q-mb-sm"
>
&nbsp;
</div>
<div v-if="isSmall && showAnteprima" class="row justify-center">
<q-btn
:label="isSmall ? 'Apri scheda' : 'Riduci scheda'"
@click="toggleShowScheda"
color="purple"
class="q-mr-sm"
/>
<q-btn
outlined
rounded
:label="$t('dialog.close')"
color="primary"
icon="close"
v-close-popup
></q-btn>
</div>
</q-card-section>
<q-card-actions v-if="!isSmall" class="row justify-center q-px-xs">
<div class="row justify-evenly q-my-sm">
<div class="row q-mx-sm justify-evenly">
<q-btn
class="q-mx-xxs q-my-xs"
rounded
:label="
userStore.isFavorite(myrec._id, table)
? $t('reaction.tipiace')
: $t('reaction.mipiace')
"
text-color="red"
color="white"
:icon="
userStore.isFavorite(myrec._id, table)
? 'favorite'
: 'far fa-heart'
"
@click="clicca(costanti.TIPOFAVBOOK.FAVORITE, true, '')"
>
</q-btn>
<q-btn
class="q-mx-xxs q-my-xs"
rounded
:label="$t('reaction.condividi')"
text-color="blue"
color="white"
icon="fas fa-share"
@click="condividi()"
>
</q-btn>
<q-btn
v-if="
(myrec.profile && myrec.profile.username_telegram) ||
myrec.contact_telegram
"
class="q-mx-xxs q-my-xs"
rounded
:label="$t('dialog.scrivi')"
text-color="primary"
color="white"
icon="telegram"
target="_blank"
@click="
tools.openUrl(
myrec.contact_telegram
? tools.getHttpForTelegram(myrec.contact_telegram)
: tools.getHttpForTelegram(
myrec.profile.username_telegram
)
)
"
/>
<q-btn
v-if="table === shared_consts.TABLES_MYBACHECAS"
rounded
:color="
calendarStore.isPartecipero(myrec._id, table)
? 'green'
: 'grey'
"
:label="$t('event.attend')"
:icon="
calendarStore.isPartecipero(myrec._id, table)
? 'fas fa-user-check'
: 'far fa-check-circle'
"
@click="EditBookEvent(true)"
>
</q-btn>
<q-btn
rounded
outline
class="q-ma-sm"
v-if="isAlreadyBooked() && site.confpages.bookingEvents"
text-color="red"
@click="EditBookEvent(true)"
:label="$t('cal.modifybooking')"
>
</q-btn>
</div>
</div>
<div v-if="$q.screen.lt.sm" class="row justify-center q-my-xs">
<q-btn
rounded
:label="$t('dialog.close')"
color="primary"
icon="close"
v-close-popup
/>
</div>
</q-card-actions>
</q-card>
</div>
<q-inner-loading
:showing="loading"
label="attendere..."
label-class="text-teal"
label-style="font-size: 1.1em"
/>
</div>
</div>
<q-dialog v-model="usersList.loadfromDb">
<q-card class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ usersList.title }}
</q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="inset-shadow">
<div v-if="usersList.loadfromDb">
<CGridTableUser
prop_mytable="reactions"
prop_mytitle=""
:prop_mycolumns="colmyUserPeople"
prop_colkey="_id"
col_title="username"
:vertical="costanti.VISUTABLE_LISTA"
nodataLabel=" "
:prop_search="false"
:prop_showfilter="false"
hint=""
:finder="false"
:choose_visutype="false"
:finder_noNull="false"
:finder_noNullFilters="false"
:options="shared_consts.OPTIONS_SEARCH_USER_ALL_WORDS"
:butt_modif_new="false"
noresultLabel="Username o nome non trovato"
:arrfilters="arrfilterand"
:filtercustom="filtercustom"
:prop_searchList="searchList"
:showType="costanti.SHOW_USERINFO"
:showCol="false"
:extraparams="extraparams()"
>
</CGridTableUser>
</div>
<div v-else>
<div v-for="(rec, i) in usersList.list" :key="i">
<CMyUser
:mycontact="rec"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
>
</CMyUser>
</div>
</div>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="bookedList.show">
<q-card v-if="bookedList" class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ bookedList.title }}
</q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="q-pa-xs inset-shadow">
<div v-for="(eventbook, index) in bookedList.list" :key="index">
<CMyUser
:mycontact="{ username: eventbook.username }"
:visu="costanti.FIND_PEOPLE"
@setCmd="tools.setCmd"
>
</CMyUser>
<div>
{{ tools.getstrshortDateTime(eventbook.datebooked) }}
<span v-if="eventbook.msgbooking">{{ $t('sendmsg.write') }}: </span>
<q-separator />
</div>
{{ eventbook.msgbooking }}
<div>
<span v-if="eventbook.numpeople > 0"
>Partecipanti: {{ eventbook.numpeople }}<br
/></span>
<span v-if="eventbook.numpeopleLunch > 0"
>Pranzo: {{ eventbook.numpeopleLunch }}<br
/></span>
<span v-if="eventbook.numpeopleDinner > 0"
>Cena: {{ eventbook.numpeopleDinner }}<br
/></span>
<span v-if="eventbook.numpeopleDinnerShared > 0"
>C.Cond: {{ eventbook.numpeopleDinnerShared }}<br
/></span>
</div>
<div>
<div class="text-center">
<q-btn
v-if="myrec.userId === userStore.my._id"
rounded
color="red"
label="Elimina"
icon="fas fa-trash-alt"
@click="
tools.CancelBookingEvent($q, myrec, eventbook._id, false)
"
></q-btn>
</div>
</div>
</div>
<br />
<div class="text-center">
<q-btn
outlined
rounded
:label="$t('dialog.close')"
color="primary"
icon="close"
v-close-popup
></q-btn>
</div>
</q-card-section>
</q-card>
</q-dialog>
<q-dialog v-model="askInfopage.show" no-backdrop-dismiss>
<q-card v-if="askInfopage.show" class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ $t('cal.booking') }}
</q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<q-card-section class="inset-shadow">
<div style="margin-top: 150px">
<q-chip class="shadow-5 q-mb-md" dense>
{{ myrec.descr }}
</q-chip>
<div v-if="myrec.dateTimeStart" class="cal__when">
<span class="cal__where-title"
>{{ $t('cal.when') }}:
<span v-html="tools.getstrDateTimeEvent($t, myrec, true)"></span>
</span>
</div>
<div class="q-pa-xs">
<q-card class="text-white windowcol">
<q-card-section>
<q-input
v-model="askInfoForm.message"
:label="$t('cal.writemsg') + ':'"
autofocus
debounce="500"
type="textarea"
input-class="myinput-area"
>
</q-input>
</q-card-section>
</q-card>
</div>
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn
flat
:label="$t('dialog.sendmsg')"
color="primary"
@click="sendMsg(true)"
></q-btn>
<q-btn
flat
:label="$t('dialog.cancel')"
color="primary"
v-close-popup
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
<q-dialog v-model="bookEventpage.show" no-backdrop-dismiss>
<q-card v-if="bookEventpage.show" class="dialog_card">
<q-toolbar class="bg-primary text-white">
<q-toolbar-title>
{{ $t('cal.booking') }}
</q-toolbar-title>
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
</q-toolbar>
<div class="q-pa-xs">
<q-card class="windowcol" style="display: block">
<q-card-section class="q-pa-xs">
<div>{{ $t('cal.infoprenota') }}</div>
<br />
<div style="display: inline-flex" class="q-px-xs centermydiv">
<q-checkbox
style="color: black"
v-model="bookEventForm.booked"
:label="$t('cal.bookingtextdefault')"
color="green"
>
</q-checkbox>
<div
v-if="bookEventForm.booked"
class="q-gutter-xs q-mx-xs"
style="min-width: 140px"
>
<q-select
v-if="table === shared_consts.TABLES_MYBACHECAS"
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
rounded
style="max-width: 150px"
outlined
v-model="bookEventForm.numpeople"
:options="tools.SelectListNumPeople"
:label="$t('statusreg.reg')"
emit-value
map-options
>
</q-select>
</div>
</div>
<q-input
v-model="bookEventForm.msgbooking"
:label="$t('cal.writemsg') + ':'"
type="textarea"
debounce="500"
input-class="myinput-area"
>
</q-input>
</q-card-section>
</q-card>
</div>
<q-card-actions align="right">
<q-btn
v-if="bookEventpage.state === EState.Modifying"
flat
:label="$t('cal.cancelbooking')"
color="negative"
@click="CancelBookingEvent($q, bookEventForm._id, true)"
></q-btn>
<q-btn
v-if="checkseinviaMsg()"
flat
:label="$t('dialog.sendonlymsg')"
color="primary"
@click="sendMsg(false)"
></q-btn>
<q-btn
v-else-if="bookEventForm.booked"
:label="getTitleBtnBooking()"
color="primary"
@click="saveBookEvent()"
:disable="
!(bookEventpage.state === EState.Creating || hasModifiedBooking)
"
></q-btn>
<q-btn
flat
:label="$t('dialog.cancel')"
color="primary"
v-close-popup
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script lang="ts" src="./CMyCardService.ts">
</script>
<style lang="scss" scoped>
@import './CMyCardService.scss';
</style>