feat(frontend): ✨ Fractional Scaling

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -1,68 +1,15 @@
 <template>
-  <div v-if="edit || (value && value.length > 0)">
+  <div v-if="value && value.length > 0">
     <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-    <div v-if="edit">
-      <draggable :value="value" handle=".handle" @input="updateIndex" @start="drag = true" @end="drag = false">
-        <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-          <div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
-            <v-row align="center">
-              <v-text-field
-                v-if="edit && showTitleEditor[index]"
-                v-model="value[index].title"
-                class="mx-3 mt-3"
-                dense
-                :label="$t('recipe.section-title')"
-              >
-              </v-text-field>
-
-              <v-textarea
-                v-model="value[index].note"
-                class="mr-2"
-                :label="$t('recipe.ingredient')"
-                auto-grow
-                solo
-                dense
-                rows="1"
-              >
-                <template slot="append">
-                  <v-tooltip right nudge-right="10">
-                    <template #activator="{ on, attrs }">
-                      <v-btn icon small class="mt-n1" v-bind="attrs" v-on="on" @click="toggleShowTitle(index)">
-                        <v-icon>{{ showTitleEditor[index] ? $globals.icons.minus : $globals.icons.createAlt }}</v-icon>
-                      </v-btn>
-                    </template>
-                    <span>{{
-                      showTitleEditor[index] ? $t("recipe.remove-section") : $t("recipe.insert-section")
-                    }}</span>
-                  </v-tooltip>
-                </template>
-                <template slot="append-outer">
-                  <v-icon class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
-                </template>
-                <v-icon slot="prepend" class="mr-n1" color="error" @click="removeByIndex(value, index)">
-                  {{ $globals.icons.delete }}
-                </v-icon>
-              </v-textarea>
-            </v-row>
-          </div>
-        </transition-group>
-      </draggable>
-
-      <div class="d-flex row justify-end">
-        <RecipeDialogBulkAdd class="mr-2" @bulk-data="addIngredient" />
-        <v-btn color="secondary" dark class="mr-4" @click="addIngredient">
-          <v-icon>{{ $globals.icons.create }}</v-icon>
-        </v-btn>
-      </div>
-    </div>
-    <div v-else>
+    <div>
       <div v-for="(ingredient, index) in value" :key="generateKey('ingredient', index)">
         <h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
         <v-divider v-if="showTitleEditor[index]"></v-divider>
         <v-list-item dense @click="toggleChecked(index)">
           <v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary"> </v-checkbox>
           <v-list-item-content>
-            <VueMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="ingredient.note"> </VueMarkdown>
+            <VueMarkdown class="ma-0 pa-0 text-subtitle-1 dense-markdown" :source="parseIngredientText(ingredient)">
+            </VueMarkdown>
           </v-list-item-content>
         </v-list-item>
       </div>
@@ -72,13 +19,10 @@
 
 <script>
 import VueMarkdown from "@adapttive/vue-markdown";
-import draggable from "vuedraggable";
+import { useFraction } from "@/composables/use-fraction";
 import { utils } from "@/utils";
-import RecipeDialogBulkAdd from "./RecipeDialogBulkAdd";
 export default {
   components: {
-    RecipeDialogBulkAdd,
-    draggable,
     VueMarkdown,
   },
   props: {
@@ -86,11 +30,42 @@ export default {
       type: Array,
       default: () => [],
     },
-
-    edit: {
+    disableAmount: {
       type: Boolean,
       default: false,
     },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+  setup(props) {
+    const { frac } = useFraction();
+
+    function parseIngredientText(ingredient) {
+      if (props.disableAmount) {
+        return ingredient.note;
+      }
+      const { quantity, food, unit, note } = ingredient;
+
+      let return_qty = "";
+      if (unit?.fraction) {
+        const fraction = frac(quantity * props.scale, 10, true);
+        if (fraction[0] !== undefined && fraction[0] > 0) {
+          return_qty += fraction[0];
+        }
+
+        if (fraction[1] > 0) {
+          return_qty += ` <sup>${fraction[1]}</sup>&frasl;<sub>${fraction[2]}</sub>`;
+        }
+      } else {
+        return_qty = quantity;
+      }
+
+      return `${return_qty} ${unit?.name || " "}  ${food?.name || " "} ${note}`;
+    }
+
+    return { parseIngredientText };
   },
   data() {
     return {
@@ -111,42 +86,14 @@ export default {
     this.showTitleEditor = this.value.map((x) => this.validateTitle(x.title));
   },
   methods: {
-    addIngredient(ingredients = null) {
-      if (ingredients.length) {
-        const newIngredients = ingredients.map((x) => {
-          return {
-            title: null,
-            note: x,
-            unit: null,
-            food: null,
-            disableAmount: true,
-            quantity: 1,
-          };
-        });
-        this.value.push(...newIngredients);
-      } else {
-        this.value.push({
-          title: null,
-          note: "",
-          unit: null,
-          food: null,
-          disableAmount: true,
-          quantity: 1,
-        });
-      }
-    },
     generateKey(item, index) {
       return utils.generateUniqueKey(item, index);
     },
-    updateIndex(data) {
-      this.$emit("input", data);
-    },
+
     toggleChecked(index) {
       this.$set(this.checked, index, !this.checked[index]);
     },
-    removeByIndex(list, index) {
-      list.splice(index, 1);
-    },
+
     validateTitle(title) {
       return !(title === null || title === "");
     },