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

allow delete in ingredient editor

Browse Source
This commit is contained in:
vabene1111
2022-04-14 14:40:15 +02:00
parent 7ca7bd6111
commit 8c89438b97
2 changed files with 46 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
vue/src/apps/IngredientEditorView/IngredientEditorView.vue
View File

@ -4,6 +4,7 @@
<div class="col-md-6"> <div class="col-md-6">
<generic-multiselect @change="food = $event.val; refreshList()" <generic-multiselect @change="food = $event.val; refreshList()"
:model="Models.FOOD" :model="Models.FOOD"
:initial_single_selection="food"
:multiple="false"></generic-multiselect> :multiple="false"></generic-multiselect>
<b-button @click="show_food_delete=true" :disabled="food === null"> <i class="fas fa-trash-alt"></i></b-button> <b-button @click="show_food_delete=true" :disabled="food === null"> <i class="fas fa-trash-alt"></i></b-button>
<generic-modal-form :model="Models.FOOD" :action="Actions.DELETE" :show="show_food_delete" :item1="food" <generic-modal-form :model="Models.FOOD" :action="Actions.DELETE" :show="show_food_delete" :item1="food"
@ -12,7 +13,12 @@
<div class="col-md-6"> <div class="col-md-6">
<generic-multiselect @change="unit = $event.val; refreshList()" <generic-multiselect @change="unit = $event.val; refreshList()"
:model="Models.UNIT" :model="Models.UNIT"
:initial_single_selection="unit"
:multiple="false"></generic-multiselect> :multiple="false"></generic-multiselect>
<!--TODO remove unit/Food from list when deleted -->
<b-button @click="show_unit_delete=true" :disabled="unit === null"> <i class="fas fa-trash-alt"></i></b-button>
<generic-modal-form :model="Models.UNIT" :action="Actions.DELETE" :show="show_unit_delete" :item1="unit"
@finish-action="unit = null; show_unit_delete=false"/>
</div> </div>
</div> </div>

