app/ayanova/src/components/inventorywidgettop.vue

@@ -1,6 +1,76 @@
 <template>
   <v-flex xs12 md12>
     <div>
+      <v-toolbar flat>
+        <v-toolbar-title>
+          <v-icon large color="primary">fa-splotch</v-icon>Widgets
+        </v-toolbar-title>
+        <v-divider class="mx-2" inset vertical></v-divider>
+        <v-spacer></v-spacer>
+
+        <v-btn icon>
+          <v-icon>fa-filter</v-icon>
+        </v-btn>
+
+        <v-btn icon>
+          <v-icon>apps</v-icon>
+        </v-btn>
+
+        <v-btn icon>
+          <v-icon>refresh</v-icon>
+        </v-btn>
+
+        <v-btn icon>
+          <v-icon>fa-ellipsis-v</v-icon>
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-dialog v-model="dialog" max-width="500px">
+          <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-icon large color="secondary">fa-ellipsis-v</v-icon>
+          </v-btn>
+          <v-card>
+            <v-card-title>
+              <span class="headline">{{ formTitle }}</span>
+            </v-card-title>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.name" label="Name"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.serial" label="Serial"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.dollarAmount" label="Price"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-checkbox v-model="editedItem.active" label="Active"></v-checkbox>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.roles" label="Roles"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.startDate" label="Start date"></v-text-field>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn icon large dark @click="close">
+                <v-icon large class="mr-5" color="secondary">fa-ban</v-icon>
+              </v-btn>
+              <v-btn icon large dark @click="save">
+                <v-icon large class="mr-3" color="secondary">fa-save</v-icon>
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-toolbar>
       <v-data-table
         v-model="selected"
         :headers="headers"
@@ -11,7 +81,7 @@
         :loading="loading"
         class="elevation-1"
       >
-        <template slot="items" slot-scope="props">        
+        <template slot="items" slot-scope="props">
           <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>
@@ -21,7 +91,6 @@
           <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>