app/ayanova/src/components/inventorywidgettop.vue

@@ -1,26 +1,167 @@
 <template>
-    <v-flex xs12 md4>
+  <v-flex xs12 md12>
-        <v-card class="elevation-5 transparent">
+    <div>
-            <v-card-text class="text-xs-center">
+      <v-data-table
-                <v-icon x-large color="secondary">fa-user-astronaut</v-icon>
+        v-model="selected"
-            </v-card-text>
+        :headers="headers"
-            <v-card-title primary-title class="layout justify-center">
+        :items="Items"
-                <div class="headline">Top Widget</div>
+        item-key="id"
-            </v-card-title>
+        :pagination.sync="pagination"
-            <v-card-text>
+        :total-items="totalItems"
-                Cras facilisis mi vitae nunc lobortis pharetra. Nulla volutpat tincidunt ornare.
+        :loading="loading"
-                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+        class="elevation-1"
-                Nullam in aliquet odio. Aliquam eu est vitae tellus bibendum tincidunt. Suspendisse potenti.
+        select-all
-            </v-card-text>
+      >
-        </v-card>
+        <template slot="items" slot-scope="props">
-    </v-flex>
+          <td>
+            <v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
+          </td>
+          <td class="text-xs-left">{{ props.item.name }}</td>
+          <td class="text-xs-left">{{ props.item.serial }}</td>
+          <td class="text-xs-left">{{ props.item.dollarAmount }}</td>
+          <td class="text-xs-left">{{ props.item.active }}</td>
+          <td class="text-xs-left">{{ props.item.roles }}</td>
+          <td class="text-xs-left">{{ props.item.startDate }}</td>
+          <td class="text-xs-left">{{ props.item.endDate }}</td>
+          <td class="justify-center layout px-0">
+            <v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
+            <v-icon small class="mr-3" @click="deleteItem(props.item)">fa-trash-alt</v-icon>
+          </td>
+        </template>
+      </v-data-table>
+    </div>
+  </v-flex>
 </template>
 
+
 <script>
+/*  xeslint-disable */
+import pagedList from "../api/pagedlist";
 export default {
-  data: () => ({})
+  data() {
+    return {
+      dialog: false,
+      editedIndex: -1,
+      editedItem: {
+        name: "",
+        serial: 0,
+        dollarAmount: 0,
+        active: true,
+        roles: 0,
+        startDate: undefined,
+        endDate: undefined
+      },
+      defaultItem: {
+        name: "",
+        serial: 0,
+        dollarAmount: 0,
+        active: true,
+        roles: 0,
+        startDate: new Date(),
+        endDate: undefined
+      },
+      totalItems: 0,
+      Items: [],
+      loading: true,
+      pagination: {},
+      selected: [],
+      headers: [
+        {
+          text: "Widget",
+          value: "name"
+        },
+        { text: "Serial", value: "serial" },
+        { text: "Price", value: "dollarAmount" },
+        { text: "Active", value: "active" },
+        { text: "Roles", value: "roles" },
+        { text: "Start date", value: "startDate" },
+        { text: "End date", value: "endDate" }
+      ]
+    };
+  },
+  watch: {
+    pagination: {
+      handler() {
+        this.getDataFromApi();
+        /*
+        {
+        descending: false,
+        page: 1,
+        rowsPerPage: 5,
+        sortBy: "name",
+        totalItems: 0
+      }
+        */
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getDataFromApi();
+  },
+  computed: {
+    formTitle() {
+      return this.editedIndex === -1 ? "New Item" : "Edit Item";
+    }
+  },
+  methods: {
+    toggleAll() {
+      if (this.selected.length) this.selected = [];
+      else this.selected = this.Items.slice();
+    },
+    getDataFromApi() {
+      var listOptions = {
+        Offset: 0,
+        Limit: 5
+      };
+
+      if (this.pagination.rowsPerPage && this.pagination.rowsPerPage > 0) {
+        listOptions.Offset =
+          (this.pagination.page - 1) * this.pagination.rowsPerPage;
+        listOptions.Limit = this.pagination.rowsPerPage;
+      }
+
+      this.loading = true;
+      pagedList.fetch("Widget/ListWidgets", listOptions).then(res => {
+        // debugger;
+        this.loading = false;
+        this.Items = res.data;
+        this.totalItems = res.paging.count;
+      });
+    },
+
+    editItem(item) {
+      this.editedIndex = this.Items.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog = true;
+    },
+
+    deleteItem(item) {
+      const index = this.Items.indexOf(item);
+      confirm("Are you sure you want to delete this item?") &&
+        this.Items.splice(index, 1);
+    },
+
+    close() {
+      this.dialog = false;
+      setTimeout(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      }, 300);
+    },
+
+    save() {
+      if (this.editedIndex > -1) {
+        Object.assign(this.Items[this.editedIndex], this.editedItem);
+      } else {
+        this.Items.push(this.editedItem);
+      }
+      this.close();
+    }
+  }
 };
 </script>
 
+
 <style>
 </style>

app/ayanova/src/components/widgetlist.vue

@@ -11,7 +11,7 @@
           <v-btn slot="activator" icon large dark class="mb-2">
             <v-icon large color="secondary">fa-plus-circle</v-icon>
           </v-btn>
-          <v-btn  slot="activator" icon large dark class="mb-2">
+          <v-btn slot="activator" icon large dark class="mb-2">
             <v-icon large color="secondary">fa-ellipsis-v</v-icon>
           </v-btn>
           <v-card>
@@ -20,7 +20,7 @@
             </v-card-title>
             <v-card-text>
               <v-container grid-list-md>
-                <v-layout wrap="">
+                <v-layout wrap>
                   <v-flex xs12 sm6 md4>
                     <v-text-field v-model="editedItem.name" label="Name"></v-text-field>
                   </v-flex>