conditional header/no amount render

cookbook/migrations/0068_auto_20200629_2127.py

@@ -0,0 +1,55 @@
+# Generated by Django 3.0.7 on 2020-06-29 19:27
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+def convert_old_specials(apps, schema_editor):
+    Ingredient = apps.get_model('cookbook', 'Ingredient')
+    Food = apps.get_model('cookbook', 'Food')
+    Unit = apps.get_model('cookbook', 'Unit')
+
+    for i in Ingredient.objects.all():
+        if i.amount == 0:
+            i.no_amount = True
+        if i.unit.name == 'Special:Header':
+            i.header = True
+            i.unit = None
+            i.food = None
+        i.save()
+
+    try:
+        Unit.objects.filter(name='Special:Header').delete()
+        Food.objects.filter(name='Header').delete()
+    except Exception:
+        pass
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('cookbook', '0067_auto_20200629_1508'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='ingredient',
+            name='header',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='ingredient',
+            name='no_amount',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name='ingredient',
+            name='food',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, to='cookbook.Food'),
+        ),
+        migrations.AlterField(
+            model_name='ingredient',
+            name='unit',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, to='cookbook.Unit'),
+        ),
+        migrations.RunPython(convert_old_specials)
+    ]

cookbook/migrations/0069_auto_20200629_2134.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.0.7 on 2020-06-29 19:34
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cookbook', '0068_auto_20200629_2127'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='ingredient',
+            old_name='header',
+            new_name='is_header',
+        ),
+    ]

cookbook/models.py

@@ -146,10 +146,12 @@ class Food(models.Model):
 
 
 class Ingredient(models.Model):
-    food = models.ForeignKey(Food, on_delete=models.PROTECT)
+    food = models.ForeignKey(Food, on_delete=models.PROTECT, null=True, blank=True)
-    unit = models.ForeignKey(Unit, on_delete=models.PROTECT)
+    unit = models.ForeignKey(Unit, on_delete=models.PROTECT, null=True, blank=True)
     amount = models.DecimalField(default=0, decimal_places=16, max_digits=32)
     note = models.CharField(max_length=256, null=True, blank=True)
+    is_header = models.BooleanField(default=False)
+    no_amount = models.BooleanField(default=False)
     order = models.IntegerField(default=0)
 
     def __str__(self):

cookbook/serializer.py

@@ -97,13 +97,13 @@ class FoodSerializer(UniqueFieldsMixin, serializers.ModelSerializer):
 
 
 class IngredientSerializer(WritableNestedModelSerializer):
-    food = FoodSerializer()
+    food = FoodSerializer(allow_null=True)
-    unit = UnitSerializer()
+    unit = UnitSerializer(allow_null=True)
     amount = CustomDecimalField()
 
     class Meta:
         model = Ingredient
-        fields = ('id', 'food', 'unit', 'amount', 'note', 'order')
+        fields = ('id', 'food', 'unit', 'amount', 'note', 'order', 'is_header', 'no_amount')
 
 
 class StepSerializer(WritableNestedModelSerializer):

cookbook/templates/forms/edit_internal_recipe.html

@@ -93,7 +93,6 @@
                         </div>
                     </div>
 
-
                     <div class="row">
                         <div class="col-md-12" style="margin-top: 12px">
                             <draggable :list="step.ingredients" group="ingredients"
@@ -109,12 +108,12 @@
                                                     class="fas fa-arrows-alt-v "></i></button>
                                         </div>
 
-                                        <div class="flex-fill row" style="margin-left: 8px; margin-right: 8px">
+                                        <div class="flex-fill row" style="margin-left: 4px; margin-right: 4px">
-                                            <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">
-                                                <input class="form-control" v-model="ingredient.amount" type="number">
+                                                <input class="form-control" v-model="ingredient.amount" type="number" v-if="!ingredient.no_amount">
                                             </div>
 
