mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-02 04:39:54 -05:00
started migrating file editor page to generic model list
This commit is contained in:
vabene1111
60
vue/src/components/Modals/FileInput.vue
Normal file
60
vue/src/components/Modals/FileInput.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-form-group
|
||||
v-bind:label="label"
|
||||
class="mb-3">
|
||||
<b-form-file
|
||||
v-model="new_value"
|
||||
type="file"
|
||||
:placeholder="placeholder_text"
|
||||
></b-form-file>
|
||||
|
||||
|
||||
</b-form-group>
|
||||
|
||||
<file-viewer :url="preview_url" v-if="preview_url"></file-viewer>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import FileViewer from "@/components/FileViewer";
|
||||
|
||||
export default {
|
||||
name: "FileInput",
|
||||
components: {FileViewer},
|
||||
props: {
|
||||
field: {type: String, default: 'You Forgot To Set Field Name'},
|
||||
label: {type: String, default: 'Text Field'},
|
||||
value: {type: String, default: ''},
|
||||
placeholder: {type: String, default: ''},
|
||||
show_merge: {type: Boolean, default: false},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
new_value: undefined,
|
||||
placeholder_text: this.placeholder,
|
||||
preview_url: this.value
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.placeholder_text === '') {
|
||||
this.placeholder_text = this.$t('Select_File')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'new_value': function () {
|
||||
if (!(typeof this.new_value === 'string' || this.new_value instanceof String)) { // only update file if it was changed
|
||||
this.preview_url = URL.createObjectURL(this.new_value) //TODO improve creating obj url so file viewer know which type to display
|
||||
this.$root.$emit('change', this.field, this.new_value)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,49 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-modal :id="'modal_'+id" @hidden="cancelAction">
|
||||
<template v-slot:modal-title><h4>{{form.title}}</h4></template>
|
||||
<div v-for="(f, i) in form.fields" v-bind:key=i>
|
||||
<p v-if="f.type=='instruction'">{{f.label}}</p>
|
||||
<!-- this lookup is single selection -->
|
||||
<lookup-input v-if="f.type=='lookup'"
|
||||
:form="f"
|
||||
:model="listModel(f.list)"
|
||||
@change="storeValue"/> <!-- TODO add ability to create new items associated with lookup -->
|
||||
<!-- TODO: add multi-selection input list -->
|
||||
<checkbox-input v-if="f.type=='checkbox'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"/>
|
||||
<text-input v-if="f.type=='text'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
:placeholder="f.placeholder"/>
|
||||
<choice-input v-if="f.type=='choice'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
:options="f.options"
|
||||
:placeholder="f.placeholder"/>
|
||||
<emoji-input v-if="f.type=='emoji'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
@change="storeValue"/>
|
||||
</div>
|
||||
|
||||
<template v-slot:modal-footer>
|
||||
<b-button class="float-right mx-1" variant="secondary" v-on:click="cancelAction">{{$t('Cancel')}}</b-button>
|
||||
<b-button class="float-right mx-1" variant="primary" v-on:click="doAction">{{form.ok_label}}</b-button>
|
||||
</template>
|
||||
</b-modal>
|
||||
</div>
|
||||
<div>
|
||||
<b-modal :id="'modal_'+id" @hidden="cancelAction">
|
||||
<template v-slot:modal-title><h4>{{ form.title }}</h4></template>
|
||||
<div v-for="(f, i) in form.fields" v-bind:key=i>
|
||||
<p v-if="f.type=='instruction'">{{ f.label }}</p>
|
||||
<!-- this lookup is single selection -->
|
||||
<lookup-input v-if="f.type=='lookup'"
|
||||
:form="f"
|
||||
:model="listModel(f.list)"
|
||||
@change="storeValue"/> <!-- TODO add ability to create new items associated with lookup -->
|
||||
<!-- TODO: add multi-selection input list -->
|
||||
<checkbox-input v-if="f.type=='checkbox'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"/>
|
||||
<text-input v-if="f.type=='text'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
:placeholder="f.placeholder"/>
|
||||
<choice-input v-if="f.type=='choice'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
:options="f.options"
|
||||
:placeholder="f.placeholder"/>
|
||||
<emoji-input v-if="f.type=='emoji'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
@change="storeValue"/>
|
||||
<file-input v-if="f.type=='file'"
|
||||
:label="f.label"
|
||||
:value="f.value"
|
||||
:field="f.field"
|
||||
@change="storeValue"/>
|
||||
</div>
|
||||
|
||||
<template v-slot:modal-footer>
|
||||
<b-button class="float-right mx-1" variant="secondary" v-on:click="cancelAction">{{ $t('Cancel') }}</b-button>
|
||||
<b-button class="float-right mx-1" variant="primary" v-on:click="doAction">{{ form.ok_label }}</b-button>
|
||||
</template>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import {BootstrapVue} from 'bootstrap-vue'
|
||||
import {getForm} from "@/utils/utils";
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
import {Models} from "@/utils/models";
|
||||
@@ -52,15 +58,24 @@ import LookupInput from "@/components/Modals/LookupInput";
|
||||
import TextInput from "@/components/Modals/TextInput";
|
||||
import EmojiInput from "@/components/Modals/EmojiInput";
|
||||
import ChoiceInput from "@/components/Modals/ChoiceInput";
|
||||
import FileInput from "@/components/Modals/FileInput";
|
||||
|
||||
export default {
|
||||
name: 'GenericModalForm',
|
||||
components: {CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput},
|
||||
components: {FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput},
|
||||
props: {
|
||||
model: {required: true, type: Object},
|
||||
action: {required: true, type: Object},
|
||||
item1: {type: Object, default () {return undefined}},
|
||||
item2: {type: Object, default () {return undefined}},
|
||||
item1: {
|
||||
type: Object, default() {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
item2: {
|
||||
type: Object, default() {
|
||||
return undefined
|
||||
}
|
||||
},
|
||||
show: {required: true, type: Boolean, default: false},
|
||||
},
|
||||
data() {
|
||||
@@ -75,7 +90,7 @@ export default {
|
||||
mounted() {
|
||||
this.id = Math.random()
|
||||
this.$root.$on('change', this.storeValue); // boostrap modal placed at document so have to listen at root of component
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
buttonLabel() {
|
||||
@@ -95,34 +110,34 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
doAction: function(){
|
||||
doAction: function () {
|
||||
this.dirty = false
|
||||
this.$emit('finish-action', {'form_data': this.detectOverride(this.form_data)})
|
||||
},
|
||||
cancelAction: function () {
|
||||
if (this.dirty) {
|
||||
this.dirty = false
|
||||
this.$emit('finish-action', {'form_data': this.detectOverride(this.form_data) })
|
||||
},
|
||||
cancelAction: function() {
|
||||
if (this.dirty) {
|
||||
this.dirty = false
|
||||
this.$emit('finish-action', 'cancel')
|
||||
}
|
||||
},
|
||||
storeValue: function(field, value) {
|
||||
this.form_data[field] = value
|
||||
},
|
||||
listModel: function(m) {
|
||||
if (m === 'self') {
|
||||
return this.model
|
||||
} else {
|
||||
return Models[m]
|
||||
}
|
||||
},
|
||||
detectOverride: function(form) {
|
||||
for (const [k, v] of Object.entries(form)) {
|
||||
if (form[k].__override__) {
|
||||
form[k] = form[k].__override__
|
||||
}
|
||||
}
|
||||
return form
|
||||
this.$emit('finish-action', 'cancel')
|
||||
}
|
||||
},
|
||||
storeValue: function (field, value) {
|
||||
this.form_data[field] = value
|
||||
},
|
||||
listModel: function (m) {
|
||||
if (m === 'self') {
|
||||
return this.model
|
||||
} else {
|
||||
return Models[m]
|
||||
}
|
||||
},
|
||||
detectOverride: function (form) {
|
||||
for (const [k, v] of Object.entries(form)) {
|
||||
if (form[k].__override__) {
|
||||
form[k] = form[k].__override__
|
||||
}
|
||||
}
|
||||
return form
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user