aggiornamenti vari...

src/components/CSearchProduct/CSearchProduct.scss

@@ -0,0 +1,126 @@
+$heightBtn: 100%;
+$colore_titolo_libro: rgb(210, 12, 12);
+
+body {
+  line-height: 1.2 !important;
+}
+
+.card .product-image {
+  height: 300px;
+}
+
+.container {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+.prod_trov {
+  font-style: italic;
+  color: grey;
+}
+
+.fixed-group {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #ffffff;
+  /* Customize the background color as needed */
+  z-index: 1000;
+  /* Adjust the z-index to ensure it's above other elements */
+  transition: all 1s ease;
+}
+
+
+// Underline like a href
+.category {
+  color: darkblue;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 19px;
+
+  cursor: pointer;
+}
+
+.category_sel {
+  color: white !important;
+  background: #5c8ef4 !important;
+  padding: 2px;
+}
+
+.category-title{
+  font-weight: bold;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  color: black;
+  text-align: center;
+
+}
+
+.fixed-width {
+  width: var(--width) !important; /* Usa una variabile CSS */
+}
+.fixed-height {
+  height: var(--height) !important; /* Usa una variabile CSS */
+}
+
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.book-title {
+  font-family: 'DINPro-CondensedBold', sans-serif;
+  color: $colore_titolo_libro;
+  text-transform: uppercase;
+  margin-top: calc(5 * var(--scalecatalog) * 1px);
+  margin-bottom: calc(5 * var(--scalecatalog) * 1px);
+  font-size: calc(20 * var(--scalecatalog) * 1px);
+  line-height: 100%;
+}
+
+.book-author {
+  font-family: 'DIN-Pro-Condensed-Regular', sans-serif;
+  font-size: calc(18 * var(--scalecatalog) * 1px);
+}
+
+.book-descr {
+  font-family: 'DIN-Pro-Condensed-Bold-Italic', sans-serif;
+  font-size: calc(16 * var(--scalecatalog) * 1px);
+}
+
+.book-details {
+  font-family: 'DIN-Pro-Condensed-Regular', sans-serif;
+  margin-bottom: calc(5 * var(--scalecatalog) * 1px);
+  font-size: calc(13 * var(--scalecatalog) * 1px);
+  text-align: left !important;
+}
+
+
+.book-descr-estesa {
+  font-family: 'AGaramondPro-Regular', sans-serif;
+  font-size: calc(15 * var(--scalecatalog) * 1px);
+  text-align: justify;
+  word-wrap: break-word;
+}
+
+.book-link{
+  font-style: italic;
+  font-size: calc(14 * var(--scalecatalog) * 1px);
+}
+
+.book-novita {
+  font-size: calc(20 * var(--scalecatalog) * 1px);
+}
+
+
+.book-text-up {
+  font-family: 'DINPro', sans-serif;
+  margin-bottom: calc(5 * var(--scalecatalog) * 1px);
+  font-size: calc(20 * var(--scalecatalog) * 1px);
+}
+.book-text-down {
+  font-family: 'DINPro', sans-serif;
+  margin-bottom: calc(5 * var(--scalecatalog) * 1px);
+}

src/components/CSearchProduct/CSearchProduct.ts

@@ -0,0 +1,192 @@
+import type { PropType } from 'vue';
+import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount, nextTick } from 'vue'
+import { tools } from '@tools'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useProducts } from '@store/Products'
+import { useI18n } from 'vue-i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+
+import { shared_consts } from '@src/common/shared_vuejs'
+import { CProductCard } from '@src/components/CProductCard'
+
+import { CMySelect } from '@src/components/CMySelect'
+import { CContainerCatalogoCard } from '@src/components/CContainerCatalogoCard'
+import { CSelectUserActive } from '@src/components/CSelectUserActive'
+import type {
+  IOptCatalogo, IDimensioni, IFilterCatalogo,
+  IMyScheda, IProdView, IProduct, ISchedaSingola, ISearchList, ICatalog, IImg
+} from 'model';
+
+
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { useCatalogStore } from '@src/store/CatalogStore'
+
+export default defineComponent({
+  name: 'CSearchProduct',
+  components: { CContainerCatalogoCard, CProductCard, CSelectUserActive, CMySelect },
+  emits: [],
+  props: {
+    modelValue: {
+      type: Object as PropType<IOptCatalogo>,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const productStore = useProducts()
+    const router = useRouter()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const search = ref('')
+
+    const loadpage = ref(false)
+    const refreshpage = ref(false)
+    const show_hide = ref(false)
+
+    const mycolumns = ref([])
+
+    const idPage = ref('')
+    const selauthor = ref('')
+
+    const searchList = ref(<any[]>[])
+
+    const optcatalogo = ref<IOptCatalogo | null>(null);
+
+    const myproduct = ref(<IProduct>{})
+
+    const labelcombo = computed(() => (item: any) => {
+      let lab = item.label
+      if (item.showcount)
+        lab += ' (' + valoriopt.value(item, false, false).length + ')'
+      return lab
+    })
+
+    const listaRicerca = computed(() => {
+      const mylist = searchList.value.find((rec: any) => rec.table === 'products' && rec.key === 'titolo')
+
+      return mylist
+    })
+
+
+    const searchText = computed(() => {
+      const lista = listaRicerca.value
+      return lista && lista.value && tools.existProp(lista.value, 'name') ? lista.value.name : ''
+    })
+
+    const valoriopt = computed(() => (item: any, addall: boolean, addnone: boolean = false) => {
+      // console.log('valoriopt', item.table)
+      return globalStore.getTableJoinByName(item.table, addall, addnone, item.filter)
+    })
+
+    watch(() => searchText.value, (newval, oldval) => {
+      console.log('searchText=', searchText.value)
+      const id = getSearchId()
+      loadProduct(id)
+    })
+
+    async function loadProduct(id: string) {
+      // Carica il prodotto
+
+      if (id) {
+        myproduct.value = await productStore.loadProductById(id)
+      } else {
+        myproduct.value = null
+      }
+
+      if (myproduct.value) {
+        tools.setCookie(tools.COOK_LAST_PROD_SEARCH, myproduct.value._id.toString())
+      } else {
+        tools.setCookie(tools.COOK_LAST_PROD_SEARCH, '')
+      }
+
+    }
+
+    function resetSearch() {
+      const mialista = listaRicerca.value
+      if (mialista && mialista.value && tools.existProp(mialista.value, 'name')) {
+        mialista.value = null
+      }
+      search.value = ''
+    }
+
+
+    function getSearchId(): string {
+      const lista = listaRicerca.value
+      return lista && lista.value && lista.value._id ? lista.value._id : ''
+    }
+
+    async function mounted() {
+      // console.log('mounted Catalogo')
+
+      optcatalogo.value = props.modelValue
+      loadpage.value = false
+
+      const id = tools.getCookie(tools.COOK_LAST_PROD_SEARCH, '')
+
+      if (id) {
+        await loadProduct(id)
+      }
+
+      mycolumns.value = fieldsTable.getArrColsByTable('products')
+
+      searchList.value = [
+        {
+          visible: true,
+          label: 'Ricerca',
+          table: 'products',
+          key: 'titolo',
+          type: costanti.FieldType.select_by_server,
+          value: myproduct.value?.productInfo?.name,
+          // addall: true,
+          arrvalue: [],
+          useinput: true,
+          filter: null,
+          tablesel: 'products',
+        },
+      ]
+
+      // Inizializza
+      loadpage.value = true
+
+    }
+
+
+    function naviga(path: string) {
+      router.push(path)
+    }
+
+    onMounted(mounted)
+
+    return {
+      userStore,
+      costanti,
+      tools,
+      toolsext,
+      search,
+      shared_consts,
+      productStore,
+      t,
+      loadpage,
+      refreshpage,
+      show_hide,
+      searchList,
+      fieldsTable,
+      mycolumns,
+      naviga,
+      myproduct,
+      optcatalogo,
+      idPage,
+      selauthor,
+      valoriopt,
+      labelcombo,
+      searchText,
+    }
+  }
+})
+

src/components/CSearchProduct/CSearchProduct.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="q-ma-sm">
+    <div class="text-center">
+      <q-spinner
+        v-if="!loadpage"
+        color="primary"
+        size="3em"
+        :thickness="2"
+      />
+    </div>
+    <div
+      v-if="loadpage"
+      class="panel"
+    >
+      <div class="text-h6 text-bold text-blue text-center">Cerca un Titolo:</div>
+      <div
+        class="col"
+        v-for="(item, index) in searchList"
+        :key="index"
+      >
+        <CMySelect
+          v-if="item.type === costanti.FieldType.select || item.type === costanti.FieldType.select_by_server"
+          :col="fieldsTable.getColByColumns(mycolumns, item.key)"
+          :label="item.value && item.value._id > 0 ? undefined : labelcombo(item)"
+          v-model:value="item.value"
+          :addall="item.addall"
+          :addnone="item.addnone"
+          :addlast="true"
+          :tablesel="item.type === costanti.FieldType.select_by_server ? item.tablesel : ''"
+          :pickup="item.type === costanti.FieldType.select_by_server"
+          color="primary"
+          myclass=""
+          :icon_alternative="item.icon"
+          :optval="fieldsTable.getKeyByTable(item.table)"
+          :optlab="fieldsTable.getLabelByTable(item.table)"
+          :options="valoriopt(item, false)"
+          :filter="item.filter"
+          :filter_extra="item.filter_extra"
+          :useinput="item.useinput && item.type !== costanti.FieldType.select_by_server"
+          @clear="item.value = ''"
+        >
+        </CMySelect>
+      </div>
+
+      <div
+        v-if="myproduct?._id"
+        class="row justify-center"
+        style="height: 400px; text-align: center;"
+      >
+        <CContainerCatalogoCard
+          :id="myproduct._id"
+          :product="myproduct"
+          :complete="false"
+          :cosa="0"
+          v-model="optcatalogo"
+          :idPage="idPage"
+          :options="{
+            show_edit_book: tools.isEditor(),
+          }"
+          @selauthor="selauthor"
+          :scheda="optcatalogo.arrSchede[0].scheda"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CSearchProduct.ts"></script>
+
+<style lang="scss">
+@import './CSearchProduct.scss';
+</style>

src/components/CSearchProduct/index.ts

@@ -0,0 +1 @@
+export { default as CSearchProduct } from './CSearchProduct.vue'