From b248bf2fb60ef8cb913e34a900bc9d17ad885cd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Thu, 1 Jul 2021 17:35:18 +0300
Subject: [PATCH 01/22] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=89=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/ItemCounter.vue |  25 ++++
 src/frontend/src/common/RadioButton.vue |  33 +++++
 src/frontend/src/common/Widget.vue      |  39 ++++++
 src/frontend/src/views/Index.vue        | 174 ++++++++++--------------
 4 files changed, 168 insertions(+), 103 deletions(-)
 create mode 100644 src/frontend/src/common/ItemCounter.vue
 create mode 100644 src/frontend/src/common/RadioButton.vue
 create mode 100644 src/frontend/src/common/Widget.vue

diff --git a/src/frontend/src/common/ItemCounter.vue b/src/frontend/src/common/ItemCounter.vue
new file mode 100644
index 0000000..72c4cf2
--- /dev/null
+++ b/src/frontend/src/common/ItemCounter.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="counter" :class="classMods">
+    <button
+      type="button"
+      class="counter__button counter__button--disabled counter__button--minus"
+    >
+      <span class="visually-hidden">Меньше</span>
+    </button>
+    <input type="text" name="counter" class="counter__input" value="0" />
+    <button type="button" class="counter__button counter__button--plus">
+      <span class="visually-hidden">Больше</span>
+    </button>
+  </div>
+</template>
+<script>
+export default {
+  name: "ItemCounter",
+  props: {
+    classMods: {
+      type: Array,
+      isRequired: false,
+    },
+  },
+};
+</script>
diff --git a/src/frontend/src/common/RadioButton.vue b/src/frontend/src/common/RadioButton.vue
new file mode 100644
index 0000000..a4c9546
--- /dev/null
+++ b/src/frontend/src/common/RadioButton.vue
@@ -0,0 +1,33 @@
+<template>
+  <label class="radio" :class="classMods">
+    <input type="radio" :name="radioName" :value="value" :checked="isChecked" />
+    <span>{{ name }}</span>
+  </label>
+</template>
+<script>
+export default {
+  name: "RadioButton",
+  props: {
+    classMods: {
+      type: Array,
+    },
+    radioName: {
+      type: String,
+      default: "radioButton",
+    },
+    value: {
+      type: String,
+      isRequired: true,
+    },
+    isChecked: {
+      type: Boolean,
+      isRequired: true,
+    },
+    name: {
+      type: String,
+      default: "Радио кнопка",
+    },
+  },
+};
+</script>
+<style></style>
diff --git a/src/frontend/src/common/Widget.vue b/src/frontend/src/common/Widget.vue
new file mode 100644
index 0000000..4031289
--- /dev/null
+++ b/src/frontend/src/common/Widget.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="sheet">
+    <h2 class="title title--small sheet__title">{{ title }}</h2>
+
+    <div class="sheet__content" :class="classMods">
+      <slot />
+      <!--      <label-->
+      <!--        v-for="({ value, name, description }, index) of doughs"-->
+      <!--        :key="index"-->
+      <!--        class="dough__input"-->
+      <!--        :class="`dough__input&#45;&#45;${value}`"-->
+      <!--      >-->
+      <!--        <input-->
+      <!--          type="radio"-->
+      <!--          name="dough"-->
+      <!--          :value="value"-->
+      <!--          class="visually-hidden"-->
+      <!--          :checked="index === 0"-->
+      <!--        />-->
+      <!--        <b>{{ name }}</b>-->
+      <!--        <span>{{ description }}</span>-->
+      <!--      </label>-->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "Widget",
+  props: {
+    title: {
+      type: String,
+      default: "Заголовок",
+    },
+    classMods: {
+      type: Array,
+    },
+  },
+};
+</script>
diff --git a/src/frontend/src/views/Index.vue b/src/frontend/src/views/Index.vue
index d82d22a..8dedf13 100644
--- a/src/frontend/src/views/Index.vue
+++ b/src/frontend/src/views/Index.vue
@@ -25,121 +25,81 @@
           <h1 class="title title--big">Конструктор пиццы</h1>
 
           <div class="content__dough">
-            <div class="sheet">
-              <h2 class="title title--small sheet__title">Выберите тесто</h2>
-
-              <div class="sheet__content dough">
-                <label
-                  v-for="({ value, name, description }, index) of doughs"
-                  :key="index"
-                  class="dough__input"
-                  :class="`dough__input--${value}`"
-                >
-                  <input
-                    type="radio"
-                    name="dough"
-                    :value="value"
-                    class="visually-hidden"
-                    :checked="index === 0"
-                  />
-                  <b>{{ name }}</b>
-                  <span>{{ description }}</span>
-                </label>
-              </div>
-            </div>
+            <Widget title="Выберите тесто" :class-mods="['dough']">
+              <label
+                v-for="({ value, name, description }, index) of doughs"
+                :key="index"
+                class="dough__input"
+                :class="`dough__input--${value}`"
+              >
+                <input
+                  type="radio"
+                  name="dough"
+                  :value="value"
+                  class="visually-hidden"
+                  :checked="index === 0"
+                />
+                <b>{{ name }}</b>
+                <span>{{ description }}</span>
+              </label>
+            </Widget>
           </div>
 
           <div class="content__diameter">
-            <div class="sheet">
-              <h2 class="title title--small sheet__title">Выберите размер</h2>
-
-              <div class="sheet__content diameter">
-                <label
-                  v-for="({ value, name }, index) of sizes"
-                  :key="index"
-                  class="diameter__input"
-                  :class="`diameter__input--${value}`"
-                >
-                  <input
-                    type="radio"
-                    name="diameter"
-                    :value="value"
-                    :checked="index === 1"
-                    class="visually-hidden"
-                  />
-                  <span>{{ name }}</span>
-                </label>
-              </div>
-            </div>
+            <Widget title="Выберите размер" :class-mods="['diameter']">
+              <label
+                v-for="({ value, name }, index) of sizes"
+                :key="index"
+                class="diameter__input"
+                :class="`diameter__input--${value}`"
+              >
+                <input
+                  type="radio"
+                  name="diameter"
+                  :value="value"
+                  :checked="index === 1"
+                  class="visually-hidden"
+                />
+                <span>{{ name }}</span>
+              </label>
+            </Widget>
           </div>
 
           <div class="content__ingridients">
-            <div class="sheet">
-              <h2 class="title title--small sheet__title">
-                Выберите ингридиенты
-              </h2>
+            <Widget title="Выберите ингридиенты" :class-mods="['ingridients']">
+              <div class="ingridients__sauce">
+                <p>Основной соус:</p>
+                <RadioButton
+                  v-for="({ value, name }, index) of sauces"
+                  :key="index"
+                  :class-mods="['ingridients__input']"
+                  radio-name="sauce"
+                  :value="value"
+                  :is-checked="index === 0"
+                  :name="name"
+                />
+              </div>
 
-              <div class="sheet__content ingridients">
-                <div class="ingridients__sauce">
-                  <p>Основной соус:</p>
+              <div class="ingridients__filling">
+                <p>Начинка:</p>
 
-                  <label
-                    class="radio ingridients__input"
-                    v-for="({ value, name }, index) of sauces"
+                <ul class="ingridients__list">
+                  <li
+                    class="ingridients__item"
+                    v-for="({ mod, name }, index) of ingredients"
                     :key="index"
                   >
-                    <input
-                      type="radio"
-                      name="sauce"
-                      :value="value"
-                      :checked="index === 0"
-                    />
-                    <span>{{ name }}</span>
-                  </label>
-                </div>
-
-                <div class="ingridients__filling">
-                  <p>Начинка:</p>
-
-                  <ul class="ingridients__list">
-                    <li
-                      class="ingridients__item"
-                      v-for="({ mod, name }, index) of ingredients"
-                      :key="index"
-                    >
-                      <span class="filling" :class="`filling--${mod}`">{{
-                        name
-                      }}</span>
+                    <span class="filling" :class="`filling--${mod}`">{{
+                      name
+                    }}</span>
 
-                      <div class="counter counter--orange ingridients__counter">
-                        <button
-                          type="button"
-                          class="
-                            counter__button
-                            counter__button--disabled
-                            counter__button--minus
-                          "
-                        >
-                          <span class="visually-hidden">Меньше</span>
-                        </button>
-                        <input
-                          type="text"
-                          name="counter"
-                          class="counter__input"
-                          value="0"
-                        />
-                        <button
-                          type="button"
-                          class="counter__button counter__button--plus"
-                        >
-                          <span class="visually-hidden">Больше</span>
-                        </button>
-                      </div>
-                    </li>
-                  </ul>
-                </div>
+                    <ItemCounter
+                      :class-mods="['counter--orange', 'ingridients__counter']"
+                    />
+                  </li>
+                </ul>
               </div>
-            </div>
+            </Widget>
           </div>
 
           <div class="content__pizza">
@@ -177,6 +137,9 @@
 
 <script>
 import pizza from "../static/pizza";
