Merge pull request #79 from stepanzh/78-add-fast-add-of-number-of-portions

feat: fast adding of number of portions

Author: stepanzh

src/components/OriginalTable.vue

@@ -2,7 +2,8 @@
     <div>
         <!-- Table -->
         <div>
-            <div v-if="store.numberOfIngredients > 0" v-for="ingr in store.ingredients" :key="ingr.id" ref="ingredientList" class="table-row">
+            <div v-if="store.numberOfIngredients > 0" v-for="ingr in store.ingredients" :key="ingr.id"
+                ref="ingredientList" class="table-row">
                 <TextField v-model="ingr.name" placeholder="Ингредиент" class="cell-name" />
                 <OriginalAmount v-model="ingr.originalAmount" placeholder="250" class="cell-amount" />
                 <TextField v-model="ingr.unit" placeholder="гр" class="cell-unit" />
@@ -17,11 +18,18 @@
                     <ArrowsUpDownIconMini />
                 </template>
             </PButton>
-            <PButton @click="addIngredient" label="Добавить" class="btn-filled-primary">
-                <template #icon>
-                    <PlusCircleIconMini />
-                </template>
-            </PButton>
+            <div class="table-orig-actions__right">
+                <PButton @click="addNumberOfPortions" :iconOnly="true" class="btn-filled-secondary">
+                    <template #icon>
+                        <CircleStackIconMini />
+                    </template>
+                </PButton>
+                <PButton @click="addIngredient" label="Добавить" class="btn-filled-primary">
+                    <template #icon>
+                        <PlusCircleIconMini />
+                    </template>
+                </PButton>
+            </div>
         </div>
     </div>
 </template>
@@ -32,22 +40,56 @@ import { useProportioCalculatorStore } from '@/stores/proportioCalculator'
 import { useProportioNavStore } from '@/stores/proportioNav'
 import { nextTick, ref } from 'vue'
 import OriginalAmount from '@/components/OriginalAmount.vue'
+import PButton from '@/ui/PButton.vue'
 
 const proportio = useProportioNavStore()
 const store = useProportioCalculatorStore()
 const ingredientList = ref(null)
 
+function getLastIngredientElement() {
+    if (ingredientList.value.length > 0) {
+        let last = ingredientList.value[ingredientList.value.length - 1]
+        return last
+    }
+    return undefined
+}
+
 function addIngredient() {
     store.add()
     nextTick(() => {
-        if (ingredientList.value.length > 0) {
-            let last = ingredientList.value[ingredientList.value.length - 1]
-            let nameInputs = last.getElementsByClassName('cell-name')
-            if (nameInputs.length > 0) {
-                nameInputs[0].focus()
-                last.scrollIntoView({ 'behavior': 'smooth' })
-            }
+        let last = getLastIngredientElement()
+        if (!last) {
+            console.warn("DOM error: last ingredient was not added")
+            return undefined
+        }
+        let nameInputs = last.getElementsByClassName('cell-name')
+        if (nameInputs.length < 1) {
+            return undefined
         }
+
+        // DRY
+        nameInputs[0].focus()
+        last.scrollIntoView({ 'behavior': 'smooth' })
+    })
+}
+
+function addNumberOfPortions() {
+    store.add("Число порций")
+    nextTick(() => {
+        let last = getLastIngredientElement()
+        if (!last) {
+            console.warn("DOM error: number of portions was not added")
+            return undefined
+        }
+
+        let amountInputs = last.getElementsByClassName('cell-amount')
+        if (amountInputs.length < 1) {
+            return undefined
+        }
+
+        // DRY
+        amountInputs[0].focus()
+        last.scrollIntoView({ 'behaviour': 'smooth' })
     })
 }
 </script>
@@ -59,4 +101,9 @@ function addIngredient() {
     justify-content: space-between;
     margin-top: 16px;
 }
+
+.table-orig-actions__right {
+    display: flex;
+    gap: 12px;
+}
 </style>

src/ui/icons.js

@@ -24,6 +24,9 @@ Bars3IconOutline.__name = getVariableName({ Bars3IconOutline })
 import { CalculatorIcon as CalculatorIconMini } from '@heroicons/vue/16/solid'
 CalculatorIconMini.__name = getVariableName({ CalculatorIconMini })
 
+import { CircleStackIcon as CircleStackIconMini } from '@heroicons/vue/16/solid'
+CircleStackIconMini.__name = getVariableName({ CircleStackIconMini })
+
 import { CheckCircleIcon as CheckCircleIconMini } from '@heroicons/vue/16/solid'
 CheckCircleIconMini.__name = getVariableName({ CheckCircleIconMini })
 
@@ -73,6 +76,7 @@ export default [
     ArrowsUpDownIconMini,
     Bars3IconOutline,
     CalculatorIconMini,
+    CircleStackIconMini,
     CheckCircleIconMini,
     ClipboardDocumentListIconOutline,
     ExclamationTriangleIconMini,