mirror of
https://github.com/aelve/guide.git
synced 2024-12-26 06:11:33 +03:00
845a7a671e
* added search results nothing found text * removed external spaces and lines * Item info update
85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<template>
|
|
<v-dialog
|
|
:value="value"
|
|
@input="close"
|
|
max-width="500px"
|
|
>
|
|
<slot slot="activator" />
|
|
|
|
<v-card>
|
|
<v-card-text>
|
|
<v-form
|
|
lazy-validation
|
|
v-model="isValid"
|
|
@keydown.native.prevent.enter="submit"
|
|
>
|
|
<!-- 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="value"
|
|
autofocus
|
|
class="mb-2"
|
|
label="Item name"
|
|
:rules="itemValidationRules"
|
|
v-model="itemName"
|
|
/>
|
|
</v-form>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
flat
|
|
color="primary"
|
|
class="add-cat-submit"
|
|
:disabled="!isValid"
|
|
@click.native="submit"
|
|
>
|
|
Submit
|
|
</v-btn>
|
|
<v-btn
|
|
flat
|
|
color="primary"
|
|
@click.native="close"
|
|
>
|
|
Cancel
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
|
|
|
|
@Component
|
|
export default class AddItemDialog extends Vue {
|
|
@Prop(Boolean) value!: boolean
|
|
@Prop(String) categoryId!: string
|
|
|
|
itemName: string = ''
|
|
|
|
itemValidationRules: Function[] = [
|
|
(x: string) => !!x || 'Item name can not be empty'
|
|
]
|
|
|
|
isValid: boolean = false
|
|
|
|
@Watch('value')
|
|
onOpen (newVal: boolean) {
|
|
this.itemName = ''
|
|
}
|
|
|
|
close () {
|
|
this.$emit('input', false)
|
|
}
|
|
|
|
async submit () {
|
|
await this.$store.dispatch('categoryItem/createItem', {
|
|
category: this.categoryId,
|
|
name: this.itemName
|
|
})
|
|
this.close()
|
|
}
|
|
}
|
|
</script>
|