66
vue/src/apps/ModelListView/ModelListView.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div id="app" style="margin-bottom: 4vh" v-if="this_model"> <div id="app" style="margin-bottom: 4vh" v-if="this_model">
<generic-modal-form v-if="this_model" :model="this_model" :action="this_action" :item1="this_item" :item2="this_target" :show="show_modal" @finish-action="finishAction" /> <generic-modal-form v-if="this_model" :model="this_model" :action="this_action" :item1="this_item"
:item2="this_target" :show="show_modal" @finish-action="finishAction"/>
<div class="row"> <div class="row">
<div class="col-md-2 d-none d-md-block"></div> <div class="col-md-2 d-none d-md-block"></div>
@ -17,17 +18,20 @@
<div class="col-md-9" style="margin-top: 1vh"> <div class="col-md-9" style="margin-top: 1vh">
<h3> <h3>
<!-- <span><b-button variant="link" size="sm" class="text-dark shadow-none"><i class="fas fa-chevron-down"></i></b-button></span> --> <!-- <span><b-button variant="link" size="sm" class="text-dark shadow-none"><i class="fas fa-chevron-down"></i></b-button></span> -->
<model-menu /> <model-menu/>
<span>{{ $t(this.this_model.name) }}</span> <span>{{ $t(this.this_model.name) }}</span>
<span v-if="apiName !== 'Step' && apiName !== 'CustomFilter'"> <span v-if="apiName !== 'Step' && apiName !== 'CustomFilter'">
<b-button variant="link" @click="startAction({ action: 'new' })"> <b-button variant="link" @click="startAction({ action: 'new' })">
<i class="fas fa-plus-circle fa-2x"></i> <i class="fas fa-plus-circle fa-2x"></i>
</b-button> </span </b-button> </span
><!-- TODO add proper field to model config to determine if create should be available or not --> >
<!-- TODO add proper field to model config to determine if create should be available or not -->
</h3> </h3>
</div> </div>
<div class="col-md-3" style="position: relative; margin-top: 1vh"> <div class="col-md-3" style="position: relative; margin-top: 1vh">
<b-form-checkbox v-model="show_split" name="check-button" v-if="paginated" class="shadow-none" style="position: relative; top: 50%; transform: translateY(-50%)" switch> <b-form-checkbox v-model="show_split" name="check-button" v-if="paginated"
class="shadow-none"
style="position: relative; top: 50%; transform: translateY(-50%)" switch>
{{ $t("show_split_screen") }} {{ $t("show_split_screen") }}
</b-form-checkbox> </b-form-checkbox>
</div> </div>
@ -37,19 +41,29 @@
<div class="col" :class="{ 'col-md-6': show_split }"> <div class="col" :class="{ 'col-md-6': show_split }">
<!-- model isn't paginated and loads in one API call --> <!-- model isn't paginated and loads in one API call -->
<div v-if="!paginated"> <div v-if="!paginated">
<generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'left')" @finish-action="finishAction" /> <generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i"
:model="this_model" @item-action="startAction($event, 'left')"
@finish-action="finishAction"/>
</div> </div>
<!-- model is paginated and needs managed --> <!-- model is paginated and needs managed -->
<generic-infinite-cards v-if="paginated" :card_counts="left_counts" :scroll="show_split" @search="getItems($event, 'left')" @reset="resetList('left')"> <generic-infinite-cards v-if="paginated" :card_counts="left_counts" :scroll="show_split"
@search="getItems($event, 'left')" @reset="resetList('left')">
<template v-slot:cards> <template v-slot:cards>
<generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'left')" @finish-action="finishAction" /> <generic-horizontal-card v-for="i in items_left" v-bind:key="i.id" :item="i"
:model="this_model"
@item-action="startAction($event, 'left')"
@finish-action="finishAction"/>
</template> </template>
</generic-infinite-cards> </generic-infinite-cards>
</div> </div>
<div class="col col-md-6" v-if="show_split"> <div class="col col-md-6" v-if="show_split">
<generic-infinite-cards v-if="this_model" :card_counts="right_counts" :scroll="show_split" @search="getItems($event, 'right')" @reset="resetList('right')"> <generic-infinite-cards v-if="this_model" :card_counts="right_counts" :scroll="show_split"
@search="getItems($event, 'right')" @reset="resetList('right')">
<template v-slot:cards> <template v-slot:cards>
<generic-horizontal-card v-for="i in items_right" v-bind:key="i.id" :item="i" :model="this_model" @item-action="startAction($event, 'right')" @finish-action="finishAction" /> <generic-horizontal-card v-for="i in items_right" v-bind:key="i.id" :item="i"
:model="this_model"
@item-action="startAction($event, 'right')"
@finish-action="finishAction"/>
</template> </template>
</generic-infinite-cards> </generic-infinite-cards>
</div> </div>
@ -62,18 +76,18 @@
<script> <script>
import Vue from "vue" import Vue from "vue"
import { BootstrapVue } from "bootstrap-vue" import {BootstrapVue} from "bootstrap-vue"
import "bootstrap-vue/dist/bootstrap-vue.css" import "bootstrap-vue/dist/bootstrap-vue.css"
import { CardMixin, ApiMixin, getConfig } from "@/utils/utils" import {CardMixin, ApiMixin, getConfig} from "@/utils/utils"
import { StandardToasts, ToastMixin } from "@/utils/utils" import {StandardToasts, ToastMixin} from "@/utils/utils"
import GenericInfiniteCards from "@/components/GenericInfiniteCards" import GenericInfiniteCards from "@/components/GenericInfiniteCards"
import GenericHorizontalCard from "@/components/GenericHorizontalCard" import GenericHorizontalCard from "@/components/GenericHorizontalCard"
import GenericModalForm from "@/components/Modals/GenericModalForm" import GenericModalForm from "@/components/Modals/GenericModalForm"
import ModelMenu from "@/components/ContextMenu/ModelMenu" import ModelMenu from "@/components/ContextMenu/ModelMenu"
import { ApiApiFactory } from "@/utils/openapi/api" import {ApiApiFactory} from "@/utils/openapi/api"
//import StorageQuota from "@/components/StorageQuota"; //import StorageQuota from "@/components/StorageQuota";
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
@ -94,8 +108,8 @@ export default {
// this.Models and this.Actions inherited from ApiMixin // this.Models and this.Actions inherited from ApiMixin
items_left: [], items_left: [],
items_right: [], items_right: [],
right_counts: { max: 9999, current: 0 }, right_counts: {max: 9999, current: 0},
left_counts: { max: 9999, current: 0 }, left_counts: {max: 9999, current: 0},
this_model: undefined, this_model: undefined,
model_menu: undefined, model_menu: undefined,
this_action: undefined, this_action: undefined,
@ -127,7 +141,7 @@ export default {
this.header_component_name = this.this_model?.list?.header_component?.name ?? undefined this.header_component_name = this.this_model?.list?.header_component?.name ?? undefined
this.$nextTick(() => { this.$nextTick(() => {
if (!this.paginated) { if (!this.paginated) {
this.getItems({ page: 1 }, "left") this.getItems({page: 1}, "left")
} }
}) })
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
@ -236,7 +250,7 @@ export default {
}, },
getItems: function (params = {}, col) { getItems: function (params = {}, col) {
let column = col || "left" let column = col || "left"
params.options = { query: { extended: 1 } } // returns extended values in API response params.options = {query: {extended: 1}} // returns extended values in API response
this.genericAPI(this.this_model, this.Actions.LIST, params) this.genericAPI(this.this_model, this.Actions.LIST, params)
.then((result) => { .then((result) => {
let results = result.data?.results ?? result.data let results = result.data?.results ?? result.data
@ -257,7 +271,7 @@ export default {
}) })
}, },
getThis: function (id, callback) { getThis: function (id, callback) {
return this.genericAPI(this.this_model, this.Actions.FETCH, { id: id }) return this.genericAPI(this.this_model, this.Actions.FETCH, {id: id})
}, },
saveThis: function (item) { saveThis: function (item) {
if (!item?.id) { if (!item?.id) {
@ -268,7 +282,7 @@ export default {
// then place all new items at the top of the list - could sort instead // then place all new items at the top of the list - could sort instead
this.items_left = [result.data].concat(this.destroyCard(result?.data?.id, this.items_left)) this.items_left = [result.data].concat(this.destroyCard(result?.data?.id, this.items_left))
// this creates a deep copy to make sure that columns stay independent // this creates a deep copy to make sure that columns stay independent
this.items_right = [{ ...result.data }].concat(this.destroyCard(result?.data?.id, this.items_right)) this.items_right = [{...result.data}].concat(this.destroyCard(result?.data?.id, this.items_right))
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
}) })
.catch((err) => { .catch((err) => {
@ -291,10 +305,10 @@ export default {
addShopping: function (food) { addShopping: function (food) {
let api = new ApiApiFactory() let api = new ApiApiFactory()
food.shopping = true food.shopping = true
api.createShoppingListEntry({ food: food, amount: 1 }).then(() => { api.createShoppingListEntry({food: food, amount: 1}).then(() => {
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE) StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE)
this.refreshCard(food, this.items_left) this.refreshCard(food, this.items_left)
this.refreshCard({ ...food }, this.items_right) this.refreshCard({...food}, this.items_right)
}) })
}, },
updateThis: function (item) { updateThis: function (item) {
@ -313,7 +327,7 @@ export default {
this.clearState() this.clearState()
return return
} }
this.genericAPI(this.this_model, this.Actions.MOVE, { source: source_id, target: target_id }) this.genericAPI(this.this_model, this.Actions.MOVE, {source: source_id, target: target_id})
.then((result) => { .then((result) => {
this.moveUpdateItem(source_id, target_id) this.moveUpdateItem(source_id, target_id)
StandardToasts.makeStandardToast(StandardToasts.SUCCESS_MOVE) StandardToasts.makeStandardToast(StandardToasts.SUCCESS_MOVE)
@ -395,8 +409,8 @@ export default {
let params = { let params = {
root: item.id, root: item.id,
pageSize: 200, pageSize: 200,
query: { extended: 1 }, query: {extended: 1},
options: { query: { extended: 1 } }, options: {query: {extended: 1}},
} }
this.genericAPI(this.this_model, this.Actions.LIST, params) this.genericAPI(this.this_model, this.Actions.LIST, params)
.then((result) => { .then((result) => {
@ -415,7 +429,7 @@ export default {
getRecipes: function (col, item) { getRecipes: function (col, item) {
let parent = {} let parent = {}
// TODO: make this generic // TODO: make this generic
let params = { pageSize: 50, random: true } let params = {pageSize: 50, random: true}
params[this.this_recipe_param] = item.id params[this.this_recipe_param] = item.id
this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params) this.genericAPI(this.Models.RECIPE, this.Actions.LIST, params)
.then((result) => { .then((result) => {
@ -434,7 +448,7 @@ export default {
refreshThis: function (id) { refreshThis: function (id) {
this.getThis(id).then((result) => { this.getThis(id).then((result) => {
this.refreshCard(result.data, this.items_left) this.refreshCard(result.data, this.items_left)
this.refreshCard({ ...result.data }, this.items_right) this.refreshCard({...result.data}, this.items_right)
}) })
}, },
deleteThis: function (id) { deleteThis: function (id) {