cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'pr/897' into develop

Browse Source
This commit is contained in:
vabene1111
2021-09-15 09:16:09 +02:00
parent d9300a9a90 4296e8e44f
commit aeb5682176
20 changed files with 1626 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
vue/src/components/GenericHorizontalCard.vue
View File

@ -1,14 +1,15 @@
<template>
<div row style="margin: 4px">
<!-- @[useDrag&&`dragover`] <== this syntax completely shuts off draggable -->
<b-card no-body d-flex flex-column :class="{'border border-primary' : over, 'shake': isError}"
:style="{'cursor:grab' : useDrag}"
@dragover.prevent
@dragenter.prevent
:draggable="useDrag"
@dragstart="handleDragStart($event)"
@dragenter="handleDragEnter($event)"
@dragleave="handleDragLeave($event)"
@drop="handleDragDrop($event)">
@[useDrag&&`dragover`].prevent
@[useDrag&&`dragenter`].prevent
@[useDrag&&`dragstart`]="handleDragStart($event)"
@[useDrag&&`dragenter`]="handleDragEnter($event)"
@[useDrag&&`dragleave`]="handleDragLeave($event)"
@[useDrag&&`drop`]="handleDragDrop($event)">
<b-row no-gutters >
<b-col no-gutters class="col-sm-3">
<b-card-img-lazy style="object-fit: cover; height: 6em;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
@ -23,6 +24,13 @@
:item_list="item[x.field]"
:label="x.label"
:color="x.color"/>
<generic-ordered-pill v-for="x in itemOrderedTags" :key="x.field"
:item_list="item[x.field]"
:label="x.label"
:color="x.color"
:field="x.field"
:item="item"
@finish-action="finishAction"/>
<div class="mt-auto mb-1" align="right">
<span v-if="item[child_count]" class="mx-2 btn btn-link btn-sm"
style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
@ -90,13 +98,14 @@
import GenericContextMenu from "@/components/GenericContextMenu";
import Badges from "@/components/Badges";
import GenericPill from "@/components/GenericPill";
import GenericOrderedPill from "@/components/GenericOrderedPill";
import RecipeCard from "@/components/RecipeCard";
import { mixin as clickaway } from 'vue-clickaway';
import { createPopper } from '@popperjs/core';
export default {
name: "GenericHorizontalCard",
components: { GenericContextMenu, RecipeCard, Badges, GenericPill},
components: { GenericContextMenu, RecipeCard, Badges, GenericPill, GenericOrderedPill},
mixins: [clickaway],
props: {
item: {type: Object},
@ -142,6 +151,9 @@ export default {
},
itemTags: function() {
return this.model?.tags ?? []
},
itemOrderedTags: function() {
return this.model?.ordered_tags ?? []
}
},
methods: {
@ -206,6 +218,10 @@ export default {
closeMenu: function(){
this.show_menu = false
},
finishAction: function(e){
this.$emit('finish-action', e)
}
}
}
</script>

72
vue/src/components/GenericOrderedPill.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<draggable v-if="itemList" v-model="this_list" tag="span" group="ordered_items" z-index="500"
@change="orderChanged">
<span :key="k.id" v-for="k in itemList" class="pl-1">
<b-badge pill :variant="color">{{thisLabel(k)}}</b-badge>
</span>
</draggable>
</template>
<script>
// you can't use this component with a horizontal card that is also draggable
import draggable from 'vuedraggable'
export default {
name: 'GenericOrderedPill',
components: {draggable},
props: {
item_list: {required: true, type: Array},
label: {type: String, default: 'name'},
color: {type: String, default: 'light'},
field: {type: String, required: true},
item: {type: Object},
},
data() {
return {
this_list: [],
}
},
computed: {
itemList: function() {
if(Array.isArray(this.this_list)) {
return this.this_list
} else if (!this.this_list?.name) {
return false
} else {
return [this.this_list]
}
},
},
mounted() {
this.this_list = this.item_list
},
watch: {
'item_list': function (newVal) {
this.this_list = newVal
}
},
methods: {
thisLabel: function (item) {
let fields = this.label.split('::')
let value = item
fields.forEach(x => {
value = value[x]
});
return value
},
orderChanged: function(e){
let order = 0
this.this_list.forEach(x => {
x['order'] = order
order++
})
let new_order = {...this.item}
new_order[this.field] = this.this_list
this.$emit('finish-action', {'action':'save','form_data': new_order })
},
}
}
</script>

19
vue/src/components/Modals/GenericModalForm.vue
View File

@ -6,12 +6,8 @@
<p v-if="f.type=='instruction'">{{f.label}}</p>
<!-- this lookup is single selection -->
<lookup-input v-if="f.type=='lookup'"
:label="f.label"
:value="f.value"
:field="f.field"
:form="f"
:model="listModel(f.list)"
:sticky_options="f.sticky_options || undefined"
:create_new="f.allow_create"
@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'"
@ -65,7 +61,8 @@ export default {
id: undefined,
form_data: {},
form: {},
dirty: false
dirty: false,
special_handling: false
}
},
mounted() {
@ -93,7 +90,7 @@ export default {
methods: {
doAction: function(){
this.dirty = false
this.$emit('finish-action', {'form_data': this.form_data })
this.$emit('finish-action', {'form_data': this.detectOverride(this.form_data) })
},
cancelAction: function() {
if (this.dirty) {
@ -110,6 +107,14 @@ export default {
} 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
}
}
}

98
vue/src/components/Modals/LookupInput.vue
View File

@ -1,14 +1,14 @@
<template>
<div>
<b-form-group
v-bind:label="label"
v-bind:label="form.label"
class="mb-3">
<generic-multiselect
@change="new_value=$event.val"
@remove="new_value=undefined"
:initial_selection="initialSelection"
:model="model"
:multiple="false"
:multiple="useMultiple"
:sticky_options="sticky_options"
:allow_create="create_new"
:create_placeholder="createPlaceholder"
@ -29,12 +29,9 @@ export default {
components: {GenericMultiselect},
mixins: [ApiMixin],
props: {
field: {type: String, default: 'You Forgot To Set Field Name'},
label: {type: String, default: ''},
value: {type: Object, default () {return undefined}},
form: {type: Object, default () {return undefined}},
model: {type: Object, default () {return undefined}},
create_new: {type: Boolean, default: false},
sticky_options: {type:Array, default(){return []}},
// TODO: include create_new and create_text props and associated functionality to create objects for drop down
// see 'tagging' here: https://vue-multiselect.js.org/#sub-tagging
// perfect world would have it trigger a new modal associated with the associated item model
@ -42,25 +39,43 @@ export default {
data() {
return {
new_value: undefined,
field: undefined,
label: undefined,
sticky_options: undefined,
first_run: true
}
},
mounted() {
this.new_value = this.value
this.new_value = this.form?.value
this.field = this.form?.field ?? 'You Forgot To Set Field Name'
this.label = this.form?.label ?? ''
this.sticky_options = this.form?.sticky_options ?? []
},
computed: {
modelName() {
return this?.model?.name ?? this.$t('Search')
},
useMultiple() {
return this.form?.multiple || this.form?.ordered || false
},
initialSelection() {
let this_value = this.form.value
let arrayValues = undefined
// multiselect is expect to get an array of objects - make sure it gets one
if (Array.isArray(this.new_value)) {
return this.new_value
} else if (!this.new_value) {
return []
} else if (typeof(this.new_value) === 'object') {
return [this.new_value]
if (Array.isArray(this_value)) {
arrayValues = this_value
} else if (!this_value) {
arrayValues = []
} else if (typeof(this_value) === 'object') {
arrayValues = [this_value]
} else {
return [{'id': -1, 'name': this.new_value}]
arrayValues = [{'id': -1, 'name': this_value}]
}
if (this.form?.ordered && this.first_run) {
return this.flattenItems(arrayValues)
} else {
return arrayValues
}
},
createPlaceholder() {
@ -69,7 +84,10 @@ export default {
},
watch: {
'new_value': function () {
this.$root.$emit('change', this.field, this.new_value ?? null)
let x = this?.new_value
// pass the unflattened attributes that can be restored when ready to save/update
x['__override__'] = this.unflattenItem(this?.new_value)
this.$root.$emit('change', this.form.field, x)
},
},
methods: {
@ -84,6 +102,54 @@ export default {
StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE)
})
},
// ordered lookups have nested attributes that need flattened attributes to drive lookup
flattenItems: function(itemlist) {
let flat_items = []
let item = undefined
let label = this.form.list_label.split('::')
itemlist.forEach(x => {
item = {}
for (const [k, v] of Object.entries(x)) {
if (k == label[0]) {
item['id'] = v.id
item[label[1]] = v[label[1]]
} else {
item[this.form.field + '__' + k] = v
}
}
flat_items.push(item)
});
this.first_run = false
return flat_items
},
unflattenItem: function(itemList) {
let unflat_items = []
let item = undefined
let this_label = undefined
let label = this.form.list_label.split('::')
let order = 0
itemList.forEach(x => {
item = {}
item[label[0]] = {}
for (const [k, v] of Object.entries(x)) {
switch(k) {
case 'id':
item[label[0]]['id'] = v
break;
case label[1]:
item[label[0]][label[1]] = v
break;
default:
this_label = k.replace(this.form.field + '__', '')
}
}
item['order'] = order
order++
unflat_items.push(item)
});
return unflat_items
}
}
}
</script>

0
vue/src/components/Modals/OrderedLookup.vue Normal file
View File