7e156ca820
- risolto problema sulle card di telegram, immagini non alte uguali e non si vedono bene...
369 lines
13 KiB
Vue
Executable File
369 lines
13 KiB
Vue
Executable File
<template>
|
|
<div v-if="contact">
|
|
<div class="row items-center q-mt-0 q-mb-0">
|
|
<div
|
|
v-if="progressStep !== 1"
|
|
:class="indstep >= numindstep ? 'col-10' : 'col-12'"
|
|
>
|
|
<CTitleBanner
|
|
class="q-pa-none"
|
|
:title="
|
|
!progressStep
|
|
? t('tutorial.title', { indstep: indstep + 1, numindstep }) +
|
|
` (` +
|
|
progressLabel +
|
|
`)`
|
|
: t('tutorial.title_completed', {
|
|
indstep: indstep + 1,
|
|
numindstep,
|
|
}) +
|
|
` (` +
|
|
progressLabel +
|
|
`)`
|
|
"
|
|
:bgcolor="getColorTutorial()"
|
|
clcolor="text-white"
|
|
myclass="myshad"
|
|
:canopen="!completed()"
|
|
>
|
|
<q-slide-transition>
|
|
<div v-show="indstep < numindstep">
|
|
<!--<div class="q-my-sm">
|
|
<q-linear-progress
|
|
stripe
|
|
size="25px"
|
|
:value="progressStep"
|
|
:color="getColor()"
|
|
>
|
|
<div class="absolute-full flex flex-center">
|
|
<q-badge
|
|
color="white"
|
|
text-color="accent"
|
|
:label="
|
|
t('tutorial.completed_step', { perc: progressLabel })
|
|
"
|
|
/>
|
|
</div>
|
|
</q-linear-progress>
|
|
</div>
|
|
-->
|
|
<!--<CMyUserOnlyView
|
|
:mycontact="contact"
|
|
:visu="costanti.FIND_PEOPLE"
|
|
>
|
|
</CMyUserOnlyView>-->
|
|
|
|
<div class="">
|
|
<q-stepper
|
|
v-model="indstep"
|
|
ref="stepper"
|
|
color="primary"
|
|
animated
|
|
vertical
|
|
:header-nav="!!contact.profile.resid_province"
|
|
>
|
|
<q-step
|
|
v-for="(recstep, index) in arrStep"
|
|
:key="index"
|
|
:name="recstep.indstep"
|
|
:title="recstep.title + recstep.extratitle()"
|
|
:icon="recstep.icon"
|
|
:done="recstep.checkOk()"
|
|
:done-color="getColorDone(index)"
|
|
>
|
|
<div v-html="recstep.label"></div>
|
|
<br />
|
|
<q-banner v-if="recstep.step === STEP_CITY">
|
|
<CMySelectCity
|
|
:label="$t('reg.resid_province')"
|
|
table="users"
|
|
jointable="provinces"
|
|
v-model="contact.profile.resid_province"
|
|
myclass="selectorwide text-white"
|
|
:db_type="costanti.FieldType.string"
|
|
db_field="profile"
|
|
db_subfield="resid_province"
|
|
:db_id="contact._id"
|
|
:db_rec="contact"
|
|
>
|
|
</CMySelectCity>
|
|
|
|
<CMySelectCity
|
|
v-if="
|
|
globalStore.isPresenteCardsByProv(
|
|
contact.profile.resid_province
|
|
)
|
|
"
|
|
:label="$t('reg.resid_card')"
|
|
table="users"
|
|
jointable="cards"
|
|
v-model="contact.profile.resid_card"
|
|
myclass="selectorwide text-white"
|
|
:db_type="costanti.FieldType.string"
|
|
db_field="profile"
|
|
db_subfield="resid_card"
|
|
:db_id="contact._id"
|
|
:db_rec="contact"
|
|
:value2="contact.profile.resid_province"
|
|
>
|
|
</CMySelectCity>
|
|
</q-banner>
|
|
<div v-else-if="step === STEP_NAME_SURNAME">
|
|
<q-banner>
|
|
<div class="myrow">
|
|
<CMyFieldDb
|
|
:title="$t('reg.name')"
|
|
table="users"
|
|
mykey="name"
|
|
:hint="$t('reg.insert_name')"
|
|
:type="costanti.FieldType.string"
|
|
>
|
|
</CMyFieldDb>
|
|
</div>
|
|
<div class="myrow">
|
|
<CMyFieldDb
|
|
:title="$t('reg.surname')"
|
|
table="users"
|
|
mykey="surname"
|
|
:hint="$t('reg.insert_surname')"
|
|
:type="costanti.FieldType.string"
|
|
>
|
|
</CMyFieldDb>
|
|
</div>
|
|
</q-banner>
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
step === STEP_CIRCUIT
|
|
"
|
|
class=""
|
|
>
|
|
<q-select
|
|
v-if="mylistcircuits && mylistcircuits.length > 1"
|
|
:behavior="
|
|
$q.platform.is.ios === true ? 'dialog' : 'menu'
|
|
"
|
|
rounded
|
|
dense
|
|
outlined
|
|
v-model="circuitsel"
|
|
:options="mylistcircuits"
|
|
label="SCegli il Circuito della tua Zona:"
|
|
>
|
|
</q-select>
|
|
|
|
<CMyCircuit
|
|
v-if="step === STEP_CIRCUIT"
|
|
:mycircuit="mycircuit"
|
|
:visu="costanti.ENTER_TO_THE_CIRCUIT"
|
|
:username="contact.username"
|
|
>
|
|
</CMyCircuit>
|
|
</div>
|
|
<div
|
|
v-else-if="
|
|
step === STEP_CIRCUIT_ITALIA
|
|
"
|
|
>
|
|
<CMyCircuit
|
|
:mycircuit="circuititalia"
|
|
:visu="costanti.ENTER_TO_THE_CIRCUIT"
|
|
:username="contact.username"
|
|
>
|
|
</CMyCircuit>
|
|
</div>
|
|
<div v-else-if="step === 300" class="">
|
|
<!--
|
|
<div
|
|
v-for="(card, ind) of mycards"
|
|
:key="ind"
|
|
:name="card.table"
|
|
>
|
|
<q-card class="q-my-md">
|
|
<div>
|
|
<CSkill
|
|
v-if="false"
|
|
:table="card.table"
|
|
:filtercustom="filtroutente"
|
|
:butt_modif_new="true"
|
|
:visuinpage="true"
|
|
:noaut="true"
|
|
:title="card.title"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
<div v-else-if="step === STEP_FOTO" class="">
|
|
<div class="myrow">
|
|
<!--<CMyFieldDb
|
|
:title="$t('reg.photo')"
|
|
table="users"
|
|
mykey="profile"
|
|
mysubkey="img"
|
|
:type="costanti.FieldType.imagerec"
|
|
>
|
|
</CMyFieldDb>-->
|
|
</div>
|
|
|
|
<q-btn
|
|
glossy
|
|
label="Modifica Profilo"
|
|
icon="fas fa-pencil-alt"
|
|
color="primary"
|
|
to="/editprofile"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
v-if="recstep.checkOkReal() && recstep.label_ok"
|
|
class="clBorderService"
|
|
v-html="recstep.label_ok"
|
|
></div>
|
|
<q-stepper-navigation>
|
|
<q-btn
|
|
v-if="recstep.indstep > 1"
|
|
flat
|
|
color="primary"
|
|
@click="$refs.stepper.previous()"
|
|
:label="$t('dialog.indietro')"
|
|
class="q-ml-sm"
|
|
/>
|
|
<q-btn
|
|
:flat="isSalta(recstep.step)"
|
|
:disabled="isNextDisable(recstep.step)"
|
|
@click="
|
|
isSalta(recstep.step)
|
|
? askToConfirmSkip(recstep.step)
|
|
: recstep.indstep === numindstep
|
|
? clickFinish()
|
|
: $refs.stepper.next()
|
|
"
|
|
:color="isSalta(recstep.step) ? 'negative' : 'primary'"
|
|
:label="
|
|
recstep.indstep === numindstep
|
|
? t('dialog.finish')
|
|
: isSalta(recstep.step)
|
|
? t('dialog.salta')
|
|
: t('dialog.avanti')
|
|
"
|
|
/>
|
|
</q-stepper-navigation>
|
|
</q-step>
|
|
</q-stepper>
|
|
</div>
|
|
</div>
|
|
</q-slide-transition>
|
|
</CTitleBanner>
|
|
</div>
|
|
<q-btn
|
|
v-if="indstep >= numindstep && progressStep !== 1"
|
|
:class="`col-2 ` + getColorTutorial()"
|
|
icon="fas fa-arrow-right"
|
|
color="text-white"
|
|
dense
|
|
size="md"
|
|
:label="$t('dialog.vai')"
|
|
@click="indstep = 1"
|
|
>
|
|
</q-btn>
|
|
|
|
<q-banner
|
|
inline-actions
|
|
class="bg-blue text-white row"
|
|
v-if="userstoverify.length > 0 && showBanner_utenti_verif"
|
|
>
|
|
<div v-html="$t('tutorial.utenti_da_verificare')"></div>
|
|
<template v-slot:action>
|
|
<q-btn
|
|
:label="
|
|
userstoverify.length + ' ' + t('tutorial.utenti_da_verif_btn')
|
|
"
|
|
class="q-my-sm"
|
|
rounded
|
|
icon="fas fa-users"
|
|
@click="
|
|
usersList.show = true;
|
|
usersList.title = t('tutorial.utenti_da_verif_btn');
|
|
"
|
|
/>
|
|
<q-btn
|
|
icon="fas fa-times"
|
|
class="q-my-sm"
|
|
flat
|
|
@click="showBanner_utenti_verif = false"
|
|
aria-label="Chiudi"
|
|
/>
|
|
</template>
|
|
</q-banner>
|
|
|
|
<q-banner
|
|
inline-actions
|
|
class="bg-red text-white"
|
|
v-if="
|
|
userStore.my.profile.calc.numGoodsAndServices <= 0 &&
|
|
!nascondiavviso &&
|
|
tools.visualizzaHomeApp()
|
|
"
|
|
>
|
|
<span v-html="$t('tutorial.step_beniservizi')"></span>
|
|
<template v-slot:action>
|
|
<q-btn
|
|
flat
|
|
color="white"
|
|
label="Chiudi"
|
|
@click="nascondiavviso = true"
|
|
/>
|
|
</template>
|
|
</q-banner>
|
|
</div>
|
|
</div>
|
|
<q-dialog v-model="usersList.show">
|
|
<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">
|
|
<q-list>
|
|
<span
|
|
v-for="(rec, index) in userstoverify"
|
|
:key="index"
|
|
class="q-my-sm rounded-borders"
|
|
clickable
|
|
>
|
|
<CMyUser
|
|
:mycontact="rec"
|
|
:visu="costanti.ASK_TRUST"
|
|
@setCmd="tools.setCmd"
|
|
>
|
|
</CMyUser>
|
|
</span>
|
|
</q-list>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-dialog v-model="showAccountInfo" full-height full-width>
|
|
<q-card v-if="true">
|
|
<q-toolbar class="bg-primary">
|
|
<q-toolbar-title class="text-h7">
|
|
{{ tools.getNomeUtenteEUsernameByRecUser(contact) }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round icon="close" v-close-popup></q-btn>
|
|
</q-toolbar>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" src="./CMyProfileTutorial.ts">
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './CMyProfileTutorial.scss';
|
|
</style>
|