@modeltables/fontawesome-vuetify 1.0.1

package/components/table/TableView.vue

@@ -0,0 +1,391 @@
+<script lang="ts">
+import { ref } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCalendar } from '@fortawesome/free-regular-svg-icons';
+import { faRefresh, faSearch, faHashtag } from '@fortawesome/free-solid-svg-icons';
+import { HeaderModel, PaginatonModel } from '../models/table-models';
+import { change, Id, load, rowClick, search } from '../helpers/resources';
+import Date from '../headerFilters/Date.vue';
+import Text from '../headerFilters/Text.vue';
+import Number from '../headerFilters/Number.vue';
+import SortView from '../sort/SortView.vue';
+import PaginationView from '../pagination/PaginationView.vue';
+
+export default {
+  props: {
+    dataheader: {
+      type: Array<HeaderModel>,
+    },
+    key: {
+      type: String,
+      required: true,
+      default: () => 'Id'
+    },
+    name: {
+      type: String
+    },
+    dataItems: {
+      type: Array as () => any[],
+      reactive: true,
+      required: true
+    },
+    currentItem: {
+      type: Object,
+      reactive: true,
+      required: false
+      
+    },
+    currentId: {
+      type: Number,
+        reactive: true,
+        required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    crud: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    showFilters: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    },
+    dialogWidth: {
+      type: Number,
+      default: () => 800
+    },
+    itemsPerPage: {
+      type: Number,
+      default: () => 10
+    },
+    pagination: {
+      type: PaginatonModel,
+      required: false,
+      default: () => new PaginatonModel()
+    },
+    showTime: {
+      type: Boolean,
+      required: false,
+      default: () => false
+    }
+  },
+  components: {
+    FontAwesomeIcon: FontAwesomeIcon,
+    Date: Date,
+    Text: Text,
+    Number: Number,
+    SortView: SortView,
+    PaginationView: PaginationView
+  },
+  mounted() {
+    this.firstChange = true;
+    this.load({});
+  },
+  watch: {
+    dataItems(newValue, oldValue) {
+      this.dataItems = newValue;
+      if(this.firstChange){
+        this.initFilters();
+        this.firstChange = false;
+      }
+    },
+    pagination(newValue: PaginatonModel, oldValue) {
+      this.page = newValue.CurrentPage;
+      this.perPage = newValue.PerPage;
+      this.pageCount = newValue.PageCount;
+      this.totalCount = newValue.TotalCount;
+    }
+  },
+  emits: [change, load, rowClick, search],
+  setup(props, params) {
+    const modelValue = ref([]);
+    return { modelValue };
+  },
+  data() {
+    return {
+      dataheader: this.dataheader,
+      calendar: faCalendar,
+      dataItems: this.dataItems,
+      dialog: false,
+      new: true,
+      key: this.key ?? Id,
+      name: this.name,
+      currentId: this.currentId,
+      currentItem: this.currentItem,
+      loading: this.loading,
+      faSearch: faSearch,
+      reload: faRefresh,
+      lastItem: {},
+      completes: this.completes,
+      filters: { CurrentPage: 1, PerPage: 10, SortColumn: '', SortDirection: 1 } as any,
+      showFilters: this.showFilters,
+      modelValue: ref([]),
+      firstChange: true,
+      perPage: this.pagination!.PerPage,
+      page: this.pagination!.CurrentPage,
+      pageCount: this.pagination!.PageCount,
+      totalCount:this.pagination!.TotalCount,
+      hashTag: faHashtag,
+      showTime: this.showTime,
+    };
+  },
+  methods: {
+    rowClick(event: {}){
+      this.$emit(rowClick, event);
+    },
+    load(event: {}){
+      if(this.onLoad) this.onLoad(event);
+    },
+    refresh(){
+      this.clear();
+      this.search();
+    },
+    clear(){
+      for(let prop of Object.keys(this.filters)){
+        this.filters[prop] = null;
+      }
+    },
+    initFilters() {
+      let item = this.dataItems[0];
+      for(let key of Object.keys(item)){
+        this.filters[key] = null;
+      }
+      this.filters.CurrentPage = 0;
+      this.filters.PerPage = 0;
+    },
+    search(){
+      if(this.filters != undefined){
+        this.$emit(search, this.filters);
+      }
+    },
+    async updateItem(item: any, event: any){
+      event.preventDefault();
+      if(!this.crud){
+        this.rowClick(item);
+      }else{
+        this.currentId = item[this.key!];
+        this.$emit(change, item);
+      }
+    },
+    filterValue(event: any, dataItem: any){
+      let item = dataItem;
+      let value = event.target.value;
+      if(item != null){
+        dataItem = value == '' ? null : value;
+      }else{
+        dataItem = value;
+      }
+    },
+    filterDate(event: any, dataItem: any){
+      let item = dataItem;
+      if(item != null){
+        dataItem = event == '' ? null : new window.Date(event);
+      }else{
+        dataItem = new window.Date(event);
+      }
+    },
+    isNumber(n: any) { 
+      return !isNaN(parseFloat(n)) && !isNaN(n - 0) 
+    },
+    isDateTime(d: any){
+      if(/^[\d]{4}-[\d]{2}-[\d]{2}T[\d]{2}:[\d]{2}:[\d]{2}.[\d]+$/.test(d)){
+        let datetime = new window.Date(d);
+        return datetime instanceof window.Date;
+      }
+      return false;
+    },
+    isString(s: any){
+      return typeof s === 'string' || s instanceof String;
+    },
+    toDate(d: any){
+      if(this.showTime){
+        return (new window.Date(d).toLocaleDateString()) + " " + (new window.Date(d).toLocaleTimeString());
+      }
+
+      return (new window.Date(d).toLocaleDateString());
+    },
+    options(event: any){
+      this.page = event!.page;
+      this.filters.CurrentPage = this.page;
+      this.search();
+    },
+    nextPage(event: any){
+      if(this.page < this.pageCount){
+        this.page = this.page + 1;
+        this.filters.CurrentPage = this.page;
+        this.search();
+      }
+    },
+    previousPage(event: any){
+      if(this.page > 1){
+        this.page = this.page - 1;
+        this.filters.CurrentPage = this.page;
+        this.search();
+      }
+    },
+    firstPage(event: any){
+      this.page = 1;
+      this.filters.CurrentPage = this.page;
+      this.search();
+    },
+    lastPage(event: any){
+      this.page = this.pageCount;
+      this.filters.CurrentPage = this.page;
+      this.search();
+    },
+    pageChange(event: any){
+      this.page = event;
+      this.filters.CurrentPage = this.page;
+      this.search();
+    },
+    pageSize(event: any){
+      console.log(event);
+      this.perPage = event;
+      this.filters.PerPage = this.perPage;
+      this.search();
+    },
+    sort(event: any, prop: any, index: number){
+      prop.sort = prop.sort == true ? false : true;
+      this.filters.SortColumn = Object.keys(this.dataItems[0])[index];
+      this.filters.SortDirection = window.Number(prop.sort);
+      console.log(this.filters);
+      this.search();
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <v-container>
+      <v-row style="border-bottom: 1px solid #393E46; padding: 10px">
+        <v-btn @click="search()" style="margin-right: 10px" color="#1697f6" v-if="showFilters" v-tooltip="'Search'">
+          <FontAwesomeIcon :icon="faSearch"></FontAwesomeIcon>
+        </v-btn>
+        <v-btn @click="refresh()" style="margin-right: 10px" color="#1697f6" v-if="showFilters" v-tooltip="'Refresh'">
+          <FontAwesomeIcon :icon="reload"></FontAwesomeIcon>
+        </v-btn>
+      </v-row>
+      <v-row>
+        <v-data-table 
+          :color="'white'"
+          :striped="'odd'"
+          :v-bind:loading-text="'Loading... Please wait'"
+          :loading="loading"
+          :v-bind:model-value="modelValue"
+          :items="dataItems"
+          @update:options="options($event)"
+          :items-per-page="perPage"
+          :page="page"
+          hide-default-header
+          hide-default-footer
+          multi-sort
+          return-object> 
+          <template v-slot:item="{ item, index }" >
+            <tr v-if="index == 0 && showFilters" class="filter-items" >
+              <td v-for="(prop, index) in dataheader">
+                <SortView 
+                  :prop="prop" 
+                  :index="index" 
+                  @sort="sort($event, prop, index)">
+                </SortView>
+              </td>
+            </tr>
+            <tr v-if="index == 0 && showFilters" class="filter-items" >
+              <td v-for="(prop, index) in Object.keys(item)">
+                <span v-if="prop == key!">
+                  <FontAwesomeIcon :icon="hashTag"></FontAwesomeIcon>
+                </span>
+                <span v-else>
+                  <div v-if="isNumber(item[prop])">
+                    <Number 
+                      :filter="filters[prop]" 
+                      :prop="prop":data="filters" 
+                      @filterValue="filterValue($event, filters[prop])">
+                    </Number>
+                  </div>
+                  <div v-else-if="isDateTime(item[prop])">
+                    <Date 
+                      :data="filters" 
+                      :filter="filters[prop]" 
+                      :prop="prop" 
+                      @filterValue="filterDate($event, filters[prop])">
+                    </Date>
+                  </div>
+                  <div v-else-if="isString(item[prop])">
+                    <Text 
+                      :data="filters" 
+                      :filter="filters[prop]"
+                      :prop="prop" 
+                      @filterValue="filterValue($event, filters[prop])">
+                    </Text>
+                  </div>
+                </span>
+              </td>
+            </tr>
+            <tr @dblclick="updateItem(item, $event)">
+              <td v-for="(prop) in Object.keys(item)">
+                <span v-if="prop == key!">
+                    {{ index + 1 }}
+                </span>
+                <span v-else-if="isDateTime(item[prop])">
+                    {{ toDate(item[prop]) }}
+                </span>
+                <span v-else>
+                    {{ item[prop] }}
+                </span>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-row>
+      <PaginationView 
+        :page="page" 
+        :perPage="perPage" 
+        :pageCount="pageCount" 
+        :totalCount="totalCount" 
+        @pageChange="pageChange($event)" 
+        @pageSize="pageSize($event)" 
+        @firstPage="firstPage($event)" 
+        @previousPage="previousPage($event)" 
+        @nextPage="nextPage($event)" 
+        @lastPage="lastPage($event)"/>
+    </v-container>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.filter-items{
+  height: 56px;
+}
+
+.filter-items .v-input__control{
+  height: 56px;
+}
+
+.filter-items span{
+  height: 56px;
+}
+
+.filter-items span div{
+  height: 56px;
+}
+
+.filter-items span div div{
+  height: 56px;
+}
+
+</style>