From c8039b898b0ef08e9edd906ea804260c41ace7b0 Mon Sep 17 00:00:00 2001
From: avele <34437766+avele@users.noreply.github.com>
Date: Wed, 24 Jul 2019 23:38:47 +0400
Subject: [PATCH] Front/fix/popup dialog issues (#344)
* getCategoryUrl function moved to external file
* Consistent pop-up dialogs look and behavior
---
front/client/components/AddCategoryDialog.vue | 14 +++++++++-----
front/client/components/AddItemDialog.vue | 8 +++++---
front/client/components/Categories.vue | 14 ++++++--------
front/client/components/CategoryItemToolbar.vue | 8 +++++++-
front/client/components/CategoryItemTraits.vue | 8 +++++++-
front/client/helpers/getCategoryUrl.ts | 11 +++++++++++
6 files changed, 45 insertions(+), 18 deletions(-)
create mode 100644 front/client/helpers/getCategoryUrl.ts
diff --git a/front/client/components/AddCategoryDialog.vue b/front/client/components/AddCategoryDialog.vue
index 583dae5..ce88887 100644
--- a/front/client/components/AddCategoryDialog.vue
+++ b/front/client/components/AddCategoryDialog.vue
@@ -45,13 +45,13 @@
Cancel
- Submit
+ Create
@@ -66,11 +66,12 @@
ref="duplicateConfirm"
>
This group already has categories with the same name:
- {{ category.title }}
+ >{{ category.title }}
@@ -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
}
diff --git a/front/client/components/AddItemDialog.vue b/front/client/components/AddItemDialog.vue
index a787a9f..f0cc6ea 100644
--- a/front/client/components/AddItemDialog.vue
+++ b/front/client/components/AddItemDialog.vue
@@ -14,6 +14,7 @@
lazy-validation
v-model="isValid"
@keydown.native.prevent.enter="submit"
+ ref="form"
>
@@ -50,11 +51,11 @@
- Submit
+ Create
@@ -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,
diff --git a/front/client/components/Categories.vue b/front/client/components/Categories.vue
index f531064..f644d81 100644
--- a/front/client/components/Categories.vue
+++ b/front/client/components/Categories.vue
@@ -73,14 +73,14 @@
diff --git a/front/client/components/CategoryItemToolbar.vue b/front/client/components/CategoryItemToolbar.vue
index b6c81a1..2c8c0e4 100644
--- a/front/client/components/CategoryItemToolbar.vue
+++ b/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 {
await this.$store.dispatch('categoryItem/deleteItemById', this.itemUid)
await this.$store.dispatch('category/reloadCategory')
diff --git a/front/client/components/CategoryItemTraits.vue b/front/client/components/CategoryItemTraits.vue
index fadf225..99f9219 100644
--- a/front/client/components/CategoryItemTraits.vue
+++ b/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,
diff --git a/front/client/helpers/getCategoryUrl.ts b/front/client/helpers/getCategoryUrl.ts
new file mode 100644
index 0000000..34c39d6
--- /dev/null
+++ b/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}`
+}