@modeltables/fontawesome-vuetify 1.0.2 → 1.0.4

package/components/headerFilters/Filters.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { faHashtag } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { isDateTime, isNumber, isString } from '../helpers/instances';
+import Date from '../headerFilters/Date.vue';
+import Number from '../headerFilters/Number.vue';
+import Text from '../headerFilters/Text.vue';
+
+export default {
+    components: {
+        Date,
+        Number,
+        Text,
+        FontAwesomeIcon
+    },
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        filters: {
+            type: Object,
+            required: true
+        },
+        showFilters: {
+            type: Boolean,
+            required: true
+        },
+        key: {
+            type: String,
+            required: false
+        },
+        prop: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            item: this.item,
+            index: this.index,
+            filters: this.filters,
+            showFilters: this.showFilters,
+            key: this.key,
+            hashTag: faHashtag,
+            isString: isString,
+            isNumber: isNumber,
+            isDateTime: isDateTime
+        }
+    },
+    methods: {
+        filterValue(event: any, filter: any){
+            this.$emit('filterValue', event, filter);
+        },
+        filterDate(event: any, filter: any){
+            this.$emit('filterValue', event, filter);
+        }
+    }
+}
+</script>
+<template>
+    <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>
+</template>

package/components/helpers/instances.ts

@@ -0,0 +1,20 @@
+export const isNumber = (n: any) => { 
+    return !isNaN(parseFloat(n)) && !isNaN(n - 0) 
+}
+
+export const 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;
+}
+
+export const isString = (s: any) =>{
+    return typeof s === 'string' || s instanceof String;
+}
+
+export const toDate = (value: any) => {
+    const date = new Date(value);
+    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+}

package/components/search/SearchView.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { faRefresh, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+export default {
+    components: {
+        FontAwesomeIcon: FontAwesomeIcon
+    },
+    props: {
+        showFilters: {
+            type: Boolean,
+            required: true
+        }
+    },
+    data() {
+        return {
+            showFilters: this.showFilters,
+            faSearch: faSearch,
+            reload: faRefresh
+        }
+    },
+    methods: {
+        search(){
+            this.$emit('search');
+        },
+        refresh(){
+            this.$emit('refresh');
+        }
+    }
+}
+</script>
+
+<template>
+    <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>
+
+</template>

package/components/table/TableView.vue

@@ -1,15 +1,17 @@
 <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 { faRefresh, faSearch } 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 Search from '../search/SearchView.vue';
 import Text from '../headerFilters/Text.vue';
 import Number from '../headerFilters/Number.vue';
+import Filters from '../headerFilters/Filters.vue';
 import SortView from '../sort/SortView.vue';
 import PaginationView from '../pagination/PaginationView.vue';
+import DataItem from './data/ItemView.vue';
 
 export default {
   props: {
@@ -80,7 +82,10 @@ export default {
     Text: Text,
     Number: Number,
     SortView: SortView,
-    PaginationView: PaginationView
+    PaginationView: PaginationView,
+    Filters: Filters,
+    DataItem: DataItem,
+    Search: Search
   },
   mounted() {
     this.firstChange = true;
@@ -102,14 +107,9 @@ export default {
     }
   },
   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,
@@ -130,7 +130,6 @@ export default {
       page: this.pagination!.CurrentPage,
       pageCount: this.pagination!.PageCount,
       totalCount:this.pagination!.TotalCount,
-      hashTag: faHashtag,
       showTime: this.showTime,
     };
   },
@@ -192,23 +191,6 @@ export default {
     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;
@@ -298,47 +280,24 @@ export default {
             </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>
+                <Filters 
+                  :item="item" 
+                  :filters="filters" 
+                  :showFilters="showFilters" 
+                  :key="key"
+                  :prop="prop"
+                  @filterValue="filterValue($event, filters[prop])">
+                </Filters>
               </td>
-            </tr>
+            </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>
+                <DataItem 
+                  :item="item" 
+                  :prop="prop" 
+                  :key="key"
+                  :index="index">
+                </DataItem>
               </td>
             </tr>
           </template>

package/components/table/data/ItemView.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { isDateTime, toDate } from '../../helpers/instances';
+    export default {
+        props: {
+            item: {
+                type: Object,
+                required: true
+            },
+            index: {
+                type: Number,
+                required: true
+            },
+            prop: {
+                type: String,
+                required: true
+            },
+            key: {
+                type: String,
+                required: false
+            }
+        },
+        data() {
+            return {
+                item: this.item,
+                index: this.index,
+                prop: this.prop,
+                key: this.key,
+                isDateTime: isDateTime,
+                toDate: toDate
+            }
+        }
+    }
+
+</script>
+<template>
+    <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>
+</template>