217 lines
7.7 KiB
Vue
Executable File
217 lines
7.7 KiB
Vue
Executable File
<template>
|
|
<div v-if="contact">
|
|
<div class="row items-center">
|
|
<div :class="step >= numstep ? 'col-10' : 'col-12'">
|
|
<CTitleBanner
|
|
class="q-pa-none"
|
|
:title="
|
|
!progressStep
|
|
? $t('tutorial.title') + ` (` + progressLabel + `)`
|
|
: $t('tutorial.title_completed') + ` (` + progressLabel + `)`
|
|
"
|
|
:bgcolor="getColorTutorial()"
|
|
clcolor="text-white"
|
|
myclass="myshad"
|
|
:canopen="!completed()"
|
|
>
|
|
<q-slide-transition>
|
|
<div v-show="step < numstep">
|
|
<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="step"
|
|
ref="stepper"
|
|
color="primary"
|
|
animated
|
|
vertical
|
|
header-nav
|
|
>
|
|
<q-step
|
|
v-for="(recstep, index) in arrStep"
|
|
:key="index"
|
|
:name="recstep.step"
|
|
:title="recstep.title + recstep.extratitle()"
|
|
:icon="recstep.icon"
|
|
:done="recstep.checkOk()"
|
|
done-color="positive"
|
|
>
|
|
<div
|
|
v-if="recstep.checkOk() && recstep.label_ok"
|
|
v-html="recstep.label_ok"
|
|
></div>
|
|
<div v-else v-html="recstep.label"></div>
|
|
<br />
|
|
<q-banner v-if="step === 1" class="bg-blue-8 text-white">
|
|
<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>
|
|
</q-banner>
|
|
<div v-else-if="step === 2">
|
|
<q-banner class="bg-blue-8 text-white">
|
|
<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 === 3" class="">
|
|
<CMyCircuit
|
|
:mycircuit="mycircuit"
|
|
:visu="costanti.ENTER_TO_THE_CIRCUIT"
|
|
>
|
|
</CMyCircuit>
|
|
</div>
|
|
<div v-else-if="step === 4" class="">
|
|
<div
|
|
v-for="(card, ind) of mycards"
|
|
:key="ind"
|
|
:name="card.table"
|
|
>
|
|
<q-card class="q-my-md">
|
|
<div>
|
|
<CSkill
|
|
: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 === 5" class="">
|
|
<div class="myrow">
|
|
<CMyFieldDb
|
|
:title="$t('reg.photo')"
|
|
table="users"
|
|
mykey="profile"
|
|
mysubkey="img"
|
|
:type="costanti.FieldType.image"
|
|
>
|
|
</CMyFieldDb>
|
|
</div>
|
|
|
|
{{ $t('tutorial.step_altri_in_profilo') }}
|
|
<q-btn
|
|
glossy
|
|
label="Modifica Profilo"
|
|
icon="fas fa-pencil-alt"
|
|
color="primary"
|
|
to="/editprofile"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else-if="step === 6" class=""></div>
|
|
<q-stepper-navigation>
|
|
<q-btn
|
|
v-if="step > 1"
|
|
flat
|
|
color="primary"
|
|
@click="$refs.stepper.previous()"
|
|
:label="$t('dialog.indietro')"
|
|
class="q-ml-sm"
|
|
/>
|
|
<q-btn
|
|
@click="
|
|
step === numstep
|
|
? clickFinish()
|
|
: $refs.stepper.next()
|
|
"
|
|
color="primary"
|
|
:label="
|
|
step === numstep
|
|
? $t('dialog.finish')
|
|
: $t('dialog.avanti')
|
|
"
|
|
/>
|
|
</q-stepper-navigation>
|
|
</q-step>
|
|
</q-stepper>
|
|
</div>
|
|
</div>
|
|
</q-slide-transition>
|
|
</CTitleBanner>
|
|
</div>
|
|
<q-btn
|
|
v-if="step >= numstep"
|
|
:class="`col-2 ` + getColorTutorial()"
|
|
icon="fas fa-arrow-right"
|
|
color="text-white"
|
|
dense
|
|
size="md"
|
|
:label="$t('dialog.vai')"
|
|
@click="step = 1"
|
|
>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
@import './CMyProfileTutorial.scss';
|
|
</style>
|