quasar-factory-lib 0.0.1 → 0.0.2

package/package.json

@@ -102,5 +102,5 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.1"
+  "version": "0.0.2"
 }

package/src/components/K-Table/K-Table.vue

@@ -0,0 +1,292 @@
+<template lang="">
+  <!-- eslint-disable-file vue/no-v-model-argument -->
+  <!-- eslint-disable vue/no-v-model-argument -->
+  <!-- eslint-disable vue/no-use-v-if-with-v-for -->
+  <div>
+    <q-table
+      v-if="!showSkeleton"
+      ref="myTable"
+      v-model:selected="selected"
+      class="k-table"
+      :grid="smallDevice"
+      :style="tableStyle"
+      flat
+      bordered
+      :rows="rowsData"
+      :columns="columns"
+      :row-key="rowKey"
+      :rows-per-page-options="[0]"
+      :selection="selectionType"
+      :visible-columns="visibleColumns"
+      table-class="text-grey-9"
+      table-header-class="main-color"
+      :filter="filterComputed"
+      :filter-method="filterMethod"
+      :sort-method="sortMethod"
+      separator="horizontal"
+      binary-state-sort
+      :selected-rows-label="getSelectedString"
+      :loading="loading"
+      pagination.sync="0"
+      :grid-header="showGridHeader"
+    >
+      <template #top-right="props">
+        <q-separator />
+        <TableFilter
+          v-if="getTableInputSearchVisibility && !hideFilter"
+          ref="filterInput"
+          class="q-pl-xs"
+          :table-props="props"
+          :store="store"
+          @input-focus="filterInputFocus"
+        />
+        <TableColumnsSelector
+          v-if="getColumnsSelectorVisibility && !hideColumnsSelector "
+          class="q-pl-xs"
+          :table-props="props"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          @on-select-visible-columns="onSelectVisibleColumns"
+        />
+      </template>
+      <template #header="props">
+        <TableSlotHeader
+          :table-props="props"
+          :selection-type="selectionType"
+          :small-device="smallDevice"
+        />
+      </template>
+      <template #body="props">
+        <TableSlotBody
+          v-if="!showSkeleton"
+          :table-props="props"
+          :selection-type="selectionType"
+          @on-update-checkbox-value="onUpdateCheckboxValue"
+          @on-save-value-popup-edit="onSaveValuePopupEdit"
+          @on-click-button="onClickButton"
+          @click="onRowClick(props.row)"
+        />
+      </template>
+      <template #item="props">
+        <TableSlotGrid
+          :table-props="props"
+          :selection-type="selectionType"
+          :popup-edit-number-options="popupEditNumberOptions"
+          @on-update-checkbox-value="onUpdateCheckboxValue"
+          @on-save-value-popup-edit="onSaveValuePopupEdit"
+          @on-click-button="onClickButton"
+          @click="onRowClick(props.row)"
+        />
+      </template>
+    </q-table>
+    <TableSkeleton
+      v-if="getTableSkeletonVisibility"
+      id="tableSkeleton"
+    />
+    <CardListSkeleton
+      v-if="getGridSkeletonVisibility"
+      id="cardListSkeleton"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { QTable } from 'quasar'
+import TableSlotHeader from './components/TableSlotHeader.vue'
+import TableColumnsSelector from './components/TableColumnsSelector.vue'
+import TableSlotBody from './components/TableSlotBody.vue'
+import TableSlotGrid from './components/TableSlotGrid.vue'
+import TableFilter from './components/TableFilter.vue'
+import TableSort from './utils/sort.js'
+import TableSkeleton from './components/TableSkeleton.vue'
+import CardListSkeleton from './components/CardListSkeleton.vue'
+
+export default defineComponent({
+  components: {
+    TableSlotHeader,
+    TableColumnsSelector,
+    TableSlotBody,
+    TableSlotGrid,
+    TableFilter,
+    TableSkeleton,
+    CardListSkeleton
+  },
+  props: {
+    columns: {
+      type: Array as () => object[],
+      required: true
+    },
+    rows: {
+      type: Array as () => object[],
+      required: true
+    },
+    visibleColumns: {
+      type: Array as () => string[],
+      required: true
+    },
+    filterMethod: {
+      type: Function,
+      default: function () {}
+    },
+    filterComputed: {
+      type: Object,
+      default: () => {}
+    },
+    sortDataValues: {
+      type: Array,
+      default: () => ['']
+    },
+    selectionType: {
+      type: String as () => 'none' | 'single' | 'multiple',
+      default: 'none'
+    },
+    rowKey: {
+      type: String,
+      default: 'id'
+    },
+    tableStyle: {
+      type: String,
+      default: ''
+    },
+    popupEditNumberOptions: {
+      type: Array,
+      default: () => []
+    },
+    smallDevice: {
+      type: Boolean,
+      required: true
+    },
+    store: {
+      type: Object,
+      required: true
+    },
+    tableId: {
+      type: String,
+      default: ''
+    },
+    hideColumnsSelector: {
+      type: Boolean,
+      default: false
+    },
+    hideFilter: {
+      type: Boolean,
+      default: false
+    },
+    showSkeleton: {
+      type: Boolean
+    }
+  },
+  emits: [
+    'onSelectVisibleColumns',
+    'onUpdateCheckboxValue',
+    'onSaveValuePopupEdit',
+    'onClickButton',
+    'storeUpdated',
+    'deleteItem',
+    'openModalWithTable',
+    'setItemNotFound',
+    'onRowClick'],
+  data () {
+    return {
+      selected: [],
+      filter: '',
+      visibleColumnsData: this.visibleColumns,
+      rowsData: [] as object[],
+      gridRowsSelected: false,
+      selectedRows: [] as number[],
+      showColumnsSelector: false,
+      showSearch: false,
+      loading: false,
+      storeData: this.store,
+      forceRender: false
+    }
+  },
+  computed: {
+    getColumnsSelectorVisibility () {
+      return !this.smallDevice || this.showColumnsSelector
+    },
+    getTableInputSearchVisibility () {
+      return !this.smallDevice || this.showSearch
+    },
+    showGridHeader () {
+      return this.selectionType === 'multiple'
+    },
+    getTableSkeletonVisibility () {
+      return !this.smallDevice && this.showSkeleton
+    },
+    getGridSkeletonVisibility () {
+      return this.smallDevice && this.showSkeleton
+    }
+  },
+  watch: {
+    rows (val) {
+      this.rowsData = val
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    getSelectedString (val: number): string {
+      const rowsSelectedLength = val
+      if (rowsSelectedLength === 0) {
+        return ''
+      }
+      const recordString = rowsSelectedLength > 1 ? 'records' : 'record'
+      return `${rowsSelectedLength} ${recordString} selected`
+    },
+    onSelectVisibleColumns (columns: string[]) {
+      this.$emit('onSelectVisibleColumns', columns)
+    },
+    onSaveValuePopupEdit (row: object) {
+      this.$emit('onSaveValuePopupEdit', row)
+    },
+    onUpdateCheckboxValue (row: object) {
+      this.$emit('onUpdateCheckboxValue', row)
+    },
+    onClickButton (emit: 'onClickButton', row: object) {
+      this.$emit(emit, row)
+    },
+    onRowClick (row: object) {
+      this.$emit('onRowClick', row)
+    },
+    deleteItem (row: object) {
+      this.$emit('deleteItem', row)
+    },
+    clearTableSelection () {
+      const table = this.$refs.myTable as QTable
+      table.clearSelection()
+    },
+    toggleSearchVisibility (store: {disableScannerButtons: boolean, lastFilterValue: string, valueInputFilterTable: string}) {
+      this.showSearch = !this.showSearch
+      store.disableScannerButtons = false
+      store.lastFilterValue = ''
+      store.valueInputFilterTable = ''
+    },
+    toogleColumnsSelectorVisibility () {
+      this.showColumnsSelector = !this.showColumnsSelector
+    },
+    filterInputFocus () {
+      setTimeout(() => {
+        if (this.$refs.filterInput) {
+          this.$refs.filterInput.inputFocus()
+        }
+      }, 10)
+    },
+    toogleLoading () {
+      this.loading = !this.loading
+    },
+    sortMethod (rows: object[], sortBy: string, descending: boolean): object[] | [] {
+      const allrowsSorted = TableSort.sortMethod(rows, sortBy, descending, this.sortDataValues)
+      const rowsSliced = allrowsSorted.slice(0, rows.length)
+      if (this.store.valueInputFilterTable === '') {
+        return rowsSliced
+      } else {
+        return TableSort.sortMethod(rows, sortBy, descending, this.sortDataValues)
+      }
+    }
+  }
+})
+</script>
+<style>
+@import url('./style.css');
+</style>

package/src/components/K-Table/components/BasicCheckBox.vue

@@ -0,0 +1,35 @@
+<template>
+  <q-checkbox
+    v-model="modelData"
+    :data-cy="dataCy"
+    @update:model-value="(val) => {
+      $emit('checkBoxEmit', val)
+    }"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: 'BasicCheckBox',
+  props: {
+    model: {
+      type: Boolean,
+      required: true
+    },
+    tableProps: {
+      type: Object,
+      required: true
+    },
+    dataCy: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['checkBoxEmit'],
+  data () {
+    return {
+      tablePropsData: this.tableProps,
+      modelData: this.model
+    }
+  }
+}
+</script>

