@modeltables/fontawesome-vuetify 1.7.0 → 1.9.0

package/components/dataSets/dataSetHeader.ts

@@ -0,0 +1,7 @@
+export class DataSetItems {
+    id: number = 0;
+    startPosition: boolean = false;
+    selected: boolean = false;
+    rowClass: string = '';
+    dataItem: Object = Object.assign({});
+}

package/components/dataSets/dataSetItems.ts

@@ -0,0 +1,7 @@
+import { HeaderModel } from "../models/tablemodels";
+
+export class DataSetHeader {
+    id: number = 0;
+    startPosition: boolean = false;
+    dataHeader: HeaderModel = new HeaderModel();
+}

package/components/headerFilters/Date.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { faCalendar } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
     export default {
         props: {
             data: {
@@ -15,6 +16,9 @@
                 required: true
             }
         },
+        components: {
+            FontAwesomeIcon: FontAwesomeIcon
+        },
         data() {
             return {
                 data: this.data,
@@ -33,7 +37,7 @@
 </script>
 
 <template>
-    <v-date-input :prepend-icon="''" label="Date input" @save="filterDate($event)" :v-model="data" :model-value="filter">
+    <v-date-input :prepend-icon="''" @save="filterDate($event)" :v-model="data" :model-value="filter">
         <template v-if="calendar" #prepend-inner>
             <FontAwesomeIcon :icon="calendar" />
         </template>

package/components/helpers/instances.ts

@@ -17,4 +17,14 @@ export const isString = (s: any) =>{
 export const toDate = (value: any) => {
     const date = new Date(value);
     return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
-}
+}
+
+export const isEqual = (object1: Object, object2: Object) => {
+    for(let prop1 of Object.keys(object1)){
+        if(object1[prop1] != object2[prop1]){
+            return false;
+        }
+    }
+
+    return true;
+}

package/components/helpers/resources.ts

@@ -2,4 +2,8 @@ export const change = 'change';
 export const load = 'load';
 export const rowClick = 'rowClick';
 export const search = 'search';
+export const itemSelection = 'itemSelection';
+export const multiSelection = 'multiSelection';
+export const selectedRow = 'selected-row';
+export const rowClass = 'row-class';
 export const Id = 'Id';

package/components/models/tablemodels.d.ts

@@ -22,6 +22,7 @@ export declare class PaginatedResponse<T> {
 export declare class Options {
     Key?: string;
     ShowKey: boolean;
+    SelectedKey?: string;
     Name?: string;
     Active: boolean;
 }

package/components/models/tablemodels.js

@@ -28,6 +28,7 @@ export class PaginatedResponse {
 export class Options {
   constructor() {
     this.Key = "Id";
+    this.SelectedKey = "Selected",
     this.Name = undefined;
     this.ShowKey = false;
     this.Active = true;

package/components/models/tablemodels.ts

@@ -21,7 +21,8 @@ export class PaginatedResponse<T>{
 
 export class Options{
     Key?: string;
-    ShowKey: boolean;
+    SelectedKey?: string;
+    ShowKey: boolean = false;
     Name?: string;
-    Active: boolean;
-}
+    Active: boolean = false;
+}

package/components/sort/SortView.vue

@@ -12,20 +12,24 @@ export default {
             required: true,
             default: () => new Options()
         },
-        prop: {
+        dataHeader: {
             type: Object,
             required: true
         },
-        index: {
+        id: {
             type: Number,
             required: true
+        },
+        startPosition: {
+            type: Boolean,
+            required: true
         }
     },
     data() {
         return {
             key: this.key,
-            prop: this.prop,
-            index: this.index,
+            dataHeader: this.dataHeader,
+            id: this.id,
             carretDown: faCaretDown,
             carretUp: faCaretUp
         }
@@ -44,21 +48,21 @@ export default {
 </script>
 
 <template>
-    <div v-if="index > 0" 
+    <div v-if="!startPosition" 
         style="display: flex">
-        {{ prop.title }} 
-        <div v-if="prop.sort">
-            <FontAwesomeIcon @click="sort($event, prop, index)" :icon="carretDown"></FontAwesomeIcon>
+        {{ dataHeader.title }} 
+        <div v-if="dataHeader.sort">
+            <FontAwesomeIcon @click="sort($event, dataHeader, id)" :icon="carretDown"></FontAwesomeIcon>
         </div>
         <div v-else>
-            <FontAwesomeIcon @click="sort($event, prop, index)" :icon="carretUp"></FontAwesomeIcon>
+            <FontAwesomeIcon @click="sort($event, dataHeader, id)" :icon="carretUp"></FontAwesomeIcon>
         </div>
     </div>
     <div v-else-if="options.Active">
-        {{ prop.title }}
+        {{ dataHeader.title }}
     </div>
     <div v-else>
-        {{ prop.title }}
+        {{ dataHeader.title }}
     </div>
     
 </template>

package/components/table/TableView.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
 import { ref } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { faRefresh, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { faRefresh, faSearch, faIndent, faCheck } from '@fortawesome/free-solid-svg-icons'; 
+import { faSquare } from '@fortawesome/free-regular-svg-icons';
 import { HeaderModel, Options } from '@/components/models/tablemodels';
 import { PaginatonModel } from '@/components/models/tablemodels';
-import { change, load, rowClick, search } from '@/components/helpers/resources';
+import { change, itemSelection, load, multiSelection, rowClass, rowClick, search, selectedRow } from '@/components/helpers/resources';
 import Date from '@/components/headerFilters/Date.vue';
 import Search from '@/components/search/SearchView.vue';
 import Text from '@/components/headerFilters/Text.vue';
@@ -13,6 +14,9 @@ import Filters from '@/components/headerFilters/Filters.vue';
 import SortView from '@/components/sort/SortView.vue';
 import PaginationView from '@/components/pagination/PaginationView.vue';
 import DataItem from '@/components/table/data/ItemView.vue';
+import { isEqual } from '../helpers/instances';
+import { DataSetItems } from '../dataSets/dataSetHeader';
+import { DataSetHeader } from '../dataSets/dataSetItems';
 
 export default {
   props: {
@@ -74,6 +78,21 @@ export default {
       type: Boolean,
       required: false,
       default: () => false
+    },
+    select: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
+    multiSelect: {
+      type: Boolean,
+      required: false,
+      default: () => false,
+    },
+    selectedItems: {
+      type: Array<Object>,
+      required: false,
+      default: () => []
     }
   },
   components: {
@@ -93,28 +112,38 @@ export default {
   },
   watch: {
     dataItems(newValue, oldValue) {
-      this.dataItems = newValue;
+      this.initData(newValue);
       if(this.firstChange){
         this.initFilters();
         this.firstChange = false;
+        setTimeout(() => {
+          this.loaded = true;
+        }, 800)
       }
     },
+    dataSetItems(newValue, oldValue){
+      this.dataSetItems = newValue;
+    },
     pagination(newValue: PaginatonModel, oldValue) {
-      console.log(newValue);
       this.page = newValue.CurrentPage;
       this.perPage = newValue.PerPage;
       this.pageCount = newValue.PageCount;
       this.totalCount = newValue.TotalCount;
     }
   },
-  emits: [change, load, rowClick, search],
+  emits: [change, load, rowClick, search, itemSelection, multiSelection],
   data() {
-    console.log(this.options);
     return {
+      selectedProp: this.options.SelectedKey!,
+      rowClass: rowClass,
       dataheader: this.dataheader,
       dataItems: this.dataItems,
       dialog: false,
+      selected: this.selectedItems,
       new: true,
+      dataSetItems: [] as DataSetItems[],
+      dataSetHeaders: [] as DataSetHeader[],
+      loaded: false,
       options: this.options,
       name: this.name,
       currentId: this.currentId,
@@ -122,17 +151,22 @@ export default {
       loading: this.loading,
       faSearch: faSearch,
       reload: faRefresh,
+      faIndent: faIndent,
+      faCheck: faCheck,
+      faSquare: faSquare,
       lastItem: {},
       completes: this.completes,
       filters: { CurrentPage: 1, PerPage: 10, SortColumn: '', SortDirection: 1 } as any,
       showFilters: this.showFilters,
       modelValue: ref([]),
       firstChange: true,
+      multiSelected: false,
       perPage: this.pagination!.PerPage,
       page: this.pagination!.CurrentPage,
       pageCount: this.pagination!.PageCount,
       totalCount:this.pagination!.TotalCount,
       showTime: this.showTime,
+      isEqual: isEqual
     };
   },
   methods: {
@@ -151,6 +185,44 @@ export default {
         this.filters[prop] = null;
       }
     },
+    initData(dataItems){
+      let dataSetItems = [] as DataSetItems[];
+
+      for(let [index, item] of dataItems.entries()){
+        let dataSet = new DataSetItems();
+        dataSet.id = index + 1;
+        dataSet.selected = false;
+        dataSet.rowClass = '';
+        dataSet.dataItem = item
+        
+        if(dataSet.id == 1){
+          dataSet.startPosition = true;
+        }
+
+        dataSetItems = [...dataSetItems, dataSet];
+      }
+
+      this.dataSetItems = dataSetItems;
+      this.dataItems = dataItems;
+
+    },
+    initHeaders() {
+      let dataSetHeaders = [] as DataSetHeader[];
+
+      for(let [index, item] of this.dataheader.entries()){
+        let dataHeader = new DataSetHeader();
+        dataHeader.id = index + 1;
+        dataHeader.dataHeader = item;
+        
+        if(dataHeader.id == 1) {
+          dataHeader.startPosition = true;
+        }
+
+        dataSetHeaders = [...dataSetHeaders, dataHeader];
+      }
+
+      this.dataSetHeaders = dataSetHeaders;
+    },
     initFilters() {
       let item = this.dataItems[0];
       for(let key of Object.keys(item)){
@@ -164,21 +236,33 @@ export default {
         this.$emit(search, this.filters);
       }
     },
-    async updateItem(item: any, event: any){
-      event.preventDefault();
+    async updateItem(item: DataSetItems, index: number){
       if(!this.crud){
-        this.rowClick(item);
+        this.rowClick(item.dataItem);
       }else{
-        this.currentId = item[this.options.Key!];
-        this.$emit(change, item);
+        this.currentId = item.dataItem[this.options.Key!];
+        this.$emit(change, item.dataItem);
       }
-    },
-    filterDate(event: any, dataItem: any){
-      let item = dataItem;
-      if(item != null){
-        dataItem = event == '' ? null : new window.Date(event);
-      }else{
-        dataItem = new window.Date(event);
+      
+      if(this.select){
+        for(let dataSet of this.dataSetItems){
+          dataSet.rowClass = '';
+        }
+
+        item.rowClass = selectedRow;
+        this.$emit(itemSelection, item.dataItem);
+      }
+
+      if(this.multiSelect){
+        item.selected = !item.selected;
+
+        if(item.rowClass == selectedRow){
+          item.rowClass = '';
+        }else{
+          item.rowClass = selectedRow;
+        }
+
+        this.$emit(multiSelection, this.dataSetItems.filter(dataSet => dataSet.selected).map(dataSet => { return dataSet.dataItem } ));
       }
     },
     filterValue(event: any, dataItem: any){
@@ -190,9 +274,12 @@ export default {
         dataItem = value;
       }
     },
-    isActive(index){
-      if(!this.options.Active && !this.options.ShowKey){
-        return index > 0;
+    filterDate(event: any, dataItem: any){
+      let item = dataItem;
+      if(item != null){
+        dataItem = event == '' ? null : new window.Date(event);
+      }else{
+        dataItem = new window.Date(event);
       }
     },
     optionschange(event: any){
@@ -239,8 +326,22 @@ export default {
       prop.sort = !prop.sort;
       this.filters.SortColumn = Object.keys(this.dataItems[0])[index];
       this.filters.SortDirection = window.Number(prop.sort);
-      console.log(this.filters);
       this.search();
+    },
+    selectItem(event){
+      console.log(event);
+    },
+    multiSelectItems(event){
+      for(const value of this.dataSetItems){
+        if(!this.multiSelected){
+          value.selected = true;
+          value.rowClass = selectedRow;
+        }else{
+          value.selected = false;
+          value.rowClass = '';
+        }
+      }
+      this.multiSelected = !this.multiSelected;
     }
   }
 }
@@ -259,59 +360,80 @@ export default {
       </v-row>
       <v-row>
         <v-data-table 
+          v-if="loaded"
+          @update:options="optionschange($event)"
+          :v-bind:loading-text="'Loading... Please wait'"
           :color="'white'"
           :striped="'odd'"
-          :v-bind:loading-text="'Loading... Please wait'"
           :loading="loading"
           :v-bind:model-value="modelValue"
           :items="dataItems"
-          @update:options="optionschange($event)"
           :items-per-page="perPage"
           :page="page"
           hide-default-header
           hide-default-footer
           multi-sort
+          hover
           return-object> 
-          <template v-slot:item="{ item, index }" >
-            <tr v-if="index == 0 && showFilters" class="filter-items" >
-              <td v-for="(prop, index) in dataheader" 
-                  v-if="isActive(index)">
-                <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)" 
-                  v-if="isActive(index)">
-                <Filters
-                  :item="item" 
-                  :filters="filters" 
-                  :showFilters="showFilters" 
-                  :options="options"
-                  :prop="prop"
-                  @filterDate="filterDate($event, filters[prop])"
-                  @filterValue="filterValue($event, filters[prop])">
-                </Filters>
-              </td>
-            </tr>
-            <tr @dblclick="updateItem(item, $event)">
-              <td v-for="(prop, index) in Object.keys(item)"  
-                  v-if="isActive(index)">
-                <DataItem
-                  :item="item" 
-                  :prop="prop" 
-                  :options="options"
-                  :index="index">
-                </DataItem>
-              </td>
-            </tr>
+          <template v-slot:item="{ item, index }">
+            <template v-for="dataSet in dataSetItems" :v-bind="item" v-bind:key="dataSet.id">
+              <template v-if="isEqual(item, dataSet.dataItem)">
+                <tr v-if="dataSet.startPosition && showFilters" class="filter-items" >
+                  <td v-if="multiSelect" @click="multiSelectItems($event)">
+                    <FontAwesomeIcon v-if="multiSelected" :icon="faCheck"></FontAwesomeIcon>
+                    <FontAwesomeIcon v-else :icon="faSquare"></FontAwesomeIcon>
+                  </td>
+                  <td v-for="(item, index) in dataheader">
+                    <SortView 
+                      :dataHeader="item" 
+                      :startPosition="index < 1"
+                      :id="index" 
+                      @sort="sort($event, item, index)">
+                    </SortView>
+                  </td>
+                </tr>
+                <tr v-if="dataSet.startPosition && showFilters" class="filter-items" >
+                  <td v-if="multiSelect">
+                  </td>
+                  <td v-for="prop in Object.keys(dataSet.dataItem)">
+                    <Filters 
+                      :item="dataSet.dataItem" 
+                      :filters="filters" 
+                      :showFilters="showFilters" 
+                      :options="options"
+                      :prop="prop"
+                      @filterValue="filterValue($event, filters[prop])">
+                    </Filters>
+                  </td>
+                </tr>
+                <tr @click="updateItem(dataSet, dataSet.id!)" :class="dataSet.rowClass">
+                  <td v-if="multiSelect" v-bind="dataSet.dataItem">
+                    <FontAwesomeIcon v-if="dataSet.selected" :icon="faCheck"></FontAwesomeIcon>
+                    <FontAwesomeIcon v-else :icon="faSquare"></FontAwesomeIcon>
+                  </td>
+                  <td v-for="(prop) in Object.keys(dataSet.dataItem)">
+                    <DataItem 
+                      :item="dataSet.dataItem" 
+                      :prop="prop" 
+                      :options="options"
+                      :id="dataSet.id!">
+                    </DataItem>
+                  </td>
+                </tr>
+              </template>
+            </template>
           </template>
         </v-data-table>
+        <v-data-table-server 
+          v-else
+          :items-length="0"
+          item-key="name"
+          loading-text="Loading... Please wait"
+          loading>
+        </v-data-table-server>
       </v-row>
       <PaginationView 
+        v-if="loaded"
         :page="page" 
         :perPage="perPage" 
         :pageCount="pageCount" 
@@ -355,4 +477,8 @@ export default {
   height: 56px;
 }
 
+.selected-row{
+  background-color: rgb(209, 208, 208);
+}
+
 </style>

package/components/table/data/ItemView.vue

@@ -8,7 +8,7 @@
                 type: Object,
                 required: true
             },
-            index: {
+            id: {
                 type: Number,
                 required: true
             },
@@ -26,8 +26,8 @@
             item(newValue: any, oldValue: any) {
                 this.item = newValue;
             },
-            index(newValue: any, oldValue: any) {
-                this.index = newValue;
+            id(newValue: any, oldValue: any) {
+                this.id = newValue;
             },
             prop(newValue: any, oldValue: any) {
                 this.prop = newValue;
@@ -36,7 +36,7 @@
         data() {
             return {
                 item: this.item,
-                index: this.index,
+                id: this.id,
                 prop: this.prop,
                 options: this.options,
                 isDateTime: isDateTime,
@@ -51,7 +51,7 @@
         {{ item[prop] }}
     </span>
     <span v-else-if="prop == options.Key! && options.Active">
-        {{ index + 1 }}
+        {{ id }}
     </span>
     <span v-else-if="isDateTime(item[prop])">
         {{ toDate(item[prop]) }}