Front/fix/popup dialog issues (#344)

* getCategoryUrl function moved to external file

* Consistent pop-up dialogs look and behavior

front/client/components/AddCategoryDialog.vue

@@ -45,13 +45,13 @@
             Cancel
           </v-btn>
           <v-btn
-            title="Submit"
+            title="Create"
             color="info"
             class="add-category-submit-btn"
-            :disabled="!isValid"
+            :disabled="!isValid || !categoryName"
             @click.native="submit"
           >
-            Submit
+            Create
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -66,11 +66,12 @@
       ref="duplicateConfirm"
     >
       This group already has categories with the same name:
-      <a
+      <router-link
         v-for="category in sameNameCategories"
         :key="category.id"
+        :to="`/haskell/${getCategoryUrl(category)}`"
         target="_blank"
-      >{{ category.title }}</a>
+      >{{ category.title }}</router-link>
     </ConfirmDialog>
   </div>
 </template>
@@ -82,6 +83,7 @@ import { Prop, Watch } from 'vue-property-decorator'
 import { CategoryService } from 'client/service/Category'
 import ConfirmDialog from 'client/components/ConfirmDialog.vue'
 import DeferredPromise from 'utils/DeferredPromise'
+import getCategoryUrl from 'client/helpers/getCategoryUrl'
 
 @Component({
   components: {
@@ -157,6 +159,8 @@ export default class AddCategoryDialog extends Vue {
     })
     return promise
   }
+
+  getCategoryUrl = getCategoryUrl
 }
 </script>
 

front/client/components/AddItemDialog.vue

@@ -14,6 +14,7 @@
           lazy-validation
           v-model="isValid"
           @keydown.native.prevent.enter="submit"
+          ref="form"
         >
           <!-- 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 -->
@@ -50,11 +51,11 @@
         </v-btn>
         <v-btn
           color="info"
-          title="Submit"
+          title="Create"
           :disabled="!isValid || !name"
           @click.native="submit"
         >
-          Submit
+          Create
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -91,9 +92,10 @@ export default class AddItemDialog extends Vue {
   }
 
   async submit () {
-    if (!this.isValid || !this.name) {
+    if (!this.$refs.form.validate()) {
       return
     }
+
     const createdId = await this.$store.dispatch('categoryItem/createItem', {
       category: this.categoryId,
       name: this.name,

front/client/components/Categories.vue

@@ -73,14 +73,14 @@
 </template>
 
 <script lang="ts">
-import _groupBy from 'lodash/groupBy'
-import _toKebabCase from 'lodash/kebabCase'
-import _sortBy from 'lodash/sortBy'
-import _fromPairs from 'lodash/fromPairs'
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { ICategoryInfo, CategoryStatus } from 'client/service/Category'
 import AddCategoryDialog from 'client/components/AddCategoryDialog.vue'
+import _groupBy from 'lodash/groupBy'
+import _sortBy from 'lodash/sortBy'
+import _fromPairs from 'lodash/fromPairs'
+import getCategoryUrl from 'client/helpers/getCategoryUrl'
+import { ICategoryInfo, CategoryStatus } from 'client/service/Category'
 
 @Component({
   components: {
@@ -119,9 +119,7 @@ export default class Categories extends Vue {
     this.isAddGroupDialogOpen = true
   }
 
-  getCategoryUrl (category: ICategoryInfo): string {
-    return `${_toKebabCase(category.title)}-${category.id}`
-  }
+  getCategoryUrl = getCategoryUrl
 }
 </script>
 

front/client/components/CategoryItemToolbar.vue

@@ -263,7 +263,13 @@ export default class CategoryItemToolbar extends Vue {
     return this.itemLink === trimmed ? this.itemLink : normalizeUrl(trimmed)
   }
 
-  @Confirm({ text: 'delete this item' })
+  @Confirm({
+    text: 'delete this item',
+    confirmBtnText: 'Delete',
+    confirmBtnProps: {
+      color: 'error'
+    }
+  })
   async deleteItem (): Promise<void> {
     await this.$store.dispatch('categoryItem/deleteItemById', this.itemUid)
     await this.$store.dispatch('category/reloadCategory')

front/client/components/CategoryItemTraits.vue

@@ -176,7 +176,13 @@ export default class CategoryItemTraits extends Vue {
     await this.$store.dispatch('category/reloadCategory')
   }
 
-  @Confirm({ text: 'delete this trait' })
+  @Confirm({
+    text: 'delete this trait',
+    confirmBtnText: 'Delete',
+    confirmBtnProps: {
+      color: 'error'
+    }
+  })
   async deleteTrait (trait: any) {
     await this.$store.dispatch('categoryItem/deleteItemTrait', {
       itemId: this.itemId,

front/client/helpers/getCategoryUrl.ts

@@ -0,0 +1,11 @@
+import _toKebabCase from 'lodash/kebabCase'
+import { ICategoryInfo } from 'client/service/Category'
+
+interface IGetCategoryUrl {
+  title: ICategoryInfo['title']
+  id: ICategoryInfo['id']
+}
+
+export default function getCategoryUrl ({ title, id }: IGetCategoryUrl): string {
+  return `${_toKebabCase(title)}-${id}`
+}