- Invia Ris a e Ricevi Ris
- Tutorial Guidato Passi da Compiere - Provincia in cui vivi - Policy aggiornata
This commit is contained in:
Surya Paolo
@@ -2,3 +2,12 @@
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.q-stepper__tab {
|
||||
padding: 3px 3px !important;
|
||||
}
|
||||
|
||||
.q-stepper__step-inner{
|
||||
padding-left: 24px !important;
|
||||
padding-right: 2px !important;
|
||||
}
|
||||
|
||||
@@ -5,21 +5,28 @@ import { costanti } from '@costanti'
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
import { tools } from '@store/Modules/tools'
|
||||
import { useQuasar } from 'quasar'
|
||||
import { CTitleBanner } from '@/components/CTitleBanner'
|
||||
import { CSendCoins } from '@/components/CSendCoins'
|
||||
import { CSkill } from '@/components/CSkill'
|
||||
import { CMyFieldRec } from '@/components/CMyFieldRec'
|
||||
import { CSaldo } from '@/components/CSaldo'
|
||||
import { CMySelectCity } from '@/components/CMySelectCity'
|
||||
import { CMyFieldDb } from '@/components/CMyFieldDb'
|
||||
import { CMyCircuit } from '@/components/CMyCircuit'
|
||||
import { CMySelect } from '@/components/CMySelect'
|
||||
import { CMyUserOnlyView } from '@/components/CMyUserOnlyView'
|
||||
import { CUserInfoAccount } from '@/components/CUserInfoAccount'
|
||||
import { useI18n } from '@/boot/i18n'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useCircuitStore } from '@store/CircuitStore'
|
||||
|
||||
const STEP_NAME_SURNAME = 2
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CMyProfileTutorial',
|
||||
components: {
|
||||
CSendCoins, CSaldo, CUserInfoAccount,
|
||||
CMySelectCity, CMyFieldRec, CMySelect
|
||||
CMySelectCity, CMyFieldRec, CSkill, CMyUserOnlyView, CTitleBanner, CMySelect, CMyFieldDb, CMyCircuit
|
||||
},
|
||||
emits: ['setCmd'],
|
||||
props: {
|
||||
@@ -45,39 +52,158 @@ export default defineComponent({
|
||||
const $route = useRoute()
|
||||
|
||||
const showAccountInfo = ref(false)
|
||||
const slidestep = ref('1')
|
||||
const step = ref(1)
|
||||
|
||||
const username = ref('')
|
||||
const showsendCoinTo = ref(false)
|
||||
const mycircuit = ref(<ICircuit | undefined | null>null)
|
||||
|
||||
const contact = ref(<IUserFields | null>null)
|
||||
const circuit = ref(<ICircuit | null | undefined>null)
|
||||
|
||||
|
||||
const filtroutente = ref(<any[]>[])
|
||||
|
||||
const stepTut = computed(() => userStore.my.profile.stepTutorial)
|
||||
const noNameSurname = computed(() => userStore.my.profile.noNameSurname)
|
||||
|
||||
const mycards = computed(() => {
|
||||
return costanti.MAINCARDS.filter((rec: any) => shared_consts.TABLES_INSERT_ALMOST_ONE_TO_ENABLE_CIRCUIT.includes(rec.table))
|
||||
})
|
||||
|
||||
const strProv = computed(() => {
|
||||
|
||||
if (contact.value && contact.value.profile.resid_province) {
|
||||
return contact.value.profile.resid_province
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => strProv.value, (newval: string, oldval: string) => {
|
||||
mycircuit.value = circuitStore.getCircuitByProvince(strProv.value)
|
||||
})
|
||||
|
||||
watch(() => step.value, (newval: number, oldval: number) => {
|
||||
|
||||
if (step.value > userStore.my.profile.stepTutorial)
|
||||
userStore.my.profile.stepTutorial = step.value
|
||||
|
||||
userStore.saveStepTutorial(step.value)
|
||||
if (step.value >= numstep.value) {
|
||||
tools.scrollToTop()
|
||||
}
|
||||
|
||||
if (step.value === STEP_NAME_SURNAME + 1) {
|
||||
let index = step.value
|
||||
console.log('Salva ', arrStep[index])
|
||||
if ((contact.value ? !!contact.value.name : false) && contact.value!.name) {
|
||||
// nome esistente
|
||||
userStore.savenoNameSurname(false)
|
||||
} else {
|
||||
userStore.savenoNameSurname(true)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
const arrStep = [
|
||||
{
|
||||
label: t('tutorial.step_residence_title'),
|
||||
step: 1,
|
||||
title: t('tutorial.step_residence_title'),
|
||||
extratitle: function () { return ': ' + contact.value!.profile.resid_province },
|
||||
label: t('tutorial.step_residence'),
|
||||
checkOk: function () { return contact.value ? !!contact.value.profile.resid_province : false },
|
||||
step: '1',
|
||||
icon: 'house'
|
||||
}
|
||||
},
|
||||
{
|
||||
step: STEP_NAME_SURNAME, // 2
|
||||
title: t('tutorial.step_nomecognome_title'),
|
||||
extratitle: function () { return ': ' + (contact.value ? tools.getNomeUtenteEUsernameByRecUser(contact.value) : '') },
|
||||
label: t('tutorial.step_nomecognome'),
|
||||
checkOk: function () { return ((contact.value ? !!contact.value.name : false) || userStore.my.profile.noNameSurname) },
|
||||
icon: 'user'
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: t('tutorial.step_circuito_title'),
|
||||
extratitle: function () { return mycircuit.value ? ': ' + mycircuit.value.name : '' },
|
||||
label: t('tutorial.step_circuito'),
|
||||
label_ok: t('tutorial.step_circuito_ok'),
|
||||
checkOk: function () {
|
||||
if (mycircuit.value) {
|
||||
return (userStore.IsMyCircuitByName(mycircuit.value.name) ||
|
||||
userStore.IsAskedCircuitByName(mycircuit.value.name))
|
||||
}
|
||||
return false
|
||||
},
|
||||
icon: 'img: images/1ris_rosso_100.png',
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: t('tutorial.step_beniservizi_title'),
|
||||
extratitle: function () { return ': (' + userStore.my.profile.calc.numGoodsAndServices + ')' },
|
||||
label: t('tutorial.step_beniservizi'),
|
||||
checkOk: function () {
|
||||
return userStore.my.profile.calc.numGoodsAndServices! > 0
|
||||
},
|
||||
icon: 'fas fa-tshirt',
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
title: t('tutorial.step_foto_title'),
|
||||
extratitle: function () { return ': (' + (userStore.my.profile.img ? t('dialog.yes') : t('dialog.no')) + ')' },
|
||||
label: t('tutorial.step_foto'),
|
||||
checkOk: function () {
|
||||
return !!userStore.my.profile.img
|
||||
},
|
||||
icon: 'fas fa-tshirt',
|
||||
},
|
||||
{
|
||||
step: 6,
|
||||
title: t('tutorial.step_fine_title'),
|
||||
extratitle: function () { return '' },
|
||||
label: t('tutorial.step_fine'),
|
||||
checkOk: function () {
|
||||
return true
|
||||
},
|
||||
icon: 'fas fa-tshirt',
|
||||
},
|
||||
]
|
||||
|
||||
const numstep = computed(() => arrStep.length)
|
||||
|
||||
const progressStep = computed(() => {
|
||||
let prStep = 0
|
||||
const prStep = computed(() => {
|
||||
|
||||
return prStep / numstep.value
|
||||
let num = 0
|
||||
for (const mystep of arrStep) {
|
||||
if (mystep.checkOk())
|
||||
num++
|
||||
}
|
||||
return num
|
||||
})
|
||||
|
||||
const progressLabel = computed(() => (progressStep.value * 100).toFixed(2) + '%')
|
||||
const progressStep = computed(() => {
|
||||
|
||||
if (numstep.value > 0)
|
||||
return prStep.value / numstep.value
|
||||
else
|
||||
return 0
|
||||
})
|
||||
|
||||
const progressLabel = computed(() => (progressStep.value * 100).toFixed(0) + '%')
|
||||
|
||||
watch(() => props.mycontact, (newval, oldval) => {
|
||||
console.log('watch: mycontact')
|
||||
mounted()
|
||||
updatestart()
|
||||
})
|
||||
|
||||
function mounted() {
|
||||
watch(() => tools.isUserOk(), (newval, oldval) => {
|
||||
if (userStore.isUserOk()) {
|
||||
updatestart()
|
||||
}
|
||||
})
|
||||
|
||||
function updatestart() {
|
||||
if (!props.mycontact) {
|
||||
if (props.myusername) {
|
||||
username.value = props.myusername
|
||||
@@ -93,7 +219,36 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
mycircuit.value = circuitStore.getCircuitByProvince(strProv.value)
|
||||
|
||||
if (contact.value)
|
||||
filtroutente.value = [{ userId: contact.value._id }]
|
||||
|
||||
step.value = userStore.my.profile.stepTutorial ? userStore.my.profile.stepTutorial : 1
|
||||
if (step.value > numstep.value)
|
||||
step.value = numstep.value
|
||||
|
||||
// circuit.value = circuitStore.getCircuitByName(props.circuitname)
|
||||
|
||||
if (!userStore.my.profile.stepTutorial || userStore.my.profile.stepTutorial === 0) {
|
||||
userStore.my.profile.stepTutorial = 1
|
||||
}
|
||||
|
||||
userStore.my.profile.stepTutorial = getFirstStepToFill()
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getFirstStepToFill() {
|
||||
let num = 1
|
||||
for (const mystep of arrStep) {
|
||||
if (mystep.checkOk())
|
||||
num++
|
||||
else
|
||||
break
|
||||
}
|
||||
|
||||
return num
|
||||
}
|
||||
|
||||
function getImgUser(profile: IUserFields) {
|
||||
@@ -117,7 +272,7 @@ export default defineComponent({
|
||||
|
||||
const checkifDisabled = computed(() => {
|
||||
let ret = true
|
||||
let mystep = parseInt(slidestep.value)
|
||||
let mystep = step.value
|
||||
if (mystep > 0) {
|
||||
return !arrStep[mystep - 1].checkOk()
|
||||
} else {
|
||||
@@ -125,6 +280,37 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
|
||||
function clickFinish() {
|
||||
userStore.my.profile.stepTutorial = numstep.value + 1
|
||||
step.value = numstep.value + 1
|
||||
|
||||
}
|
||||
|
||||
function numStepCompleted() {
|
||||
return prStep.value
|
||||
}
|
||||
function completed() {
|
||||
return prStep.value === numstep.value
|
||||
}
|
||||
|
||||
function getColorTutorial() {
|
||||
return completed() ? 'bg-green-5' : 'bg-primary'
|
||||
}
|
||||
|
||||
function getColor() {
|
||||
if (numStepCompleted()) {
|
||||
return 'positive'
|
||||
} else {
|
||||
return 'primary'
|
||||
}
|
||||
}
|
||||
function mounted() {
|
||||
if (userStore.isUserOk()) {
|
||||
updatestart()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
@@ -137,12 +323,23 @@ export default defineComponent({
|
||||
shared_consts,
|
||||
tools,
|
||||
showsendCoinTo,
|
||||
circuit,
|
||||
showAccountInfo,
|
||||
slidestep,
|
||||
step,
|
||||
numstep,
|
||||
progressLabel,
|
||||
progressStep,
|
||||
arrStep,
|
||||
strProv,
|
||||
mycircuit,
|
||||
userStore,
|
||||
clickFinish,
|
||||
mycards,
|
||||
filtroutente,
|
||||
getColor,
|
||||
stepTut,
|
||||
completed,
|
||||
getColorTutorial,
|
||||
getFirstStepToFill,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@@ -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