package/src/components/K-Table/components/CardListSkeleton.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <q-item
+      v-for="n in 2"
+      :key="n"
+    >
+      <q-card style="width: 100%">
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              <q-skeleton
+                type="text"
+                width="60%"
+              />
+            </q-item-label>
+            <q-item-label caption>
+              <q-skeleton
+                type="text"
+                width="60%"
+              />
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              <q-skeleton
+                type="text"
+                width="70%"
+              />
+            </q-item-label>
+            <q-item-label caption>
+              <q-skeleton
+                type="text"
+                width="70%"
+              />
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              <q-skeleton
+                type="text"
+                width="80%"
+              />
+            </q-item-label>
+            <q-item-label caption>
+              <q-skeleton
+                type="text"
+                width="80%"
+              />
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item>
+          <q-item-section>
+            <q-item-label>
+              <q-skeleton
+                type="text"
+                width="90%"
+              />
+            </q-item-label>
+            <q-item-label caption>
+              <q-skeleton
+                type="text"
+                width="90%"
+              />
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-card>
+    </q-item>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'CardListSkeleton'
+}
+</script>
+
+<style></style>

package/src/components/K-Table/components/CustomizedButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <q-btn
+    :data-cy="dataCy"
+    flat
+    round
+    :color="btnColor"
+    size="md"
+    @click="$emit('onClickButton')"
+  >
+    <q-icon :name="btnIcon" />
+  </q-btn>
+</template>
+<script lang="ts">
+export default {
+  name: 'CustomizedButton',
+  props: {
+    dataCy: {
+      type: String,
+      required: true
+    },
+    btnColor: {
+      type: String,
+      required: true
+    },
+    btnIcon: {
+      type: String,
+      required: true
+    }
+
+  },
+  emits: ['onClickButton'],
+  data: function () {
+    return {
+    }
+  }
+}
+</script>

