- fix: se salvavo un record 'settable' e non era completo con tutti i campi, andava a troncare gli altri precedentemente inseriti

- ordinamento Circuiti per stato e numiscritti e descr

src/components/CMyProfileTutorial/CMyProfileTutorial.ts

@@ -17,8 +17,10 @@ import { useCircuitStore } from '@store/CircuitStore'
 
 export default defineComponent({
   name: 'CMyProfileTutorial',
-  components: { CSendCoins, CSaldo, CUserInfoAccount,
-    CMySelectCity, CMyFieldRec, CMySelect },
+  components: {
+    CSendCoins, CSaldo, CUserInfoAccount,
+    CMySelectCity, CMyFieldRec, CMySelect
+  },
   emits: ['setCmd'],
   props: {
     mycontact: {
@@ -43,7 +45,7 @@ export default defineComponent({
     const $route = useRoute()
 
     const showAccountInfo = ref(false)
-    const slide = ref('1')
+    const slidestep = ref('1')
 
     const username = ref('')
     const showsendCoinTo = ref(false)
@@ -51,6 +53,25 @@ export default defineComponent({
     const contact = ref(<IUserFields | null>null)
     const circuit = ref(<ICircuit | null | undefined>null)
 
+    const arrStep = [
+      {
+        label: t('tutorial.step_residence_title'),
+        checkOk: function () { return contact.value ? !!contact.value.profile.resid_province : false },
+        step: '1',
+        icon: 'house'
+      }
+    ]
+
+    const numstep = computed(() => arrStep.length)
+
+    const progressStep = computed(() => {
+      let prStep = 0
+
+      return prStep / numstep.value
+    })
+
+    const progressLabel = computed(() => (progressStep.value * 100).toFixed(2) + '%')
+
     watch(() => props.mycontact, (newval, oldval) => {
       console.log('watch: mycontact')
       mounted()
@@ -87,17 +108,21 @@ export default defineComponent({
       emit('setCmd', $q, cmd, myusername, value, dest)
     }
 
+    function getLabelByStatusStep(step: string) {
+      let mystr = ''
+
+      return mystr
+
+    }
+
     const checkifDisabled = computed(() => {
       let ret = true
-      if (slide.value === '1') {
-        // Invitante + Email
-      } else if (slide.value === '2') {
-        // Username
-      } else if (slide.value === '3') {
-        // Password
+      let mystep = parseInt(slidestep.value)
+      if (mystep > 0) {
+        return !arrStep[mystep - 1].checkOk()
+      } else {
+        return false
       }
-
-      return ret
     })
 
     onMounted(mounted)
@@ -114,7 +139,10 @@ export default defineComponent({
       showsendCoinTo,
       circuit,
       showAccountInfo,
-      slide,
+      slidestep,
+      numstep,
+      progressLabel,
+      arrStep,
     }
   },
 })

src/components/CMyProfileTutorial/CMyProfileTutorial.vue

@@ -1,22 +1,42 @@
 <template>
   <div v-if="contact">
-    <div class="q-gutter-md">
+    <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
-        v-model="slide"
+        ref="carousel"
+        v-model="slidestep"
         transition-prev="slide-right"
         transition-next="slide-left"
         swipeable
         animated
         control-color="white"
-        navigation
         padding
         arrows
-        height="200px"
-        class="text-white shadow-1 rounded-borders"
+        height="250px"
+        class="bg-blue text-white shadow-1 rounded-borders"
       >
-        <q-carousel-slide name="1" class="column no-wrap flex-center">
-          <q-icon name="house" size="56px" />
-          <div class="q-mt-sm text-center">
+        <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"
@@ -32,18 +52,7 @@
             </CMySelectCity>
           </div>
         </q-carousel-slide>
-        <q-carousel-slide name="2" class="column no-wrap flex-center">
-          <q-icon name="live_tv" size="56px" />
-          <div class="q-mt-md text-center"></div>
-        </q-carousel-slide>
-        <q-carousel-slide name="3" class="column no-wrap flex-center">
-          <q-icon name="layers" size="56px" />
-          <div class="q-mt-md text-center"></div>
-        </q-carousel-slide>
-        <q-carousel-slide name="4" class="column no-wrap flex-center">
-          <q-icon name="terrain" size="56px" />
-          <div class="q-mt-md text-center"></div>
-        </q-carousel-slide>
+
         <template v-slot:control>
           <q-carousel-control
             position="bottom-right"
@@ -51,17 +60,15 @@
             class="q-gutter-xs"
           >
             <q-btn
-              v-if="slide !== '1'"
+              v-if="slidestep !== '1'"
               push
-              text-color="black"
               icon="arrow_left"
               :label="$t('dialog.indietro')"
               @click="$refs.carousel.previous()"
             />
             <q-btn
-              v-if="slide !== '4'"
+              v-if="slidestep !== '4'"
               push
-              color="primary"
               icon="arrow_right"
               :label="$t('dialog.avanti')"
               :disabled="checkifDisabled"
@@ -73,7 +80,7 @@
       <div class="row justify-center">
         <q-btn-toggle
           glossy
-          v-model="slide"
+          v-model="slidestep"
           :options="[
             { label: '1', value: '1' },
             { label: 2, value: '2' },