-                                            <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">
                                                 <multiselect
                                                         v-tabindex
                                                         ref="unit"
@@ -136,7 +135,7 @@
                                                         @search-change="searchUnits">
                                                 </multiselect>
                                             </div>
-                                            <div class="col-lg-4 col-md-6 small-padding">
+                                            <div class="col-lg-4 col-md-6 small-padding" v-if="!ingredient.is_header">
                                                 <multiselect
                                                         v-tabindex
                                                         ref="food"
@@ -158,16 +157,50 @@
                                                         @search-change="searchFoods">
                                                 </multiselect>
                                             </div>
-                                            <div class="col-lg-4 col-md-6 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 }">
                                                 <input class="form-control" v-model="ingredient.note"
                                                        placeholder="{% trans 'Note' %}">
                                             </div>
                                         </div>
 
                                         <div class="flex-grow-0 small-padding">
-                                            <button type="button" class="btn btn-outline-warning btn-lg"
+                                            <a class="btn shadow-none btn-lg" href="#" role="button"
-                                                    @click="removeIngredient(step, ingredient)"><i
+                                               id="dropdownMenuLink"
-                                                    class="fa fa-trash"></i></button>
+                                               data-toggle="dropdown" aria-haspopup="true"
+                                               aria-expanded="false">
+                                                <i class="fas fa-ellipsis-v text-muted"></i>
+                                            </a>
+
+                                            <div class="dropdown-menu dropdown-menu-right"
+                                                 aria-labelledby="dropdownMenuLink">
+                                                <button type="button" class="dropdown-item"
+                                                        @click="removeIngredient(step, ingredient)"><i
+                                                        class="fa fa-trash fa-fw"></i> {% trans 'Delete Ingredient' %}
+                                                </button>
+
+                                                <button type="button" class="dropdown-item"
+                                                        v-if="!ingredient.is_header "
+                                                        @click="ingredient.is_header = true"><i
+                                                        class="fas fa-heading fa-fw"></i> {% trans 'Make Header' %}
+                                                </button>
+
+                                                <button type="button" class="dropdown-item"
+                                                        v-if="ingredient.is_header "
+                                                        @click="ingredient.is_header = false"><i
+                                                        class="fas fa-leaf fa-fw"></i> {% trans 'Make Ingredient' %}
+                                                </button>
+
+                                                <button type="button" class="dropdown-item"
+                                                        v-if="!ingredient.no_amount "
+                                                        @click="ingredient.no_amount = true"><i class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Disable Amount' %}
+                                                </button>
+
+                                                <button type="button" class="dropdown-item"
+                                                        v-if="ingredient.no_amount "
+                                                        @click="ingredient.no_amount = false"><i class="fas fa-balance-scale-right fa-fw"></i> {% trans 'Enable Amount' %}
+                                                </button>
+                                            </div>
+
                                         </div>
                                     </div>
                                 </div>

cookbook/templates/recipe_view.html

@@ -126,7 +126,7 @@
                         <table class="table table-sm">
                             {% for s in recipe.steps.all %}
                                 {% for i in s.ingredients.all %}
-                                    {% if i.unit.name == 'Special:Header' %}
+                                    {% if i.is_header %}
                                         <tr>
                                             <td style="padding-top: 8px!important; ">
                                                 <b>{{ i.note }}</b>
@@ -143,11 +143,11 @@
                                                     <input type="checkbox"/>
                                                     <div class="state p-success">
                                                         <label>
-                                                            {% if i.amount != 0 %}
+                                                            {% if i.no_amount %}
+                                                                <span>&#x2063;</span>
+                                                            {% else %}
                                                                 <span id="ing_{{ i.pk }}">{{ i.amount.normalize }}</span>
                                                                 {{ i.unit }}
-                                                            {% else %}
-                                                                <span>&#x2063;</span>
                                                             {% endif %}
                                                         </label>
                                                     </div>