112 lines
3.3 KiB
Vue
Executable File
112 lines
3.3 KiB
Vue
Executable File
<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"
|
|
>
|
|
<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>
|
|
|
|
<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>
|
|
</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-title class="text-h7">
|
|
{{ tools.getNomeUtenteByRecUser(contact) }}
|
|
</q-toolbar-title>
|
|
<q-btn flat round color="white" 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>
|