ayanova/src/components/gz-data-table.vue

@@ -1,16 +1,66 @@
 <template>
-  <v-data-table
+  <div>
-    caption="My Caption here"
+    <div>caption: {{ caption }}</div>
-    :headers="headers"
+    <div>apiBaseUrl: {{ apiBaseUrl }}</div>
-    :items="records"
+    <div>formKey: {{ formKey }}</div>
-    :options.sync="options"
+    <div>dataListKey: {{ dataListKey }}</div>
-    :server-items-length="totalRecords"
+    <div>viewPort is XS: {{ isXS() }}</div>
-    :loading="loading"
+    <v-data-table
-    class="elevation-1"
+      :caption="caption"
-  ></v-data-table>
+      :headers="headers"
+      :items="records"
+      :options.sync="options"
+      :server-items-length="totalRecords"
+      :loading="loading"
+      class="elevation-1"
+    ></v-data-table>
+  </div>
 </template>
 
 <script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+export default {
+  created() {
+    //console.log("gz-data-table viewport is XS = " + this.isXS());
+  },
+  data() {
+    return {
+      loading: true,
+      options: {},
+      headers: [],
+      totalRecords: 0,
+      records: []
+    };
+  },
+  props: {
+    apiBaseUrl: {
+      type: String,
+      default: "DataList/List"
+    },
+    formKey: String,
+    dataListKey: String,
+    caption: String
+    // ,
+    // rowsPerPage: {
+    //   type: Number,
+    //   default: 100
+    // }
+    // likes: Number,
+    // isPublished: Boolean,
+    // commentIds: Array,
+    // author: Object,
+    // callback: Function,
+    // contactsPromise: Promise // or any other constructor
+  },
+  methods: {
+    isXS() {
+      //https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
+      return this.$vuetify.breakpoint.xs;
+    }
+  }
+};
 /*  Xeslint-disable */
 //DataTable component
 //https://vuetifyjs.com/en/components/data-tables#paginate-and-sort-server-side
@@ -40,6 +90,7 @@ What it needs from it's parent form:
     - rows per page
 
 What it needs to provide TO it's parent form
+  - Custom event for this: https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
     - Item click info to trigger opening edit form
     - Selected items list for mass ops
     - error event and message in case of server error or other error so parent can handle it 
@@ -233,24 +284,4 @@ TODO:
 
 
 */
-export default {
-  created() {
-    console.log("gz-data-table viewport is XS = " + this.isXS());
-  },
-  data() {
-    return {
-      loading: true,
-      options: {},
-      headers: [],
-      totalRecords: 0,
-      records: []
-    };
-  },
-  methods: {
-    isXS() {
-      //https://vuetifyjs.com/en/customization/breakpoints#breakpoint-service-object
-      return this.$vuetify.breakpoint.xs;
-    }
-  }
-};
 </script>