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

Feature/collapse recipe sections (#1021)

Browse source 
* toggle hide recipe sections

* disable parser if food or units is defined

* make inputs clearable

* remove console.logs

* fix linter error

* fix linter errors
This commit is contained in:
Hayden 2022-03-03 19:43:56 -09:00 • committed by GitHub
parent 568a1a0015
commit de6fd9472d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -76,7 +76,15 @@
@end="drag = false"
>
<div v-for="(step, index) in value" :key="step.id">
<v-app-bar v-if="showTitleEditor[step.id]" class="primary mx-1 mt-6" dark dense rounded>
<v-app-bar
v-if="showTitleEditor[step.id]"
class="primary mx-1 mt-6"
style="cursor: pointer"
dark
dense
rounded
@click="toggleCollapseSection(index)"
>
<v-toolbar-title v-if="!edit" class="headline">
<v-app-bar-title v-text="step.title"> </v-app-bar-title>
</v-toolbar-title>
@ -180,7 +188,7 @@
import draggable from "vuedraggable";
// @ts-ignore vue-markdown has no types
import VueMarkdown from "@adapttive/vue-markdown";
import { ref, toRefs, reactive, defineComponent, watch, onMounted, watchEffect } from "@nuxtjs/composition-api";
import { ref, toRefs, reactive, defineComponent, watch, onMounted } from "@nuxtjs/composition-api";
import { RecipeStep, IngredientReferences, RecipeIngredient } from "~/types/api-types/recipe";
import { parseIngredientText } from "~/composables/recipes";
import { uuid4 } from "~/composables/use-utils";
@ -452,8 +460,29 @@ export default defineComponent({
previewStates.value = temp;
}
function toggleCollapseSection(index: number) {
const sectionSteps: number[] = [];
for (let i = index; i < props.value.length; i++) {
if (!(i === index) && validateTitle(props.value[i].title)) {
break;
} else {
sectionSteps.push(i);
}
}
const allCollapsed = sectionSteps.every((idx) => state.disabledSteps.includes(idx));
if (allCollapsed) {
state.disabledSteps = state.disabledSteps.filter((idx) => !sectionSteps.includes(idx));
} else {
state.disabledSteps = [...state.disabledSteps, ...sectionSteps];
}
}
return {
togglePreviewState,
toggleCollapseSection,
previewStates,
...toRefs(state),
actionEvents,