package/src/components/K-Table/components/CustomizedCheckBox.vue

@@ -0,0 +1,56 @@
+<template>
+  <q-checkbox
+    v-model="modelData"
+    :data-cy="dataCy"
+    :size="checkBoxIconSize"
+    :color="checkBoxColor"
+    :keep-color="true"
+    :checked-icon="checkedIcon"
+    :unchecked-icon="uncheckedIcon"
+    @update:model-value="(val) => {
+      $emit('checkBoxEmit', val)
+    }"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: 'CustomizedCheckBox',
+  props: {
+    model: {
+      type: Boolean,
+      required: true
+    },
+    tableProps: {
+      type: Object,
+      required: true
+    },
+    dataCy: {
+      type: String,
+      required: true
+    },
+    checkBoxColor: {
+      type: String,
+      required: true
+    },
+    checkBoxIconSize: {
+      type: String,
+      required: true
+    },
+    checkedIcon: {
+      type: String,
+      required: true
+    },
+    uncheckedIcon: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['checkBoxEmit'],
+  data () {
+    return {
+      tablePropsData: this.tableProps,
+      modelData: this.model
+    }
+  }
+}
+</script>

package/src/components/K-Table/components/CustomizedIcon.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-icon
+    :name="
+      customizedIconName? customizedIconName : model
+        ? 'fa-solid fa-circle-check'
+        : 'fa-solid fa-circle-xmark'"
+    :color="
+      customizedIconColor? customizedIconColor : model? 'green': 'red'"
+    :size="customizedIconSize"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: 'CustomizedIcon',
+  props: {
+    model: {
+      type: Boolean,
+      required: true
+    },
+    customizedIconSize: {
+      type: String,
+      required: true
+    },
+    customizedIconName: {
+      type: String,
+      required: true
+    },
+    customizedIconColor: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <q-select
+    v-model="visibleColumnsData"
+    multiple
+    outlined
+    dense
+    options-dense
+    :display-value="$q.lang.table.columns"
+    emit-value
+    map-options
+    :options="columns"
+    option-value="name"
+    options-cover
+    class="selectColumns"
+    options-selected-class="addicional-visible-columns"
+    @update:model-value="onSelectVisibleColumns"
+  >
+    <template #option="scope">
+      <q-item
+        v-bind="scope.itemProps"
+        :class="scope.opt.required ? 'required-table-columns' : ''"
+      >
+        <q-item-section>
+          <q-item-label>{{ scope.opt.label }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+<script lang="ts">
+export default {
+  name: 'TableColumnsSelector',
+  props: {
+    columns: {
+      type: Array
+    },
+    visibleColumns: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ['onSelectVisibleColumns'],
+  data () {
+    return {
+      visibleColumnsData: [] as { name: string; required: boolean; label: string }[]
+    }
+  },
+  watch: {
+    visibleColumns (value): void {
+      this.visibleColumnsData = value
+    }
+  },
+  methods: {
+    onSelectVisibleColumns (columns: string[]): void {
+      this.$emit('onSelectVisibleColumns', columns)
+    }
+  }
+}
+</script>
+<style scoped>
+.q-select {
+  width: 250px;
+  min-width: 150px;
+  flex: 1;
+}
+@media only screen and (max-width: 1100px) {
+  .q-select {
+    padding-top: 5px;
+  }
+}
+</style>

package/src/components/K-Table/components/TableFilter.vue

@@ -0,0 +1,74 @@
+<template>
+  <q-input
+    ref="filterRef"
+    v-model="localStore.valueInputFilterTable"
+    borderless
+    dense
+    debounce="300"
+    class="auto-width"
+    placeholder="Search"
+    outlined
+  >
+    <template #append>
+      <q-icon
+        v-if="localStore.valueInputFilterTable === ''"
+        name="search"
+        color="black"
+      />
+      <q-icon
+        v-else
+        name="clear"
+        class="cursor-pointer"
+        @click="cleanSearchValue"
+      />
+    </template>
+  </q-input>
+</template>
+<script lang="ts">
+import type { QInput } from 'quasar'
+export default {
+  name: 'TableFilter',
+  props: {
+    store: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      localStore: this.store
+    }
+  },
+  beforeMount () {
+    this.localStore.disableScannerButtons = false
+    this.localStore.valueInputFilterTable = ''
+    this.localStore.lastFilterValue = ''
+  },
+  mounted () {
+  },
+  methods: {
+    inputFocus () {
+      setTimeout(() => {
+        const input = this.$refs.filterRef as QInput
+        input.focus()
+      }, 10)
+    },
+    cleanSearchValue () {
+      this.localStore.valueInputFilterTable = ''
+      this.localStore.lastFilterValue = ''
+    }
+  }
+}
+</script>
+<style scoped>
+.q-input {
+  width: 250px;
+  flex: 1;
+
+}
+@media only screen and (max-width: 1100px) {
+  .q-input {
+    padding-top: 5px;
+  }
+}
+</style>