Merge pull request #2539 from srwareham/hide-step-ingredients

Added option: Hide step ingredients
This commit is contained in:
vabene1111
2023-08-24 10:33:57 +02:00
committed by GitHub
32 changed files with 87 additions and 38 deletions

View File

@ -103,6 +103,7 @@
import draggable from "vuedraggable";
import stringSimilarity from "string-similarity"
import {getUserPreference} from "@/utils/utils"
export default {
name: "ImportViewStepEditor",
@ -117,6 +118,7 @@ export default {
recipe_json: undefined,
current_edit_ingredient: null,
current_edit_step: null,
user_preferences: null,
}
},
watch: {
@ -126,6 +128,7 @@ export default {
},
mounted() {
this.recipe_json = this.recipe
this.user_preferences = getUserPreference();
},
methods: {
/**
@ -138,7 +141,7 @@ export default {
let steps = []
step.instruction.split(split_character).forEach(part => {
if (part.trim() !== '') {
steps.push({'instruction': part, 'ingredients': []})
steps.push({'instruction': part, 'ingredients': [], 'show_ingredients_table': this.user_preferences.show_step_ingredients})
}
})
steps[0].ingredients = step.ingredients // put all ingredients from the original step in the ingredients of the first step of the split step list

View File

@ -240,6 +240,16 @@
v-if="step_index !== recipe.steps.length - 1">
<i class="fa fa-arrow-down fa-fw"></i> {{ $t("Move_Down") }}
</button>
<!-- Show "Hide step ingredients if state is currently set to shown" -->
<button class="dropdown-item" @click="setStepShowIngredientsTable(step, false)"
v-if="step.show_ingredients_table">
<i class="op-icon fa fa-mavon-eye-slash"></i> {{ $t("hide_step_ingredients") }}
</button>
<!-- Show "Show step ingredients if state is currently set to hidden" -->
<button class="dropdown-item" @click="setStepShowIngredientsTable(step, true)"
v-if="! step.show_ingredients_table">
<i class="op-icon fa fa-mavon-eye"></i> {{ $t("show_step_ingredients") }}
</button>
</div>
</div>
</div>
@ -270,7 +280,6 @@
@click="step.time_visible = true" v-if="!step.time_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Time") }}
</b-button>
<b-button pill variant="primary" size="sm" class="ml-1 mb-1 mb-md-0"
@click="step.ingredients_visible = true" v-if="!step.ingredients_visible">
<i class="fas fa-plus-circle"></i> {{ $t("Ingredients") }}
@ -770,7 +779,8 @@ import {
ResolveUrlMixin,
StandardToasts,
convertEnergyToCalories,
energyHeading
energyHeading,
getUserPreference
} from "@/utils/utils"
import Multiselect from "vue-multiselect"
import {ApiApiFactory} from "@/utils/openapi/api"
@ -813,6 +823,7 @@ export default {
show_file_create: false,
step_for_file_create: undefined,
use_plural: false,
user_preferences: undefined,
additional_visible: false,
create_food: undefined,
md_editor_toolbars: {
@ -858,9 +869,9 @@ export default {
this.searchKeywords("")
this.searchFiles("")
this.searchRecipes("")
this.$i18n.locale = window.CUSTOM_LOCALE
let apiClient = new ApiApiFactory()
this.user_preferences = getUserPreference()
apiClient.retrieveSpace(window.ACTIVE_SPACE_ID).then(r => {
this.use_plural = r.data.use_plural
})
@ -925,7 +936,10 @@ export default {
// set default visibility style for each component of the step
this.recipe.steps.forEach((s) => {
this.$set(s, "time_visible", s.time !== 0)
this.$set(s, "ingredients_visible", s.ingredients.length > 0 || this.recipe.steps.length === 1)
// ingredients_visible determines whether or not the ingredients UI is shown in the edit view
// show_ingredients_table determine whether the ingredients table is shown in the read view
// these are seperate as one might want to add ingredients but not want the step-level view
this.$set(s, "ingredients_visible", s.show_ingredients_table && (s.ingredients.length > 0 || this.recipe.steps.length === 1))
this.$set(s, "instruction_visible", s.instruction !== "" || this.recipe.steps.length === 1)
this.$set(s, "step_recipe_visible", s.step_recipe !== null)
this.$set(s, "file_visible", s.file !== null)
@ -1028,6 +1042,7 @@ export default {
show_as_header: false,
time_visible: false,
ingredients_visible: true,
show_ingredients_table: this.user_preferences.show_step_ingredients,
instruction_visible: true,
step_recipe_visible: false,
file_visible: false,
@ -1083,6 +1098,9 @@ export default {
this.recipe.steps.splice(new_index < 0 ? 0 : new_index, 0, step)
this.sortSteps()
},
setStepShowIngredientsTable: function (step, show_state) {
step.show_ingredients_table = show_state
},
moveIngredient: function (step, ingredient, new_index) {
step.ingredients.splice(step.ingredients.indexOf(ingredient), 1)
step.ingredients.splice(new_index < 0 ? 0 : new_index, 0, ingredient)

View File

@ -31,6 +31,12 @@
</b-form-checkbox>
</b-form-group>
<b-form-group :description="$t('show_step_ingredients_setting_help')">
<b-form-checkbox v-model="user_preferences.show_step_ingredients" @change="updateSettings(false);">
{{ $t('show_step_ingredients_setting') }}
</b-form-checkbox>
</b-form-group>
<hr/>

View File

@ -33,7 +33,7 @@
<div class="row">
<!-- ingredients table -->
<div class="col col-md-4"
v-if="step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
v-if="step.show_ingredients_table && step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
<table class="table table-sm">
<ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor"
@checked-state-changed="$emit('checked-state-changed', $event)"/>
@ -124,10 +124,7 @@
</template>
<script>
import {calculateAmount} from "@/utils/utils"
import {GettextMixin} from "@/utils/utils"
import {calculateAmount, GettextMixin, getUserPreference} from "@/utils/utils"
import CompileComponent from "@/components/CompileComponent"
import IngredientsCard from "@/components/IngredientsCard"
import Vue from "vue"

View File

@ -369,6 +369,10 @@
"filter_name": "Filter Name",
"left_handed": "Left-handed mode",
"left_handed_help": "Will optimize the UI for use with your left hand.",
"show_step_ingredients_setting": "Show Ingredients Next To Recipe Steps",
"show_step_ingredients_setting_help": "Add ingredients table next to recipe steps. Applies at creation time. Can be overridden in the edit recipe view.",
"show_step_ingredients": "Show Step Ingredients",
"hide_step_ingredients": "Hide Step Ingredients",
"Custom Filter": "Custom Filter",
"shared_with": "Shared With",
"sort_by": "Sort By",
@ -424,6 +428,7 @@
"ChildInheritFields": "Children Inherit Fields",
"ChildInheritFields_help": "Children will inherit these fields by default.",
"InheritFields_help": "The values of these fields will be inherited from parent (Exception: blank shopping categories are not inherited)",
"show_ingredients_table": "Display a table of the ingredients next to the step's text",
"show_ingredient_overview": "Display a list of all ingredients at the start of the recipe.",
"Ingredient Overview": "Ingredient Overview",
"last_viewed": "Last Viewed",

View File

@ -4575,6 +4575,12 @@ export interface Step {
* @memberof Step
*/
numrecipe?: string;
/**
*
* @type {boolean}
* @memberof Step
*/
show_ingredeints_table?: boolean;
}
/**
*
@ -5180,6 +5186,12 @@ export interface UserPreference {
* @memberof UserPreference
*/
left_handed?: boolean;
/**
*
* @type {boolean}
* @memberof UserPreference
*/
show_step_ingredients?: boolean;
/**
*
* @type {string}