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

finished food view

Browse Source
This commit is contained in:
smilerz
2021-08-31 12:57:25 -05:00
parent 52abba1f16
commit 65fbbabec5
22 changed files with 430 additions and 155454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,22 +11,22 @@
@drop="handleDragDrop($event)">
<b-row no-gutters style="height:inherit;">
<b-col no-gutters md="3" style="height:inherit;">
<b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="model_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
<b-card-img-lazy style="object-fit: cover; height: 10vh;" :src="item_image" v-bind:alt="$t('Recipe_Image')"></b-card-img-lazy>
</b-col>
<b-col no-gutters md="9" style="height:inherit;">
<b-card-body class="m-0 py-0" style="height:inherit;">
<b-card-text class=" h-100 my-0 d-flex flex-column" style="text-overflow: ellipsis">
<h5 class="m-0 mt-1 text-truncate">{{ model[title] }}</h5>
<div class= "m-0 text-truncate">{{ model[subtitle] }}</div>
<h5 class="m-0 mt-1 text-truncate">{{ item[title] }}</h5>
<div class= "m-0 text-truncate">{{ item[subtitle] }}</div>
<div class="mt-auto mb-1 d-flex flex-row justify-content-end">
<div v-if="model[child_count] !=0" class="mx-2 btn btn-link btn-sm"
style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':model})">
<div v-if="!model.show_children">{{ model[child_count] }} {{ model_name }}</div>
<div v-if="item[child_count] !=0" class="mx-2 btn btn-link btn-sm"
style="z-index: 800;" v-on:click="$emit('item-action',{'action':'get-children','source':item})">
<div v-if="!item.show_children">{{ item[child_count] }} {{ item_type }}</div>
<div v-else>{{ text.hide_children }}</div>
</div>
<div v-if="model[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
v-on:click="$emit('item-action',{'action':'get-recipes','source':model})">
<div v-if="!model.show_recipes">{{ model[recipe_count] }} {{$t('Recipes')}}</div>
<div v-if="item[recipe_count]" class="mx-2 btn btn-link btn-sm" style="z-index: 800;"
v-on:click="$emit('item-action',{'action':'get-recipes','source':item})">
<div v-if="!item.show_recipes">{{ item[recipe_count] }} {{$t('Recipes')}}</div>
<div v-else>{{$t('Hide_Recipes')}}</div>
</div>
</div>
@ -38,18 +38,18 @@
<generic-context-menu class="p-0"
:show_merge="merge"
:show_move="move"
@item-action="$emit('item-action', {'action': $event, 'source': model})">
@item-action="$emit('item-action', {'action': $event, 'source': item})">
</generic-context-menu>
</div>
</b-row>
</b-card>
<!-- recursively add child cards -->
<div class="row" v-if="model.show_children">
<div class="row" v-if="item.show_children">
<div class="col-md-11 offset-md-1">
<generic-horizontal-card v-for="child in model[children]" v-bind:key="child.id"
<generic-horizontal-card v-for="child in item[children]" v-bind:key="child.id"
:draggable="draggable"
:model="child"
:model_name="model_name"
:item="child"
:item_type="item_type"
:title="title"
:subtitle="subtitle"
:child_count="child_count"
@ -63,10 +63,10 @@
</div>
</div>
<!-- conditionally view recipes -->
<div class="row" v-if="model.show_recipes">
<div class="row" v-if="item.show_recipes">
<div class="col-md-11 offset-md-1">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));grid-gap: 1rem;">
<recipe-card v-for="r in model[recipes]"
<recipe-card v-for="r in item[recipes]"
v-bind:key="r.id"
:recipe="r">
</recipe-card>
@ -75,11 +75,11 @@
</div>
<!-- this should be made a generic component, would also require mixin for functions that generate the popup and put in parent container-->
<b-list-group ref="tooltip" variant="light" v-show="show_menu" v-on-clickaway="closeMenu" style="z-index:9999; cursor:pointer">
<b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': model, 'source': source}); closeMenu()">
{{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':model.name})}}
<b-list-group-item v-if="move" action v-on:click="$emit('item-action',{'action': 'move', 'target': item, 'source': source}); closeMenu()">
<i class="fas fa-expand-arrows-alt fa-fw"></i> {{$t('Move')}}: {{$t('move_confirmation', {'child': source.name,'parent':item.name})}}
</b-list-group-item>
<b-list-group-item v-if="merge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': model, 'source': source}); closeMenu()">
{{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':model.name}) }}
<b-list-group-item v-if="merge" action v-on:click="$emit('item-action',{'action': 'merge', 'target': item, 'source': source}); closeMenu()">
<i class="fas fa-compress-arrows-alt fa-fw"></i> {{$t('Merge')}}: {{ $t('merge_confirmation', {'source': source.name,'target':item.name}) }}
</b-list-group-item>
<b-list-group-item action v-on:click="closeMenu()">
{{$t('Cancel')}}
@ -101,8 +101,8 @@ export default {
components: { GenericContextMenu, RecipeCard },
mixins: [clickaway],
props: {
model: Object,
model_name: {type: String, default: 'Blank Model'}, // TODO update translations to handle plural translations
item: Object,
item_type: {type: String, default: 'Blank Item Type'}, // TODO update translations to handle plural translations
draggable: {type: Boolean, default: false},
title: {type: String, default: 'name'},
subtitle: {type: String, default: 'description'},
@ -115,7 +115,7 @@ export default {
},
data() {
return {
model_image: '',
item_image: '',
over: false,
show_menu: false,
dragMenu: undefined,
@ -128,14 +128,14 @@ export default {
}
},
mounted() {
this.model_image = this.model?.image ?? window.IMAGE_PLACEHOLDER
this.item_image = this.item?.image ?? window.IMAGE_PLACEHOLDER
this.dragMenu = this.$refs.tooltip
this.text.hide_children = this.$t('Hide_' + this.model_name)
this.text.hide_children = this.$t('Hide_' + this.item_type)
},
methods: {
handleDragStart: function(e) {
this.isError = false
e.dataTransfer.setData('source', JSON.stringify(this.model))
e.dataTransfer.setData('source', JSON.stringify(this.item))
},
handleDragEnter: function(e) {
if (!e.currentTarget.contains(e.relatedTarget) && e.relatedTarget != null) {
@ -149,7 +149,7 @@ export default {
},
handleDragDrop: function(e) {
let source = JSON.parse(e.dataTransfer.getData('source'))
if (source.id != this.model.id){
if (source.id != this.item.id){
this.source = source
let menuLocation = {getBoundingClientRect: this.generateLocation(e.clientX, e.clientY),}
this.show_menu = true
@ -176,7 +176,7 @@ export default {
})
popper.update()
this.over = false
this.$emit({'action': 'drop', 'target': this.model, 'source': this.source})
this.$emit({'action': 'drop', 'target': this.item, 'source': this.source})
} else {
this.isError = true
}