- aggiornato carrello e bottoni sul catalogo

src/components/CCatalogList/CCatalogList.ts

@@ -1,23 +1,29 @@
 import {
   computed,
-  provide, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, toRef, toRefs, watch,
-} from 'vue'
+  provide,
+  defineComponent,
+  onBeforeMount,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRef,
+  toRefs,
+  watch,
+} from 'vue';
 
-import { tools } from '@tools'
-import { CMyFieldDb } from '@src/components/CMyFieldDb'
-import { costanti } from '@costanti'
-import { useGlobalStore } from '@store/globalStore'
-import { useUserStore } from '@store/UserStore'
+import { tools } from '@tools';
+import { CMyFieldDb } from '@src/components/CMyFieldDb';
+import { costanti } from '@costanti';
+import { useGlobalStore } from '@store/globalStore';
+import { useUserStore } from '@store/UserStore';
 
-import { CTitlePage } from '@src/components/CTitlePage'
-import { CGridTableRec } from '@src/components/CGridTableRec'
-import type { IColGridTable, ISearchList } from 'model';
-import { IMyBacheca, IMySkill, ISkill } from 'model'
-import { shared_consts } from '@src/common/shared_vuejs'
-import { useI18n } from 'vue-i18n'
-import { toolsext } from '@store/Modules/toolsext'
-import { fieldsTable } from '@store/Modules/fieldsTable'
-import { useQuasar } from 'quasar'
+import { CTitlePage } from '@src/components/CTitlePage';
+import { CGridTableRec } from '@src/components/CGridTableRec';
+import type { ICatalog, IColGridTable, ISearchList } from 'model';
+import { useI18n } from 'vue-i18n';
+import { toolsext } from '@store/Modules/toolsext';
+import { fieldsTable } from '@store/Modules/fieldsTable';
+import { useQuasar } from 'quasar';
 
 export default defineComponent({
   name: 'CCatalogList',
@@ -70,33 +76,37 @@ export default defineComponent({
     },
   },
   components: {
-    CMyFieldDb, CGridTableRec, CTitlePage,
+    CMyFieldDb,
+    CGridTableRec,
+    CTitlePage,
   },
   setup(props, { attrs, slots, emit }) {
-    const { t } = useI18n()
-    const $q = useQuasar()
-    const globalStore = useGlobalStore()
-    const userStore = useUserStore()
+    const { t } = useI18n();
+    const $q = useQuasar();
+    const globalStore = useGlobalStore();
+    const userStore = useUserStore();
 
-    const table = ref('catalogs')
+    const table = ref('catalogs');
 
-    const arrfilterand: any = ref([])
-    const filtercustom: any = ref([])
+    const arrfilterand: any = ref([]);
+    const filtercustom: any = ref([]);
 
-    const search = ref('')
-    const myrecfiltertoggle = ref(tools.FILTER_ALL)
+    const search = ref('');
+    const myrecfiltertoggle = ref(tools.FILTER_ALL);
 
-    const prop_colkey = ref('')
-    const col_title = ref('')
-    const col_footer = ref('')
-    const col_tabfooter = ref('')
+    const prop_colkey = ref('');
+    const col_title = ref('');
+    const col_footer = ref('');
+    const col_tabfooter = ref('');
 
-    const strextra = ref('')
-    const myoptions = ref(<any>[])
+    const strextra = ref('');
+    const myoptions = ref(<any>[]);
+    const newCatalog = ref(<any>{});
 
-    const col = ref(<IColGridTable[]>[])
+    const col = ref(<IColGridTable[]>[]);
 
-    const myCatRef = ref(<any>null)
+    const myCatRef = ref(<any>null);
+    const showFormAddNewCatalog = ref(false);
 
     /*
     const idSectorServizi = computed(() => {
@@ -113,78 +123,100 @@ export default defineComponent({
 
      */
 
-
     function updatefilter(value: any) {
       //
     }
 
-
-    watch(() => myrecfiltertoggle.value, (value: any, oldval: any) => {
-      updatefilter(value)
-    },
-    )
+    watch(
+      () => myrecfiltertoggle.value,
+      (value: any, oldval: any) => {
+        updatefilter(value);
+      }
+    );
 
     const mypagination = computed(() => {
-      return { sortBy: 'title', descending: false, page: 1, rowsNumber: 0, rowsPerPage: 10 }
-    })
+      return {
+        sortBy: 'title',
+        descending: false,
+        page: 1,
+        rowsNumber: 0,
+        rowsPerPage: 10,
+      };
+    });
 
     const showType = computed(() => {
-      return costanti.SHOW_MYCARD
-    })
+      return costanti.SHOW_MYCARD;
+    });
 
     const hint = computed(() => {
-      return 'digita un Argomento o Catalogo da cercare'
-    })
+      return 'digita un Argomento o Catalogo da cercare';
+    });
 
     const visuType = computed(() => {
-      return false // $q.screen.gt.xs
-    })
+      return false; // $q.screen.gt.xs
+    });
 
     const noMsgRecord = computed(() => {
-      return 'Nessun dato trovato con i filtri selezionati'
-    })
-
+      return 'Nessun dato trovato con i filtri selezionati';
+    });
 
     function mounted() {
+      const obj = tools.getParamsByTable(table.value);
 
-      const obj = tools.getParamsByTable(table.value)
+      prop_colkey.value = obj.prop_colkey;
+      col_title.value = obj.col_title;
+      col_footer.value = obj.col_footer;
+      col_tabfooter.value = obj.col_tabfooter;
 
+      filtercustom.value = [];
 
-      prop_colkey.value = obj.prop_colkey
-      col_title.value = obj.col_title
-      col_footer.value = obj.col_footer
-      col_tabfooter.value = obj.col_tabfooter
-
-      filtercustom.value = []
-
-      col.value = fieldsTable.getArrColsByTable(table.value)
+      col.value = fieldsTable.getArrColsByTable(table.value);
     }
 
