Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 15:49:42 +02:00
Code Issues Releases Activity

Chore/general UI cleanup (#764)

Browse source 
* unify look and feel + button validators

* Fixes #741

* add github script to mealei-next

* feat(frontend): 💄 improve user-flow for creating ingredients and units in editor

Creating a unit/food in the recipe editor will not automatically assign that to the auto-complete element on the ingredient. It also no longer needs a dialog and will show at the bottom of the menu at all times.

* fix whitespace issue with slot

* add security check to properties

* fix event refresh on delete

* remove depreciated page

* improve API token flow

* hide recipe data if not advanced user

* misc adds

Co-authored-by: Hayden <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-10-30 15:46:44 -08:00 • committed by GitHub
parent 2afaf70a03
commit 909bc85205
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 177 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
View file

@ -5,7 +5,7 @@
v-model="value.title"
dense
hide-details
class="mx-1 mb-4"
class="mx-1 mt-3 mb-4"
placeholder="Section Title"
style="max-width: 500px"
>
@ -29,6 +29,7 @@
<v-col v-if="!disableAmount && units" sm="12" md="3" cols="12">
<v-autocomplete
v-model="value.unit"
:search-input.sync="unitSearch"
hide-details
dense
solo
@ -38,14 +39,19 @@
class="mx-1"
placeholder="Choose Unit"
>
<template #no-data>
<RecipeIngredientUnitDialog class="mx-2" block small />
<template #append-item>
<div class="px-2">
<BaseButton block small @click="createAssignUnit()"></BaseButton>
</div>
</template>
</v-autocomplete>
</v-col>
<!-- Foods Input -->
<v-col v-if="!disableAmount && foods" m="12" md="3" cols="12" class="">
<v-autocomplete
v-model="value.food"
:search-input.sync="foodSearch"
hide-details
dense
solo
@ -55,8 +61,10 @@
class="mx-1 py-0"
placeholder="Choose Food"
>
<template #no-data>
<RecipeIngredientFoodDialog class="mx-2" block small />
<template #append-item>
<div class="px-2">
<BaseButton block small @click="createAssignFood()"></BaseButton>
</div>
</template>
</v-autocomplete>
</v-col>
@ -86,15 +94,12 @@
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
import RecipeIngredientUnitDialog from "./RecipeIngredientUnitDialog.vue";
import RecipeIngredientFoodDialog from "./RecipeIngredientFoodDialog.vue";
import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
import { useFoods } from "~/composables/use-recipe-foods";
import { useUnits } from "~/composables/use-recipe-units";
import { validators } from "~/composables/use-validators";
export default defineComponent({
components: { RecipeIngredientUnitDialog, RecipeIngredientFoodDialog },
props: {
value: {
type: Object,
@ -108,8 +113,28 @@ export default defineComponent({
setup(props) {
const { value } = props;
const { foods } = useFoods();
// ==================================================
// Foods
const { foods, workingFoodData, actions: foodActions } = useFoods();
const foodSearch = ref("");
async function createAssignFood() {
workingFoodData.name = foodSearch.value;
await foodActions.createOne();
value.food = foods.value?.find((food) => food.name === foodSearch.value);
}
// ==================================================
// Units
const { units, workingUnitData, actions: unitActions } = useUnits();
const unitSearch = ref("");
async function createAssignUnit() {
workingUnitData.name = unitSearch.value;
await unitActions.createOne();
value.unit = units.value?.find((unit) => unit.name === unitSearch.value);
console.log(value.unit);
}
const state = reactive({
showTitle: false,
@ -126,13 +151,17 @@ export default defineComponent({
}
return {
workingUnitData,
unitActions,
validators,
foods,
units,
...toRefs(state),
createAssignFood,
createAssignUnit,
foods,
foodSearch,
toggleTitle,
unitActions,
units,
unitSearch,
validators,
workingUnitData,
};
},
});