- Invia Ris a e Ricevi Ris
- Tutorial Guidato Passi da Compiere - Provincia in cui vivi - Policy aggiornata
This commit is contained in:
Surya Paolo
@@ -1,103 +1,209 @@
|
||||
<template>
|
||||
<div v-if="contact">
|
||||
<div class="text-center bg-green text-white text-h6">
|
||||
{{ $t('tutorial.title') }} -
|
||||
<span class="text-h7"
|
||||
>({{
|
||||
$t('tutorial.step', { step: slidestep, numstep: numstep })
|
||||
}})</span
|
||||
>
|
||||
</div>
|
||||
<q-linear-progress size="25px" :value="progressStep" color="accent">
|
||||
<div class="absolute-full flex flex-center">
|
||||
<q-badge color="white" text-color="accent" :label="progressLabel1" />
|
||||
</div>
|
||||
</q-linear-progress>
|
||||
|
||||
<div class="q-gutter-sm">
|
||||
<q-carousel
|
||||
ref="carousel"
|
||||
v-model="slidestep"
|
||||
transition-prev="slide-right"
|
||||
transition-next="slide-left"
|
||||
swipeable
|
||||
animated
|
||||
control-color="white"
|
||||
padding
|
||||
arrows
|
||||
height="250px"
|
||||
class="bg-blue text-white shadow-1 rounded-borders"
|
||||
>
|
||||
<q-carousel-slide
|
||||
v-for="(recstep, index) in arrStep"
|
||||
:key="index"
|
||||
:name="recstep.step"
|
||||
class="column no-wrap flex-center"
|
||||
<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()"
|
||||
:header="step < numstep"
|
||||
>
|
||||
<q-icon :name="recstep.icon" size="36px" />
|
||||
<div class="q-mt-sm text-center"></div>
|
||||
<div v-if="recstep.step === '1'" class="q-mt-sm text-center">
|
||||
<CMySelectCity
|
||||
:label="$t('reg.resid_province')"
|
||||
table="users"
|
||||
jointable="provinces"
|
||||
v-model="contact.profile.resid_province"
|
||||
myclass="selectorwide"
|
||||
:db_type="costanti.FieldType.string"
|
||||
db_field="profile"
|
||||
db_subfield="resid_province"
|
||||
:db_id="contact._id"
|
||||
:db_rec="contact"
|
||||
>
|
||||
</CMySelectCity>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
<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>
|
||||
|
||||
<template v-slot:control>
|
||||
<q-carousel-control
|
||||
position="bottom-right"
|
||||
:offset="[18, 18]"
|
||||
class="q-gutter-xs"
|
||||
>
|
||||
<q-btn
|
||||
v-if="slidestep !== '1'"
|
||||
push
|
||||
icon="arrow_left"
|
||||
:label="$t('dialog.indietro')"
|
||||
@click="$refs.carousel.previous()"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="slidestep !== '4'"
|
||||
push
|
||||
icon="arrow_right"
|
||||
:label="$t('dialog.avanti')"
|
||||
:disabled="checkifDisabled"
|
||||
@click="!checkifDisabled ? $refs.carousel.next() : null"
|
||||
/>
|
||||
</q-carousel-control>
|
||||
</template>
|
||||
</q-carousel>
|
||||
<div class="row justify-center">
|
||||
<q-btn-toggle
|
||||
glossy
|
||||
v-model="slidestep"
|
||||
:options="[
|
||||
{ label: '1', value: '1' },
|
||||
{ label: 2, value: '2' },
|
||||
{ label: 3, value: '3' },
|
||||
{ label: 4, value: '4' },
|
||||
]"
|
||||
/>
|
||||
<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 = getFirstStepToFill()"
|
||||
>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-dialog v-model="showAccountInfo" full-height full-width>
|
||||
<q-card v-if="true">
|
||||
<q-toolbar class="bg-primary text-white">
|
||||
<q-toolbar class="bg-primary">
|
||||
<q-toolbar-title class="text-h7">
|
||||
{{ tools.getNomeUtenteByRecUser(contact) }}
|
||||
{{ tools.getNomeUtenteEUsernameByRecUser(contact) }}
|
||||
</q-toolbar-title>
|
||||
<q-btn flat round color="white" icon="close" v-close-popup></q-btn>
|
||||
<q-btn flat round icon="close" v-close-popup></q-btn>
|
||||
</q-toolbar>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
@@ -106,6 +212,6 @@
|
||||
<script lang="ts" src="./CMyProfileTutorial.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@import './CMyProfileTutorial.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user