quasar-factory-lib 0.0.21 → 0.0.23

package/src/pages/TablePage.vue

@@ -1,348 +0,0 @@
-<template>
-  <q-page-container class=" full-width column justify-center">
-    <q-page
-      class="full-width column justify-center align-center items-center"
-      style="height: 70vh;"
-    >
-      <div
-        class="full-width"
-      >
-      <q-btn @click="clearTable">
-        clear
-      </q-btn>
-        <Table
-          ref="table"
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :small-device="false"
-          :store="store"
-          :table-style="tableStyle"
-          :show-skeleton="false"
-          :selection-type="'multiple'"
-          :filter-method="filterMethod"
-          :filter-computed="filter"
-          @on-select-visible-columns="saveSelectedColumns"
-          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
-          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
-          @on-click-button="setItemNotFound"
-        />
-        <q-dialog v-model="showDialog" >
-          <div>
-            <q-btn @click="close">Close</q-btn>
-          <Table
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :small-device="false"
-          :store="store"
-          :table-style="tableStyle"
-          :show-skeleton="false"
-          :selection-type="'multiple'"
-          :filter-method="filterMethod"
-          :filter-computed="filter"
-        />
-          </div>
-        </q-dialog>
-      </div>
-    </q-page>
-  </q-page-container>
-</template>
-<script lang="ts">
-import Table from '../components/Table/Table.vue'
-// import rows from '../testData.js'
-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: {
-    Table
-  },
-  data () {
-    return {
-      showDialog: false,
-      forceRender: false,
-      store: tableStore(),
-      totalPage: 0,
-      pageSize: 20,
-      tableStyle: '',
-      columns: [{
-        name: 'name',
-        required: true,
-        label: 'Dessert (100g serving)',
-        align: 'left',
-        sortable: true
-      },
-      {
-        name: 'available',
-        required: true,
-        label: 'Available',
-        align: 'left',
-        sortable: true,
-        showBasicCheckbox: true
-      },
-      {
-        name: 'booleanIcon',
-        required: true,
-        label: 'Boolean Icon',
-        align: 'left',
-        sortable: true,
-        showCustomizedIcon: true
-      },
-      {
-        name: 'calories',
-        align: 'center',
-        label: 'Calories',
-        field: 'calories',
-        sortable: true,
-        editable: true,
-        showEditIcon: true,
-        popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditInputtype: 'number',
-        popupEditDataCy: '',
-        popupEditMask: '#####'
-      },
-      {
-        name: 'fat',
-        label: 'Fat (g)',
-        field: 'fat',
-        sortable: true,
-        showCustomizedButton: true,
-        btnIcon: 'save',
-        btnEmit: 'onClickButton',
-        dataCy: 'onClickButton',
-        btnColor: 'primary'
-      },
-      {
-        name: 'carbs',
-        label: 'Carbs (g)',
-        field: 'carbs'
-      },
-      {
-        name: 'checked',
-        label: 'Checked',
-        field: 'carbs',
-        sortable: true,
-        required: true,
-        showCustomizedCheckBox: true,
-        checkedIcon: 'check_circle',
-        uncheckedIcon: 'cancel',
-        checkBoxColorCaseTrue: 'positive',
-        checkBoxColorCaseFalse: 'negative',
-        checkBoxDataCy: ''
-      },
-      {
-        name: 'protein',
-        label: 'Protein (g)',
-        field: 'protein',
-        sortable: true,
-        required: true,
-        editable: true,
-        showEditIcon: true,
-        popupEditEmit: 'onSaveValuePopupEdit',
-        popupEditInputtype: 'text',
-        popupEditDataCy: '',
-        showInputPopupEdit: true
-      },
-      {
-        name: 'sodium',
-        label: 'Sodium (mg)',
-        field: 'sodium'
-      },
-      {
-        name: 'calcium',
-        label: 'Calcium (%)',
-        field: 'calcium',
-        sortable: true
-      },
-      {
-        name: 'iron',
-        label: 'Iron (%)',
-        field: 'iron',
-        sortable: true
-      }
-      ],
-      rows: [],
-      rowsData: [
-        {
-          name: 'Frozen Yogurt',
-          booleanIcon: true,
-          available: true,
-          calories: 159,
-          fat: 6.0,
-          carbs: 24,
-          checked: false,
-          protein: 0,
-          sodium: 87,
-          calcium: '14%',
-          iron: '1%'
-        },
-        {
-          name: 'Ice cream sandwich',
-          booleanIcon: true,
-          available: false,
-          calories: 237,
-          fat: 9.0,
-          carbs: 37,
-          checked: false,
-          protein: 4.3,
-          sodium: 129,
-          calcium: '8%',
-          iron: '1%'
-        },
-        {
-          name: 'Eclair',
-          booleanIcon: true,
-          available: true,
-          calories: 262,
-          fat: 16.0,
-          carbs: 23,
-          checked: false,
-          protein: 6.0,
-          sodium: 337,
-          calcium: '6%',
-          iron: '7%'
-        },
-        {
-          name: 'Cupcake',
-          booleanIcon: false,
-          available: false,
-          calories: 305,
-          fat: 3.7,
-          carbs: 67,
-          checked: false,
-          protein: 4.3,
-          sodium: 413,
-          calcium: '3%',
-          iron: '8%'
-        },
-        {
-          name: 'Gingerbread',
-          booleanIcon: true,
-          available: true,
-          calories: 356,
-          fat: 16.0,
-          carbs: 49,
-          checked: false,
-          protein: 3.9,
-          sodium: 327,
-          calcium: '7%',
-          iron: '16%'
-        },
-        {
-          name: 'Jelly bean',
-          booleanIcon: false,
-          available: false,
-          calories: 375,
-          fat: 0.0,
-          carbs: 94,
-          checked: true,
-          protein: 0.0,
-          sodium: 50,
-          calcium: '0%',
-          iron: '0%'
-        },
-        {
-          name: 'Lollipop',
-          booleanIcon: true,
-          available: true,
-          calories: 392,
-          fat: 0.2,
-          carbs: 98,
-          checked: false,
-          protein: 0,
-          sodium: 38,
-          calcium: '0%',
-          iron: '2%'
-        },
-        {
-          name: 'Honeycomb',
-          booleanIcon: true,
-          available: false,
-          calories: 408,
-          fat: 3.2,
-          carbs: 87,
-          checked: true,
-          protein: 6.5,
-          sodium: 562,
-          calcium: '0%',
-          iron: '45%'
-        },
-        {
-          name: 'Donut',
-          booleanIcon: true,
-          available: true,
-          calories: 452,
-          fat: 25.0,
-          carbs: 51,
-          checked: false,
-          protein: 4.9,
-          sodium: 326,
-          calcium: '2%',
-          iron: '22%'
-        },
-        {
-          name: 'KitKat',
-          booleanIcon: false,
-          available: false,
-          calories: 518,
-          fat: 26.0,
-          carbs: 65,
-          checked: true,
-          protein: 7,
-          sodium: 54,
-          calcium: '12%',
-          iron: '6%'
-        }
-      ],
-      visibleColumns: []
-    }
-  },
-  computed: {
-    pageLength (): number {
-      return (this.totalPage + 1) * this.pageSize
-    },
-    filter ():object {
-      return {
-        search: this.store.filterValue,
-        forceRender: this.forceRender
-      }
-    }
-  },
-  mounted () {
-    this.store.cleanTableFilter()
-    this.tableStyle = setTableHeight.setTableHeight()
-    infiniteScroll.handleInfiniteScrollNewTable(this)
-    this.rows = this.rowsData
-    this.visibleColumns = this.store.visiblecolumns
-  },
-  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)
-    },
-    onUpdateBasicCheckboxValue (rows: object []) {
-      console.log(rows, 'onUpdateBasicCheckboxValue')
-    },
-    onUpdateCustomizedCheckboxValue (rows: object []) {
-      console.log(rows, 'onUpdateCustomizedCheckboxValue')
-    },
-    setItemNotFound (rows: object []) {
-      console.log(rows, 'onClickButton')
-      this.showDialog = true
-      this.store.lastFilterValue = this.store.filterValue 
-    },
-    close () {
-      this.showDialog= false
-      this.store.filterValue = this.store.lastFilterValue
-    },
-    clearTable () {
-      this.$refs.table.clearTableSelection()
-    }
-  }
-}
-</script>