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

added editor button for scalable number

Browse Source
This commit is contained in:
vabene1111 2024-02-10 09:26:29 +01:00
parent f3e42f13b1
commit 8e4e785179
1 changed files with 171 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
vue/src/apps/RecipeEditView/RecipeEditView.vue
View File

@ -38,11 +38,11 @@
@change="uploadImage($event.target.files[0])"/> @change="uploadImage($event.target.files[0])"/>
<div <div
class="h-100 w-100 border border-primary rounded" class="h-100 w-100 border border-primary rounded"
style="border-width: 2px !important; border-style: dashed !important" style="border-width: 2px !important; border-style: dashed !important"
@drop.prevent="uploadImage($event.dataTransfer.files[0])" @drop.prevent="uploadImage($event.dataTransfer.files[0])"
@dragover.prevent @dragover.prevent
@click="$refs.file_upload.click()" @click="$refs.file_upload.click()"
> >
<i class="far fa-image fa-10x text-primary" <i class="far fa-image fa-10x text-primary"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)"
@ -71,27 +71,27 @@
<br/> <br/>
<label for="id_name"> {{ $t("Keywords") }}</label> <label for="id_name"> {{ $t("Keywords") }}</label>
<multiselect <multiselect
v-model="recipe.keywords" v-model="recipe.keywords"
:options="keywords" :options="keywords"
:close-on-select="false" :close-on-select="false"
:clear-on-select="true" :clear-on-select="true"
:hide-selected="true" :hide-selected="true"
:preserve-search="true" :preserve-search="true"
:internal-search="false" :internal-search="false"
:limit="options_limit" :limit="options_limit"
:placeholder="$t('select_keyword')" :placeholder="$t('select_keyword')"
:tag-placeholder="$t('add_keyword')" :tag-placeholder="$t('add_keyword')"
:select-label="$t('Select')" :select-label="$t('Select')"
:selected-label="$t('Selected')" :selected-label="$t('Selected')"
:deselect-label="$t('remove_selection')" :deselect-label="$t('remove_selection')"
:taggable="true" :taggable="true"
@tag="addKeyword" @tag="addKeyword"
label="label" label="label"
track-by="id" track-by="id"
id="id_keywords" id="id_keywords"
:multiple="true" :multiple="true"
:loading="keywords_loading" :loading="keywords_loading"
@search-change="searchKeywords" @search-change="searchKeywords"
> >
<template v-slot:noOptions>{{ $t("empty_list") }}</template> <template v-slot:noOptions>{{ $t("empty_list") }}</template>
</multiselect> </multiselect>
@ -103,21 +103,21 @@
<div class="col-md-12"> <div class="col-md-12">
<div class="card mt-2 mb-2"> <div class="card mt-2 mb-2">
<div class="card-body pr-2 pl-2 pr-md-5 pl-md-5 pt-3 pb-3"> <div class="card-body pr-2 pl-2 pr-md-5 pl-md-5 pt-3 pb-3">
<h6>{{ $t('Properties') }} <small class="text-muted"> {{$t('per_serving')}}</small></h6> <h6>{{ $t('Properties') }} <small class="text-muted"> {{ $t('per_serving') }}</small></h6>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
{{ $t('recipe_property_info')}} {{ $t('recipe_property_info') }}
</div> </div>
<div class="d-flex mt-2" v-for="p in recipe.properties" v-bind:key="p.id"> <div class="d-flex mt-2" v-for="p in recipe.properties" v-bind:key="p.id">
<div class="flex-fill w-50"> <div class="flex-fill w-50">
<generic-multiselect <generic-multiselect
@change="p.property_type = $event.val" @change="p.property_type = $event.val"
:initial_single_selection="p.property_type" :initial_single_selection="p.property_type"
:label="'name'" :label="'name'"
:model="Models.PROPERTY_TYPE" :model="Models.PROPERTY_TYPE"
:limit="25" :limit="25"
:multiple="false" :multiple="false"
></generic-multiselect> ></generic-multiselect>
</div> </div>
<div class="flex-fill w-50"> <div class="flex-fill w-50">
@ -190,14 +190,14 @@
<br/> <br/>
<label> {{ $t("Share") }}</label> <label> {{ $t("Share") }}</label>
<generic-multiselect <generic-multiselect
@change="recipe.shared = $event.val" @change="recipe.shared = $event.val"
parent_variable="recipe.shared" parent_variable="recipe.shared"
:initial_selection="recipe.shared" :initial_selection="recipe.shared"
:label="'display_name'" :label="'display_name'"
:model="Models.USER_NAME" :model="Models.USER_NAME"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Share')" v-bind:placeholder="$t('Share')"
:limit="25" :limit="25"
></generic-multiselect> ></generic-multiselect>
@ -228,7 +228,7 @@
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink"> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<button class="dropdown-item" @click="removeStep(step)"><i <button class="dropdown-item" @click="removeStep(step)"><i
class="fa fa-trash fa-fw"></i> {{ $t("Delete") }} class="fa fa-trash fa-fw"></i> {{ $t("Delete") }}
</button> </button>
<button class="dropdown-item" @click="moveStep(step, step_index - 1)" <button class="dropdown-item" @click="moveStep(step, step_index - 1)"
@ -249,7 +249,7 @@
<button class="dropdown-item" @click="setStepShowIngredientsTable(step, true)" <button class="dropdown-item" @click="setStepShowIngredientsTable(step, true)"
v-if="! step.show_ingredients_table"> v-if="! step.show_ingredients_table">
<i class="op-icon fa fa-mavon-eye"></i> {{ $t("show_step_ingredients") }} <i class="op-icon fa fa-mavon-eye"></i> {{ $t("show_step_ingredients") }}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
@ -300,11 +300,11 @@
<i class="fas fa-plus-circle"></i> {{ $t("File") }} <i class="fas fa-plus-circle"></i> {{ $t("File") }}
</b-button> </b-button>
<b-button <b-button
pill pill
variant="primary" variant="primary"
size="sm" size="sm"
class="ml-1 mb-1 mb-md-0" class="ml-1 mb-1 mb-md-0"
@click=" @click="
paste_step = step paste_step = step
$bvModal.show('id_modal_paste_ingredients') $bvModal.show('id_modal_paste_ingredients')
" "
@ -327,31 +327,31 @@
<label :for="'id_step_' + step.id + '_file'">{{ $t("File") }}</label> <label :for="'id_step_' + step.id + '_file'">{{ $t("File") }}</label>
<b-input-group> <b-input-group>
<multiselect <multiselect
ref="file" ref="file"
v-model="step.file" v-model="step.file"
:options="files" :options="files"
:close-on-select="true" :close-on-select="true"
:clear-on-select="true" :clear-on-select="true"
:allow-empty="true" :allow-empty="true"
:preserve-search="true" :preserve-search="true"
:placeholder="$t('select_file')" :placeholder="$t('select_file')"
:select-label="$t('Select')" :select-label="$t('Select')"
:selected-label="$t('Selected')" :selected-label="$t('Selected')"
:deselect-label="$t('remove_selection')" :deselect-label="$t('remove_selection')"
:id="'id_step_' + step.id + '_file'" :id="'id_step_' + step.id + '_file'"
label="name" label="name"
track-by="name" track-by="name"
:multiple="false" :multiple="false"
:loading="files_loading" :loading="files_loading"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
@search-change="searchFiles" @search-change="searchFiles"
> >
<template v-slot:noOptions>{{ $t("empty_list") }}</template> <template v-slot:noOptions>{{ $t("empty_list") }}</template>
</multiselect> </multiselect>
<b-input-group-append> <b-input-group-append>
<b-button <b-button
variant="primary" variant="primary"
@click=" @click="
step_for_file_create = step step_for_file_create = step
show_file_create = true show_file_create = true
" "
@ -367,24 +367,24 @@
<div class="col-md-12"> <div class="col-md-12">
<label :for="'id_step_' + step.id + '_recipe'">{{ $t("Recipe") }}</label> <label :for="'id_step_' + step.id + '_recipe'">{{ $t("Recipe") }}</label>
<multiselect <multiselect
ref="step_recipe" ref="step_recipe"
v-model="step.step_recipe" v-model="step.step_recipe"
:options="recipes.map((recipe) => recipe.id)" :options="recipes.map((recipe) => recipe.id)"
:close-on-select="true" :close-on-select="true"
:clear-on-select="true" :clear-on-select="true"
:allow-empty="true" :allow-empty="true"
:preserve-search="true" :preserve-search="true"
:internal-search="false" :internal-search="false"
:limit="options_limit" :limit="options_limit"
:placeholder="$t('select_recipe')" :placeholder="$t('select_recipe')"
:select-label="$t('Select')" :select-label="$t('Select')"
:selected-label="$t('Selected')" :selected-label="$t('Selected')"
:deselect-label="$t('remove_selection')" :deselect-label="$t('remove_selection')"
:id="'id_step_' + step.id + '_recipe'" :id="'id_step_' + step.id + '_recipe'"
:custom-label="(opt) => recipes.find((x) => x.id === opt).name" :custom-label="(opt) => recipes.find((x) => x.id === opt).name"
:multiple="false" :multiple="false"
:loading="recipes_loading" :loading="recipes_loading"
@search-change="searchRecipes" @search-change="searchRecipes"
> >
<template v-slot:noOptions>{{ $t("empty_list") }}</template> <template v-slot:noOptions>{{ $t("empty_list") }}</template>
</multiselect> </multiselect>
@ -424,12 +424,12 @@
<div class="col-lg-2 col-md-6 small-padding" <div class="col-lg-2 col-md-6 small-padding"
v-if="!ingredient.is_header"> v-if="!ingredient.is_header">
<input <input
class="form-control" class="form-control"
v-model="ingredient.amount" v-model="ingredient.amount"
type="number" type="number"
step="any" step="any"
v-if="!ingredient.no_amount" v-if="!ingredient.no_amount"
:id="`amount_${step_index}_${index}`" :id="`amount_${step_index}_${index}`"
/> />
</div> </div>
@ -437,29 +437,29 @@
v-if="!ingredient.is_header"> v-if="!ingredient.is_header">
<!-- search set to false to allow API to drive results & order --> <!-- search set to false to allow API to drive results & order -->
<multiselect <multiselect
v-if="!ingredient.no_amount" v-if="!ingredient.no_amount"
ref="unit" ref="unit"
v-model="ingredient.unit" v-model="ingredient.unit"
:options="units" :options="units"
:close-on-select="true" :close-on-select="true"
:clear-on-select="true" :clear-on-select="true"
:allow-empty="true" :allow-empty="true"
:preserve-search="true" :preserve-search="true"
:internal-search="false" :internal-search="false"
:limit="options_limit" :limit="options_limit"
:placeholder="$t('select_unit')" :placeholder="$t('select_unit')"
:tag-placeholder="$t('Create')" :tag-placeholder="$t('Create')"
:select-label="$t('Select')" :select-label="$t('Select')"
:selected-label="$t('Selected')" :selected-label="$t('Selected')"
:deselect-label="$t('remove_selection')" :deselect-label="$t('remove_selection')"
:taggable="true" :taggable="true"
@tag="addUnitType" @tag="addUnitType"
:id="`unit_${step_index}_${index}`" :id="`unit_${step_index}_${index}`"
label="name" label="name"
track-by="name" track-by="name"
:multiple="false" :multiple="false"
:loading="units_loading" :loading="units_loading"
@search-change="searchUnits" @search-change="searchUnits"
> >
<template v-slot:noOptions>{{ <template v-slot:noOptions>{{
$t("empty_list") $t("empty_list")
@ -472,28 +472,28 @@
<!-- search set to false to allow API to drive results & order --> <!-- search set to false to allow API to drive results & order -->
<multiselect <multiselect
ref="food" ref="food"
v-model="ingredient.food" v-model="ingredient.food"
:options="foods" :options="foods"
:close-on-select="true" :close-on-select="true"
:clear-on-select="true" :clear-on-select="true"
:allow-empty="true" :allow-empty="true"
:preserve-search="true" :preserve-search="true"
:internal-search="false" :internal-search="false"
:limit="options_limit" :limit="options_limit"
:placeholder="$t('select_food')" :placeholder="$t('select_food')"
:tag-placeholder="$t('Create')" :tag-placeholder="$t('Create')"
:select-label="$t('Select')" :select-label="$t('Select')"
:selected-label="$t('Selected')" :selected-label="$t('Selected')"
:deselect-label="$t('remove_selection')" :deselect-label="$t('remove_selection')"
:taggable="true" :taggable="true"
@tag="addFoodType" @tag="addFoodType"
:id="`ingredient_${step_index}_${index}`" :id="`ingredient_${step_index}_${index}`"
label="name" label="name"
track-by="name" track-by="name"
:multiple="false" :multiple="false"
:loading="foods_loading" :loading="foods_loading"
@search-change="searchFoods" @search-change="searchFoods"
> >
<template v-slot:noOptions>{{ <template v-slot:noOptions>{{
$t("empty_list") $t("empty_list")
@ -504,11 +504,11 @@
<div class="small-padding" <div class="small-padding"
v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }"> v-bind:class="{ 'col-lg-4 col-md-6': !ingredient.is_header, 'col-lg-12 col-md-12': ingredient.is_header }">
<input <input
class="form-control" class="form-control"
maxlength="256" maxlength="256"
v-model="ingredient.note" v-model="ingredient.note"
v-bind:placeholder="$t('Note')" v-bind:placeholder="$t('Note')"
v-on:keydown.tab=" v-on:keydown.tab="
(event) => { (event) => {
if (step.ingredients.indexOf(ingredient) === step.ingredients.length - 1) { if (step.ingredients.indexOf(ingredient) === step.ingredients.length - 1) {
event.preventDefault() event.preventDefault()
@ -522,13 +522,13 @@
<div class="flex-grow-0 small-padding"> <div class="flex-grow-0 small-padding">
<a <a
class="btn shadow-none btn-lg pr-1 pl-0 pr-md-2 pl-md-2" class="btn shadow-none btn-lg pr-1 pl-0 pr-md-2 pl-md-2"
href="#" href="#"
role="button" role="button"
id="dropdownMenuLink2" id="dropdownMenuLink2"
data-toggle="dropdown" data-toggle="dropdown"
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
> >
<i class="fas fa-ellipsis-v text-muted"></i> <i class="fas fa-ellipsis-v text-muted"></i>
</a> </a>
@ -645,7 +645,18 @@
<mavon-editor v-model="step.instruction" :autofocus="false" <mavon-editor v-model="step.instruction" :autofocus="false"
style="z-index: auto" :id="'id_instruction_' + step.id" style="z-index: auto" :id="'id_instruction_' + step.id"
:language="'en'" :language="'en'"
:toolbars="md_editor_toolbars" :defaultOpen="'edit'"/> :toolbars="md_editor_toolbars" :defaultOpen="'edit'">
<template #left-toolbar-after>
<span class="op-icon-divider"></span>
<button
type="button"
@click="step.instruction+= ' {{ scale(100) }}'"
class="op-icon fas fa-times"
aria-hidden="true"
title="Scalable Number"
></button>
</template>
</mavon-editor>
<!-- TODO markdown DOCS link and markdown editor --> <!-- TODO markdown DOCS link and markdown editor -->
</div> </div>
@ -662,7 +673,7 @@
</button> </button>
<button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none"><i <button type="button" v-b-modal:id_modal_sort class="btn btn-warning shadow-none"><i
class="fas fa-sort-amount-down-alt fa-lg"></i></button> class="fas fa-sort-amount-down-alt fa-lg"></i></button>
</b-button-group> </b-button-group>
</div> </div>
</div> </div>
@ -694,7 +705,7 @@
<div class="col-3 col-md-6 mb-1 mb-md-0 pr-2 pl-2"> <div class="col-3 col-md-6 mb-1 mb-md-0 pr-2 pl-2">
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)" <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
class="d-block d-md-none btn btn-block btn-danger shadow-none btn-sm"><i class="d-block d-md-none btn btn-block btn-danger shadow-none btn-sm"><i
class="fa fa-trash fa-lg"></i></a> class="fa fa-trash fa-lg"></i></a>
<a :href="resolveDjangoUrl('delete_recipe', recipe.id)" <a :href="resolveDjangoUrl('delete_recipe', recipe.id)"
class="d-none d-md-block btn btn-block btn-danger shadow-none btn-sm">{{ $t("Delete") }}</a> class="d-none d-md-block btn btn-block btn-danger shadow-none btn-sm">{{ $t("Delete") }}</a>
</div> </div>
@ -749,11 +760,11 @@
<!-- modal for pasting list of ingredients --> <!-- modal for pasting list of ingredients -->
<b-modal <b-modal
id="id_modal_paste_ingredients" id="id_modal_paste_ingredients"
v-bind:title="$t('ingredient_list')" v-bind:title="$t('ingredient_list')"
@ok="appendIngredients(paste_step)" @ok="appendIngredients(paste_step)"
@cancel="paste_ingredients = paste_step = undefined" @cancel="paste_ingredients = paste_step = undefined"
@close="paste_ingredients = paste_step = undefined" @close="paste_ingredients = paste_step = undefined"
> >
<b-form-textarea id="paste_ingredients" v-model="paste_ingredients" <b-form-textarea id="paste_ingredients" v-model="paste_ingredients"
:placeholder="$t('paste_ingredients_placeholder')" rows="10"></b-form-textarea> :placeholder="$t('paste_ingredients_placeholder')" rows="10"></b-form-textarea>
@ -832,7 +843,7 @@ export default {
header: true, header: true,
underline: true, underline: true,
strikethrough: true, strikethrough: true,
mark: true, mark: false,
superscript: true, superscript: true,
subscript: true, subscript: true,
quote: true, quote: true,
@ -1293,7 +1304,7 @@ export default {
}) })
Promise.allSettled(promises).then(() => { Promise.allSettled(promises).then(() => {
ing_list.forEach(ing => { ing_list.forEach(ing => {
if(ing.trim() !== ""){ if (ing.trim() !== "") {
step.ingredients.push(parsed_ing_list.find(x => x.original_text === ing)) step.ingredients.push(parsed_ing_list.find(x => x.original_text === ing))
} }
}) })