-
-
     function mySortFieldsAvailable() {
       if (table.value === toolsext.TABUSER) {
-        return userStore.getSortFieldsAvailable()
+        return userStore.getSortFieldsAvailable();
       }
 
-      return []
+      return [];
     }
 
-
-
     function doSearch() {
       //
     }
 
     function clickButtBar(item: any) {
       if (myCatRef.value) {
-        myCatRef.value.clickButtBar(item)
+        myCatRef.value.clickButtBar(item);
       }
 
       // emit('clickButtBar', item)
     }
 
-    onMounted(mounted)
+    function addNewCatalog() {
+      // Aggiungi un nuovo catalogo
+      showFormAddNewCatalog.value = true;
+    }
+
+    function addNewCatalogSave() {
+      // Salva catalogo
+    }
+
+    function checkPathExist() {
+      const mypageexist = globalStore.mypage.find(
+        (myrec) => myrec.path.toLowerCase() === newCatalog.path.toLowerCase()
+      );
+      if (mypageexist) {
+        $q.notify({
+          message: `La pagina ${newCatalog.path} esiste già`,
+          color: 'red',
+          position: 'top',
+        });
+        return;
+      }
+    }
+
+    onMounted(mounted);
 
     return {
       t,
@@ -211,6 +243,12 @@ export default defineComponent({
       clickButtBar,
       myCatRef,
       table,
-    }
+      addNewCatalog,
+      showFormAddNewCatalog,
+      addNewCatalogSave,
+      newCatalog,
+      checkPathExist,
+      globalStore,
+    };
   },
-})
+});

src/components/CCatalogList/CCatalogList.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="q-ma-xs">
+    <div
+      v-if="!tools.isUtente()"
+      class="row justify-center"
+    >
+      <q-btn
+        color="primary"
+        icon="add"
+        label="Nuovo Catalogo"
+        @click="addNewCatalog"
+      />
+    </div>
     <CGridTableRec
       v-if="col && col.length > 0"
       ref="myCatRef"
@@ -29,7 +40,7 @@
       :defaultnewrec="tools.getdefaultnewrec(table)"
       labelBtnAddRow="NONE"
       :prop_SortFieldsAvailable="mySortFieldsAvailable()"
-      labelBtnAddExtra="Aggiungi Catalogo"
+      labelBtnAddExtra=""
       :extraparams="tools.extraparams(table, { myrecfiltertoggle })"
       :prop_showMap="false"
       :heightcarousel="heightcarousel"
@@ -39,6 +50,61 @@
     >
     </CGridTableRec>
   </div>
+  <q-dialog v-model="showFormAddNewCatalog">
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-card-section>
+        <div class="text-h6">Nuovo Catalogo</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-form
+          @submit="addNewCatalogSave"
+          class="q-gutter-md"
+        >
+          <q-input
+            filled
+            v-model="newCatalog.title"
+            label="Titolo del catalogo *"
+            lazy-rules
+            :rules="[(val) => (val && val.length > 0) || 'Inserire il titolo']"
+          />
+          <q-input
+            filled
+            v-model="newCatalog.path"
+            label="Nome della pagina *"
+            @update:model-value="checkPathExist"
+            lazy-rules
+            :rules="[(val) => (val && val.length > 0) || 'Inserire il nome della pagina']"
+          />
+
+          <q-select
+            filled
+            v-model="newCatalog.template"
+            :options="globalStore.getMyPagesOptionsTemplate()"
+            label="Modello *"
+            emit-value
+            map-options
+            :rules="[(val) => (val && val.length > 0) || 'Selezionare un modello']"
+          />
+
+          <div class="row justify-center">
+            <q-btn
+              label="Aggiungi"
+              type="submit"
+              color="primary"
+            />
+            <q-btn
+              label="Annulla"
+              v-close-popup
+              color="primary"
+              flat
+              class="q-ml-sm"
+            />
+          </div>
+        </q-form>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script lang="ts" src="./CCatalogList.ts"></script>