- 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.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' },