feat(web): checkbox for line; some responsibility for mobile

apps/web/src/components/RecipeCalculator/IngredientLine/Edit.vue

@@ -26,11 +26,11 @@ const ingredient = props.ingredient;
 const emit = defineEmits(['save'])
 const editIngredient = ref<Ingredient>(cloneDeep(props.ingredient))
 
-const editConcentration = ref<number|undefined>(ingredient.type?.concentration)
+const editConcentration = ref<number | undefined>(ingredient.type?.concentration)
 const isEditConcentration = ingredient.type?.concentration;
-const editUnit = ref<Unit|undefined>(ingredient.unit)
+const editUnit = ref<Unit | undefined>(ingredient.unit)
 
-const updateConcentration  = () => {
+const updateConcentration = () => {
   const fromConcentration = ingredient.type?.concentration;
   const toConcentration = editConcentration.value;
   let value = props.ingredient.value as number;
@@ -75,6 +75,10 @@ const unitSelectCb = (unit: Unit) => {
   editIngredient.value = convertIngredientUnit(editIngredient.value, unit)
 }
 
+const onFocusAllSelectCb = (e: Event) => {
+  (e.target as HTMLInputElement).select()
+}
+
 watch(props, () => {
   editIngredient.value = cloneDeep(props.ingredient)
   editIngredient.value.unit = editUnit.value
@@ -88,39 +92,44 @@ watch(props, () => {
     <td>
       <template v-if="isEditConcentration">
 
-
-      Концентрация: <input class="concentration"
-                           type="number"
-                           min="1"
-                           max="100"
-                           required
-                           @change="updateConcentration"
-                           v-model="editConcentration"/>
+        Концентрация: <input class="concentration"
+                             type="number"
+                             min="1"
+                             max="100"
+                             required
+                             v-model="editConcentration"
+                             @change="updateConcentration"
+                             @focus="onFocusAllSelectCb"
+      />
       </template>
     </td>
-    <td>{{ valueDisplay(editIngredient.value) }}</td>
-    <td><input
-        class="edit-value"
-        type="number"
-        :value="valueDisplay(editIngredient.calculated_value)"
-        @change="editCalculatedValueCb"
-    /></td>
+    <td>
+      <input
+          class="edit-value"
+          type="number"
+          :value="valueDisplay(editIngredient.calculated_value)"
+          @change="editCalculatedValueCb"
+          @focus="onFocusAllSelectCb"
+      /></td>
     <td>
       <EditUnitSelect
           :ingredient="editIngredient"
           @change="unitSelectCb"
       />
     </td>
-    <td><button @click="saveCb">Save</button></td>
+    <td>
+      <button @click="saveCb">Save</button>
+    </td>
   </tr>
 
 </template>
 
 <style scoped>
-  .concentration {
-    width: 4em;
-  }
-  .edit-value {
-    width: 5em;
-  }
+.concentration {
+  width: 4em;
+}
+
+.edit-value {
+  width: 4em;
+}
 </style>

apps/web/src/components/RecipeCalculator/IngredientLine/index.vue

@@ -27,8 +27,9 @@ const emit = defineEmits(['update:ingredient'])
 
 
 const editMode = ref(false)
-const allowEdit = ingredient.value.unit && ! ['taste',].includes(ingredient.value.unit)
+const allowEdit = ingredient.value.unit && !['taste',].includes(ingredient.value.unit)
 
+const checked = ref(false)
 
 const lineEditSaveCb = ($event: Ingredient) => {
   emit('update:ingredient', $event)
@@ -38,14 +39,16 @@ const lineEditSaveCb = ($event: Ingredient) => {
 
 <template>
   <tr>
-    <td>
-      {{ ingredient.name }}
+    <td :class="checked?'checked':''">
+      <label class="name">
+      <input class="checkbox" type="checkbox" v-model="checked"/>
+        {{ ingredient.name }}
 
-      <template v-if='ingredient?.type?.concentration'>
-        [{{ ingredient.type.concentration }}%]
-      </template>
+        <template v-if='ingredient?.type?.concentration'>
+          [{{ ingredient.type.concentration }}%]
+        </template>
+      </label>
     </td>
-    <td>{{ valueDisplay(ingredient.value) }}</td>
     <td>{{ valueDisplay(ingredient.calculated_value) }}</td>
     <td>{{ getUnitDisplay(ingredient.unit, props.lang, ingredient.value) }}</td>
     <td>
@@ -60,5 +63,7 @@ const lineEditSaveCb = ($event: Ingredient) => {
 </template>
 
 <style scoped>
-
+  .checked .name {
+    text-decoration-line: line-through;
+  }
 </style>

apps/web/src/components/RecipeCalculator/RecipeCalculator.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import {reactive, ref, unref, watch} from 'vue';
+import {computed, reactive, ref, unref, watch} from 'vue';
 
 
 import {Ingredient, type Recipe} from '@repo/food-recipe-core/src/food_recipe/core/types/recipe';
@@ -37,7 +37,6 @@ watch(state, () => saveState(state));
 const parsedRecipe = ref<Recipe | null>(null);
 updateRecipeCb();
 
-
 watch(() => state.rawRecipe, updateRecipeCb);
 
 watch(state, updateScaleCb);
@@ -54,7 +53,7 @@ const ingredientUpdateCb = (ingredient: Ingredient, g_i: number, i: number): voi
     const customScale = round(ingredient.calculated_value / ingredient.value, 3)
     if (round(state.newScale / state.scale, 3) != customScale) {
       // x / scale = customScale -> x = scale * customScale
-      state.newScale = state.scale * customScale
+      state.newScale = round(state.scale * customScale, 2)
       updateScaleCb()
     }
   }
@@ -73,18 +72,17 @@ const ingredientUpdateCb = (ingredient: Ingredient, g_i: number, i: number): voi
       <div id='parsed_recipe'>
         <h2>{{ parsedRecipe.name }}</h2>
 
-        <table>
+        <table class="recipeTable">
           <colgroup>
+            <col span='3' style='width: 100%'>
+            <col span='3' style='width: auto'>
             <col span='3' style='width: auto'>
-            <col span='3' style='width: 100px'>
-            <col span='3' style='width: 100px'>
           </colgroup>
           <thead>
           <tr>
             <th></th>
-            <th>Оригинал</th>
-            <th>Пересчет</th>
-            <th>Единица измерения</th>
+            <th></th>
+            <th></th>
             <th></th>
           </tr>
           </thead>
@@ -115,16 +113,24 @@ const ingredientUpdateCb = (ingredient: Ingredient, g_i: number, i: number): voi
 
       </div>
     </div>
-    <textarea v-model.lazy='state.rawRecipe'  id='raw_recipe'></textarea>
-    <pre>
-    </pre>
+    <hr>
+    <br>
+    <div class="rawRecipe-wrap">
+      <h3>Текстовый рецепт</h3>
+      <div>
+        * Вставьте сюда текст скопированного рецепта
+      </div>
+      <textarea
+          v-model.lazy='state.rawRecipe'  id='raw_recipe'></textarea>
+
+    </div>
   </div>
 </template>
 
 <style scoped>
 .scale_wrap {
   font-size: large;
-  padding: 2em;
+  padding: 0.5em;
 }
 
 .scale_wrap > div {
@@ -136,6 +142,10 @@ const ingredientUpdateCb = (ingredient: Ingredient, g_i: number, i: number): voi
   width: 2.5em;
 }
 
+#parsed_recipe table {
+  width: 100%;
+}
+
 #raw_recipe {
   width: 100%;
   height: 420px