step header rendering
This commit is contained in:
vabene1111
parent
1e2d7f77af
commit
1619d4894c
18
cookbook/migrations/0072_step_show_as_header.py
Normal file
18
cookbook/migrations/0072_step_show_as_header.py
Normal file
@ -0,0 +1,18 @@
|
||||
# Generated by Django 3.0.7 on 2020-07-02 10:00
|
||||
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
dependencies = [
|
||||
('cookbook', '0071_auto_20200701_2048'),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.AddField(
|
||||
model_name='step',
|
||||
name='show_as_header',
|
||||
field=models.BooleanField(default=True),
|
||||
),
|
||||
]
|
||||
@ -168,6 +168,7 @@ class Step(models.Model):
|
||||
ingredients = models.ManyToManyField(Ingredient, blank=True)
|
||||
time = models.IntegerField(default=0, blank=True)
|
||||
order = models.IntegerField(default=0)
|
||||
show_as_header = models.BooleanField(default=True)
|
||||
|
||||
class Meta:
|
||||
ordering = ['order', 'pk']
|
||||
|
||||
@ -116,7 +116,7 @@ class StepSerializer(WritableNestedModelSerializer):
|
||||
|
||||
class Meta:
|
||||
model = Step
|
||||
fields = '__all__'
|
||||
fields = ('id', 'name', 'type', 'instruction', 'ingredients', 'time', 'order', 'show_as_header')
|
||||
|
||||
|
||||
class RecipeSerializer(WritableNestedModelSerializer):
|
||||
|
||||
@ -109,11 +109,22 @@
|
||||
<button class="dropdown-item" @click="removeStep(step)"><i
|
||||
class="fa fa-trash fa-fw"></i> {% trans 'Delete Step' %}</button>
|
||||
|
||||
<button type="button" class="dropdown-item"
|
||||
v-if="!step.show_as_header"
|
||||
@click="step.show_as_header = true"><i
|
||||
class="fas fa-eye fa-fw"></i> {% trans 'Show as header' %}
|
||||
</button>
|
||||
|
||||
<button type="button" class="dropdown-item"
|
||||
v-if="step.show_as_header"
|
||||
@click="step.show_as_header = false"><i
|
||||
class="fas fa-eye-slash fa-fw"></i> {% trans 'Hide as header' %}
|
||||
</button>
|
||||
|
||||
<button class="dropdown-item" @click="moveStep(step, (step_index - 1))"
|
||||
v-if="step_index > 0">
|
||||
<i class="fa fa-arrow-up fa-fw"></i> {% trans 'Move Up' %}
|
||||
</button>
|
||||
|
||||
<button class="dropdown-item"
|
||||
@click="moveStep(step, (step_index + 1))"
|
||||
v-if="step_index != (recipe.steps.length - 1)">
|
||||
@ -350,7 +361,7 @@
|
||||
<button type="button" @click="addStep()"
|
||||
class="btn btn-primary btn-block shadow-none">{% trans 'Add Step' %}</button>
|
||||
|
||||
<a href="{% url 'view_recipe' recipe.pk %}" @click="addStep()"
|
||||
<a href="{% url 'view_recipe' recipe.pk %}"
|
||||
class="btn btn-secondary btn-block shadow-none">{% trans 'View Recipe' %}</a> <br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
<br/>
|
||||
{% endif %}
|
||||
|
||||
<div class="row" v-if="recipe">
|
||||
<div class="row" v-if="recipe && has_ingredients">
|
||||
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@ -116,7 +116,8 @@
|
||||
<div class="col col-md-3">
|
||||
|
||||
<div class="input-group d-print-none">
|
||||
<input type="number" value="1" maxlength="3" class="form-control" v-model="ingredient_factor"/>
|
||||
<input type="number" value="1" maxlength="3" class="form-control"
|
||||
v-model="ingredient_factor"/>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text"><i class="fas fa-calculator"></i></span>
|
||||
</div>
|
||||
@ -124,80 +125,87 @@
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<table class="table table-sm">
|
||||
<template v-for="s in recipe.steps">
|
||||
<template v-for="i in s.ingredients">
|
||||
<template v-if="i.is_header">
|
||||
<tr>
|
||||
<td style="padding-top: 8px!important; ">
|
||||
<b>[[i.note]]</b>
|
||||
</td>
|
||||
<td>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table table-sm">
|
||||
<template v-for="s in recipe.steps">
|
||||
<template v-if="s.name != '' && s.show_as_header && s.ingredients.length > 0">
|
||||
<tr>
|
||||
<td style="padding-top: 8px!important; ">
|
||||
<b>[[s.name]]</b>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-for="i in s.ingredients">
|
||||
<template v-if="i.is_header">
|
||||
<tr>
|
||||
<td style="padding-top: 8px!important; ">
|
||||
<b>[[i.note]]</b>
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<div class="pretty p-default p-curve">
|
||||
<input type="checkbox"/>
|
||||
<div class="state p-success">
|
||||
<label>
|
||||
<template v-if="i.no_amount">
|
||||
<span>⁣</span>
|
||||
</template>
|
||||
<template v-if="!i.no_amount && i.unit">
|
||||
<span>[[roundDecimals(i.amount * ingredient_factor)]]</span>
|
||||
[[i.unit.name]]
|
||||
</template>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</td>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<template v-if="i.food && i.food.recipe">
|
||||
<a v-bind:href='"{% url 'view_recipe' 12345 %}".replace(/12345/, i.food.recipe)'
|
||||
target="_blank" rel="noopener noreferrer">[[i.food.name]]</a>
|
||||
</template>
|
||||
<template v-else-if="i.food">
|
||||
[[i.food.name]]
|
||||
</template>
|
||||
</td>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<template v-if="i.note">
|
||||
<a class="btn btn-light btn-sm d-print-none" tabindex="-1"
|
||||
data-toggle="popover"
|
||||
data-placement="right" data-html="true" data-trigger="focus"
|
||||
v-bind:data-content="i.note">
|
||||
<i class="fas fa-info"></i>
|
||||
</a>
|
||||
<div class="d-none d-print-block">
|
||||
<i class="far fa-comment-alt"></i> [[i.note]]
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<div class="pretty p-default p-curve">
|
||||
<input type="checkbox"/>
|
||||
<div class="state p-success">
|
||||
<label>
|
||||
<template v-if="i.no_amount">
|
||||
<span>⁣</span>
|
||||
</template>
|
||||
<template v-if="!i.no_amount && i.unit">
|
||||
<span>[[roundDecimals(i.amount * ingredient_factor)]]</span>
|
||||
[[i.unit.name]]
|
||||
</template>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<template v-if="i.food && i.food.recipe">
|
||||
<a v-bind:href='"{% url 'view_recipe' 12345 %}".replace(/12345/, i.food.recipe)'
|
||||
target="_blank" rel="noopener noreferrer">[[i.food.name]]</a>
|
||||
</template>
|
||||
<template v-else-if="i.food">
|
||||
[[i.food.name]]
|
||||
</template>
|
||||
</td>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<template v-if="i.note">
|
||||
<a class="btn btn-light btn-sm d-print-none" tabindex="-1"
|
||||
data-toggle="popover"
|
||||
data-placement="right" data-html="true" data-trigger="focus"
|
||||
v-bind:data-content="i.note">
|
||||
<i class="fas fa-info"></i>
|
||||
</a>
|
||||
<div class="d-none d-print-block">
|
||||
<i class="far fa-comment-alt"></i> [[i.note]]
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- Bottom border -->
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<!-- Bottom border -->
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{% if recipe.image %}
|
||||
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
|
||||
<img class="img img-fluid rounded" src="{{ recipe.image.url }}" style="max-height: 30vh;"
|
||||
@ -207,41 +215,116 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if ingredients or recipe.image %}
|
||||
<br/>
|
||||
<br/>
|
||||
{% endif %}
|
||||
|
||||
<div style="font-size: large">
|
||||
<div style="font-size: large;">
|
||||
{% for s in recipe.steps.all %}
|
||||
{% if recipe.steps.all|length > 1 %}
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-muted">
|
||||
<small>
|
||||
{% if s.type == 'TEXT' %}
|
||||
<i class="fas fa-paragraph fa-fw"></i>
|
||||
{% elif s.type == 'TIME' %}
|
||||
<i class="fas fa-clock fa-fw"></i>
|
||||
{% endif %}
|
||||
{% if s.name %}{{ s.name }}{% else %}{% trans 'Step' %}
|
||||
{{ forloop.counter }}{% endif %}
|
||||
{% if s.type == 'TIME' %}
|
||||
- {{ s.time }} {% trans 'Minutes' %}
|
||||
{% endif %}
|
||||
</small>
|
||||
<div style="margin-top: 1vh" class="card">
|
||||
<div class="card-body">
|
||||
{% if recipe.steps.all|length > 1 %}
|
||||
<div class="card-title">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-muted">
|
||||
|
||||
{% if s.type == 'TEXT' %}
|
||||
<i class="fas fa-paragraph fa-fw"></i>
|
||||
{% elif s.type == 'TIME' %}
|
||||
<i class="fas fa-clock fa-fw"></i>
|
||||
{% endif %}
|
||||
{% if s.name %}{{ s.name }}{% else %}{% trans 'Step' %}
|
||||
{{ forloop.counter }}{% endif %}
|
||||
{% if s.type == 'TIME' %}
|
||||
- {{ s.time }} {% trans 'Minutes' %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="recipe && recipe.steps[{{ forloop.counter0 }}].ingredients.length > 0"
|
||||
style="margin-top: 1vh">
|
||||
<div class="col-md-6">
|
||||
<table class="table table-sm">
|
||||
<template v-for="i in recipe.steps[{{ forloop.counter0 }}].ingredients">
|
||||
|
||||
<template v-if="i.is_header">
|
||||
<tr>
|
||||
<td style="padding-top: 8px!important; ">
|
||||
<b>[[i.note]]</b>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</template>
|
||||
<template v-else>
|
||||
<tr>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<div class="pretty p-default p-curve">
|
||||
<input type="checkbox"/>
|
||||
<div class="state p-success">
|
||||
<label>
|
||||
<template v-if="i.no_amount">
|
||||
<span>⁣</span>
|
||||
</template>
|
||||
<template v-if="!i.no_amount && i.unit">
|
||||
<span>[[roundDecimals(i.amount * ingredient_factor)]]</span>
|
||||
[[i.unit.name]]
|
||||
</template>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<template v-if="i.food && i.food.recipe">
|
||||
<a v-bind:href='"{% url 'view_recipe' 12345 %}".replace(/12345/, i.food.recipe)'
|
||||
target="_blank" rel="noopener noreferrer">[[i.food.name]]</a>
|
||||
</template>
|
||||
<template v-else-if="i.food">
|
||||
[[i.food.name]]
|
||||
</template>
|
||||
</td>
|
||||
<td style="vertical-align: middle!important;">
|
||||
<template v-if="i.note">
|
||||
<a class="btn btn-light btn-sm d-print-none" tabindex="-1"
|
||||
data-toggle="popover"
|
||||
data-placement="right" data-html="true" data-trigger="focus"
|
||||
v-bind:data-content="i.note">
|
||||
<i class="fas fa-info"></i>
|
||||
</a>
|
||||
<div class="d-none d-print-block">
|
||||
<i class="far fa-comment-alt"></i> [[i.note]]
|
||||
</div>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
<!-- Bottom border -->
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<div class="row" style="margin-top: 8px">
|
||||
<div class="col-md-12">
|
||||
{% if s.instruction %}
|
||||
{{ s.instruction | markdown | safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row" style="margin-top: 8px">
|
||||
<div class="col-md-12">
|
||||
{% if s.instruction %}
|
||||
{{ s.instruction | markdown | safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -380,6 +463,7 @@
|
||||
el: '#id_base_container',
|
||||
data: {
|
||||
recipe: undefined,
|
||||
has_ingredients: false,
|
||||
ingredient_factor: 1,
|
||||
},
|
||||
|
||||
@ -391,6 +475,14 @@
|
||||
this.$http.get("{% url 'api:recipe-detail' recipe.pk %}").then((response) => {
|
||||
this.recipe = response.data;
|
||||
this.loading = false
|
||||
|
||||
for (let step of this.recipe.steps) {
|
||||
if (step.ingredients.length > 0) {
|
||||
this.has_ingredients = true
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
}).catch((err) => {
|
||||
this.error = err.data
|
||||
this.loading = false
|
||||
|
||||
Loading…
Reference in New Issue
Block a user