quasar-factory-lib 0.0.52 → 0.0.53

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -127,14 +127,6 @@ export default defineComponent({
       type: Array as () => string[],
       required: true
     },
-    // filterMethod: {
-    //   type: Function,
-    //   default: function () {}
-    // },
-    // sortMethod: {
-    //   type: Function,
-    //   default: function () {}
-    // },
     selectionType: {
       type: String as () => 'none' | 'single' | 'multiple',
       default: 'none'
@@ -207,7 +199,6 @@ export default defineComponent({
     return {
       selected: [],
       filter: '',
-      visibleColumnsData: this.visibleColumns,
       rowsData: [] as object[],
       gridRowsSelected: false,
       selectedRows: [] as number[],
@@ -250,9 +241,6 @@ export default defineComponent({
   watch: {
     rows (val) {
       this.rowsData = val
-    },
-    visibleColumns (val: string [] | []) {
-      this.visibleColumnsData = val
     }
   },
   mounted () {

package/src/components/Table/components/PopupEditNumber.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-popup-edit
+    v-slot="scope"
+    v-model="modelData"
+    buttons
+    :label-set="$t('table.confirm')"
+    :label-cancel="$t('table.cancel')"
+    @save="validate"
+    @cancel="() => {}"
+  >
+    <q-input
+      v-if="!showSelectNumberOptions"
+      ref="inputNumber"
+      v-model="scope.value"
+      :data-cy="dataCy"
+      :label="label"
+      type="text"
+      mask="#####"
+      dense
+      autofocus
+      @keyup.enter.stop
+    />
+    <q-select
+      v-if="showSelectNumberOptions"
+      ref="selectField"
+      v-model="scope.value"
+      :data-cy="dataCy"
+      dense
+      :options="popupEditNumberOptions"
+    />
+  </q-popup-edit>
+</template>
+<script lang="ts">
+import type { QInput } from 'quasar'
+export default {
+  name: 'PopupEditNumber',
+  props: {
+    model: {
+      type: [String, Number, Boolean, Array, Object],
+      required: true
+    },
+    label: {
+      type: String,
+      required: true
+    },
+    dataCy: {
+      type: String,
+      required: true
+    },
+    popupEditNumberOptions: {
+      type: Array as () => number[],
+      default: () => []
+    },
+    showSelectNumberOptions: {
+      type: Boolean,
+      required: false
+    }
+  },
+  emits: ['popupEditUpdated', 'popupEditEmit', 'save'],
+  data () {
+    return {
+      modelData: this.model
+    }
+  },
+  methods: {
+    validate (val: string) {
+      const input = this.$refs.inputNumber as QInput
+      if (input.validate()) {
+        this.$emit('save', val)
+      } else {
+        this.$q.notify({
+          type: 'negative',
+          message: 'Value not accepted',
+          position: 'bottom'
+        })
+      }
+    }
+  }
+}
+</script>

package/src/components/Table/components/{TablePopupEdit.vue → PopupEditText.vue}

@@ -9,13 +9,11 @@
     @cancel="() => {}"
   >
     <q-input
-      v-if="showInputPopupEdit"
-      ref="inputField"
+      ref="inputText"
       v-model="scope.value"
       :data-cy="dataCy"
       :label="label"
       :type="inputType"
-      :mask="mask"
       :autogrow="inputType === 'textarea'"
       :rules="[
         (val: string | string[]) => (val && val.length > 0) || $t('form.rules.emptyField'),
@@ -26,21 +24,12 @@
       autofocus
       @keyup.enter.stop
     />
-
-    <q-select
-      v-if="showSelectNumberOptions"
-      ref="selectField"
-      v-model="scope.value"
-      :data-cy="dataCy"
-      dense
-      :options="popupEditNumberOptions"
-    />
   </q-popup-edit>
 </template>
 <script lang="ts">
 import type { QInput } from 'quasar'
 export default {
-  name: 'PopupEdit',
+  name: 'PopupEditText',
   props: {
     model: {
       type: [String, Number, Boolean, Array, Object],
@@ -54,29 +43,13 @@ export default {
       type: String,
       required: true
     },
-    mask: {
-      type: String,
-      required: true
-    },
     inputType: {
-      type: String as () =>'text' | 'textarea'| 'number',
+      type: String as () =>'text' | 'textarea',
       required: true
     },
     inputMaxLength: {
       type: Number,
       required: true
-    },
-    popupEditNumberOptions: {
-      type: Array as () => number[],
-      default: () => []
-    },
-    showInputPopupEdit: {
-      type: Boolean,
-      required: true
-    },
-    showSelectNumberOptions: {
-      type: Boolean,
-      required: false
     }
   },
   emits: ['popupEditUpdated', 'popupEditEmit', 'save'],
@@ -87,7 +60,7 @@ export default {
   },
   methods: {
     validate (val: string) {
-      const input = this.$refs.inputField as QInput
+      const input = this.$refs.inputText as QInput
       if (input.validate()) {
         this.$emit('save', val)
       } else {

package/src/components/Table/components/TableColumnsSelector.vue

@@ -42,13 +42,11 @@ export default {
   emits: ['onSelectVisibleColumns'],
   data () {
     return {
-      visibleColumnsData: [] as { name: string; required: boolean; label: string }[]
+      visibleColumnsData: []
     }
   },
-  watch: {
-    visibleColumns (value): void {
-      this.visibleColumnsData = value
-    }
+  mounted () {
+    this.visibleColumnsData = this.visibleColumns
   },
   methods: {
     onSelectVisibleColumns (columns: string[]): void {

package/src/components/Table/components/TableSlotBody.vue

@@ -31,22 +31,31 @@
         size="sm"
         class="cursor-pointer"
       />
-      <TablePopupEdit
-        v-if="col.editable"
+      <PopupEditNumber
+         v-if="col.editable && col.popupEditInputtype === 'number'"
+        :model="tablePropsData.row[col.name] || ''"
+        :label="col.label"
+        :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
+        :showSelectNumberOptions="col.showSelectNumberOptions"
+        :popupEditNumberOptions="col.popupEditNumberOptions || []"
+        @save="(val: object) => {
+          tablePropsData.row[col.name] = val
+          $emit(col.popupEditEmit, tablePropsData.row)
+        }"
+      />
+      <PopupEditText
+        v-if="col.editable && (col.popupEditInputtype === 'text' || col.popupEditInputtype === 'textarea')"
         :model="tablePropsData.row[col.name] || ''"
         :label="col.label"
         :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
         :input-max-length="col.inputMaxLength || 20"
-        :mask="col.popupEditMask || ''"
-        :input-type="col.popupEditInputtype || 'text'"
-        :show-input-popup-edit="col.showInputPopupEdit || true"
-        :show-select-number-options="col.showSelectNumberOptions || false"
-        :popup-edit-number-options="col.popupEditNumberOptions || []"
+        :input-type="col.popupEditInputtype"
         @save="(val: object) => {
           tablePropsData.row[col.name] = val
           $emit(col.popupEditEmit, tablePropsData.row)
         }"
       />
+
       <BasicCheckBox
         v-if="col.showBasicCheckbox"
         :table-props="tablePropsData"
@@ -92,15 +101,17 @@
   </tr>
 </template>
 <script lang="ts">
-import TablePopupEdit from './TablePopupEdit.vue'
+import PopupEditNumber from './PopupEditNumber.vue'
+import PopupEditText from './PopupEditText.vue'
 import BasicCheckBox from './BasicCheckBox.vue'
 import CustomizedCheckBox from './CustomizedCheckBox.vue'
 import CustomizedIcon from './CustomizedIcon.vue'
 import CustomizedButton from './CustomizedButton.vue'
 export default {
-  name: 'KTableSlotBody',
+  name: 'TableSlotBody',
   components: {
-    TablePopupEdit,
+    PopupEditNumber,
+    PopupEditText,
     BasicCheckBox,
     CustomizedCheckBox,
     CustomizedIcon,

package/src/components/Table/components/TableSlotGrid.vue

@@ -49,16 +49,25 @@
                 class="cursor-pointer"
               />
               <span v-html="tablePropsData.row[col.name]" />
-              <TablePopupEdit
+              <PopupEditNumber
+                v-if="col.editable && col.popupEditInputtype === 'number'"
+                :model="tablePropsData.row[col.name] || ''"
+                :label="col.label"
+                :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
+                :showSelectNumberOptions="col.showSelectNumberOptions"
+                :popupEditNumberOptions="col.popupEditNumberOptions || []"
+                @save="(val: object) => {
+                  tablePropsData.row[col.name] = val
+                  $emit(col.popupEditEmit, tablePropsData.row)
+                }"
+              />
+              <PopupEditText
+                v-if="col.editable && (col.popupEditInputtype === 'text' || col.popupEditInputtype === 'textarea')"
                 :model="tablePropsData.row[col.name] || ''"
                 :label="col.label"
                 :data-cy="col.popupEditDataCy + '-' + tablePropsData.row.id"
                 :input-max-length="col.inputMaxLength || 20"
-                :mask="col.popupEditMask || ''"
-                :input-type="col.popupEditInputtype || 'text'"
-                :show-input-popup-edit="col.showInputPopupEdit || true"
-                :show-select-number-options="col.showSelectNumberOptions || false"
-                :popup-edit-number-options="col.popupEditNumberOptions || []"
+                :input-type="col.popupEditInputtype"
                 @save="(val: object) => {
                   tablePropsData.row[col.name] = val
                   $emit(col.popupEditEmit, tablePropsData.row)
@@ -121,16 +130,18 @@
   </div>
 </template>
 <script lang="ts">
-import TablePopupEdit from './TablePopupEdit.vue'
+import PopupEditNumber from './PopupEditNumber.vue'
+import PopupEditText from './PopupEditText.vue'
 import BasicCheckBox from './BasicCheckBox.vue'
 import CustomizedCheckBox from './CustomizedCheckBox.vue'
 import CustomizedIcon from './CustomizedIcon.vue'
 import CustomizedButton from './CustomizedButton.vue'
 
 export default {
-  name: 'KTableSlotGrid',
+  name: 'TableSlotGrid',
   components: {
-    TablePopupEdit,
+    PopupEditNumber,
+    PopupEditText,
     BasicCheckBox,
     CustomizedCheckBox,
     CustomizedIcon,

package/src/layouts/PdaLayout.vue

@@ -27,7 +27,7 @@
           :small-device="smallDevice"
           :store="store"
           :table-style="tableStyle"
-          :show-skeleton="false"
+          :show-skeleton="showSkeleton"
           :selection-type="'multiple'"
           :filter-method="filterMethod"
           @on-select-visible-columns="saveSelectedColumns"
@@ -59,7 +59,7 @@ export default {
   },
   data () {
     return {
-      smallDevice: true,
+      smallDevice: false,
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
@@ -102,9 +102,10 @@ export default {
         editable: true,
         showEditIcon: true,
         popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditInputtype: 'number',
         popupEditDataCy: '',
-        popupEditMask: '#####'
+        mask: '#####',
+        showSelectNumberOptions: false,
+        popupEditInputtype: 'number'
       },
       {
         name: 'fat',
@@ -120,7 +121,12 @@ export default {
       {
         name: 'carbs',
         label: 'Carbs (g)',
-        field: 'carbs'
+        field: 'carbs',
+        editable: true,
+        popupEditEmit: 'onSaveValuePopupEdit',
+        popupEditDataCy: '',
+        inputMaxLength: 200,
+        popupEditInputtype: 'textarea'
       },
       {
         name: 'checked',
@@ -141,12 +147,12 @@ export default {
         field: 'protein',
         sortable: true,
         required: true,
-        editable: true,
-        showEditIcon: true,
-        popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditInputtype: 'text',
-        popupEditDataCy: '',
-        showInputPopupEdit: true
+        // editable: true,
+        // showEditIcon: true,
+        // popupEditEmit: 'onSaveValuePopupEdit',
+        // popupEditInputtype: 'text',
+        // popupEditDataCy: '',
+        // showInputPopupEdit: true
       },
       {
         name: 'sodium',
@@ -309,17 +315,27 @@ export default {
           iron: '6%'
         }
       ],
-      visibleColumns: []
+      visibleColumns: [],
+      showSkeleton: false
     }
   },
   mounted () {
+    this.showSkeleton = true
     this.store.cleanTableFilter()
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
-    this.visibleColumns = this.store.visiblecolumns
-    this.rows = this.rowsData
+    this.getRows()
   },
   methods: {
+    getRows () {
+      setTimeout(()=> {
+      this.showSkeleton = false
+
+      // this.visibleColumns = this.store.visiblecolumns
+    }, 1000)
+    this.rows = this.rowsData
+    this.visibleColumns = this.store.visiblecolumns
+    },
     saveSelectedColumns (columns: string []): void {
       this.store.visiblecolumns = columns
       this.visibleColumns = columns

package/src/pages/TablePage.vue

@@ -7,17 +7,16 @@
       <div
         class="full-width"
       >
-      {{ store.prepared }}
       <q-btn @click="store.prepared = !store.prepared">Click</q-btn>
         <Table
           ref="table"
           :rows="rows"
           :columns="columns"
-          :visible-columns="visibleColumns"
+          :visible-columns="store.visiblecolumns"
           :small-device="false"
           :store="store"
           :table-style="tableStyle"
-          :show-skeleton="false"
+          :show-skeleton="showSkeleton"
           :selection-type="'multiple'"
           :getCellClass="getCellClass"
           :filterComputedOptions="{ preparedQuantity: store.prepared}"
@@ -36,8 +35,6 @@
 import Table from '../components/Table/Table.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
-// import FilterMethod from '../components/Table/utils/filterMethod'
-// import TableSort from '../components/Table/utils/sort.js'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -45,6 +42,7 @@ export default {
   },
   data () {
     return {
+      showSkeleton: true,
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
@@ -325,13 +323,11 @@ export default {
           calcium: '12%',
           iron: '6%'
         }
-      ],
-      visibleColumns: []
+      ]
     }
   },
   mounted () {
     this.store.cleanTableFilter()
-    this.visibleColumns = this.store.visiblecolumns
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
     this.getRows()
@@ -359,10 +355,12 @@ export default {
           iron: lista[i].iron
         })
       }
+      setTimeout(() => {
+        this.showSkeleton = false
+      }, 1000);
     },
     saveSelectedColumns (columns: string []): void {
       this.store.visiblecolumns = columns
-      this.visibleColumns = columns
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')