Prop fix on ListView

src/components/shared/listView.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <div style="height:5px"></div>
-    <div class="d-flex justify-content-between ">
+    <div class="d-flex justify-content-between">
       <div class="p-2" v-if="!hideSearch">
         <float-label label="SEARCH">
           <input v-model="searchItem" class="form-control uniInput mt-3" placeholder="Search..." />
@@ -14,9 +14,11 @@
       <div class="p-2">
         <div class="d-flex flex-row">
           <div class="p2" v-if="showColumnChooser">
-            <div class="btn-solid-blue cursor-pointer" data-toggle="modal" data-target="#myModal">
-              Column Chooser
-            </div>
+            <div
+              class="btn-solid-blue cursor-pointer"
+              data-toggle="modal"
+              data-target="#myModal"
+            >Column Chooser</div>
             <div class="col-md-12">
               <div id="myModal" class="modal fade" role="dialog">
                 <div class="modal-dialog modal-lg" style="width:500px">
@@ -35,14 +37,10 @@
             </div>
           </div>
           <div class="p2" v-if="selectedItems.length > 0">
-            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">
-              Clear Selected
-            </div>
+            <div class="btn-solid-blue cursor-pointer" @click="onClearSelected()">Clear Selected</div>
           </div>
           <div class="p2" v-if="showNew">
-            <div class="btn-solid-blue cursor-pointer" @click="onNew()">
-              New
-            </div>
+            <div class="btn-solid-blue cursor-pointer" @click="onNew()">New</div>
           </div>
         </div>
       </div>
@@ -64,12 +62,14 @@
                 :class="{ active: hover === c }"
               >
                 <div class="d-flex bd-highlight">
