Web Editor home made

src/components/CMyEditElem/CMyEditElem.vue

@@ -7,14 +7,9 @@
       (!myel.active ? ` clEditNotActive` : ``)
     "
   >
-    <div>
+    <div v-if="!!myel.type">
       <q-bar v-if="enableEdit" dense class="bg-blue-1 q-px-sm">
-        <q-toggle
-          left-label="Attiva"
-          v-model="myel.active"
-          color="positive"
-          icon="fas fa-eye"
-        >
+        <q-toggle v-model="myel.active" color="positive" icon="fas fa-eye">
         </q-toggle>
         <!--<q-toggle v-if="tools.isManager()"
                 v-model="enableAdd"
@@ -74,7 +69,27 @@
         >
         </q-btn>
       </q-bar>
-      <div class="justify-center q-gutter-xs row">
+      <div class="row">
+        <q-input
+          label="Width:"
+          @update:model-value="modifElem"
+          v-model="myel.widthimg"
+          filled
+          dense
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+        <q-input
+          label="Height:"
+          @update:model-value="modifElem"
+          v-model="myel.heightimg"
+          filled
+          dense
+          v-on:keyup.enter="saveElem"
+        >
+        </q-input>
+      </div>
+      <div class="justify-center row q-ma-xs">
         <q-btn
           dense
           v-if="enableEdit && !disableSave"
@@ -171,6 +186,16 @@
         v-if="myel.type === shared_consts.ELEMTYPE.CARD"
         :class="myel.span ? '' : ''"
       >
+        <div class="row">
+          <q-input
+            label="Classe Card:"
+            @update:model-value="modifElem"
+            v-model="myel.class3"
+            filled
+            v-on:keyup.enter="saveElem"
+          >
+          </q-input>
+        </div>
         <q-btn
           rounded
           dense
@@ -181,28 +206,48 @@
         >
         </q-btn>
         <div v-for="(rec, ind) in myel.listcards" :key="ind">
-          <div v-if="enableEdit" class="column">
+          <div v-if="enableEdit" class="column bordered q-ma-xs">
+            <q-bar class="bg-primary text-white">
+              Card {{ ind + 1 }}
+              <q-space />
+              <q-btn
+                icon="fas fa-trash-alt"
+                color="negative"
+                dense
+                flat
+                size="sm"
+                @click="delRecCard(rec._id, myel)"
+              >
+              </q-btn>
+            </q-bar>
+
+            <CSelectImage
+                :title="tools.getTitleGall()"
+                :directory="tools.getDirectoryGall(myvalue, 'imgcards')"
+                :imgGall="[myvalue]"
+                :edit="true"
+                :canModify="true"
+                :isInModif="true"
+                @update:imgGall="updateElem"
+                @showandsave="Savedb">
+            </CSelectImage>
+
             <CMyFieldRec
-              title="Lista Immagini:"
-              table="myelems"
-              :id="myel._id"
-              :rec="myel"
-              field="listcards"
+              title="Immagine:"
+              table="imgcards"
+              :id="rec._id"
+              :rec="rec"
+              field="imagefile"
               @update:model-value="modifElem"
+              @save="saveCard"
               :canEdit="true"
               :canModify="true"
+              :nosaveToDb="true"
+              :path="myel.path"
+              :fieldtype="costanti.FieldType.imgcard"
             >
             </CMyFieldRec>
-            <q-input
-              label="Immagine:"
-              dense
-              class="fa-border"
-              @update:model-value="modifElem"
-              v-model="rec.imagefile"
-              filled
-              v-on:keyup.enter="saveElem"
-            >
-            </q-input>
+
             <div v-if="enableEdit" class="row">
               <q-input
                 dense
@@ -215,6 +260,17 @@
                 v-on:keyup.enter="saveElem"
               >
               </q-input>
+              <q-input
+                dense
+                style="min-width: 100px"
+                label="Style:"
+                class="fa-border"
+                @update:model-value="modifElem"
+                v-model="rec.style"
+                filled
+                v-on:keyup.enter="saveElem"
+              >
+              </q-input>
               <CSelectColor
                 v-if="enableEdit"
                 style="min-width: 100px"
@@ -375,30 +431,9 @@
             @update:model-value="modifElem"
             :canEdit="true"
             :canModify="true"
-            :type="costanti.FieldType.images"
+            :fieldtype="costanti.FieldType.image"
           >
           </CMyFieldRec>
-
-          <div class="row">
-            <q-input
-              label="Width:"
-              @update:model-value="modifElem"
-              v-model="myel.widthimg"
-              filled
-              dense
-              v-on:keyup.enter="saveElem"
-            >
-            </q-input>
-            <q-input
-              label="Height:"
-              @update:model-value="modifElem"
-              v-model="myel.heightimg"
-              filled
-              dense
-              v-on:keyup.enter="saveElem"
-            >
-            </q-input>
-          </div>
         </div>
       </div>
 
@@ -421,7 +456,7 @@
             @update:model-value="modifElem"
             :canEdit="true"
             :canModify="true"
-            :type="costanti.FieldType.images"
+            :fieldtype="costanti.FieldType.image"
           >
           </CMyFieldRec>
           <div class="row">