mirror of
https://github.com/aelve/guide.git
synced 2024-12-22 20:31:31 +03:00
Front/fix/popup dialog issues (#344)
* getCategoryUrl function moved to external file * Consistent pop-up dialogs look and behavior
This commit is contained in:
parent
613ecf8c9a
commit
c8039b898b
@ -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>
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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')
|
||||
|
@ -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,
|
||||
|
11
front/client/helpers/getCategoryUrl.ts
Normal file
11
front/client/helpers/getCategoryUrl.ts
Normal file
@ -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}`
|
||||
}
|
Loading…
Reference in New Issue
Block a user