Render only one addCategoryDialog element

front/client/components/AddCategoryDialog.vue

@@ -1,6 +1,7 @@
 <template>
   <v-dialog
-    v-model="isDialogOpen"
+    :value="value"
+    @input="close"
     max-width="500px"
   >
 
@@ -14,10 +15,10 @@
           v-model="isValid"
           @keydown.native.enter="submit"
         >
-        <!-- v-if="isDialogOpen" - cause  without it autofocus triggers on first modal open
+        <!-- v-if="value" - cause without it autofocus triggers on first modal open
           https://stackoverflow.com/questions/51472947/vuetifys-autofocus-works-only-on-first-modal-open -->
           <v-text-field
-            v-if="isDialogOpen"
+            v-if="value"
             class="mb-2"
             label="Category name"
             autofocus
@@ -44,7 +45,7 @@
         <v-btn
           flat
           color="primary"
-          @click.native="isDialogOpen = false"
+          @click.native="close"
         >
           Cancel
         </v-btn>
@@ -60,31 +61,22 @@ import { CategoryService } from 'client/service/Category'
 @Component
 export default class AddCategoryDialog extends Vue {
   @Prop(String) groupName!: string
+  @Prop(Boolean) value!: boolean
 
   groupNameInternal: string = this.groupName || ''
   categoryName: string = ''
   categoryValidationRules: Function[] = [
     (x: string) => !!x || `Category name can't be empty`
   ]
-  isDialogOpen: boolean = false
   isValid: boolean = false
 
-  @Watch('groupName')
-  onGroupNameChanged(newVal: string) {
-    this.groupNameInternal = newVal
+  @Watch('value')
+  onOpen(newVal: string) {
+    this.groupNameInternal = this.groupName
   }
 
-  @Watch('isDialogOpen')
-  onDialogOpenHide(isOpen: boolean) {
-    isOpen ? this.onOpen() : this.onClose()
-  }
-
-  onOpen() {
-    this.groupNameInternal = this.groupName || ''
-  }
-
-  onClose() {
-    this.$refs.form.reset()
+  close() {
+    this.$emit('input', false)
   }
 
   async submit() {
@@ -99,7 +91,7 @@ export default class AddCategoryDialog extends Vue {
     })
     this.$store.dispatch('category/loadCategoryList')
     window.open(`http://aelve.com:4801/haskell/${createdId}`, '_blank')
-    this.isDialogOpen = false
+    this.close()
   }
 }
 </script>

front/client/components/Categories.vue

@@ -80,16 +80,21 @@
             </h6>
           </a-link>
 
-          <add-category-dialog
-            :groupName="groupName"
+          <v-btn
+            class="ml-2 pl-0"
+            color="grey"
+            flat
+            @click.native="openAddCategoryDialog(groupName)"
           >
-            <v-btn class="ml-2 pl-0" flat color="grey">
-              <v-icon class="mr-1" left>add</v-icon>
-              Add new category
-            </v-btn>
-          </add-category-dialog>
+            <v-icon class="mr-1" left>add</v-icon>
+            Add new category
+          </v-btn>
         </div>
       </v-flex>
+      <add-category-dialog
+        v-model="isAddGroupDialogOpen"
+        :groupName="addCategoryGroupName"
+      />
     </v-layout>
   </v-container>
 </template>
@@ -109,6 +114,8 @@ import AddCategoryDialog from 'client/components/AddCategoryDialog.vue'
 })
 export default class Categories extends Vue {
   CategoryStatus = CategoryStatus
+  addCategoryGroupName: string = ''
+  isAddGroupDialogOpen: boolean = false
   // TODO add type for store
   async asyncData() {
     return this.$store.dispatch('category/loadCategoryList')
@@ -124,6 +131,10 @@ export default class Categories extends Vue {
     })
     return groupedByGroupName
   }
+  openAddCategoryDialog(groupName: string) {
+    this.addCategoryGroupName = groupName
+    this.isAddGroupDialogOpen = true
+  }
   groupCategoriesByStatus(categories: ICategory[]): object {
     return _groupBy(categories, 'status')
   }