quasar-factory-lib 0.0.52 → 0.0.54

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "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/TableFilter.vue

@@ -1,6 +1,7 @@
 <template>
   <q-input
     ref="filterRef"
+    data-cy="input-filter"
     v-model="localStore.filterValue"
     borderless
     dense

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="'card-container-' + tablePropsData.row.id"
     :class="'q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition'"
     :style="tablePropsData.selected ? 'transform: scale(0.95);' : ''"
   >
@@ -17,6 +18,7 @@
     >
       <q-card-section>
         <q-checkbox
+          :data-cy="'checkbox-' + tablePropsData.row.id"
           v-if="selectionType != 'none'"
           v-model="tablePropsData.selected"
           dense
@@ -41,6 +43,7 @@
               class="itemsFontSize text-color-almostBlack"
               :class="getCellClass(tablePropsData.row, col)"
             >
+              <span v-html="tablePropsData.row[col.name]" />
               <q-icon
                 v-if="col.editable"
                 name="edit"
@@ -48,17 +51,25 @@
                 size="sm"
                 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 +132,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,
@@ -179,7 +192,4 @@ export default {
 }
 </script>
 <style>
-/* .q-btn {
-  padding: unset;
-} */
 </style>

package/src/components/TaskNavBar/TaskNavBar.vue

@@ -6,7 +6,7 @@
           <img :src="logo" class="logo">
           <span id="mobile-title">{{ title }}</span>
         </div>
-        <div class="col-5 text-right">
+        <div class="col-5 text-right" data-cy="back">
             <q-icon v-if="showBtnBack" size="md" class="cursor-pointer" @click="onClickBtnBack">
               <svg class="text-h4" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                 viewBox="0 0 23.648 22.836">
@@ -23,9 +23,10 @@
               :name="showIconSearch ?'search' : 'search_off'" 
               size="md" 
               class="q-ml-md cursor-pointer"
+              data-cy="search"
               @click="onClickBtnSearch">
             </q-icon>
-            <q-icon id="iconMenu" size="md" @click="onClickBtnMenu" class="q-ml-md cursor-pointer">
+            <q-icon id="iconMenu" size="md" @click="onClickBtnMenu" class="q-ml-md cursor-pointer" data-cy="menu">
               <svg xmlns="http://www.w3.org/2000/svg" width="30.448" height="28.247" viewBox="0 0 30.448 28.247">
                 <g id="Componente_11_3" data-name="Componente 11 – 3" transform="translate(0 1)">
                   <path id="Caminho_702" data-name="Caminho 702" d="M38.053,40.174H24"

package/src/layouts/PdaLayout.vue

@@ -23,14 +23,15 @@
           ref="table"
           :rows="rows"
           :columns="columns"
-          :visible-columns="visibleColumns"
+          :visible-columns="store.visiblecolumns"
           :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"
+          @on-select-visible-columns="(columns) => {
+            store.visiblecolumns = columns
+          }"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
@@ -50,7 +51,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 { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -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',
@@ -309,23 +315,22 @@ export default {
           iron: '6%'
         }
       ],
-      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: {
-    saveSelectedColumns (columns: string []): void {
-      this.store.visiblecolumns = columns
-      this.visibleColumns = columns
-    },
-    filterMethod (rows: string | [], terms: { search: string }): object[] | [] {
-      return FilterMethod.filter(this, rows, terms)
+    getRows () {
+      setTimeout(()=> {
+      this.showSkeleton = false
+    }, 1000)
+    this.rows = this.rowsData
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')

package/src/pages/ConfirmPage.vue

@@ -9,6 +9,7 @@
       >
       <ConfirmDialog
           ref="ConfirmRef"
+          dataCy="confirm-dialog"
           @onClickBtnConfirm="onClickBtnConfirm"
           @onClickBtnCancel="onClickBtnCancel"
         />

package/src/pages/TablePage.vue

@@ -7,23 +7,24 @@
       <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}"
           :additional-sort-conditions="additionalSortConditions"
           :additional-filter-conditions="additionalFilterConditions"
-          @on-select-visible-columns="saveSelectedColumns"
+          @on-select-visible-columns="(columns) => {
+            store.visiblecolumns = columns
+          }"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
@@ -36,8 +37,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 +44,7 @@ export default {
   },
   data () {
     return {
+      showSkeleton: true,
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
@@ -325,13 +325,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 +357,9 @@ export default {
           iron: lista[i].iron
         })
       }
-    },
-    saveSelectedColumns (columns: string []): void {
-      this.store.visiblecolumns = columns
-      this.visibleColumns = columns
+      setTimeout(() => {
+        this.showSkeleton = false
+      }, 1000);
     },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')