+import ItemCounter from "../common/ItemCounter";
+import RadioButton from "../common/RadioButton";
+import Widget from "../common/Widget";
 import {
   normalizeDoughs,
   normalizeIngredients,
@@ -186,6 +149,11 @@ import {
 
 export default {
   name: "Index",
+  components: {
+    ItemCounter,
+    RadioButton,
+    Widget,
+  },
   data() {
     return {
       doughs: normalizeDoughs(pizza.dough),

From 79203940409e62f73272a88b26686ff705565757 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Thu, 1 Jul 2021 19:50:20 +0300
Subject: [PATCH 02/22] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=89=D1=83=D1=8E=20=D0=B4=D0=B8=D1=80=D0=B5=D0=BA?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D1=8E=20=D0=B4=D0=BB=D1=8F=20=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=89=D0=B8=D1=85=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/{ => components}/ItemCounter.vue | 0
 src/frontend/src/common/{ => components}/RadioButton.vue | 0
 src/frontend/src/common/{ => components}/Widget.vue      | 0
 src/frontend/src/views/Index.vue                         | 6 +++---
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename src/frontend/src/common/{ => components}/ItemCounter.vue (100%)
 rename src/frontend/src/common/{ => components}/RadioButton.vue (100%)
 rename src/frontend/src/common/{ => components}/Widget.vue (100%)

diff --git a/src/frontend/src/common/ItemCounter.vue b/src/frontend/src/common/components/ItemCounter.vue
similarity index 100%
rename from src/frontend/src/common/ItemCounter.vue
rename to src/frontend/src/common/components/ItemCounter.vue
diff --git a/src/frontend/src/common/RadioButton.vue b/src/frontend/src/common/components/RadioButton.vue
similarity index 100%
rename from src/frontend/src/common/RadioButton.vue
rename to src/frontend/src/common/components/RadioButton.vue
diff --git a/src/frontend/src/common/Widget.vue b/src/frontend/src/common/components/Widget.vue
similarity index 100%
rename from src/frontend/src/common/Widget.vue
rename to src/frontend/src/common/components/Widget.vue
diff --git a/src/frontend/src/views/Index.vue b/src/frontend/src/views/Index.vue
index 8dedf13..ab6cf9d 100644
--- a/src/frontend/src/views/Index.vue
+++ b/src/frontend/src/views/Index.vue
@@ -137,9 +137,9 @@
 
 <script>
 import pizza from "../static/pizza";
-import ItemCounter from "../common/ItemCounter";
-import RadioButton from "../common/RadioButton";
-import Widget from "../common/Widget";
+import ItemCounter from "../common/components/ItemCounter";
+import RadioButton from "../common/components/RadioButton";
+import Widget from "../common/components/Widget";
 import {
   normalizeDoughs,
   normalizeIngredients,

From af94b93ea57e25e84eebc77a2829093dc8fe0f81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Thu, 1 Jul 2021 21:42:06 +0300
Subject: [PATCH 03/22] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BA=D0=B5=D1=82=20vue-fragment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/package-lock.json                |  16 +-
 src/frontend/src/common/components/Widget.vue |  16 --
 .../modules/builder/components/Builder.vue    | 147 +++++++++++++++++
 .../src/modules/header/components/Header.vue  |  28 ++++
 .../modules/header/components/HeaderCart.vue  |  10 ++
 .../modules/header/components/HeaderUser.vue  |  10 ++
 src/frontend/src/modules/index.js             |   0
 src/frontend/src/views/Index.vue              | 152 +-----------------
 8 files changed, 215 insertions(+), 164 deletions(-)
 create mode 100644 src/frontend/src/modules/builder/components/Builder.vue
 create mode 100644 src/frontend/src/modules/header/components/Header.vue
 create mode 100644 src/frontend/src/modules/header/components/HeaderCart.vue
 create mode 100644 src/frontend/src/modules/header/components/HeaderUser.vue
 delete mode 100644 src/frontend/src/modules/index.js

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 39b5e33..c0acdcb 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -9123,7 +9123,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0"
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
           }
         },
         "normalize-path": {
@@ -11183,6 +11184,13 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -15737,7 +15745,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0"
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
           }
         },
         "glob-parent": {
@@ -16037,7 +16046,8 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0"
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
           }
         },
         "glob-parent": {
diff --git a/src/frontend/src/common/components/Widget.vue b/src/frontend/src/common/components/Widget.vue
index 4031289..bdf4847 100644
--- a/src/frontend/src/common/components/Widget.vue
+++ b/src/frontend/src/common/components/Widget.vue
@@ -4,22 +4,6 @@
 
     <div class="sheet__content" :class="classMods">
       <slot />
-      <!--      <label-->
-      <!--        v-for="({ value, name, description }, index) of doughs"-->
-      <!--        :key="index"-->
-      <!--        class="dough__input"-->
-      <!--        :class="`dough__input&#45;&#45;${value}`"-->
-      <!--      >-->
-      <!--        <input-->
-      <!--          type="radio"-->
-      <!--          name="dough"-->
-      <!--          :value="value"-->
-      <!--          class="visually-hidden"-->
-      <!--          :checked="index === 0"-->
-      <!--        />-->
-      <!--        <b>{{ name }}</b>-->
-      <!--        <span>{{ description }}</span>-->
-      <!--      </label>-->
     </div>
   </div>
 </template>
diff --git a/src/frontend/src/modules/builder/components/Builder.vue b/src/frontend/src/modules/builder/components/Builder.vue
new file mode 100644
index 0000000..adf3f81
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/Builder.vue
@@ -0,0 +1,147 @@
+<template>
+  <form action="#" method="post">
+    <div class="content__wrapper">
+      <h1 class="title title--big">Конструктор пиццы</h1>
+
+      <div class="content__dough">
+        <Widget title="Выберите тесто" :class-mods="['dough']">
+          <label
+            v-for="({ value, name, description }, index) of doughs"
+            :key="index"
+            class="dough__input"
+            :class="`dough__input--${value}`"
+          >
+            <input
+              type="radio"
+              name="dough"
+              :value="value"
+              class="visually-hidden"
+              :checked="index === 0"
+            />
+            <b>{{ name }}</b>
+            <span>{{ description }}</span>
+          </label>
+        </Widget>
+      </div>
+
+      <div class="content__diameter">
+        <Widget title="Выберите размер" :class-mods="['diameter']">
+          <label
+            v-for="({ value, name }, index) of sizes"
+            :key="index"
+            class="diameter__input"
+            :class="`diameter__input--${value}`"
+          >
+            <input
+              type="radio"
+              name="diameter"
+              :value="value"
+              :checked="index === 1"
+              class="visually-hidden"
+            />
+            <span>{{ name }}</span>
+          </label>
+        </Widget>
+      </div>
+
+      <div class="content__ingridients">
+        <Widget title="Выберите ингридиенты" :class-mods="['ingridients']">
+          <div class="ingridients__sauce">
+            <p>Основной соус:</p>
+            <RadioButton
+              v-for="({ value, name }, index) of sauces"
+              :key="index"
+              :class-mods="['ingridients__input']"
+              radio-name="sauce"
+              :value="value"
+              :is-checked="index === 0"
+              :name="name"
+            />
+          </div>
+
+          <div class="ingridients__filling">
+            <p>Начинка:</p>
+
+            <ul class="ingridients__list">
+              <li
+                class="ingridients__item"
+                v-for="({ mod, name }, index) of ingredients"
+                :key="index"
+              >
+                <span class="filling" :class="`filling--${mod}`">{{
+                  name
+                }}</span>
+
+                <ItemCounter
+                  :class-mods="['counter--orange', 'ingridients__counter']"
+                />
+              </li>
+            </ul>
+          </div>
+        </Widget>
+      </div>
+
+      <div class="content__pizza">
+        <label class="input">
+          <span class="visually-hidden">Название пиццы</span>
+          <input
+            type="text"
+            name="pizza_name"
+            placeholder="Введите название пиццы"
+          />
+        </label>
+
+        <div class="content__constructor">
+          <div class="pizza pizza--foundation--big-tomato">
+            <div class="pizza__wrapper">
+              <div class="pizza__filling pizza__filling--ananas"></div>
+              <div class="pizza__filling pizza__filling--bacon"></div>
+              <div class="pizza__filling pizza__filling--cheddar"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="content__result">
+          <p>Итого: 0 ₽</p>
+          <button type="button" class="button button--disabled" disabled>
+            Готовьте!
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</template>
+<script>
+import ItemCounter from "../../../common/components/ItemCounter";
+import RadioButton from "../../../common/components/RadioButton";
+import Widget from "../../../common/components/Widget";
+import {
+  normalizeDoughs,
+  normalizeIngredients,
+  normalizeSauces,
+  normalizeSizes,
+} from "../../../common";
+
+export default {
+  name: "Builder",
+  components: {
+    ItemCounter,
+    RadioButton,
+    Widget,
+  },
+  props: {
+    pizza: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      doughs: normalizeDoughs(this.pizza.dough),
+      sizes: normalizeSizes(this.pizza.sizes),
+      sauces: normalizeSauces(this.pizza.sauces),
+      ingredients: normalizeIngredients(this.pizza.ingredients),
+    };
+  },
+};
+</script>
diff --git a/src/frontend/src/modules/header/components/Header.vue b/src/frontend/src/modules/header/components/Header.vue
new file mode 100644
index 0000000..83dedf5
--- /dev/null
+++ b/src/frontend/src/modules/header/components/Header.vue
@@ -0,0 +1,28 @@
+<template>
+  <header class="header">
+    <div class="header__logo">
+      <a href="index.html" class="logo">
+        <img
+          src="../../../assets/img/logo.svg"
+          alt="V!U!E! Pizza logo"
+          width="90"
+          height="40"
+        />
+      </a>
+    </div>
+    <HeaderCart />
+    <HeaderUser />
+  </header>
+</template>
+<script>
+import HeaderCart from "./HeaderCart";
+import HeaderUser from "./HeaderUser";
+
+export default {
+  name: "Header",
+  components: {
+    HeaderCart,
+    HeaderUser,
+  },
+};
+</script>
diff --git a/src/frontend/src/modules/header/components/HeaderCart.vue b/src/frontend/src/modules/header/components/HeaderCart.vue
new file mode 100644
index 0000000..a639007
--- /dev/null
+++ b/src/frontend/src/modules/header/components/HeaderCart.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="header__cart">
+    <a href="cart.html">0 ₽</a>
+  </div>
+</template>
+<script>
+export default {
+  name: "HeaderCart",
+};
+</script>
diff --git a/src/frontend/src/modules/header/components/HeaderUser.vue b/src/frontend/src/modules/header/components/HeaderUser.vue
new file mode 100644
index 0000000..188bee6
--- /dev/null
+++ b/src/frontend/src/modules/header/components/HeaderUser.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="header__user">
+    <a href="#" class="header__login"><span>Войти</span></a>
+  </div>
+</template>
+<script>
+export default {
+  name: "HeaderUser",
+};
+</script>
diff --git a/src/frontend/src/modules/index.js b/src/frontend/src/modules/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/frontend/src/views/Index.vue b/src/frontend/src/views/Index.vue
index ab6cf9d..cc6d6c8 100644
--- a/src/frontend/src/views/Index.vue
+++ b/src/frontend/src/views/Index.vue
@@ -1,165 +1,27 @@
 <template>
   <div>
-    <header class="header">
-      <div class="header__logo">
-        <a href="index.html" class="logo">
-          <img
-            src="../assets/img/logo.svg"
-            alt="V!U!E! Pizza logo"
-            width="90"
-            height="40"
-          />
-        </a>
-      </div>
-      <div class="header__cart">
-        <a href="cart.html">0 ₽</a>
-      </div>
-      <div class="header__user">
-        <a href="#" class="header__login"><span>Войти</span></a>
-      </div>
-    </header>
+    <Header />
 
     <main class="content">
-      <form action="#" method="post">
-        <div class="content__wrapper">
-          <h1 class="title title--big">Конструктор пиццы</h1>
-
-          <div class="content__dough">
-            <Widget title="Выберите тесто" :class-mods="['dough']">
-              <label
-                v-for="({ value, name, description }, index) of doughs"
-                :key="index"
-                class="dough__input"
-                :class="`dough__input--${value}`"
-              >
-                <input
-                  type="radio"
-                  name="dough"
-                  :value="value"
-                  class="visually-hidden"
-                  :checked="index === 0"
-                />
-                <b>{{ name }}</b>
-                <span>{{ description }}</span>
-              </label>
-            </Widget>
-          </div>
-
-          <div class="content__diameter">
-            <Widget title="Выберите размер" :class-mods="['diameter']">
-              <label
-                v-for="({ value, name }, index) of sizes"
-                :key="index"
-                class="diameter__input"
-                :class="`diameter__input--${value}`"
-              >
-                <input
-                  type="radio"
-                  name="diameter"
-                  :value="value"
-                  :checked="index === 1"
-                  class="visually-hidden"
-                />
-                <span>{{ name }}</span>
-              </label>
-            </Widget>
-          </div>
-
-          <div class="content__ingridients">
-            <Widget title="Выберите ингридиенты" :class-mods="['ingridients']">
-              <div class="ingridients__sauce">
-                <p>Основной соус:</p>
-                <RadioButton
-                  v-for="({ value, name }, index) of sauces"
-                  :key="index"
-                  :class-mods="['ingridients__input']"
-                  radio-name="sauce"
-                  :value="value"
-                  :is-checked="index === 0"
-                  :name="name"
-                />
-              </div>
-
-              <div class="ingridients__filling">
-                <p>Начинка:</p>
-
-                <ul class="ingridients__list">
-                  <li
-                    class="ingridients__item"
-                    v-for="({ mod, name }, index) of ingredients"
-                    :key="index"
-                  >
-                    <span class="filling" :class="`filling--${mod}`">{{
-                      name
-                    }}</span>
-
-                    <ItemCounter
-                      :class-mods="['counter--orange', 'ingridients__counter']"
-                    />
-                  </li>
-                </ul>
-              </div>
-            </Widget>
-          </div>
-
-          <div class="content__pizza">
-            <label class="input">
-              <span class="visually-hidden">Название пиццы</span>
-              <input
-                type="text"
-                name="pizza_name"
-                placeholder="Введите название пиццы"
-              />
-            </label>
-
-            <div class="content__constructor">
-              <div class="pizza pizza--foundation--big-tomato">
-                <div class="pizza__wrapper">
-                  <div class="pizza__filling pizza__filling--ananas"></div>
-                  <div class="pizza__filling pizza__filling--bacon"></div>
-                  <div class="pizza__filling pizza__filling--cheddar"></div>
-                </div>
-              </div>
-            </div>
-
-            <div class="content__result">
-              <p>Итого: 0 ₽</p>
-              <button type="button" class="button button--disabled" disabled>
-                Готовьте!
-              </button>
-            </div>
-          </div>
-        </div>
-      </form>
+      <Builder :pizza="pizza" />
     </main>
   </div>
 </template>
 
 <script>
 import pizza from "../static/pizza";
-import ItemCounter from "../common/components/ItemCounter";
-import RadioButton from "../common/components/RadioButton";
-import Widget from "../common/components/Widget";
-import {
-  normalizeDoughs,
-  normalizeIngredients,
-  normalizeSauces,
-  normalizeSizes,
-} from "../common";
+import Header from "../modules/header/components/Header";
+import Builder from "../modules/builder/components/Builder";
 
 export default {
   name: "Index",
   components: {
-    ItemCounter,
-    RadioButton,
-    Widget,
+    Header,
+    Builder,
   },
   data() {
     return {
-      doughs: normalizeDoughs(pizza.dough),
-      sizes: normalizeSizes(pizza.sizes),
-      sauces: normalizeSauces(pizza.sauces),
-      ingredients: normalizeIngredients(pizza.ingredients),
+      pizza,
     };
   },
 };

From 0faafc7df5af0c0f188f47dfbb443e259641079a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Thu, 1 Jul 2021 22:20:25 +0300
Subject: [PATCH 04/22] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D1=81=D0=B5=20=D0=B1=D0=B0=D0=B7=D0=BE=D0=B2=D1=8B=D0=B5?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B?=
 =?UTF-8?q?=20=D0=BC=D0=BE=D0=B4=D1=83=D0=BB=D0=B5=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/ItemCounter.vue     |   2 +-
 .../src/common/components/RadioButton.vue     |   4 +-
 .../modules/builder/components/Builder.vue    | 140 ++----------------
 .../components/BuilderDoughSelector.vue       |  39 +++++
 .../components/BuilderIngredientsSelector.vue |  41 +++++
 .../builder/components/BuilderPizzaView.vue   |  36 +++++
 .../components/BuilderPriceCounter.vue        |  34 +++++
 .../components/BuilderSizeSelector.vue        |  38 +++++
 src/frontend/src/views/Index.vue              |   8 +-
 9 files changed, 204 insertions(+), 138 deletions(-)
 create mode 100644 src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
 create mode 100644 src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
 create mode 100644 src/frontend/src/modules/builder/components/BuilderPizzaView.vue
 create mode 100644 src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
 create mode 100644 src/frontend/src/modules/builder/components/BuilderSizeSelector.vue

diff --git a/src/frontend/src/common/components/ItemCounter.vue b/src/frontend/src/common/components/ItemCounter.vue
index 72c4cf2..7d4dabb 100644
--- a/src/frontend/src/common/components/ItemCounter.vue
+++ b/src/frontend/src/common/components/ItemCounter.vue
@@ -18,7 +18,7 @@ export default {
   props: {
     classMods: {
       type: Array,
-      isRequired: false,
+      required: false,
     },
   },
 };
diff --git a/src/frontend/src/common/components/RadioButton.vue b/src/frontend/src/common/components/RadioButton.vue
index a4c9546..1d1fc8c 100644
--- a/src/frontend/src/common/components/RadioButton.vue
+++ b/src/frontend/src/common/components/RadioButton.vue
@@ -17,11 +17,11 @@ export default {
     },
     value: {
       type: String,
-      isRequired: true,
+      required: true,
     },
     isChecked: {
       type: Boolean,
-      isRequired: true,
+      required: true,
     },
     name: {
       type: String,
diff --git a/src/frontend/src/modules/builder/components/Builder.vue b/src/frontend/src/modules/builder/components/Builder.vue
index adf3f81..8567bd6 100644
--- a/src/frontend/src/modules/builder/components/Builder.vue
+++ b/src/frontend/src/modules/builder/components/Builder.vue
@@ -3,145 +3,29 @@
     <div class="content__wrapper">
       <h1 class="title title--big">Конструктор пиццы</h1>
 
-      <div class="content__dough">
-        <Widget title="Выберите тесто" :class-mods="['dough']">
-          <label
-            v-for="({ value, name, description }, index) of doughs"
-            :key="index"
-            class="dough__input"
-            :class="`dough__input--${value}`"
-          >
-            <input
-              type="radio"
-              name="dough"
-              :value="value"
-              class="visually-hidden"
-              :checked="index === 0"
-            />
-            <b>{{ name }}</b>
-            <span>{{ description }}</span>
-          </label>
-        </Widget>
-      </div>
+      <BuilderDoughSelector />
 
-      <div class="content__diameter">
-        <Widget title="Выберите размер" :class-mods="['diameter']">
-          <label
-            v-for="({ value, name }, index) of sizes"
-            :key="index"
-            class="diameter__input"
-            :class="`diameter__input--${value}`"
-          >
-            <input
-              type="radio"
-              name="diameter"
-              :value="value"
-              :checked="index === 1"
-              class="visually-hidden"
-            />
-            <span>{{ name }}</span>
-          </label>
-        </Widget>
-      </div>
+      <BuilderSizeSelector />
 
-      <div class="content__ingridients">
-        <Widget title="Выберите ингридиенты" :class-mods="['ingridients']">
-          <div class="ingridients__sauce">
-            <p>Основной соус:</p>
-            <RadioButton
-              v-for="({ value, name }, index) of sauces"
-              :key="index"
-              :class-mods="['ingridients__input']"
-              radio-name="sauce"
-              :value="value"
-              :is-checked="index === 0"
-              :name="name"
-            />
-          </div>
+      <BuilderIngredientsSelector />
 
-          <div class="ingridients__filling">
-            <p>Начинка:</p>
-
-            <ul class="ingridients__list">
-              <li
-                class="ingridients__item"
-                v-for="({ mod, name }, index) of ingredients"
-                :key="index"
-              >
-                <span class="filling" :class="`filling--${mod}`">{{
-                  name
-                }}</span>
-
-                <ItemCounter
-                  :class-mods="['counter--orange', 'ingridients__counter']"
-                />
-              </li>
-            </ul>
-          </div>
-        </Widget>
-      </div>
-
-      <div class="content__pizza">
-        <label class="input">
-          <span class="visually-hidden">Название пиццы</span>
-          <input
-            type="text"
-            name="pizza_name"
-            placeholder="Введите название пиццы"
-          />
-        </label>
-
-        <div class="content__constructor">
-          <div class="pizza pizza--foundation--big-tomato">
-            <div class="pizza__wrapper">
-              <div class="pizza__filling pizza__filling--ananas"></div>
-              <div class="pizza__filling pizza__filling--bacon"></div>
-              <div class="pizza__filling pizza__filling--cheddar"></div>
-            </div>
-          </div>
-        </div>
-
-        <div class="content__result">
-          <p>Итого: 0 ₽</p>
-          <button type="button" class="button button--disabled" disabled>
-            Готовьте!
-          </button>
-        </div>
-      </div>
+      <BuilderPriceCounter />
     </div>
   </form>
 </template>
 <script>
-import ItemCounter from "../../../common/components/ItemCounter";
-import RadioButton from "../../../common/components/RadioButton";
-import Widget from "../../../common/components/Widget";
-import {
-  normalizeDoughs,
-  normalizeIngredients,
-  normalizeSauces,
-  normalizeSizes,
-} from "../../../common";
+import BuilderDoughSelector from "./BuilderDoughSelector";
+import BuilderSizeSelector from "./BuilderSizeSelector";
+import BuilderIngredientsSelector from "./BuilderIngredientsSelector";
+import BuilderPriceCounter from "./BuilderPriceCounter";
 
 export default {
   name: "Builder",
   components: {
-    ItemCounter,
-    RadioButton,
-    Widget,
-  },
-  props: {
-    pizza: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      doughs: normalizeDoughs(this.pizza.dough),
-      sizes: normalizeSizes(this.pizza.sizes),
-      sauces: normalizeSauces(this.pizza.sauces),
-      ingredients: normalizeIngredients(this.pizza.ingredients),
-    };
+    BuilderDoughSelector,
+    BuilderSizeSelector,
+    BuilderIngredientsSelector,
+    BuilderPriceCounter,
   },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
new file mode 100644
index 0000000..fbf1988
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="content__dough">
+    <Widget title="Выберите тесто" :class-mods="['dough']">
+      <label
+        v-for="({ value, name, description }, index) of doughs"
+        :key="index"
+        class="dough__input"
+        :class="`dough__input--${value}`"
+      >
+        <input
+          type="radio"
+          name="dough"
+          :value="value"
+          class="visually-hidden"
+          :checked="index === 0"
+        />
+        <b>{{ name }}</b>
+        <span>{{ description }}</span>
+      </label>
+    </Widget>
+  </div>
+</template>
+<script>
+import pizza from "../../../static/pizza";
+import Widget from "../../../common/components/Widget";
+import { normalizeDoughs } from "../../../common";
+
+export default {
+  name: "BuilderDoughSelector",
+  components: {
+    Widget,
+  },
+  data() {
+    return {
+      doughs: normalizeDoughs(pizza.dough),
+    };
+  },
+};
+</script>
diff --git a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
new file mode 100644
index 0000000..1a0b4e4
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="content__ingridients">
+    <Widget title="Выберите ингридиенты" :class-mods="['ingridients']">
+      <div class="ingridients__sauce">
+        <p>Основной соус:</p>
+        <RadioButton
+          v-for="({ value, name }, index) of sauces"
+          :key="index"
+          :class-mods="['ingridients__input']"
+          radio-name="sauce"
+          :value="value"
+          :is-checked="index === 0"
+          :name="name"
+        />
+      </div>
+
+      <BuilderPizzaView />
+    </Widget>
+  </div>
+</template>
+<script>
+import pizza from "../../../static/pizza";
+import Widget from "../../../common/components/Widget";
+import RadioButton from "../../../common/components/RadioButton";
+import { normalizeSauces } from "../../../common";
+import BuilderPizzaView from "./BuilderPizzaView";
+
+export default {
+  name: "BuilderIngredientsSelector",
+  components: {
+    Widget,
+    RadioButton,
+    BuilderPizzaView,
+  },
+  data() {
+    return {
+      sauces: normalizeSauces(pizza.sauces),
+    };
+  },
+};
+</script>
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
new file mode 100644
index 0000000..d726790
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="ingridients__filling">
+    <p>Начинка:</p>
+
+    <ul class="ingridients__list">
+      <li
+        class="ingridients__item"
+        v-for="({ mod, name }, index) of ingredients"
+        :key="index"
+      >
+        <span class="filling" :class="`filling--${mod}`">{{ name }}</span>
+
+        <ItemCounter
+          :class-mods="['counter--orange', 'ingridients__counter']"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+import pizza from "../../../static/pizza";
+import ItemCounter from "../../../common/components/ItemCounter";
+import { normalizeIngredients } from "../../../common";
+
+export default {
+  name: "BuilderPizzaView",
+  components: {
+    ItemCounter,
+  },
+  data() {
+    return {
+      ingredients: normalizeIngredients(pizza.ingredients),
+    };
+  },
+};
+</script>
diff --git a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
new file mode 100644
index 0000000..404cce8
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="content__pizza">
+    <label class="input">
+      <span class="visually-hidden">Название пиццы</span>
+      <input
+        type="text"
+        name="pizza_name"
+        placeholder="Введите название пиццы"
+      />
+    </label>
+
+    <div class="content__constructor">
+      <div class="pizza pizza--foundation--big-tomato">
+        <div class="pizza__wrapper">
+          <div class="pizza__filling pizza__filling--ananas"></div>
+          <div class="pizza__filling pizza__filling--bacon"></div>
+          <div class="pizza__filling pizza__filling--cheddar"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content__result">
+      <p>Итого: 0 ₽</p>
+      <button type="button" class="button button--disabled" disabled>
+        Готовьте!
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "BuilderPriceCounter",
+};
+</script>
diff --git a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
new file mode 100644
index 0000000..e4924f3
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="content__diameter">
+    <Widget title="Выберите размер" :class-mods="['diameter']">
+      <label
+        v-for="({ value, name }, index) of sizes"
+        :key="index"
+        class="diameter__input"
+        :class="`diameter__input--${value}`"
+      >
+        <input
+          type="radio"
+          name="diameter"
+          :value="value"
+          :checked="index === 1"
+          class="visually-hidden"
+        />
+        <span>{{ name }}</span>
+      </label>
+    </Widget>
+  </div>
+</template>
+<script>
+import pizza from "../../../static/pizza";
+import Widget from "../../../common/components/Widget";
+import { normalizeSizes } from "../../../common";
+
+export default {
+  name: "BuilderSizeSelector",
+  components: {
+    Widget,
+  },
+  data() {
+    return {
+      sizes: normalizeSizes(pizza.sizes),
+    };
+  },
+};
+</script>
diff --git a/src/frontend/src/views/Index.vue b/src/frontend/src/views/Index.vue
index cc6d6c8..f215d63 100644
--- a/src/frontend/src/views/Index.vue
+++ b/src/frontend/src/views/Index.vue
@@ -3,13 +3,12 @@
     <Header />
 
     <main class="content">
-      <Builder :pizza="pizza" />
+      <Builder />
     </main>
   </div>
 </template>
 
 <script>
-import pizza from "../static/pizza";
 import Header from "../modules/header/components/Header";
 import Builder from "../modules/builder/components/Builder";
 
@@ -19,11 +18,6 @@ export default {
     Header,
     Builder,
   },
-  data() {
-    return {
-      pizza,
-    };
-  },
 };
 </script>
 

From 03352d7f7a415e986a70bfe23a58c1f43ba3d2b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Sat, 3 Jul 2021 13:58:38 +0300
Subject: [PATCH 05/22] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D1=81=D1=87=D0=B5=D1=82=20=D1=86=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/AppCounter.vue      |  97 ++++++++++++++
 .../{RadioButton.vue => AppRadioButton.vue}   |  25 +++-
 .../components/{Widget.vue => AppWidget.vue}  |   4 +-
 .../src/common/components/ItemCounter.vue     |  25 ----
 src/frontend/src/common/normalizeDoughs.js    |  12 +-
 src/frontend/src/common/normalizeSauces.js    |  10 +-
 src/frontend/src/common/normalizeSizes.js     |  11 +-
 .../modules/builder/components/Builder.vue    |  31 -----
 .../components/BuilderDoughSelector.vue       |  34 +++--
 .../components/BuilderIngredientsSelector.vue |  52 +++++---
 .../builder/components/BuilderPizzaView.vue   |  50 ++++++-
 .../components/BuilderPriceCounter.vue        |   9 +-
 .../components/BuilderSizeSelector.vue        |  34 +++--
 .../modules/builder/components/TheBuilder.vue | 125 ++++++++++++++++++
 .../components/{Header.vue => TheHeader.vue}  |   1 +
 src/frontend/src/static/pizza.json            |   4 +-
 src/frontend/src/views/Index.vue              |  12 +-
 17 files changed, 409 insertions(+), 127 deletions(-)
 create mode 100644 src/frontend/src/common/components/AppCounter.vue
 rename src/frontend/src/common/components/{RadioButton.vue => AppRadioButton.vue} (57%)
 rename src/frontend/src/common/components/{Widget.vue => AppWidget.vue} (94%)
 delete mode 100644 src/frontend/src/common/components/ItemCounter.vue
 delete mode 100644 src/frontend/src/modules/builder/components/Builder.vue
 create mode 100644 src/frontend/src/modules/builder/components/TheBuilder.vue
 rename src/frontend/src/modules/header/components/{Header.vue => TheHeader.vue} (99%)

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
new file mode 100644
index 0000000..536e7f0
--- /dev/null
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="counter" :class="classMods">
+    <button
+      type="button"
+      class="counter__button counter__button--disabled counter__button--minus"
+      @click="dec"
+    >
+      <span class="visually-hidden">Меньше</span>
+    </button>
+    <input
+      type="text"
+      name="counter"
+      class="counter__input"
+      v-model="count"
+      @change="onInputChange($event)"
+    />
+    <button
+      type="button"
+      class="counter__button counter__button--plus"
+      @click="inc"
+    >
+      <span class="visually-hidden">Больше</span>
+    </button>
+  </div>
+</template>
+<script>
+export default {
+  name: "AppCounter",
+
+  props: {
+    classMods: {
+      type: Array,
+      required: false,
+    },
+
+    predefinedCount: {
+      type: Number,
+      default: 0,
+    },
+
+    maxInc: {
+      type: [Number, Infinity],
+      default: Infinity,
+    },
+
+    maxDec: {
+      type: [Number, -Infinity],
+      default: 0,
+    },
+  },
+
+  data() {
+    return {
+      count: 0,
+    };
+  },
+
+  created() {
+    this.count = this.predefinedCount;
+  },
+
+  methods: {
+    inc() {
+      if (this.maxInc === Infinity || this.count < this.maxInc) {
+        this.count++;
+        this.onCountUpdate(this.count);
+      }
+    },
+
+    dec() {
+      if (this.maxDec === -Infinity || this.count > this.maxDec) {
+        this.count--;
+        this.onCountUpdate(this.count);
+      }
+    },
+
+    onInputChange(evt) {
+      const { target } = evt;
+      const value = parseInt(target.value, 10);
+
+      if (isNaN(value)) {
+        this.count = 0;
+
+        return;
+      }
+
+      this.count = value > this.maxInc || value < this.maxDec ? 0 : value;
+
+      this.onCountUpdate(this.count);
+    },
+
+    onCountUpdate(count) {
+      this.$emit("onCountUpdate", count);
+    },
+  },
+};
+</script>
diff --git a/src/frontend/src/common/components/RadioButton.vue b/src/frontend/src/common/components/AppRadioButton.vue
similarity index 57%
rename from src/frontend/src/common/components/RadioButton.vue
rename to src/frontend/src/common/components/AppRadioButton.vue
index 1d1fc8c..990be10 100644
--- a/src/frontend/src/common/components/RadioButton.vue
+++ b/src/frontend/src/common/components/AppRadioButton.vue
@@ -1,33 +1,50 @@
 <template>
   <label class="radio" :class="classMods">
-    <input type="radio" :name="radioName" :value="value" :checked="isChecked" />
+    <input
+      type="radio"
+      :name="radioName"
+      :value="value"
+      :checked="isChecked"
+      @change="onRadioChange(value)"
+    />
     <span>{{ name }}</span>
   </label>
 </template>
 <script>
 export default {
-  name: "RadioButton",
+  name: "AppRadioButton",
+
   props: {
     classMods: {
       type: Array,
     },
+
     radioName: {
       type: String,
-      default: "radioButton",
+      default: "AppRadioButton",
     },
+
     value: {
-      type: String,
+      type: [Object, String],
       required: true,
     },
+
     isChecked: {
       type: Boolean,
       required: true,
     },
+
     name: {
       type: String,
       default: "Радио кнопка",
     },
   },
+
+  methods: {
+    onRadioChange(value) {
+      this.$emit("onRadioChange", value);
+    },
+  },
 };
 </script>
 <style></style>
diff --git a/src/frontend/src/common/components/Widget.vue b/src/frontend/src/common/components/AppWidget.vue
similarity index 94%
rename from src/frontend/src/common/components/Widget.vue
rename to src/frontend/src/common/components/AppWidget.vue
index bdf4847..44d35ff 100644
--- a/src/frontend/src/common/components/Widget.vue
+++ b/src/frontend/src/common/components/AppWidget.vue
@@ -9,12 +9,14 @@
 </template>
 <script>
 export default {
-  name: "Widget",
+  name: "AppWidget",
+
   props: {
     title: {
       type: String,
       default: "Заголовок",
     },
+
     classMods: {
       type: Array,
     },
diff --git a/src/frontend/src/common/components/ItemCounter.vue b/src/frontend/src/common/components/ItemCounter.vue
deleted file mode 100644
index 7d4dabb..0000000
--- a/src/frontend/src/common/components/ItemCounter.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="counter" :class="classMods">
-    <button
-      type="button"
-      class="counter__button counter__button--disabled counter__button--minus"
-    >
-      <span class="visually-hidden">Меньше</span>
-    </button>
-    <input type="text" name="counter" class="counter__input" value="0" />
-    <button type="button" class="counter__button counter__button--plus">
-      <span class="visually-hidden">Больше</span>
-    </button>
-  </div>
-</template>
-<script>
-export default {
-  name: "ItemCounter",
-  props: {
-    classMods: {
-      type: Array,
-      required: false,
-    },
-  },
-};
-</script>
diff --git a/src/frontend/src/common/normalizeDoughs.js b/src/frontend/src/common/normalizeDoughs.js
index 68bf80e..808b468 100644
--- a/src/frontend/src/common/normalizeDoughs.js
+++ b/src/frontend/src/common/normalizeDoughs.js
@@ -3,7 +3,13 @@ import { generateMap } from "./helpers";
 const valueMap = generateMap(["light", "large"]);
 
 export const normalizeDoughs = (doughs) =>
-  doughs.map((dough, index) => ({
-    ...dough,
-    value: valueMap[index],
+  doughs.map(({ description, price, image, name }, index) => ({
+    description,
+    name,
+    value: {
+      price,
+      image,
+      name: valueMap[index],
+    },
+    isChecked: index === 0,
   }));
diff --git a/src/frontend/src/common/normalizeSauces.js b/src/frontend/src/common/normalizeSauces.js
index 9922bc9..a8d70d1 100644
--- a/src/frontend/src/common/normalizeSauces.js
+++ b/src/frontend/src/common/normalizeSauces.js
@@ -3,7 +3,11 @@ import { generateMap } from "./helpers";
 const valueMap = generateMap(["tomato", "creamy"]);
 
 export const normalizeSauces = (sauces) =>
-  sauces.map((sauce, index) => ({
-    ...sauce,
-    value: valueMap[index],
+  sauces.map(({ price, name }, index) => ({
+    name,
+    value: {
+      price,
+      name: valueMap[index],
+    },
+    isChecked: index === 0,
   }));
diff --git a/src/frontend/src/common/normalizeSizes.js b/src/frontend/src/common/normalizeSizes.js
index c6bc598..9c307be 100644
--- a/src/frontend/src/common/normalizeSizes.js
+++ b/src/frontend/src/common/normalizeSizes.js
@@ -3,7 +3,12 @@ import { generateMap } from "./helpers";
 const valueMap = generateMap(["small", "normal", "big"]);
 
 export const normalizeSizes = (sizes) =>
-  sizes.map((size, index) => ({
-    ...size,
-    value: valueMap[index],
+  sizes.map(({ name, image, multiplier }, index) => ({
+    name,
+    value: {
+      image,
+      multiplier,
+      name: valueMap[index],
+    },
+    isChecked: index === 1,
   }));
diff --git a/src/frontend/src/modules/builder/components/Builder.vue b/src/frontend/src/modules/builder/components/Builder.vue
deleted file mode 100644
index 8567bd6..0000000
--- a/src/frontend/src/modules/builder/components/Builder.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <form action="#" method="post">
-    <div class="content__wrapper">
-      <h1 class="title title--big">Конструктор пиццы</h1>
-
-      <BuilderDoughSelector />
-
-      <BuilderSizeSelector />
-
-      <BuilderIngredientsSelector />
-
-      <BuilderPriceCounter />
-    </div>
-  </form>
-</template>
-<script>
-import BuilderDoughSelector from "./BuilderDoughSelector";
-import BuilderSizeSelector from "./BuilderSizeSelector";
-import BuilderIngredientsSelector from "./BuilderIngredientsSelector";
-import BuilderPriceCounter from "./BuilderPriceCounter";
-
-export default {
-  name: "Builder",
-  components: {
-    BuilderDoughSelector,
-    BuilderSizeSelector,
-    BuilderIngredientsSelector,
-    BuilderPriceCounter,
-  },
-};
-</script>
diff --git a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
index fbf1988..c099ece 100644
--- a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
@@ -1,39 +1,47 @@
 <template>
   <div class="content__dough">
-    <Widget title="Выберите тесто" :class-mods="['dough']">
+    <AppWidget title="Выберите тесто" :class-mods="['dough']">
       <label
-        v-for="({ value, name, description }, index) of doughs"
+        v-for="({ value, name, description, isChecked }, index) of doughs"
         :key="index"
         class="dough__input"
-        :class="`dough__input--${value}`"
+        :class="`dough__input--${value.name}`"
       >
         <input
           type="radio"
           name="dough"
           :value="value"
           class="visually-hidden"
-          :checked="index === 0"
+          :checked="isChecked"
+          @change="onDoughChange(value)"
         />
         <b>{{ name }}</b>
         <span>{{ description }}</span>
       </label>
-    </Widget>
+    </AppWidget>
   </div>
 </template>
 <script>
-import pizza from "../../../static/pizza";
-import Widget from "../../../common/components/Widget";
-import { normalizeDoughs } from "../../../common";
+import AppWidget from "../../../common/components/AppWidget";
 
 export default {
   name: "BuilderDoughSelector",
+
   components: {
-    Widget,
+    AppWidget,
+  },
+
+  props: {
+    doughs: {
+      type: Array,
+      required: true,
+    },
   },
-  data() {
-    return {
-      doughs: normalizeDoughs(pizza.dough),
-    };
+
+  methods: {
+    onDoughChange(currentDough) {
+      this.$emit("onDoughChange", currentDough);
+    },
   },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
index 1a0b4e4..8d8cc91 100644
--- a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
@@ -1,41 +1,61 @@
 <template>
   <div class="content__ingridients">
-    <Widget title="Выберите ингридиенты" :class-mods="['ingridients']">
+    <AppWidget title="Выберите ингридиенты" :class-mods="['ingridients']">
       <div class="ingridients__sauce">
         <p>Основной соус:</p>
-        <RadioButton
-          v-for="({ value, name }, index) of sauces"
+        <AppRadioButton
+          v-for="({ value, name, isChecked }, index) of sauces"
           :key="index"
           :class-mods="['ingridients__input']"
           radio-name="sauce"
           :value="value"
-          :is-checked="index === 0"
+          :is-checked="isChecked"
           :name="name"
+          @onRadioChange="onSauceChange($event)"
         />
       </div>
 
-      <BuilderPizzaView />
-    </Widget>
+      <BuilderPizzaView
+        :ingredients="ingredients"
+        @onCountUpdate="onCountUpdate($event)"
+      />
+    </AppWidget>
   </div>
 </template>
 <script>
-import pizza from "../../../static/pizza";
-import Widget from "../../../common/components/Widget";
-import RadioButton from "../../../common/components/RadioButton";
-import { normalizeSauces } from "../../../common";
+import AppWidget from "../../../common/components/AppWidget";
+import AppRadioButton from "../../../common/components/AppRadioButton";
 import BuilderPizzaView from "./BuilderPizzaView";
 
 export default {
   name: "BuilderIngredientsSelector",
+
   components: {
-    Widget,
-    RadioButton,
+    AppWidget,
+    AppRadioButton,
     BuilderPizzaView,
   },
-  data() {
-    return {
-      sauces: normalizeSauces(pizza.sauces),
-    };
+
+  props: {
+    sauces: {
+      type: Array,
+      required: true,
+    },
+
+    ingredients: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  methods: {
+    onSauceChange(currentSauce) {
+      this.$emit("onSauceChange", currentSauce);
+    },
+
+    onCountUpdate(count) {
+      this.$emit("onCountUpdate", count);
+    },
   },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
index d726790..4cf50e6 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
@@ -10,27 +10,65 @@
       >
         <span class="filling" :class="`filling--${mod}`">{{ name }}</span>
 
-        <ItemCounter
+        <AppCounter
           :class-mods="['counter--orange', 'ingridients__counter']"
+          :max-inc="3"
+          @onCountUpdate="onCountUpdate($event, name)"
         />
       </li>
     </ul>
   </div>
 </template>
 <script>
-import pizza from "../../../static/pizza";
-import ItemCounter from "../../../common/components/ItemCounter";
-import { normalizeIngredients } from "../../../common";
+import AppCounter from "../../../common/components/AppCounter";
 
 export default {
   name: "BuilderPizzaView",
+
   components: {
-    ItemCounter,
+    AppCounter,
+  },
+
+  props: {
+    ingredients: {
+      type: Array,
+      required: true,
+    },
   },
+
   data() {
     return {
-      ingredients: normalizeIngredients(pizza.ingredients),
+      counters: [],
     };
   },
+
+  created() {
+    this.counters = this.ingredients.map(({ name, price }) => ({
+      price,
+      name,
+      count: 0,
+      totalPrice: 0,
+    }));
+  },
+
+  methods: {
+    onCountUpdate(count, countName) {
+      this.$emit("onCountUpdate", this.getTotalPrice(count, countName));
+    },
+
+    getTotalPrice(count, countName) {
+      const currentCountIndex = this.counters.findIndex(
+        ({ name }) => name === countName
+      );
+
+      this.counters[currentCountIndex] = {
+        ...this.counters[currentCountIndex],
+        count: count,
+        totalPrice: count * this.counters[currentCountIndex].price,
+      };
+
+      return this.counters.reduce((a, b) => a + (b["totalPrice"] || 0), 0);
+    },
+  },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
index 404cce8..d864cf4 100644
--- a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
@@ -20,7 +20,7 @@
     </div>
 
     <div class="content__result">
-      <p>Итого: 0 ₽</p>
+      <p>Итого: {{ totalPrice }} ₽</p>
       <button type="button" class="button button--disabled" disabled>
         Готовьте!
       </button>
@@ -30,5 +30,12 @@
 <script>
 export default {
   name: "BuilderPriceCounter",
+
+  props: {
+    totalPrice: {
+      type: Number,
+      required: true,
+    },
+  },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
index e4924f3..6131843 100644
--- a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
@@ -1,38 +1,46 @@
 <template>
   <div class="content__diameter">
-    <Widget title="Выберите размер" :class-mods="['diameter']">
+    <AppWidget title="Выберите размер" :class-mods="['diameter']">
       <label
-        v-for="({ value, name }, index) of sizes"
+        v-for="({ value, name, isChecked }, index) of sizes"
         :key="index"
         class="diameter__input"
-        :class="`diameter__input--${value}`"
+        :class="`diameter__input--${value.name}`"
       >
         <input
           type="radio"
           name="diameter"
           :value="value"
-          :checked="index === 1"
+          :checked="isChecked"
+          @change="onSizeChange(value)"
           class="visually-hidden"
         />
         <span>{{ name }}</span>
       </label>
-    </Widget>
+    </AppWidget>
   </div>
 </template>
 <script>
-import pizza from "../../../static/pizza";
-import Widget from "../../../common/components/Widget";
-import { normalizeSizes } from "../../../common";
+import AppWidget from "../../../common/components/AppWidget";
 
 export default {
   name: "BuilderSizeSelector",
+
   components: {
-    Widget,
+    AppWidget,
+  },
+
+  props: {
+    sizes: {
+      type: Array,
+      required: true,
+    },
   },
-  data() {
-    return {
-      sizes: normalizeSizes(pizza.sizes),
-    };
+
+  methods: {
+    onSizeChange(currentSize) {
+      this.$emit("onSizeChange", currentSize);
+    },
   },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
new file mode 100644
index 0000000..a7455ef
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -0,0 +1,125 @@
+<template>
+  <form action="#" method="post">
+    <div class="content__wrapper">
+      <h1 class="title title--big">Конструктор пиццы</h1>
+
+      <BuilderDoughSelector
+        :doughs="doughs"
+        @onDoughChange="updateCurrentDough($event)"
+      />
+
+      <BuilderSizeSelector
+        :sizes="sizes"
+        @onSizeChange="updateCurrentSize($event)"
+      />
+
+      <BuilderIngredientsSelector
+        :sauces="sauces"
+        :ingredients="ingredients"
+        @onSauceChange="updateCurrentSauce($event)"
+        @onCountUpdate="updateIngredientsPrice($event)"
+      />
+
+      <BuilderPriceCounter :total-price="totalPrice" />
+    </div>
+  </form>
+</template>
+<script>
+import pizza from "../../../static/pizza";
+import BuilderDoughSelector from "./BuilderDoughSelector";
+import BuilderSizeSelector from "./BuilderSizeSelector";
+import BuilderIngredientsSelector from "./BuilderIngredientsSelector";
+import BuilderPriceCounter from "./BuilderPriceCounter";
+import {
+  normalizeDoughs,
+  normalizeIngredients,
+  normalizeSauces,
+  normalizeSizes,
+} from "../../../common";
+
+export default {
+  name: "TheBuilder",
+
+  components: {
+    BuilderDoughSelector,
+    BuilderSizeSelector,
+    BuilderIngredientsSelector,
+    BuilderPriceCounter,
+  },
+
+  data() {
+    return {
+      doughs: normalizeDoughs(pizza.dough),
+
+      sizes: normalizeSizes(pizza.sizes),
+
+      sauces: normalizeSauces(pizza.sauces),
+
+      ingredients: normalizeIngredients(pizza.ingredients),
+
+      currentDough: {
+        price: 0,
+        image: "",
+        name: "",
+      },
+
+      currentSize: {
+        multiplier: 0,
+        image: "",
+        name: "",
+      },
+
+      currentSauce: {
+        price: 0,
+        name: "",
+      },
+
+      ingredientsPrice: 0,
+
+      totalPrice: 0,
+    };
+  },
+
+  created() {
+    this.currentDough = this.getCurrentItem(this.doughs);
+    this.currentSize = this.getCurrentItem(this.sizes);
+    this.currentSauce = this.getCurrentItem(this.sauces);
+    this.totalPrice = this.updateTotalPrice();
+  },
+
+  methods: {
+    updateCurrentDough(currentDough) {
+      this.currentDough = currentDough;
+      this.totalPrice = this.updateTotalPrice();
+    },
+
+    updateCurrentSize(currentSize) {
+      this.currentSize = currentSize;
+    },
+
+    updateCurrentSauce(currentSauce) {
+      this.currentSauce = currentSauce;
+      this.totalPrice = this.updateTotalPrice();
+    },
+
+    updateIngredientsPrice(totalIngredientsPrice) {
+      this.ingredientsPrice = totalIngredientsPrice;
+      this.totalPrice = this.updateTotalPrice();
+    },
+
+    getCurrentItem(arr) {
+      return arr
+        .filter(({ isChecked }) => isChecked)
+        .map(({ value }) => value)[0];
+    },
+
+    updateTotalPrice() {
+      return (
+        this.currentDough.price +
+        this.currentSauce.price +
+        this.ingredientsPrice
+      );
+    },
+  },
+};
+</script>
diff --git a/src/frontend/src/modules/header/components/Header.vue b/src/frontend/src/modules/header/components/TheHeader.vue
similarity index 99%
rename from src/frontend/src/modules/header/components/Header.vue
rename to src/frontend/src/modules/header/components/TheHeader.vue
index 83dedf5..af5933e 100644
--- a/src/frontend/src/modules/header/components/Header.vue
+++ b/src/frontend/src/modules/header/components/TheHeader.vue
@@ -20,6 +20,7 @@ import HeaderUser from "./HeaderUser";
 
 export default {
   name: "Header",
+
   components: {
     HeaderCart,
     HeaderUser,
diff --git a/src/frontend/src/static/pizza.json b/src/frontend/src/static/pizza.json
index 3e2acd6..e0f85b5 100644
--- a/src/frontend/src/static/pizza.json
+++ b/src/frontend/src/static/pizza.json
@@ -4,7 +4,7 @@
       "name": "Тонкое",
       "image": "/public/img/dough-light.svg",
       "description": "Из твердых сортов пшеницы",
-      "price": 300
+      "price": 200
     },
     {
       "name": "Толстое",
@@ -33,7 +33,7 @@
   "sauces": [
     {
       "name": "Томатный",
-      "price": 50
+      "price": 40
     },
     {
       "name": "Сливочный",
diff --git a/src/frontend/src/views/Index.vue b/src/frontend/src/views/Index.vue
index f215d63..a465b2c 100644
--- a/src/frontend/src/views/Index.vue
+++ b/src/frontend/src/views/Index.vue
@@ -1,22 +1,22 @@
 <template>
   <div>
-    <Header />
+    <TheHeader />
 
     <main class="content">
-      <Builder />
+      <TheBuilder />
     </main>
   </div>
 </template>
 
 <script>
-import Header from "../modules/header/components/Header";
-import Builder from "../modules/builder/components/Builder";
+import TheHeader from "../modules/header/components/TheHeader";
+import TheBuilder from "../modules/builder/components/TheBuilder";
 
 export default {
   name: "Index",
   components: {
-    Header,
-    Builder,
+    TheHeader,
+    TheBuilder,
   },
 };
 </script>

From 9640f4e9f58f16a38da3672bc2cac517b9c60c5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Sat, 3 Jul 2021 15:31:11 +0300
Subject: [PATCH 06/22] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20ho?=
 =?UTF-8?q?c=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D1=8B=20=D0=B4=D0=BB=D1=8F=20drag=20and=20drop=20+=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D1=84=D0=B8=D0=BA=D1=81=D0=B8=D0=BB=20=D0=B1=D0=B0=D0=B3?=
 =?UTF-8?q?=D1=83=20=D0=BF=D1=80=D0=B8=20=D0=BF=D1=83=D1=81=D1=82=D0=BE?=
 =?UTF-8?q?=D0=BC=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82=D0=B5=20=D1=81=D1=87?=
 =?UTF-8?q?=D0=B5=D1=82=D1=87=D0=B8=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/AppCounter.vue      |  1 +
 .../src/common/components/AppDrag.vue         | 36 ++++++++++++++++++
 .../src/common/components/AppDrop.vue         | 28 ++++++++++++++
 .../src/common/components/constants.js        |  2 +
 .../builder/components/BuilderPizzaView.vue   | 24 +++++-------
 .../components/BuilderPizzaViewItem.vue       | 38 +++++++++++++++++++
 6 files changed, 114 insertions(+), 15 deletions(-)
 create mode 100644 src/frontend/src/common/components/AppDrag.vue
 create mode 100644 src/frontend/src/common/components/AppDrop.vue
 create mode 100644 src/frontend/src/common/components/constants.js
 create mode 100644 src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index 536e7f0..da43118 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -80,6 +80,7 @@ export default {
 
       if (isNaN(value)) {
         this.count = 0;
+        this.onCountUpdate(this.count);
 
         return;
       }
diff --git a/src/frontend/src/common/components/AppDrag.vue b/src/frontend/src/common/components/AppDrag.vue
new file mode 100644
index 0000000..2dba105
--- /dev/null
+++ b/src/frontend/src/common/components/AppDrag.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    :draggable="true"
+    @dragstart.self="onDrag"
+    @dragover.prevent
+    @dragenter.prevent
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { MOVE, DATA_TRANSFER_PAYLOAD } from "./constants";
+
+export default {
+  name: "AppDrag",
+
+  props: {
+    transferData: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    onDrag({ dataTransfer }) {
+      dataTransfer.effectAllowed = MOVE;
+      dataTransfer.dropEffect = MOVE;
+      dataTransfer.setData(
+        DATA_TRANSFER_PAYLOAD,
+        JSON.stringify(this.transferData)
+      );
+    },
+  },
+};
+</script>
diff --git a/src/frontend/src/common/components/AppDrop.vue b/src/frontend/src/common/components/AppDrop.vue
new file mode 100644
index 0000000..a549e75
--- /dev/null
+++ b/src/frontend/src/common/components/AppDrop.vue
@@ -0,0 +1,28 @@
+<template>
+  <div @drop.stop="onDrop" @dragover.prevent @dragenter.prevent>
+    <slot />
+  </div>
+</template>
+
+<script>
+import { DATA_TRANSFER_PAYLOAD } from "./constants";
+
+export default {
+  name: "AppDrop",
+
+  methods: {
+    onDrop({ dataTransfer }) {
+      if (!dataTransfer) {
+        return;
+      }
+      const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+      if (payload) {
+        const transferData = JSON.parse(
+          dataTransfer.getData(DATA_TRANSFER_PAYLOAD)
+        );
+        this.$emit("drop", transferData);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/frontend/src/common/components/constants.js b/src/frontend/src/common/components/constants.js
new file mode 100644
index 0000000..7dfdf0a
--- /dev/null
+++ b/src/frontend/src/common/components/constants.js
@@ -0,0 +1,2 @@
+export const MOVE = "move";
+export const DATA_TRANSFER_PAYLOAD = "payload";
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
index 4cf50e6..62a8f2d 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
@@ -3,30 +3,24 @@
     <p>Начинка:</p>
 
     <ul class="ingridients__list">
-      <li
-        class="ingridients__item"
-        v-for="({ mod, name }, index) of ingredients"
+      <BuilderPizzaViewItem
+        v-for="(ingredient, index) of ingredients"
         :key="index"
+        :ingredient="ingredient"
+        @onCountUpdate="onCountUpdate($event)"
       >
-        <span class="filling" :class="`filling--${mod}`">{{ name }}</span>
-
-        <AppCounter
-          :class-mods="['counter--orange', 'ingridients__counter']"
-          :max-inc="3"
-          @onCountUpdate="onCountUpdate($event, name)"
-        />
-      </li>
+      </BuilderPizzaViewItem>
     </ul>
   </div>
 </template>
 <script>
-import AppCounter from "../../../common/components/AppCounter";
+import BuilderPizzaViewItem from "./BuilderPizzaViewItem";
 
 export default {
   name: "BuilderPizzaView",
 
   components: {
-    AppCounter,
+    BuilderPizzaViewItem,
   },
 
   props: {
@@ -52,8 +46,8 @@ export default {
   },
 
   methods: {
-    onCountUpdate(count, countName) {
-      this.$emit("onCountUpdate", this.getTotalPrice(count, countName));
+    onCountUpdate({ count, name }) {
+      this.$emit("onCountUpdate", this.getTotalPrice(count, name));
     },
 
     getTotalPrice(count, countName) {
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
new file mode 100644
index 0000000..c324944
--- /dev/null
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
@@ -0,0 +1,38 @@
+<template>
+  <li class="ingridients__item">
+    <span class="filling" :class="`filling--${ingredient.mod}`">{{
+      ingredient.name
+    }}</span>
+
+    <AppCounter
+      :class-mods="['counter--orange', 'ingridients__counter']"
+      :max-inc="3"
+      @onCountUpdate="onCountUpdate($event, ingredient.name)"
+    />
+  </li>
+</template>
+
+<script>
+import AppCounter from "../../../common/components/AppCounter";
+
+export default {
+  name: "BuilderPizzaViewItem",
+
+  components: {
+    AppCounter,
+  },
+
+  props: {
+    ingredient: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    onCountUpdate(count, name) {
+      this.$emit("onCountUpdate", { count, name });
+    },
+  },
+};
+</script>

From 86b04bb253ee581f7ba718047422dd39855fd7f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Sun, 4 Jul 2021 15:15:20 +0300
Subject: [PATCH 07/22] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BB=20=D0=BF=D0=BE=D0=B4=D1=81=D1=87=D0=B5=D1=82?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=83=D0=BD=D1=82=D0=B5=D1=80=D0=B0=20=D0=B8?=
 =?UTF-8?q?=D0=BD=D0=B3=D1=80=D0=B5=D0=B4=D0=B8=D0=B5=D0=BD=D1=82=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/AppCounter.vue      | 108 +++++++++++-------
 src/frontend/src/common/constants.js          |   5 +
 .../src/common/normalizeIngredients.js        |   4 +
 .../components/BuilderIngredientsSelector.vue |   4 +-
 .../builder/components/BuilderPizzaView.vue   |  36 +-----
 .../components/BuilderPizzaViewItem.vue       |  28 +++--
 .../components/BuilderPriceCounter.vue        |  58 ++++++----
 .../modules/builder/components/TheBuilder.vue |  96 +++++++++++++++-
 8 files changed, 223 insertions(+), 116 deletions(-)
 create mode 100644 src/frontend/src/common/constants.js

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index da43118..323599e 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -11,7 +11,7 @@
       type="text"
       name="counter"
       class="counter__input"
-      v-model="count"
+      :value="count"
       @change="onInputChange($event)"
     />
     <button
@@ -24,6 +24,8 @@
   </div>
 </template>
 <script>
+import { countAction } from "../constants";
+
 export default {
   name: "AppCounter",
 
@@ -33,66 +35,84 @@ export default {
       required: false,
     },
 
-    predefinedCount: {
+    count: {
       type: Number,
-      default: 0,
-    },
-
-    maxInc: {
-      type: [Number, Infinity],
-      default: Infinity,
+      required: true,
     },
 
-    maxDec: {
-      type: [Number, -Infinity],
-      default: 0,
-    },
+    // predefinedCount: {
+    //   type: Number,
+    //   default: 0,
+    // },
+    //
+    // maxInc: {
+    //   type: [Number, Infinity],
+    //   default: Infinity,
+    // },
+    //
+    // maxDec: {
+    //   type: [Number, -Infinity],
+    //   default: 0,
+    // },
   },
 
-  data() {
-    return {
-      count: 0,
-    };
-  },
-
-  created() {
-    this.count = this.predefinedCount;
-  },
+  // data() {
+  //   return {
+  //     count: 0,
+  //   };
+  // },
+  //
+  // created() {
+  //   this.count = this.predefinedCount;
+  // },
 
   methods: {
     inc() {
-      if (this.maxInc === Infinity || this.count < this.maxInc) {
-        this.count++;
-        this.onCountUpdate(this.count);
-      }
+      this.$emit("onCountUpdate", {
+        action: countAction.INC,
+        value: undefined,
+      });
+      // if (this.maxInc === Infinity || this.count < this.maxInc) {
+      //   this.count++;
+      //   this.onCountUpdate(this.count);
+      // }
     },
 
     dec() {
-      if (this.maxDec === -Infinity || this.count > this.maxDec) {
-        this.count--;
-        this.onCountUpdate(this.count);
-      }
+      this.$emit("onCountUpdate", {
+        action: countAction.DEC,
+        value: undefined,
+      });
+      // if (this.maxDec === -Infinity || this.count > this.maxDec) {
+      //   this.count--;
+      //   this.onCountUpdate(this.count);
+      // }
     },
 
     onInputChange(evt) {
-      const { target } = evt;
-      const value = parseInt(target.value, 10);
-
-      if (isNaN(value)) {
-        this.count = 0;
-        this.onCountUpdate(this.count);
-
-        return;
-      }
+      this.$emit("onCountUpdate", {
+        action: countAction.INPUT_CHANGE,
+        value: evt.target.value,
+      });
 
-      this.count = value > this.maxInc || value < this.maxDec ? 0 : value;
-
-      this.onCountUpdate(this.count);
+      // const { target } = evt;
+      // const value = parseInt(target.value, 10);
+      //
+      // if (isNaN(value)) {
+      //   this.count = 0;
+      //   this.onCountUpdate(this.count);
+      //
+      //   return;
+      // }
+      //
+      // this.count = value > this.maxInc || value < this.maxDec ? 0 : value;
+      //
+      // this.onCountUpdate(this.count);
     },
 
-    onCountUpdate(count) {
-      this.$emit("onCountUpdate", count);
-    },
+    // onCountUpdate(count) {
+    //   this.$emit("onCountUpdate", count);
+    // },
   },
 };
 </script>
diff --git a/src/frontend/src/common/constants.js b/src/frontend/src/common/constants.js
new file mode 100644
index 0000000..950a008
--- /dev/null
+++ b/src/frontend/src/common/constants.js
@@ -0,0 +1,5 @@
+export const countAction = {
+  INC: "inc",
+  DEC: "dec",
+  INPUT_CHANGE: "inputChange",
+};
diff --git a/src/frontend/src/common/normalizeIngredients.js b/src/frontend/src/common/normalizeIngredients.js
index 1f69df5..c36dc2c 100644
--- a/src/frontend/src/common/normalizeIngredients.js
+++ b/src/frontend/src/common/normalizeIngredients.js
@@ -22,4 +22,8 @@ export const normalizeIngredients = (ingredients) =>
   ingredients.map((ingredient, index) => ({
     ...ingredient,
     mod: modMap[index],
+    count: 0,
+    totalPrice: 0,
+    maxInc: 3,
+    maxDec: 0,
   }));
diff --git a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
index 8d8cc91..b6a5413 100644
--- a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
@@ -53,8 +53,8 @@ export default {
       this.$emit("onSauceChange", currentSauce);
     },
 
-    onCountUpdate(count) {
-      this.$emit("onCountUpdate", count);
+    onCountUpdate(ingredientData) {
+      this.$emit("onCountUpdate", ingredientData);
     },
   },
 };
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
index 62a8f2d..3ad6eea 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaView.vue
@@ -7,7 +7,8 @@
         v-for="(ingredient, index) of ingredients"
         :key="index"
         :ingredient="ingredient"
-        @onCountUpdate="onCountUpdate($event)"
+        :idx="index"
+        @onCountUpdate="onCountUpdate($event, index)"
       >
       </BuilderPizzaViewItem>
     </ul>
@@ -30,38 +31,9 @@ export default {
     },
   },
 
-  data() {
-    return {
-      counters: [],
-    };
-  },
-
-  created() {
-    this.counters = this.ingredients.map(({ name, price }) => ({
-      price,
-      name,
-      count: 0,
-      totalPrice: 0,
-    }));
-  },
-
   methods: {
-    onCountUpdate({ count, name }) {
-      this.$emit("onCountUpdate", this.getTotalPrice(count, name));
-    },
-
-    getTotalPrice(count, countName) {
-      const currentCountIndex = this.counters.findIndex(
-        ({ name }) => name === countName
-      );
-
-      this.counters[currentCountIndex] = {
-        ...this.counters[currentCountIndex],
-        count: count,
-        totalPrice: count * this.counters[currentCountIndex].price,
-      };
-
-      return this.counters.reduce((a, b) => a + (b["totalPrice"] || 0), 0);
+    onCountUpdate(actionCountData, currentIngredientIndex) {
+      this.$emit("onCountUpdate", { actionCountData, currentIngredientIndex });
     },
   },
 };
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
index c324944..eedfbb1 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
@@ -1,25 +1,29 @@
 <template>
-  <li class="ingridients__item">
-    <span class="filling" :class="`filling--${ingredient.mod}`">{{
-      ingredient.name
-    }}</span>
+  <AppDrag :transfer-data="ingredient">
+    <li class="ingridients__item">
+      <span class="filling" :class="`filling--${ingredient.mod}`">{{
+        ingredient.name
+      }}</span>
 
-    <AppCounter
-      :class-mods="['counter--orange', 'ingridients__counter']"
-      :max-inc="3"
-      @onCountUpdate="onCountUpdate($event, ingredient.name)"
-    />
-  </li>
+      <AppCounter
+        :class-mods="['counter--orange', 'ingridients__counter']"
+        :count="ingredient.count"
+        @onCountUpdate="onCountUpdate($event)"
+      />
+    </li>
+  </AppDrag>
 </template>
 
 <script>
 import AppCounter from "../../../common/components/AppCounter";
+import AppDrag from "../../../common/components/AppDrag";
 
 export default {
   name: "BuilderPizzaViewItem",
 
   components: {
     AppCounter,
+    AppDrag,
   },
 
   props: {
@@ -30,8 +34,8 @@ export default {
   },
 
   methods: {
-    onCountUpdate(count, name) {
-      this.$emit("onCountUpdate", { count, name });
+    onCountUpdate(countActionData) {
+      this.$emit("onCountUpdate", countActionData);
     },
   },
 };
diff --git a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
index d864cf4..1ac1cef 100644
--- a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
@@ -1,41 +1,55 @@
 <template>
-  <div class="content__pizza">
-    <label class="input">
-      <span class="visually-hidden">Название пиццы</span>
-      <input
-        type="text"
-        name="pizza_name"
-        placeholder="Введите название пиццы"
-      />
-    </label>
+  <AppDrop @drop="onIngredientDrop($event)">
+    <div class="content__pizza">
+      <label class="input">
+        <span class="visually-hidden">Название пиццы</span>
+        <input
+          type="text"
+          name="pizza_name"
+          placeholder="Введите название пиццы"
+        />
+      </label>
 
-    <div class="content__constructor">
-      <div class="pizza pizza--foundation--big-tomato">
-        <div class="pizza__wrapper">
-          <div class="pizza__filling pizza__filling--ananas"></div>
-          <div class="pizza__filling pizza__filling--bacon"></div>
-          <div class="pizza__filling pizza__filling--cheddar"></div>
+      <div class="content__constructor">
+        <div class="pizza pizza--foundation--big-tomato">
+          <div class="pizza__wrapper">
+            <div class="pizza__filling pizza__filling--ananas"></div>
+            <div class="pizza__filling pizza__filling--bacon"></div>
+            <div class="pizza__filling pizza__filling--cheddar"></div>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="content__result">
-      <p>Итого: {{ totalPrice }} ₽</p>
-      <button type="button" class="button button--disabled" disabled>
-        Готовьте!
-      </button>
+      <div class="content__result">
+        <p>Итого: {{ totalPrice }} ₽</p>
+        <button type="button" class="button button--disabled" disabled>
+          Готовьте!
+        </button>
+      </div>
     </div>
-  </div>
+  </AppDrop>
 </template>
 <script>
+import AppDrop from "../../../common/components/AppDrop";
+
 export default {
   name: "BuilderPriceCounter",
 
+  components: {
+    AppDrop,
+  },
+
   props: {
     totalPrice: {
       type: Number,
       required: true,
     },
   },
+
+  methods: {
+    onIngredientDrop(ingredient) {
+      this.$emit("onIngredientDrop", ingredient);
+    },
+  },
 };
 </script>
diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
index a7455ef..e000be9 100644
--- a/src/frontend/src/modules/builder/components/TheBuilder.vue
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -36,6 +36,7 @@ import {
   normalizeSauces,
   normalizeSizes,
 } from "../../../common";
+import { countAction } from "../../../common/constants";
 
 export default {
   name: "TheBuilder",
@@ -102,9 +103,20 @@ export default {
       this.totalPrice = this.updateTotalPrice();
     },
 
-    updateIngredientsPrice(totalIngredientsPrice) {
-      this.ingredientsPrice = totalIngredientsPrice;
-      this.totalPrice = this.updateTotalPrice();
+    updateIngredientsPrice(ingredientData) {
+      const { currentIngredientIndex, actionCountData } = ingredientData;
+
+      switch (actionCountData.action) {
+        case countAction.INC:
+          this.ingredientInc(currentIngredientIndex);
+          break;
+        case countAction.DEC:
+          this.ingredientDec(currentIngredientIndex);
+          break;
+        case countAction.INPUT_CHANGE:
+          this.ingredientInputChange(currentIngredientIndex, actionCountData);
+          break;
+      }
     },
 
     getCurrentItem(arr) {
@@ -117,9 +129,85 @@ export default {
       return (
         this.currentDough.price +
         this.currentSauce.price +
-        this.ingredientsPrice
+        this.ingredients.reduce((a, b) => a + (b["totalPrice"] || 0), 0)
       );
     },
+
+    ingredientInc(currentIngredientIndex) {
+      if (this.canIncOrDec(countAction.INC, currentIngredientIndex)) {
+        this.$set(this.ingredients, currentIngredientIndex, {
+          ...this.ingredients[currentIngredientIndex],
+          count: ++this.ingredients[currentIngredientIndex].count,
+          totalPrice:
+            this.ingredients[currentIngredientIndex].count *
+            this.ingredients[currentIngredientIndex].price,
+        });
+
+        this.totalPrice = this.updateTotalPrice();
+      }
+    },
+
+    ingredientDec(currentIngredientIndex) {
+      if (this.canIncOrDec(countAction.DEC, currentIngredientIndex)) {
+        this.$set(this.ingredients, currentIngredientIndex, {
+          ...this.ingredients[currentIngredientIndex],
+          count: --this.ingredients[currentIngredientIndex].count,
+          totalPrice:
+            this.ingredients[currentIngredientIndex].count *
+            this.ingredients[currentIngredientIndex].price,
+        });
+
+        this.totalPrice = this.updateTotalPrice();
+      }
+    },
+
+    ingredientInputChange(currentIngredientIndex, actionCountData) {
+      const value = parseInt(actionCountData.value, 10);
+
+      if (isNaN(value)) {
+        this.$set(this.ingredients, currentIngredientIndex, {
+          ...this.ingredients[currentIngredientIndex],
+          count: 0,
+          totalPrice: 0,
+        });
+
+        this.totalPrice = this.updateTotalPrice();
+
+        return;
+      }
+
+      this.$set(this.ingredients, currentIngredientIndex, {
+        ...this.ingredients[currentIngredientIndex],
+        count:
+          value > this.ingredients[currentIngredientIndex].maxInc ||
+          value < this.ingredients[currentIngredientIndex].maxDec
+            ? this.ingredients[currentIngredientIndex].count
+            : value,
+        totalPrice:
+          value > this.ingredients[currentIngredientIndex].maxInc ||
+          value < this.ingredients[currentIngredientIndex].maxDec
+            ? this.ingredients[currentIngredientIndex].price *
+              this.ingredients[currentIngredientIndex].count
+            : this.ingredients[currentIngredientIndex].price * value,
+      });
+
+      this.totalPrice = this.updateTotalPrice();
+    },
+
+    canIncOrDec(action, currentIngredientIndex) {
+      switch (action) {
+        case countAction.INC:
+          return (
+            this.ingredients[currentIngredientIndex].count <
+            this.ingredients[currentIngredientIndex].maxInc
+          );
+        case countAction.DEC:
+          return (
+            this.ingredients[currentIngredientIndex].count >
+            this.ingredients[currentIngredientIndex].maxDec
+          );
+      }
+    },
   },
 };
 </script>

From 38c3564f0a1d101ea63b9b6a95a10a92c8ca7101 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Sun, 4 Jul 2021 15:20:41 +0300
Subject: [PATCH 08/22] =?UTF-8?q?=D1=83=D0=B4=D0=BB=D0=B8=D0=BB=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BC=D0=B5=D0=BD=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/common/components/AppCounter.vue      | 51 -------------------
 1 file changed, 51 deletions(-)

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index 323599e..e47c248 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -39,43 +39,14 @@ export default {
       type: Number,
       required: true,
     },
-
-    // predefinedCount: {
-    //   type: Number,
-    //   default: 0,
-    // },
-    //
-    // maxInc: {
-    //   type: [Number, Infinity],
-    //   default: Infinity,
-    // },
-    //
-    // maxDec: {
-    //   type: [Number, -Infinity],
-    //   default: 0,
-    // },
   },
 
-  // data() {
-  //   return {
-  //     count: 0,
-  //   };
-  // },
-  //
-  // created() {
-  //   this.count = this.predefinedCount;
-  // },
-
   methods: {
     inc() {
       this.$emit("onCountUpdate", {
         action: countAction.INC,
         value: undefined,
       });
-      // if (this.maxInc === Infinity || this.count < this.maxInc) {
-      //   this.count++;
-      //   this.onCountUpdate(this.count);
-      // }
     },
 
     dec() {
@@ -83,10 +54,6 @@ export default {
         action: countAction.DEC,
         value: undefined,
       });
-      // if (this.maxDec === -Infinity || this.count > this.maxDec) {
-      //   this.count--;
-      //   this.onCountUpdate(this.count);
-      // }
     },
 
     onInputChange(evt) {
@@ -94,25 +61,7 @@ export default {
         action: countAction.INPUT_CHANGE,
         value: evt.target.value,
       });
-
-      // const { target } = evt;
-      // const value = parseInt(target.value, 10);
-      //
-      // if (isNaN(value)) {
-      //   this.count = 0;
-      //   this.onCountUpdate(this.count);
-      //
-      //   return;
-      // }
-      //
-      // this.count = value > this.maxInc || value < this.maxDec ? 0 : value;
-      //
-      // this.onCountUpdate(this.count);
     },
-
-    // onCountUpdate(count) {
-    //   this.$emit("onCountUpdate", count);
-    // },
   },
 };
 </script>

From 11c4bac2f09ca932ffc4bb28447669ba083cba14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Sun, 4 Jul 2021 17:44:09 +0300
Subject: [PATCH 09/22] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B0=D0=BB=20=D0=BF=D0=BE=D0=B4=D1=81=D1=87=D0=B5?=
 =?UTF-8?q?=D1=82=20=D1=86=D0=B5=D0=BD=D1=8B=20=D0=BF=D1=80=D0=B8=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BE=D1=89=D0=B8=20drag=20and=20drop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/constants.js          |  1 +
 .../components/BuilderPizzaViewItem.vue       | 21 ++++++++++++++++++-
 .../components/BuilderPriceCounter.vue        |  4 ++--
 .../modules/builder/components/TheBuilder.vue | 10 ++++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/common/constants.js b/src/frontend/src/common/constants.js
index 950a008..46ece6f 100644
--- a/src/frontend/src/common/constants.js
+++ b/src/frontend/src/common/constants.js
@@ -2,4 +2,5 @@ export const countAction = {
   INC: "inc",
   DEC: "dec",
   INPUT_CHANGE: "inputChange",
+  DROP: "drop",
 };
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
index eedfbb1..b7f3e3b 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
@@ -1,5 +1,13 @@
 <template>
-  <AppDrag :transfer-data="ingredient">
+  <AppDrag
+    :transfer-data="{
+      currentIngredientIndex: idx,
+      actionCountData: {
+        action: countAction.DROP,
+        value: undefined,
+      },
+    }"
+  >
     <li class="ingridients__item">
       <span class="filling" :class="`filling--${ingredient.mod}`">{{
         ingredient.name
@@ -17,6 +25,7 @@
 <script>
 import AppCounter from "../../../common/components/AppCounter";
 import AppDrag from "../../../common/components/AppDrag";
+import { countAction } from "../../../common/constants";
 
 export default {
   name: "BuilderPizzaViewItem",
@@ -31,6 +40,16 @@ export default {
       type: Object,
       required: true,
     },
+    idx: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      countAction,
+    };
   },
 
   methods: {
diff --git a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
index 1ac1cef..3f7b165 100644
--- a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
@@ -47,8 +47,8 @@ export default {
   },
 
   methods: {
-    onIngredientDrop(ingredient) {
-      this.$emit("onIngredientDrop", ingredient);
+    onIngredientDrop(ingredientData) {
+      this.$emit("onIngredientDrop", ingredientData);
     },
   },
 };
diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
index e000be9..4f54737 100644
--- a/src/frontend/src/modules/builder/components/TheBuilder.vue
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -20,7 +20,10 @@
         @onCountUpdate="updateIngredientsPrice($event)"
       />
 
-      <BuilderPriceCounter :total-price="totalPrice" />
+      <BuilderPriceCounter
+        :total-price="totalPrice"
+        @onIngredientDrop="updateIngredientsPrice($event)"
+      />
     </div>
   </form>
 </template>
@@ -106,6 +109,8 @@ export default {
     updateIngredientsPrice(ingredientData) {
       const { currentIngredientIndex, actionCountData } = ingredientData;
 
+      console.log(ingredientData);
+
       switch (actionCountData.action) {
         case countAction.INC:
           this.ingredientInc(currentIngredientIndex);
@@ -116,6 +121,9 @@ export default {
         case countAction.INPUT_CHANGE:
           this.ingredientInputChange(currentIngredientIndex, actionCountData);
           break;
+        case countAction.DROP:
+          this.ingredientInc(currentIngredientIndex);
+          break;
       }
     },
 

From c24968fa0179d9b39279b59738cb97beaae0139f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Sun, 4 Jul 2021 23:07:46 +0300
Subject: [PATCH 10/22] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=83=D0=B6=D1=83=D1=8E=20=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD=D1=83=D1=8E=20+=20=D1=83=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BB=20console.log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modules/builder/components/TheBuilder.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
index 4f54737..4e2c6f3 100644
--- a/src/frontend/src/modules/builder/components/TheBuilder.vue
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -78,8 +78,6 @@ export default {
         name: "",
       },
 
-      ingredientsPrice: 0,
-
       totalPrice: 0,
     };
   },
@@ -109,8 +107,6 @@ export default {
     updateIngredientsPrice(ingredientData) {
       const { currentIngredientIndex, actionCountData } = ingredientData;
 
-      console.log(ingredientData);
-
       switch (actionCountData.action) {
         case countAction.INC:
           this.ingredientInc(currentIngredientIndex);

From 3b858a11e952ee229d2a23ed0d5996bfae5e7cc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Mon, 5 Jul 2021 11:47:16 +0300
Subject: [PATCH 11/22] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BC=D0=B0=D0=BF=D1=83=20=D0=B2=20normalizeSau?=
 =?UTF-8?q?ces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/normalizeSauces.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/common/normalizeSauces.js b/src/frontend/src/common/normalizeSauces.js
index 387ed59..55bdbf1 100644
--- a/src/frontend/src/common/normalizeSauces.js
+++ b/src/frontend/src/common/normalizeSauces.js
@@ -1,7 +1,7 @@
 const valueMap = [
   {
     name: "Томатный",
-    value: "creamy",
+    value: "tomato",
   },
   {
     name: "Сливочный",

From a4470f9bb1a1cfd89dd3ab25f4e551793cc853ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Mon, 5 Jul 2021 20:27:41 +0300
Subject: [PATCH 12/22] =?UTF-8?q?=D0=A1=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20AppLay?=
 =?UTF-8?q?out=20=D0=B8=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=20=D0=BD=D0=B5=D0=B3=D0=BE=20TheHeader=20=D0=B8=20Index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/App.vue               |  6 +++---
 src/frontend/src/layouts/AppLayout.vue | 20 ++++++++++++++++++++
 src/frontend/src/layouts/index.js      |  0
 src/frontend/src/views/Index.vue       | 12 +++---------
 4 files changed, 26 insertions(+), 12 deletions(-)
 create mode 100644 src/frontend/src/layouts/AppLayout.vue
 delete mode 100644 src/frontend/src/layouts/index.js

diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index e851ff5..faddfd1 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,16 +1,16 @@
 <template>
   <div id="app">
-    <Index />
+    <AppLayout />
   </div>
 </template>
 
 <script>
-import Index from "../src/views/Index";
+import AppLayout from "./layouts/AppLayout";
 
 export default {
   name: "App",
   components: {
-    Index,
+    AppLayout,
   },
 };
 </script>
diff --git a/src/frontend/src/layouts/AppLayout.vue b/src/frontend/src/layouts/AppLayout.vue
new file mode 100644
index 0000000..bfba733
--- /dev/null
+++ b/src/frontend/src/layouts/AppLayout.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <TheHeader />
+
+    <Index />
+  </div>
+</template>
+<script>
+import TheHeader from "../modules/header/components/TheHeader";
+import Index from "../views/Index";
+
+export default {
+  name: "AppLayout",
+  components: {
+    TheHeader,
+    Index,
+  },
+};
+</script>
+<style></style>
diff --git a/src/frontend/src/layouts/index.js b/src/frontend/src/layouts/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/frontend/src/views/Index.vue b/src/frontend/src/views/Index.vue
index a465b2c..57061cd 100644
--- a/src/frontend/src/views/Index.vue
+++ b/src/frontend/src/views/Index.vue
@@ -1,21 +1,15 @@
 <template>
-  <div>
-    <TheHeader />
-
-    <main class="content">
-      <TheBuilder />
-    </main>
-  </div>
+  <main class="content">
+    <TheBuilder />
+  </main>
 </template>
 
 <script>
-import TheHeader from "../modules/header/components/TheHeader";
 import TheBuilder from "../modules/builder/components/TheBuilder";
 
 export default {
   name: "Index",
   components: {
-    TheHeader,
     TheBuilder,
   },
 };

From f54e5e9bcddf3cce553357f04feb5213aaecec44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Mon, 5 Jul 2021 20:39:02 +0300
Subject: [PATCH 13/22] =?UTF-8?q?=D0=9A=D1=80=D0=B8=D1=82=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B8=20-=20=D0=913?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/components/AppCounter.vue     | 2 +-
 src/frontend/src/common/components/AppRadioButton.vue | 1 +
 src/frontend/src/layouts/AppLayout.vue                | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index e47c248..805f86e 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -32,7 +32,7 @@ export default {
   props: {
     classMods: {
       type: Array,
-      required: false,
+      default: () => [],
     },
 
     count: {
diff --git a/src/frontend/src/common/components/AppRadioButton.vue b/src/frontend/src/common/components/AppRadioButton.vue
index 990be10..bc8bba3 100644
--- a/src/frontend/src/common/components/AppRadioButton.vue
+++ b/src/frontend/src/common/components/AppRadioButton.vue
@@ -17,6 +17,7 @@ export default {
   props: {
     classMods: {
       type: Array,
+      default: () => [],
     },
 
     radioName: {
diff --git a/src/frontend/src/layouts/AppLayout.vue b/src/frontend/src/layouts/AppLayout.vue
index bfba733..ce1e772 100644
--- a/src/frontend/src/layouts/AppLayout.vue
+++ b/src/frontend/src/layouts/AppLayout.vue
@@ -11,6 +11,7 @@ import Index from "../views/Index";
 
 export default {
   name: "AppLayout",
+
   components: {
     TheHeader,
     Index,

From f78d67b69bbb7d84ef811538aa4320bf23cc30e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Mon, 5 Jul 2021 20:44:55 +0300
Subject: [PATCH 14/22] =?UTF-8?q?=D0=9A=D0=BE=D0=B3=D0=B4=D0=B0=20=D0=B2?=
 =?UTF-8?q?=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D1=8E=20=D0=BF=D0=B5?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B4=D0=B0=D0=B5=D1=82=D1=81=D1=8F=20=D1=82=D0=BE?=
 =?UTF-8?q?=D0=BB=D1=8C=D0=BA=D0=BE=20$event,=20=D1=82=D0=BE=20=D0=BC?=
 =?UTF-8?q?=D0=BE=D0=B6=D0=BD=D0=BE=20=D0=B5=D0=B3=D0=BE=20=D1=8F=D0=B2?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B2=20=D1=88=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD?=
 =?UTF-8?q?=D0=B5=20=D0=BD=D0=B5=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=82=D1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/components/AppCounter.vue   |  2 +-
 .../components/BuilderIngredientsSelector.vue       |  4 ++--
 .../builder/components/BuilderPizzaViewItem.vue     |  2 +-
 .../builder/components/BuilderPriceCounter.vue      |  2 +-
 .../src/modules/builder/components/TheBuilder.vue   | 13 +++++--------
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index 805f86e..0de9b3c 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -12,7 +12,7 @@
       name="counter"
       class="counter__input"
       :value="count"
-      @change="onInputChange($event)"
+      @change="onInputChange"
     />
     <button
       type="button"
diff --git a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
index b6a5413..5630c0b 100644
--- a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
@@ -11,13 +11,13 @@
           :value="value"
           :is-checked="isChecked"
           :name="name"
-          @onRadioChange="onSauceChange($event)"
+          @onRadioChange="onSauceChange"
         />
       </div>
 
       <BuilderPizzaView
         :ingredients="ingredients"
-        @onCountUpdate="onCountUpdate($event)"
+        @onCountUpdate="onCountUpdate"
       />
     </AppWidget>
   </div>
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
index b7f3e3b..3fb580e 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
@@ -16,7 +16,7 @@
       <AppCounter
         :class-mods="['counter--orange', 'ingridients__counter']"
         :count="ingredient.count"
-        @onCountUpdate="onCountUpdate($event)"
+        @onCountUpdate="onCountUpdate"
       />
     </li>
   </AppDrag>
diff --git a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
index 3f7b165..de8a988 100644
--- a/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPriceCounter.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppDrop @drop="onIngredientDrop($event)">
+  <AppDrop @drop="onIngredientDrop">
     <div class="content__pizza">
       <label class="input">
         <span class="visually-hidden">Название пиццы</span>
diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
index 4e2c6f3..2a41cb3 100644
--- a/src/frontend/src/modules/builder/components/TheBuilder.vue
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -5,24 +5,21 @@
 
       <BuilderDoughSelector
         :doughs="doughs"
-        @onDoughChange="updateCurrentDough($event)"
+        @onDoughChange="updateCurrentDough"
       />
 
-      <BuilderSizeSelector
-        :sizes="sizes"
-        @onSizeChange="updateCurrentSize($event)"
-      />
+      <BuilderSizeSelector :sizes="sizes" @onSizeChange="updateCurrentSize" />
 
       <BuilderIngredientsSelector
         :sauces="sauces"
         :ingredients="ingredients"
-        @onSauceChange="updateCurrentSauce($event)"
-        @onCountUpdate="updateIngredientsPrice($event)"
+        @onSauceChange="updateCurrentSauce"
+        @onCountUpdate="updateIngredientsPrice"
       />
 
       <BuilderPriceCounter
         :total-price="totalPrice"
-        @onIngredientDrop="updateIngredientsPrice($event)"
+        @onIngredientDrop="updateIngredientsPrice"
       />
     </div>
   </form>

From 1d8ca4b628021f032a3b73c0b1bf49b47eca3707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Mon, 5 Jul 2021 21:10:46 +0300
Subject: [PATCH 15/22] =?UTF-8?q?=D0=BF=D0=BE=D0=B4=D0=B4=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B6=D0=BA=D0=B0=20@?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/vue.config.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/frontend/vue.config.js b/src/frontend/vue.config.js
index ad5cb4f..67bd70d 100644
--- a/src/frontend/vue.config.js
+++ b/src/frontend/vue.config.js
@@ -1,3 +1,5 @@
+const path = require("path");
+
 module.exports = {
   css: {
     loaderOptions: {
@@ -32,4 +34,12 @@ module.exports = {
       errors: true,
     },
   },
+
+  configureWebpack: {
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+  },
 };

From ec6344a0d2822c9690d29a462e8895705dceff11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Thu, 8 Jul 2021 22:04:10 +0300
Subject: [PATCH 16/22] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D0=BF=D1=81=20=20classMods=20=D0=B8=D0=B7=20=D1=87?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D1=8B=D1=85=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=82=D0=BE=D0=B2,=20=D1=82=D0=B0=D0=BA=20?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=BA=20class=20=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=20?=
 =?UTF-8?q?=D0=B7=D0=B0=D0=B4=D0=B2=D0=B0=D0=B2=D0=B0=D1=82=D1=8C=20=D1=81?=
 =?UTF-8?q?=D0=BD=D0=B0=D1=80=D1=83=D0=B6=D0=B8=20=D0=BF=D1=80=D1=8F=D0=BC?=
 =?UTF-8?q?=D0=BE=20=D1=81=D0=B0=D0=BC=D0=BE=D0=BC=D1=83=20=D0=BA=D0=BE?=
 =?UTF-8?q?=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/components/AppCounter.vue          | 7 +------
 src/frontend/src/common/components/AppRadioButton.vue      | 7 +------
 src/frontend/src/common/components/AppWidget.vue           | 2 +-
 .../modules/builder/components/BuilderDoughSelector.vue    | 2 +-
 .../builder/components/BuilderIngredientsSelector.vue      | 4 ++--
 .../modules/builder/components/BuilderPizzaViewItem.vue    | 2 +-
 .../src/modules/builder/components/BuilderSizeSelector.vue | 2 +-
 7 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index 0de9b3c..a9a814e 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="counter" :class="classMods">
+  <div class="counter">
     <button
       type="button"
       class="counter__button counter__button--disabled counter__button--minus"
@@ -30,11 +30,6 @@ export default {
   name: "AppCounter",
 
   props: {
-    classMods: {
-      type: Array,
-      default: () => [],
-    },
-
     count: {
       type: Number,
       required: true,
diff --git a/src/frontend/src/common/components/AppRadioButton.vue b/src/frontend/src/common/components/AppRadioButton.vue
index bc8bba3..c3de3b0 100644
--- a/src/frontend/src/common/components/AppRadioButton.vue
+++ b/src/frontend/src/common/components/AppRadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="radio" :class="classMods">
+  <label class="radio">
     <input
       type="radio"
       :name="radioName"
@@ -15,11 +15,6 @@ export default {
   name: "AppRadioButton",
 
   props: {
-    classMods: {
-      type: Array,
-      default: () => [],
-    },
-
     radioName: {
       type: String,
       default: "AppRadioButton",
diff --git a/src/frontend/src/common/components/AppWidget.vue b/src/frontend/src/common/components/AppWidget.vue
index 44d35ff..e142b42 100644
--- a/src/frontend/src/common/components/AppWidget.vue
+++ b/src/frontend/src/common/components/AppWidget.vue
@@ -2,7 +2,7 @@
   <div class="sheet">
     <h2 class="title title--small sheet__title">{{ title }}</h2>
 
-    <div class="sheet__content" :class="classMods">
+    <div class="sheet__content">
       <slot />
     </div>
   </div>
diff --git a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
index c099ece..4a3c9ef 100644
--- a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content__dough">
-    <AppWidget title="Выберите тесто" :class-mods="['dough']">
+    <AppWidget title="Выберите тесто" class="dough">
       <label
         v-for="({ value, name, description, isChecked }, index) of doughs"
         :key="index"
diff --git a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
index 5630c0b..3b51a77 100644
--- a/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="content__ingridients">
-    <AppWidget title="Выберите ингридиенты" :class-mods="['ingridients']">
+    <AppWidget title="Выберите ингридиенты" class="ingridients">
       <div class="ingridients__sauce">
         <p>Основной соус:</p>
         <AppRadioButton
           v-for="({ value, name, isChecked }, index) of sauces"
           :key="index"
-          :class-mods="['ingridients__input']"
+          class="ingridients__input"
           radio-name="sauce"
           :value="value"
           :is-checked="isChecked"
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
index 3fb580e..507cda0 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
@@ -14,7 +14,7 @@
       }}</span>
 
       <AppCounter
-        :class-mods="['counter--orange', 'ingridients__counter']"
+        class="counter--orange ingridients__counter"
         :count="ingredient.count"
         @onCountUpdate="onCountUpdate"
       />
diff --git a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
index 6131843..3a41c2d 100644
--- a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content__diameter">
-    <AppWidget title="Выберите размер" :class-mods="['diameter']">
+    <AppWidget title="Выберите размер" class="diameter">
       <label
         v-for="({ value, name, isChecked }, index) of sizes"
         :key="index"

From 98025b65c516528cc2ff04bea47844d41e75c901 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Thu, 8 Jul 2021 23:42:31 +0300
Subject: [PATCH 17/22] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B4=D0=B5?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=BB=20=D0=B2=D1=8B=D1=87=D0=B8=D1=81=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=86=D0=B5=D0=BD=D1=8B=20,=20=D1=81?=
 =?UTF-8?q?=D0=BE=D0=B7=D0=B4=D0=B0=D0=BB=20computed=20=D1=81=D0=B2=D0=BE?=
 =?UTF-8?q?=D0=B9=D1=81=D1=82=D0=B2=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/builder/components/TheBuilder.vue | 31 ++++++-------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
index 2a41cb3..7a295fb 100644
--- a/src/frontend/src/modules/builder/components/TheBuilder.vue
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -74,22 +74,28 @@ export default {
         price: 0,
         name: "",
       },
-
-      totalPrice: 0,
     };
   },
 
+  computed: {
+    totalPrice() {
+      return (
+        this.currentDough.price +
+        this.currentSauce.price +
+        this.ingredients.reduce((a, b) => a + (b["totalPrice"] || 0), 0)
+      );
+    },
+  },
+
   created() {
     this.currentDough = this.getCurrentItem(this.doughs);
     this.currentSize = this.getCurrentItem(this.sizes);
     this.currentSauce = this.getCurrentItem(this.sauces);
-    this.totalPrice = this.updateTotalPrice();
   },
 
   methods: {
     updateCurrentDough(currentDough) {
       this.currentDough = currentDough;
-      this.totalPrice = this.updateTotalPrice();
     },
 
     updateCurrentSize(currentSize) {
@@ -98,7 +104,6 @@ export default {
 
     updateCurrentSauce(currentSauce) {
       this.currentSauce = currentSauce;
-      this.totalPrice = this.updateTotalPrice();
     },
 
     updateIngredientsPrice(ingredientData) {
@@ -126,14 +131,6 @@ export default {
         .map(({ value }) => value)[0];
     },
 
-    updateTotalPrice() {
-      return (
-        this.currentDough.price +
-        this.currentSauce.price +
-        this.ingredients.reduce((a, b) => a + (b["totalPrice"] || 0), 0)
-      );
-    },
-
     ingredientInc(currentIngredientIndex) {
       if (this.canIncOrDec(countAction.INC, currentIngredientIndex)) {
         this.$set(this.ingredients, currentIngredientIndex, {
@@ -143,8 +140,6 @@ export default {
             this.ingredients[currentIngredientIndex].count *
             this.ingredients[currentIngredientIndex].price,
         });
-
-        this.totalPrice = this.updateTotalPrice();
       }
     },
 
@@ -157,8 +152,6 @@ export default {
             this.ingredients[currentIngredientIndex].count *
             this.ingredients[currentIngredientIndex].price,
         });
-
-        this.totalPrice = this.updateTotalPrice();
       }
     },
 
@@ -172,8 +165,6 @@ export default {
           totalPrice: 0,
         });
 
-        this.totalPrice = this.updateTotalPrice();
-
         return;
       }
 
@@ -191,8 +182,6 @@ export default {
               this.ingredients[currentIngredientIndex].count
             : this.ingredients[currentIngredientIndex].price * value,
       });
-
-      this.totalPrice = this.updateTotalPrice();
     },
 
     canIncOrDec(action, currentIngredientIndex) {

From 3c1f81da76d41fdf6c6fed0554be0fe019ead529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Fri, 9 Jul 2021 09:17:56 +0300
Subject: [PATCH 18/22] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20value=20=D0=B4=D0=BB=D1=8F=20inptut=20=D0=B2=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B5=20?=
 =?UTF-8?q?BuilderDoughSelector,=20=D1=87=D1=82=D0=BE=D0=B1=D1=8B=20=D0=B2?=
 =?UTF-8?q?=20value=20=D0=BD=D0=B5=20=D0=BF=D1=80=D0=B8=D1=85=D0=BE=D0=B4?=
 =?UTF-8?q?=D0=B8=D0=BB=20[object,=20object]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modules/builder/components/BuilderDoughSelector.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
index 4a3c9ef..e46594e 100644
--- a/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderDoughSelector.vue
@@ -10,7 +10,7 @@
         <input
           type="radio"
           name="dough"
-          :value="value"
+          :value="value.price"
           class="visually-hidden"
           :checked="isChecked"
           @change="onDoughChange(value)"

From 3d638e40409bbebdae809b25f619914644cbc41a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Fri, 9 Jul 2021 09:20:08 +0300
Subject: [PATCH 19/22] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20=D0=B8?=
 =?UTF-8?q?=D0=B7=20value=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20undefined?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/components/AppCounter.vue             | 4 ++--
 .../src/modules/builder/components/BuilderPizzaViewItem.vue   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/common/components/AppCounter.vue b/src/frontend/src/common/components/AppCounter.vue
index a9a814e..89346f4 100644
--- a/src/frontend/src/common/components/AppCounter.vue
+++ b/src/frontend/src/common/components/AppCounter.vue
@@ -40,14 +40,14 @@ export default {
     inc() {
       this.$emit("onCountUpdate", {
         action: countAction.INC,
-        value: undefined,
+        value: null,
       });
     },
 
     dec() {
       this.$emit("onCountUpdate", {
         action: countAction.DEC,
-        value: undefined,
+        value: null,
       });
     },
 
diff --git a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
index 507cda0..58b447a 100644
--- a/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
+++ b/src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue
@@ -4,7 +4,7 @@
       currentIngredientIndex: idx,
       actionCountData: {
         action: countAction.DROP,
-        value: undefined,
+        value: null,
       },
     }"
   >

From 87b5dd641cc0ad9bafcd3379334f40c681f4249b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Fri, 9 Jul 2021 09:23:31 +0300
Subject: [PATCH 20/22] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BD=D0=B0=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BD=D1=83=D1=8E=20payload?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/common/components/AppDrop.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/common/components/AppDrop.vue b/src/frontend/src/common/components/AppDrop.vue
index a549e75..d9297c9 100644
--- a/src/frontend/src/common/components/AppDrop.vue
+++ b/src/frontend/src/common/components/AppDrop.vue
@@ -15,11 +15,11 @@ export default {
       if (!dataTransfer) {
         return;
       }
+
       const payload = dataTransfer.getData(DATA_TRANSFER_PAYLOAD);
+
       if (payload) {
-        const transferData = JSON.parse(
-          dataTransfer.getData(DATA_TRANSFER_PAYLOAD)
-        );
+        const transferData = JSON.parse(payload);
         this.$emit("drop", transferData);
       }
     },

From c892af34896327d68f9f0dbf1326d7b35c0aaae6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Fri, 16 Jul 2021 12:16:15 +0300
Subject: [PATCH 21/22] =?UTF-8?q?=D0=9F=D1=80=D0=B8=D0=B2=D1=8F=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=BB=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D1=86=D0=B5=D0=BD=D1=8B=20=D0=BA=20=D0=B2=D1=8B=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=80=D1=83=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=20=D0=BF=D0=B8=D1=86=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/modules/builder/components/TheBuilder.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/modules/builder/components/TheBuilder.vue b/src/frontend/src/modules/builder/components/TheBuilder.vue
index 7a295fb..684731f 100644
--- a/src/frontend/src/modules/builder/components/TheBuilder.vue
+++ b/src/frontend/src/modules/builder/components/TheBuilder.vue
@@ -80,9 +80,10 @@ export default {
   computed: {
     totalPrice() {
       return (
-        this.currentDough.price +
-        this.currentSauce.price +
-        this.ingredients.reduce((a, b) => a + (b["totalPrice"] || 0), 0)
+        (this.currentDough.price +
+          this.currentSauce.price +
+          this.ingredients.reduce((a, b) => a + (b["totalPrice"] || 0), 0)) *
+        this.currentSize.multiplier
       );
     },
   },

From 3c1057d7303e841a16689a7d6600364278b23226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B0=D0=B2=D0=B5=D0=BB=20=D0=9E=D1=81=D0=B8=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B2?= <pavelosipov@iMac-Pavel.local>
Date: Fri, 16 Jul 2021 12:17:32 +0300
Subject: [PATCH 22/22] =?UTF-8?q?=D0=A3=D0=B1=D1=80=D0=B0=D0=BB=20[Object?=
 =?UTF-8?q?=20Object]=20=D0=B8=D0=B7=20value=20BuildSizeSelector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/modules/builder/components/BuilderSizeSelector.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
index 3a41c2d..c981431 100644
--- a/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
+++ b/src/frontend/src/modules/builder/components/BuilderSizeSelector.vue
@@ -10,7 +10,7 @@
         <input
           type="radio"
           name="diameter"
-          :value="value"
+          :value="value.multiplier"
           :checked="isChecked"
           @change="onSizeChange(value)"
           class="visually-hidden"