87aa9427b3
- fix Strette di mano dicitura. - poter vedere e cliccare sul gruppo telegram della provincia (dalla lista dei circuiti).
585 lines
17 KiB
TypeScript
Executable File
585 lines
17 KiB
TypeScript
Executable File
import { defineComponent, onMounted, PropType, ref, watch, computed } from 'vue'
|
|
import { useUserStore } from '@store/UserStore'
|
|
import { useGlobalStore } from '@store/globalStore'
|
|
import { ICircuit, IImgGallery, IUserFields, IUserProfile } from 'model'
|
|
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 { CMyUser } from '@/components/CMyUser'
|
|
import { CUserInfoAccount } from '@/components/CUserInfoAccount'
|
|
import { useI18n } from '@/boot/i18n'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useCircuitStore } from '@store/CircuitStore'
|
|
|
|
const STEP_CITY = 100
|
|
const STEP_CIRCUIT = 200
|
|
const STEP_CIRCUIT_ITALIA = 210
|
|
const STEP_FINE = 400
|
|
const STEP_NAME_SURNAME = 401
|
|
const STEP_FOTO = 402
|
|
|
|
export default defineComponent({
|
|
name: 'CMyProfileTutorial',
|
|
components: {
|
|
CSendCoins, CSaldo, CUserInfoAccount,
|
|
CMySelectCity, CMyFieldRec, CMyUser,
|
|
CSkill, CMyUserOnlyView, CTitleBanner, CMySelect, CMyFieldDb, CMyCircuit
|
|
},
|
|
emits: ['setCmd'],
|
|
props: {
|
|
mycontact: {
|
|
type: Object as PropType<IUserFields | null>,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
myusername: {
|
|
type: String,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
},
|
|
|
|
setup(props, { emit }) {
|
|
|
|
const userStore = useUserStore()
|
|
const circuitStore = useCircuitStore()
|
|
const globalStore = useGlobalStore()
|
|
const $q = useQuasar()
|
|
const { t } = useI18n()
|
|
const $router = useRouter()
|
|
const $route = useRoute()
|
|
|
|
const showAccountInfo = ref(false)
|
|
const indstep = ref(0)
|
|
const step = ref(1)
|
|
const nascondiavviso = ref(false)
|
|
|
|
const username = ref('')
|
|
const showsendCoinTo = ref(false)
|
|
const circuitsel = ref('')
|
|
const mycircuit = ref(<ICircuit | undefined | null>null)
|
|
const circuititalia = ref(<ICircuit | undefined | null>null)
|
|
const mylistcircuits = ref(<ICircuit[] | undefined>[])
|
|
|
|
const contact = ref(<IUserFields | null>null)
|
|
|
|
const filtroutente = ref(<any[]>[])
|
|
|
|
const usersList = ref({ show: false, title: '', list: [] })
|
|
|
|
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 userstoverify = computed(() => {
|
|
return userStore.my.profile.userstoverify
|
|
})
|
|
|
|
const strProv = computed(() => {
|
|
|
|
if (contact.value && contact.value.profile.resid_province) {
|
|
return contact.value.profile.resid_province
|
|
} else {
|
|
return ''
|
|
}
|
|
})
|
|
|
|
const card = computed(() => {
|
|
|
|
if (contact.value && contact.value.profile.resid_card) {
|
|
return contact.value.profile.resid_card
|
|
} else {
|
|
return ''
|
|
}
|
|
})
|
|
|
|
watch(() => strProv.value, (newval: string, oldval: string) => {
|
|
mycircuit.value = circuitStore.getCircuitByProvinceAndCard(strProv.value, card.value)
|
|
if (!globalStore.isPresenteCardsByProv(strProv.value)) {
|
|
if (contact.value && contact.value.profile.resid_card) {
|
|
contact.value.profile.resid_card = ''
|
|
}
|
|
}
|
|
})
|
|
|
|
watch(() => card.value, (newval: string, oldval: string) => {
|
|
mycircuit.value = circuitStore.getCircuitByProvinceAndCard(strProv.value, card.value)
|
|
})
|
|
|
|
watch(() => circuitsel.value, (newval: string, oldval: string) => {
|
|
if (circuitsel.value)
|
|
mycircuit.value = circuitStore.getCircuitByName(circuitsel.value)
|
|
})
|
|
|
|
|
|
let arrStep = ref([
|
|
{
|
|
indstep: 0,
|
|
step: STEP_CITY,
|
|
title: t('tutorial.step_residence_title'),
|
|
extratitle: function () { return ': ' + contact.value!.profile.resid_province },
|
|
label: t('tutorial.step_residence'),
|
|
checkOk: function (): boolean { return contact.value ? contact.value.profile.resid_province !== '' && contact.value.profile.resid_province !== '0' : false },
|
|
checkOkReal: function (): boolean { return this.checkOk() },
|
|
icon: 'house',
|
|
required: true,
|
|
},
|
|
/*{
|
|
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) },
|
|
checkOkReal: function () { return ((contact.value ? !!contact.value.name : false)) },
|
|
icon: 'user',
|
|
required: false,
|
|
},*/
|
|
{
|
|
indstep: 1,
|
|
step: STEP_CIRCUIT,
|
|
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))) || userStore.my.profile.noCircuit
|
|
}
|
|
return false
|
|
},
|
|
checkOkReal: function () {
|
|
if (mycircuit.value) {
|
|
return ((userStore.IsMyCircuitByName(mycircuit.value.name) ||
|
|
userStore.IsAskedCircuitByName(mycircuit.value.name)))
|
|
}
|
|
return false
|
|
},
|
|
icon: 'img: images/1ris_rosso_100.png',
|
|
required: false,
|
|
},
|
|
/*{
|
|
step: 3,
|
|
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
|
|
},
|
|
checkOkReal: function () { return this.checkOk() },
|
|
icon: 'fas fa-tshirt',
|
|
required: false,
|
|
},*/
|
|
/*{
|
|
step: STEP_FOTO,
|
|
title: t('tutorial.step_profilo_title'),
|
|
extratitle: function () { return ': (' + (userStore.my.profile.img ? t('dialog.yes') : t('dialog.no')) + ')' },
|
|
label: t('tutorial.step_profilo'),
|
|
checkOk: function () {
|
|
return !!userStore.my.profile.img
|
|
},
|
|
checkOkReal: function () { return this.checkOk() },
|
|
icon: 'fas fa-tshirt',
|
|
required: false,
|
|
},*/
|
|
])
|
|
|
|
const numindstep = computed(() => arrStep.value.length)
|
|
|
|
watch(() => indstep.value, (newval: number, oldval: number) => {
|
|
if (indstep.value >= 0)
|
|
step.value = arrStep.value[indstep.value].step
|
|
else
|
|
step.value = 0
|
|
|
|
if (indstep.value > userStore.my.profile.stepTutorial)
|
|
userStore.my.profile.stepTutorial = indstep.value
|
|
|
|
userStore.saveStepTutorial(indstep.value)
|
|
if (indstep.value >= numindstep.value) {
|
|
tools.scrollToTop()
|
|
}
|
|
|
|
if ((step.value === STEP_CIRCUIT)) {
|
|
mycircuit.value = circuitStore.getCircuitByProvinceAndCard(strProv.value, card.value)
|
|
|
|
mylistcircuits.value = circuitStore.getCircuitsNameByProvince(strProv.value)
|
|
console.log('isAskedToCircuit()', isAskedToCircuit())
|
|
// userStore.savenoCircuit(isAskedToCircuit())
|
|
}
|
|
|
|
if ((step.value === STEP_CIRCUIT_ITALIA)) {
|
|
mylistcircuits.value = []
|
|
circuititalia.value = circuitStore.getCircuitByPath('ris_italia')
|
|
}
|
|
|
|
if (step.value === STEP_NAME_SURNAME + 1) {
|
|
let index = indstep.value
|
|
console.log('Salva ', arrStep.value[index])
|
|
if ((contact.value ? !!contact.value.name : false) && contact.value!.name) {
|
|
// nome esistente
|
|
userStore.savenoNameSurname(false)
|
|
} else {
|
|
userStore.savenoNameSurname(true)
|
|
}
|
|
}
|
|
|
|
/*if (step.value === STEP_FOTO + 1) {
|
|
let index = indstep.value
|
|
if (userStore.my.profile.img) {
|
|
// foto esistente
|
|
userStore.savenoFoto(false)
|
|
} else {
|
|
userStore.savenoFoto(true)
|
|
}
|
|
} */
|
|
|
|
})
|
|
|
|
|
|
const stepFine = {
|
|
step: STEP_FINE,
|
|
title: t('tutorial.step_fine_title'),
|
|
extratitle: function () { return '' },
|
|
label: t('tutorial.step_fine'),
|
|
checkOk: function () {
|
|
return true
|
|
},
|
|
checkOkReal: function () { return this.checkOk() },
|
|
icon: 'fas fa-tshirt',
|
|
required: false,
|
|
}
|
|
|
|
|
|
const stepCircItalia =
|
|
{
|
|
step: STEP_CIRCUIT_ITALIA,
|
|
title: t('tutorial.step_circuito_italia_title'),
|
|
extratitle: function () { return circuititalia.value ? ': ' + circuititalia.value.name : '' },
|
|
label: circuitStore.SonoDentroAdAlmeno1CircuitoConFido() ? t('tutorial.step_circuito_italia') : t('tutorial.non_sono_dentro_al_mio_circuito'),
|
|
label_ok: t('tutorial.step_circuito_italia_ok'),
|
|
checkOk: function () {
|
|
if (circuititalia.value) {
|
|
return ((userStore.IsMyCircuitByName(circuititalia.value.name) ||
|
|
userStore.IsAskedCircuitByName(circuititalia.value.name))) || userStore.my.profile.noCircIta
|
|
}
|
|
return false
|
|
},
|
|
checkOkReal: function () {
|
|
if (circuititalia.value) {
|
|
return ((userStore.IsMyCircuitByName(circuititalia.value.name) ||
|
|
userStore.IsAskedCircuitByName(circuititalia.value.name)))
|
|
}
|
|
return false
|
|
},
|
|
icon: 'img: images/1ris_rosso_100.png',
|
|
required: false,
|
|
}
|
|
|
|
|
|
const prStep = computed(() => {
|
|
|
|
let num = 0
|
|
for (const mystep of arrStep.value) {
|
|
if (mystep.checkOk())
|
|
num++
|
|
else
|
|
break
|
|
}
|
|
return num
|
|
})
|
|
|
|
const progressStep = computed(() => {
|
|
|
|
if (numindstep.value > 0)
|
|
return prStep.value / numindstep.value
|
|
else
|
|
return 0
|
|
})
|
|
|
|
const progressLabel = computed(() => (progressStep.value * 100).toFixed(0) + '%')
|
|
|
|
watch(() => props.mycontact, (newval, oldval) => {
|
|
updatestart()
|
|
})
|
|
|
|
watch(() => tools.isUserOk(), (newval, oldval) => {
|
|
if (userStore.isUserOk()) {
|
|
updatestart()
|
|
}
|
|
})
|
|
|
|
function updatestart() {
|
|
if (!props.mycontact) {
|
|
if (props.myusername) {
|
|
username.value = props.myusername
|
|
//++Todo: carica contact
|
|
contact.value = null
|
|
} else {
|
|
contact.value = userStore.my
|
|
}
|
|
} else {
|
|
if (props.mycontact) {
|
|
contact.value = props.mycontact
|
|
username.value = props.mycontact.username
|
|
}
|
|
}
|
|
if (contact.value && contact.value.profile && contact.value.profile.resid_province === '0') {
|
|
contact.value.profile.resid_province = ''
|
|
}
|
|
|
|
mylistcircuits.value = circuitStore.getCircuitsNameByProvince(strProv.value)
|
|
|
|
mycircuit.value = circuitStore.getCircuitByProvinceAndCard(strProv.value, card.value)
|
|
|
|
if (contact.value)
|
|
if (contact.value)
|
|
filtroutente.value = [{ userId: contact.value._id }]
|
|
|
|
userStore.my.profile.stepTutorial = getFirstStepToFill()
|
|
|
|
indstep.value = userStore.my.profile.stepTutorial ? userStore.my.profile.stepTutorial : 0
|
|
if (indstep.value > numindstep.value)
|
|
indstep.value = numindstep.value
|
|
|
|
// circuit.value = circuitStore.getCircuitByName(props.circuitname)
|
|
|
|
if (!userStore.my.profile.stepTutorial || userStore.my.profile.stepTutorial === 0) {
|
|
userStore.my.profile.stepTutorial = 0
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function getFirstStepToFill() {
|
|
let num = 0
|
|
for (const mystep of arrStep.value) {
|
|
if (mystep.checkOk())
|
|
num++
|
|
else
|
|
break
|
|
}
|
|
|
|
return num
|
|
}
|
|
|
|
function getImgUser(profile: IUserFields) {
|
|
return userStore.getImgByProfile(profile)
|
|
}
|
|
|
|
function naviga(path: string) {
|
|
$router.push(path)
|
|
}
|
|
|
|
function setCmd($q: any, cmd: number, myusername: string, value: any, dest: string) {
|
|
emit('setCmd', $q, cmd, myusername, value, dest)
|
|
}
|
|
|
|
function getLabelByStatusStep(step: string) {
|
|
let mystr = ''
|
|
|
|
return mystr
|
|
|
|
}
|
|
|
|
const checkifDisabled = computed(() => {
|
|
let ret = true
|
|
let mystep = indstep.value
|
|
if (mystep > 0) {
|
|
return !arrStep.value[mystep].checkOk()
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
|
|
function clickFinish() {
|
|
userStore.my.profile.stepTutorial = numindstep.value + 1
|
|
indstep.value = numindstep.value + 1
|
|
|
|
}
|
|
|
|
function getindstepByStep(step: number) {
|
|
for (let indstep = 0; indstep < arrStep.value.length; indstep++) {
|
|
if (arrStep.value[indstep].step === step)
|
|
return indstep
|
|
}
|
|
return -1
|
|
}
|
|
|
|
function isNextDisable(step: number) {
|
|
try {
|
|
const indstep = getindstepByStep(step)
|
|
if (indstep >= 0)
|
|
return arrStep.value[indstep].required && !arrStep.value[indstep].checkOk()
|
|
return false
|
|
} catch (e) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
function numStepCompleted() {
|
|
return prStep.value
|
|
}
|
|
function completed() {
|
|
return prStep.value === numindstep.value
|
|
}
|
|
|
|
function getColorTutorial() {
|
|
return completed() ? 'bg-green-5' : 'bg-primary'
|
|
}
|
|
|
|
function getColor() {
|
|
if (numStepCompleted()) {
|
|
return 'positive'
|
|
} else {
|
|
return 'primary'
|
|
}
|
|
}
|
|
|
|
function mounted() {
|
|
|
|
if (circuitStore.SonoDentroAdAlmeno1CircuitoConFido())
|
|
arrStep.value.push({ ...stepCircItalia, indstep: numindstep.value })
|
|
|
|
// arrStep.value.push({ ...stepFine, indstep: numindstep.value })
|
|
|
|
if (userStore.isUserOk()) {
|
|
updatestart()
|
|
}
|
|
|
|
}
|
|
|
|
function isAskedToCircuit(): boolean {
|
|
return !!(mycircuit.value && ((!userStore.IsMyCircuitByName(mycircuit.value.name) && !userStore.IsAskedCircuitByName(mycircuit.value.name))))
|
|
}
|
|
|
|
function isAskedToCircuitItalia(): boolean {
|
|
return !!(circuititalia.value && ((!userStore.IsMyCircuitByName(circuititalia.value.name) && !userStore.IsAskedCircuitByName(circuititalia.value.name))))
|
|
}
|
|
|
|
function isSalta(step: number) {
|
|
return (step === STEP_CIRCUIT && (mycircuit.value && isAskedToCircuit())) ||
|
|
(step === STEP_CIRCUIT_ITALIA && (circuititalia.value && isAskedToCircuitItalia()))
|
|
}
|
|
|
|
function askToConfirmSkip(mystep: number) {
|
|
if (mystep === STEP_CIRCUIT) {
|
|
return $q.dialog({
|
|
message: t('circuit.skipentercircuit'),
|
|
html: true,
|
|
ok: {
|
|
label: t('dialog.yes'),
|
|
push: false,
|
|
},
|
|
title: '',
|
|
cancel: true,
|
|
persistent: false,
|
|
}).onOk(() => {
|
|
if ((step.value === STEP_CIRCUIT)) {
|
|
userStore.savenoCircuit(isAskedToCircuit())
|
|
}
|
|
indstep.value++
|
|
return true
|
|
}).onCancel(() => {
|
|
return false
|
|
})
|
|
} else if (mystep === STEP_CIRCUIT_ITALIA) {
|
|
askToConfirmSkipItalia(mystep)
|
|
}
|
|
}
|
|
|
|
function askToConfirmSkipItalia(mystep: number) {
|
|
return $q.dialog({
|
|
message: t('circuit.skipentercircuit_italia'),
|
|
html: true,
|
|
ok: {
|
|
label: t('dialog.yes'),
|
|
push: false,
|
|
},
|
|
title: '',
|
|
cancel: true,
|
|
persistent: false,
|
|
}).onOk(() => {
|
|
if ((mystep === STEP_CIRCUIT_ITALIA)) {
|
|
userStore.savenoCircIta(isAskedToCircuitItalia())
|
|
}
|
|
indstep.value++
|
|
return true
|
|
}).onCancel(() => {
|
|
return false
|
|
})
|
|
}
|
|
|
|
function getColorDone(indstep: number) {
|
|
return arrStep.value[indstep].checkOkReal() ? 'positive' : 'negative'
|
|
}
|
|
|
|
onMounted(mounted)
|
|
|
|
return {
|
|
contact,
|
|
costanti,
|
|
checkifDisabled,
|
|
getImgUser,
|
|
naviga,
|
|
setCmd,
|
|
shared_consts,
|
|
tools,
|
|
showsendCoinTo,
|
|
showAccountInfo,
|
|
indstep,
|
|
step,
|
|
numindstep,
|
|
progressLabel,
|
|
progressStep,
|
|
arrStep,
|
|
strProv,
|
|
mycircuit,
|
|
mylistcircuits,
|
|
userStore,
|
|
clickFinish,
|
|
isNextDisable,
|
|
mycards,
|
|
filtroutente,
|
|
getColor,
|
|
stepTut,
|
|
completed,
|
|
getColorTutorial,
|
|
getFirstStepToFill,
|
|
STEP_CIRCUIT,
|
|
STEP_CIRCUIT_ITALIA,
|
|
STEP_CITY,
|
|
STEP_FOTO,
|
|
STEP_NAME_SURNAME,
|
|
isSalta,
|
|
askToConfirmSkip,
|
|
getColorDone,
|
|
nascondiavviso,
|
|
circuitsel,
|
|
card,
|
|
askToConfirmSkipItalia,
|
|
circuititalia,
|
|
usersList,
|
|
userstoverify,
|
|
numStepCompleted,
|
|
globalStore,
|
|
prStep,
|
|
}
|
|
},
|
|
})
|