Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-22 22:59:41 +02:00
Code Issues Releases Activity

Refactor/composables-folder (#787)

Browse source 
* move api clients and rename

* organize recipes composables

* rewrite useRecipeContext

* refactor(frontend): ♻️ abstract common ingredient functionality.

* feat(frontend): ✨ add scale, and back to recipe button + hide ingredients if none

* update regex to mach 11. instead of just 1.

* minor UX improvements

Co-authored-by: Hayden K <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-11-06 11:28:47 -08:00 • committed by GitHub
parent 095d3bda3f
commit 788e176b16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
68 changed files with 330 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

75
frontend/components/Domain/Recipe/RecipeInstructions.vue
View file

@ -17,13 +17,31 @@
</p>
<v-divider class="mb-4"></v-divider>
<v-checkbox
v-for="ing in ingredients"
v-for="ing in unusedIngredients"
:key="ing.referenceId"
v-model="activeRefs"
:label="ing.note"
:value="ing.referenceId"
class="mb-n2 mt-n2"
></v-checkbox>
>
<template #label>
<div v-html="parseIngredientText(ing, disableAmount)"></div>
</template>
</v-checkbox>
<template v-if="usedIngredients.length > 0">
<h4 class="py-3 ml-1">Linked to other step</h4>
<v-checkbox
v-for="ing in usedIngredients"
:key="ing.referenceId"
v-model="activeRefs"
:value="ing.referenceId"
class="mb-n2 mt-n2"
>
<template #label>
<div v-html="parseIngredientText(ing, disableAmount)"></div>
</template>
</v-checkbox>
</template>
</v-card-text>
<v-divider></v-divider>
@ -111,17 +129,16 @@
<v-card-text v-if="edit">
<v-textarea :key="'instructions' + index" v-model="value[index]['text']" auto-grow dense rows="4">
</v-textarea>
<div v-for="ing in step.ingredientReferences" :key="ing.referenceId">
{{ getIngredientByRefId(ing.referenceId).note }}
</div>
<div
v-for="ing in step.ingredientReferences"
:key="ing.referenceId"
v-html="getIngredientByRefId(ing.referenceId)"
/>
</v-card-text>
<v-expand-transition>
<div v-show="!isChecked(index) && !edit" class="m-0 p-0">
<v-card-text>
<VueMarkdown :source="step.text"> </VueMarkdown>
<div v-for="ing in step.ingredientReferences" :key="ing.referenceId">
{{ getIngredientByRefId(ing.referenceId).note }}
</div>
</v-card-text>
</div>
</v-expand-transition>
@ -138,6 +155,7 @@ import draggable from "vuedraggable";
import VueMarkdown from "@adapttive/vue-markdown";
import { ref, toRefs, reactive, defineComponent, watch, onMounted } from "@nuxtjs/composition-api";
import { RecipeStep, IngredientToStepRef, RecipeIngredient } from "~/types/api-types/recipe";
import { parseIngredientText } from "~/composables/recipes";
interface MergerHistory {
target: number;
@ -164,12 +182,18 @@ export default defineComponent({
type: Array as () => RecipeIngredient[],
default: () => [],
},
disableAmount: {
type: Boolean,
default: false,
},
},
setup(props, context) {
const state = reactive({
dialog: false,
disabledSteps: [] as number[],
unusedIngredients: [] as RecipeIngredient[],
usedIngredients: [] as RecipeIngredient[],
});
const showTitleEditor = ref<boolean[]>([]);
@ -245,6 +269,7 @@ export default defineComponent({
const activeText = ref("");
function openDialog(idx: number, refs: IngredientToStepRef[], text: string) {
setUsedIngredients();
activeText.value = text;
activeIndex.value = idx;
state.dialog = true;
@ -261,6 +286,24 @@ export default defineComponent({
state.dialog = false;
}
function setUsedIngredients() {
const usedRefs: { [key: string]: boolean } = {};
props.value.forEach((element) => {
element.ingredientReferences.forEach((ref) => {
usedRefs[ref.referenceId] = true;
});
});
state.usedIngredients = props.ingredients.filter((ing) => {
return ing.referenceId in usedRefs;
});
state.unusedIngredients = props.ingredients.filter((ing) => {
return !(ing.referenceId in usedRefs);
});
}
function autoSetReferences() {
// Ingore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
// other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
@ -294,10 +337,9 @@ export default defineComponent({
}
props.ingredients.forEach((ingredient) => {
if (
ingredient.note.toLowerCase().includes(" " + word) &&
!activeRefs.value.includes(ingredient.referenceId)
) {
const searchText = parseIngredientText(ingredient, props.disableAmount);
if (searchText.toLowerCase().includes(" " + word) && !activeRefs.value.includes(ingredient.referenceId)) {
console.info("Word Matched", `'${word}'`, ingredient.note);
activeRefs.value.push(ingredient.referenceId);
}
@ -306,7 +348,11 @@ export default defineComponent({
}
function getIngredientByRefId(refId: String) {
return props.ingredients.find((ing) => ing.referenceId === refId) || "";
const ing = props.ingredients.find((ing) => ing.referenceId === refId) || "";
if (ing === "") {
return "";
}
return parseIngredientText(ing, props.disableAmount);
}
// ===============================================================
@ -365,6 +411,7 @@ export default defineComponent({
toggleShowTitle,
updateIndex,
autoSetReferences,
parseIngredientText,
};
},
});