add category show

pages/categories/index.vue

@@ -95,6 +95,69 @@
         </v-dialog>
       </div>
       <!-- modal-create -->
+      <v-dialog
+        v-model="dialog3"
+        persistent
+        max-width="600px"
+      >
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">Category</span>
+          </v-card-title>
+          <v-card-text>
+            <v-container>
+              <v-row>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="eName"
+                    label="Name"
+                    readonly
+                  />
+                </v-col>
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="eOrdering"
+                    label="Ordering"
+                    type="number"
+                    readonly
+                  />
+                </v-col>
+                <v-col cols="12">
+                  <v-select
+                    v-model="eParentId"
+                    :items="categories.filter(category => category.parent_id === null && category.id !== eID)"
+                    item-text="name"
+                    item-value="id"
+                    label="Parent"
+                    readonly
+                  />
+                </v-col>
+                <v-col cols="12">
+                  <v-file-input
+                    v-model="eImage"
+                    accept="image/*"
+                    label="Image"
+                    prepend-icon="mdi-camera"
+                    readonly
+                  />
+                </v-col>
+                <v-img v-if="typeof eImage === 'string'" :src="eImage" />
+              </v-row>
+            </v-container>
+            <small>*indicates required field</small>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer />
+            <v-btn
+              color="blue darken-1"
+              text
+              @click="dialog3 = false"
+            >
+              Close
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
       <v-dialog
         v-model="dialog2"
         persistent
@@ -227,12 +290,15 @@
           </v-toolbar>
         </template>
         <template #item.actions="{ item }">
-          <v-icon :id="item.id" small class="mr-2" @click="dialog2 = true; editCategory(item)">
+          <v-icon :id="item.id" small @click="dialog2 = true; editCategory(item)">
             mdi-pencil
           </v-icon>
           <v-icon :id="item.id" small @click="deleteCategory(item.id, item)">
             mdi-delete
           </v-icon>
+          <v-icon :id="item.id" small @click="dialog3 = true; showCategory(item)">
+            mdi-account-details
+          </v-icon>
         </template>
         <template #no-data>
           <v-btn color="primary" @click="initialize">
@@ -256,6 +322,7 @@ export default {
       error: '',
       dialog1: false,
       dialog2: false,
+      dialog3: false,
       dialogDelete: false,
       options: [],
       headers: [
@@ -462,6 +529,12 @@ export default {
       console.log(this.eID)
       console.log(this.eImage)
     },
+    showCategory (item) {
+      this.eName = item.name
+      this.eOrdering = item.ordering
+      this.eParentId = item.parent_id
+      this.eImage = item.images
+    },
     updateCategory (userID) {
       const self = this
       const fd = new FormData()