app/ayanova/src/components/inventorywidgetedit.vue

@@ -0,0 +1,65 @@
+<template>
+  <v-layout row justify-center>
+    <v-dialog v-model="dialog" persistent max-width="600px">
+      <!-- <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn> -->
+      <v-card>
+        <v-card-title>
+          <span class="headline">User Profile</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container grid-list-md>
+            <v-layout wrap>
+              <v-flex xs12 sm6 md4>
+                <v-text-field label="Legal first name*" required></v-text-field>
+              </v-flex>
+              <v-flex xs12 sm6 md4>
+                <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
+              </v-flex>
+              <v-flex xs12 sm6 md4>
+                <v-text-field
+                  label="Legal last name*"
+                  hint="example of persistent helper text"
+                  persistent-hint
+                  required
+                ></v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field label="Email*" required></v-text-field>
+              </v-flex>
+              <v-flex xs12>
+                <v-text-field label="Password*" type="password" required></v-text-field>
+              </v-flex>
+              <v-flex xs12 sm6>
+                <v-select :items="['0-17', '18-29', '30-54', '54+']" label="Age*" required></v-select>
+              </v-flex>
+              <v-flex xs12 sm6>
+                <v-autocomplete
+                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
+                  label="Interests"
+                  multiple
+                ></v-autocomplete>
+              </v-flex>
+            </v-layout>
+          </v-container>
+          <small>*indicates required field</small>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
+          <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-layout>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    dialog: false
+  })
+};
+</script>
+
+<style>
+</style>

app/ayanova/src/components/inventorywidgettop.vue

@@ -6,24 +6,21 @@
           <v-icon large color="primary">fa-splotch</v-icon>
           <span class="hidden-sm-and-down">Widgets</span>
         </v-toolbar-title>
-      
         <v-spacer></v-spacer>
-        <v-btn icon>
+        <v-btn icon @click="newItem()">
           <v-icon>fa-plus-circle</v-icon>
         </v-btn>
-
         <v-btn icon>
           <v-icon>fa-filter</v-icon>
         </v-btn>
-
         <v-btn icon @click="getDataFromApi()">
           <v-icon>fa-sync</v-icon>
         </v-btn>
-
-        <v-btn icon >
+        <v-btn icon>
           <v-icon>fa-ellipsis-v</v-icon>
         </v-btn>
       </v-toolbar>
+      <WidgetEdit/>
       <v-data-table
         v-model="selected"
         :headers="headers"
@@ -55,7 +52,11 @@
 <script>
 /*  xeslint-disable */
 import pagedList from "../api/pagedlist";
+import WidgetEdit from "../components/inventorywidgetedit";
 export default {
+  components: {
+    WidgetEdit
+  },
   data() {
     return {
       dialog: false,
@@ -127,6 +128,11 @@ export default {
       if (this.selected.length) this.selected = [];
       else this.selected = this.Items.slice();
     },
+
+    newItem() {
+      this.WidgetEdit.dialog = true;
+      this.dialog = true;
+    },
     getDataFromApi() {
       var listOptions = {
         Offset: 0,
@@ -147,19 +153,16 @@ export default {
         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(() => {
@@ -167,7 +170,6 @@ export default {
         this.editedIndex = -1;
       }, 300);
     },
-
     save() {
       if (this.editedIndex > -1) {
         Object.assign(this.Items[this.editedIndex], this.editedItem);