-                  <div v-if="displayHeaders.length === 0" class="p-2 w-100 bd-highlight">
-                    {{ column | toProper }}
-                  </div>
-                  <div v-else class="p-2 w-100 bd-highlight">
-                    {{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}
-                  </div>
+                  <div
+                    v-if="displayHeaders.length === 0"
+                    class="p-2 w-100 bd-highlight"
+                  >{{ column | toProper }}</div>
+                  <div
+                    v-else
+                    class="p-2 w-100 bd-highlight"
+                  >{{ displayHeaders[c] !== "" ? displayHeaders[c] : column | toProper }}</div>
                   <div class="p-2 flex-shrink-1 bd-highlight">
                     <img
                       src="../../../public/img/sort-up.png"
@@ -98,26 +98,28 @@
             :class="{ selected: isSelected(i), 'cursor-pointer': allowSelect }"
           >
             <td v-for="(column, c) in Columns" :key="c">
-              <div v-if="displayFormats.length === 0">
-                {{ isObject(item[column]) ? item[column].display : item[column] }}
-              </div>
+              <div
+                v-if="displayFormats.length === 0"
+              >{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'date'">
-                <div v-if="item[column] !== '0001-01-01T00:00:00'">
-                  {{ isObject(item[column]) ? item[column].display : item[column] | toDate }}
-                </div>
-              </div>
-              <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'">
-                {{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}
+                <div
+                  v-if="item[column] !== '0001-01-01T00:00:00'"
+                >{{ isObject(item[column]) ? item[column].display : item[column] | toDate }}</div>
               </div>
+              <div
+                v-else-if="displayFormats.length > 0 && displayFormats[c] === 'money'"
+              >{{ isObject(item[column]) ? item[column].display : item[column] | toCurrency }}</div>
               <div v-else-if="displayFormats.length > 0 && displayFormats[c] === 'image'">
                 <img :src="item[column]" style="height:100px; width:100px; object-fit: cover;" />
               </div>
               <div v-else>{{ isObject(item[column]) ? item[column].display : item[column] }}</div>
             </td>
             <td v-if="showCustomAction" class="my-width">
-              <button type="button" class="btn my-btn" @click="onCustomClick(item)">
-                {{ CustomActionHeading }}
-              </button>
+              <button
+                type="button"
+                class="btn my-btn"
+                @click="onCustomClick(item)"
+              >{{ CustomActionHeading }}</button>
             </td>
             <td v-if="editable" class="my-width">
               <a @click="onEdit(item)" class="p-3">
@@ -137,10 +139,10 @@
       <div class="d-flex justify-content-between" v-if="showPager">
         <div class="p-1">
           {{
-            currentPage +
-              " / " +
-              PageCount +
-              (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
+          currentPage +
+          " / " +
+          PageCount +
+          (!hideItemCount ? " - (" + FilteredItems.length + " items)" : "")
           }}
         </div>
         <div class="p-1">
@@ -185,7 +187,7 @@ export default {
   components: {
     BasePagination,
     Alert,
-    ListViewControl
+    ListViewControl,
   },
   mounted() {
     try {
@@ -201,72 +203,75 @@ export default {
   },
   props: {
     compact: {
-      default: true
+      default: true,
     },
     allowSelect: {
-      default: true
+      default: true,
     },
     allowMultipleSelect: {
-      default: false
+      default: false,
     },
     hideSearch: {
-      default: false
+      default: false,
     },
     showNew: {
-      default: true
+      default: true,
     },
     items: undefined,
     editable: {
-      default: false
+      default: false,
     },
     deleteable: {
-      default: false
+      default: false,
     },
     columnCount: {
-      default: 6
+      default: 6,
     },
     showPager: {
-      default: true
+      default: true,
     },
     title: {
-      default: undefined
+      default: undefined,
     },
     sortKey: {
-      default: "id"
+      default: "id",
     },
     hideItemCount: {
-      default: false
+      default: false,
     },
     currentPage: {
-      default: 1
+      default: 1,
     },
     bordered: {
-      default: true
+      default: true,
     },
     striped: {
-      default: true
+      default: true,
     },
     showColumnChooser: {
-      default: true
+      default: true,
     },
     displayColumns: {
-      default: []
+      type: Array,
+      default: () => [],
     },
     displayFormats: {
-      default: []
+      type: Array,
+      default: () => [],
     },
     displayHeaders: {
-      default: []
+      type: Array,
+      default: () => [],
     },
     showCustomAction: {
-      default: false
+      default: false,
     },
     CustomActionHeading: {
-      default: ""
+      default: "",
     },
     CustomActionCondition: {
-      default: ""
-    }
+      default: "",
+    },
   },
   data() {
     return {
@@ -279,7 +284,7 @@ export default {
       visibleItemsPerPageCount: 20,
       itemsPerPageList: ItemsPerPageList,
       visibleColumn: [],
-      allColumn: []
+      allColumn: [],
     };
   },
   methods: {
@@ -301,12 +306,16 @@ export default {
         for (const i in Object.keys(this.items)) {
           const item = this.items[i];
           for (const o in Object.keys(item)) {
-            if (!listAll.includes(Object.keys(item)[o]) && !Array.isArray(Object.values(item)[o])) {
+            if (
+              !listAll.includes(Object.keys(item)[o]) &&
+              !Array.isArray(Object.values(item)[o])
+            ) {
               const columnName = Object.keys(item)[o];
-              if (!listAll.some(x => x.column === columnName)) {
+              if (!listAll.some((x) => x.column === columnName)) {
                 listAll.push({
                   column: columnName,
-                  show: _.filter(listAll, x => x.show).length < this.columnCount
+                  show:
+                    _.filter(listAll, (x) => x.show).length < this.columnCount,
                 });
               }
             }
@@ -321,7 +330,7 @@ export default {
     },
     isSelected(i) {
       const ind = this.getActualIndex(i);
-      return _.some(this.selectedItems, x => x === ind);
+      return _.some(this.selectedItems, (x) => x === ind);
     },
     onNew() {
       this.$emit("onNew");
@@ -357,8 +366,8 @@ export default {
     },
     onRowClick(item, i) {
       const ind = this.getActualIndex(i);
-      if (_.some(this.selectedItems, x => x === ind)) {
-        this.selectedItems = this.selectedItems.filter(x => x !== ind);
+      if (_.some(this.selectedItems, (x) => x === ind)) {
+        this.selectedItems = this.selectedItems.filter((x) => x !== ind);
       } else {
         if (!this.allowMultipleSelect) {
           this.selectedItems = [];
@@ -411,7 +420,7 @@ export default {
         if (array[i] === value) return true;
       }
       return false;
-    }
+    },
   },
   computed: {
     ListWidth() {
@@ -438,7 +447,7 @@ export default {
           listColumns.push(this.displayColumns[i]);
         }
       } else {
-        const list = _.filter(this.allColumn, x => x.show);
+        const list = _.filter(this.allColumn, (x) => x.show);
         for (const i in list) {
           const item = list[i];
           if (item) {
@@ -455,9 +464,9 @@ export default {
       return list;
     },
     FilteredItems() {
-      const list = _.filter(this.items, item =>
+      const list = _.filter(this.items, (item) =>
         Object.values(item).some(
-          i =>
+          (i) =>
             JSON.stringify(i)
               .toLowerCase()
               .indexOf(this.searchItem.toLowerCase()) > -1
@@ -475,8 +484,8 @@ export default {
       return list.slice(startSlice, endSlice);
     },
 
-    GetAllColumn() {}
-  }
+    GetAllColumn() {},
+  },
 };
 </script>
 <style scoped>