Разбивка компонента «Конструктор пиццы» на мелкие компоненты #2

Shirokuiu · 2021-07-04T20:17:24Z

🎓 Разбивка компонента «Конструктор пиццы» на мелкие компоненты

…путе счетчика

… не передавать

vas11yev1work

В целом все хорошо, жду правки по комментариям.
Были места в которых недочеты были идентичны с теми, что я уже описывал ранее в других файлах, поэтому я не стал дублировать.

vas11yev1work · 2021-07-05T14:51:35Z

src/frontend/src/modules/builder/components/TheBuilder.vue

+        @onDoughChange="updateCurrentDough($event)"
+      />
+
+      <BuilderSizeSelector
+        :sizes="sizes"
+        @onSizeChange="updateCurrentSize($event)"
+      />
+
+      <BuilderIngredientsSelector
+        :sauces="sauces"
+        :ingredients="ingredients"
+        @onSauceChange="updateCurrentSauce($event)"
+        @onCountUpdate="updateIngredientsPrice($event)"
+      />
+
+      <BuilderPriceCounter
+        :total-price="totalPrice"
+        @onIngredientDrop="updateIngredientsPrice($event)"


В таких вызовах, когда у нас в аргумент функции передается $event, его можно не писать
То есть, например @onDoughChange="updateCurrentDough($event)" будет равносильно @onDoughChange="updateCurrentDough"

vas11yev1work · 2021-07-05T15:07:34Z

src/frontend/src/common/components/AppRadioButton.vue

+    classMods: {
+      type: Array,
+    },


Критерий Б3. Нужно задать либо required: true либо default
Для массивов default можно задать вот так

props: { arr: { type: Array, default: () => [] } }

Ссылка на ишью: vuejs/vue#1032 (comment)

И кстати, я так понимаю этот пропс служит для передачи классов на корневой тег компонента. В таком случае делать пропс не обязательно, на компонент ты можешь повесить обычный class и все будет работать как надо

Ссылка на документацию: https://ru.vuejs.org/v2/guide/class-and-style.html#%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%81-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0%D0%BC%D0%B8

vas11yev1work · 2021-07-05T15:08:04Z

src/frontend/src/common/components/AppCounter.vue

+    classMods: {
+      type: Array,
+      required: false,
+    },


Критерий Б3. Нужно задать либо required: true либо default
Для массивов default можно задать вот так

props: { arr: { type: Array, default: () => [] } }

Ссылка на ишью: vuejs/vue#1032 (comment)

vas11yev1work · 2021-07-05T15:08:19Z

src/frontend/src/common/components/AppWidget.vue

+    classMods: {
+      type: Array,
+    },


Критерий Б3. Нужно задать либо required: true либо default
Для массивов default можно задать вот так

props: { arr: { type: Array, default: () => [] } }

Ссылка на ишью: vuejs/vue#1032 (comment)

Вот в таком случае уже более уместно использование пропса для передачи классов

vas11yev1work · 2021-07-06T20:33:02Z

src/frontend/src/modules/builder/components/BuilderIngredientsSelector.vue

+          :value="value"
+          :is-checked="isChecked"
+          :name="name"
+          @onRadioChange="onSauceChange($event)"


У нас есть директива v-model, которую мы можем привязать к какому-то инпуту. RadioButton не исключение, то есть обычному radio мы можем задать директиву v-model. Но эту директиву мы так же можем задать и компоненту, настроив внутри компонента нужные свойства: принимающее значение и emit.

Ссылка на документацию: https://ru.vuejs.org/v2/guide/components-custom-events.html#%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-v-model-%D1%83-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0

vas11yev1work · 2021-07-06T21:11:23Z

src/frontend/src/common/normalizeSizes.js

+        ({ multiplier: multiplierMap }) => multiplier === multiplierMap
+      ).value,
+    },
+    isChecked: index === 1,


Аналогично в normalizeDoughs

vas11yev1work · 2021-07-06T21:13:26Z

src/frontend/src/common/components/AppRadioButton.vue

+    <input
+      type="radio"
+      :name="radioName"
+      :value="value"
+      :checked="isChecked"
+      @change="onRadioChange(value)"
+    />


У нас есть директива v-model, которую мы можем привязать к какому-то инпуту. RadioButton не исключение, то есть обычному radio мы можем задать директиву v-model. Но эту директиву мы так же можем задать и компоненту, настроив внутри компонента нужные свойства: принимающее значение и emit.

Ссылка на документацию: https://ru.vuejs.org/v2/guide/components-custom-events.html#%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0-v-model-%D1%83-%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%B0

vas11yev1work · 2021-07-06T21:15:16Z

src/frontend/src/common/components/AppDrop.vue

+        const transferData = JSON.parse(
+          dataTransfer.getData(DATA_TRANSFER_PAYLOAD)
+        );


Сюда можно передать уже созданную переменную payload

vas11yev1work · 2021-07-06T21:18:25Z

src/frontend/src/modules/builder/components/BuilderPizzaViewItem.vue

+      }}</span>
+
+      <AppCounter
+        :class-mods="['counter--orange', 'ingridients__counter']"


Ошибка ingredients

в стилях такой же класс

vas11yev1work · 2021-07-06T21:22:35Z

src/frontend/src/common/components/AppCounter.vue

+        value: undefined,
+      });
+    },
+
+    dec() {
+      this.$emit("onCountUpdate", {
+        action: countAction.DEC,
+        value: undefined,


По-моему нет никакого смысла использовать value: undefined. Но если все же нужно передавать пустое значение, то лучше использовать null

…авать снаружи прямо самому компоненту

…value не приходил [object, object]

Djaler · 2021-07-15T18:25:24Z

src/frontend/src/modules/builder/components/TheBuilder.vue

+
+  computed: {
+    totalPrice() {
+      return (


в расчете стоимости должен учитываться размер

Djaler · 2021-07-15T18:26:30Z

src/frontend/src/modules/builder/components/BuilderPriceCounter.vue

+      </label>
+
+      <div class="content__constructor">
+        <div class="pizza pizza--foundation--big-tomato">


в этом блоке должно отражаться состояние пиццы (в зависимости от настроек теста, соуса, ингридиентов)

Согласно пунктам ТЗ этого раздела, реализовывать данный функционал не нужно

Частично - только про пункт 3.7, не так ли?
Про пункт 3.2 этого не сказано, а именно он описывает эту логику

Djaler · 2021-07-15T18:32:59Z

src/frontend/src/common/components/AppCounter.vue

+<template>
+  <div class="counter">
+    <button
+      type="button"


кнопки должны отключаться когда нельзя уменьшить/увеличить количество ингредиентов

Опять же, в рамках этого модуля этот функционал реализовывать не нужно

3.2.3 Изменение ингредиентов
В случае если количество ингредиента на пицце равно 3-м, кнопка + становится неактивной, также отключается возможность переноса ингредиента на пиццу.

В случае если количество ингредиента на пицце равно 0, кнопка - становится неактивной.

Djaler

Отсутствует часть функционала по ТЗ.
Часть правок, оставленных на предыдущем ревью, не исправлена

Shirokuiu · 2021-07-15T20:23:44Z

Какая именно часть ТЗ указанного в этом модуле не реализована ?
И какие именно правки по прошлым замечаниям не исправлены ?
P.S. Если про v-model, то мне пока не удобно ее реализовывать. Критерии академии меня в этом не ограничивают. Это было утверждено с предыдущим наставником

Shirokuiu · 2021-07-15T20:25:22Z

По итогу мне надо добавить в расчет учитывание цены при выборе размера пиццы. Если так, то пушу этот фикс. Если нет, то тогда жду пояснений

Djaler · 2021-07-15T20:27:39Z

Если про v-model, то мне пока не удобно ее реализовывать. Критерии академии меня в этом не ограничивают. Это было утверждено с предыдущим наставником

Ну, я же об этом не в курсе, в обсуждениях на гитхабе этого нет)

Shirokuiu · 2021-07-15T20:29:46Z

Ну, я же об этом не в курсе, в обсуждениях на гитхабе этого нет)

Согласен) Просто наставник сказал что его не будет и поэтому редиректнул мрчик

Djaler · 2021-07-16T11:04:01Z

Можно мерджить, думаю

Shirokuiu · 2021-07-16T12:14:59Z

Done

Павел Осипов added 12 commits July 1, 2021 17:35

Создал общие компоненты

b248bf2

Создал общую директорию для общих компонентов

7920394

Удалил пакет vue-fragment

af94b93

Создал все базовые компоненты модулей

0faafc7

Сделал подсчет цены

03352d7

Создал hoc компоненты для drag and drop + пофиксил багу при пустом ин…

9640f4e

…путе счетчика

переделал подсчет каунтера ингредиентов

86b04bb

удлил комменты

38c3564

Реализовал подсчет цены при помощи drag and drop

11c4bac

решил конфликты

26319fb

Удалил ненужую переменную + убрал console.log

c24968f

Поправил мапу в normalizeSauces

3b858a1

keksobot changed the title ~~Module2 task1~~ Разбивка компонента «Конструктор пиццы» на мелкие компоненты Jul 5, 2021

Павел Осипов added 4 commits July 5, 2021 20:27

Создал компонент AppLayout и добавил в него TheHeader и Index

a4470f9

Критерии - Б3

f54e5e9

Когда в функцию передается только $event, то можно его явно в шаблоне…

f78d67b

… не передавать

поддержка @

1d8ca4b

vas11yev1work reviewed Jul 6, 2021

View reviewed changes

Павел Осипов added 5 commits July 8, 2021 22:04

Убрал пропс classMods из чистых компонентов, так как class можно задв…

ec6344a

…авать снаружи прямо самому компоненту

переделал вычисление цены , создал computed свойство

98025b6

Поправил value для inptut в компоненте BuilderDoughSelector, чтобы в …

3c1f81d

…value не приходил [object, object]

Убрал из value значение undefined

3d638e4

Заменил на переменную payload

87b5dd6

Djaler reviewed Jul 15, 2021

View reviewed changes

Djaler suggested changes Jul 15, 2021

View reviewed changes

Павел Осипов added 2 commits July 16, 2021 12:16

Привязал изменение цены к выбору размера пиццы

c892af3

Убрал [Object Object] из value BuildSizeSelector

3c1057d

keksobot merged commit 1115e57 into htmlacademy-vue:master Jul 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Разбивка компонента «Конструктор пиццы» на мелкие компоненты #2

Разбивка компонента «Конструктор пиццы» на мелкие компоненты #2

Shirokuiu commented Jul 4, 2021 •

edited by keksobot

Loading

vas11yev1work left a comment

vas11yev1work Jul 5, 2021

vas11yev1work Jul 5, 2021

vas11yev1work Jul 6, 2021

vas11yev1work Jul 5, 2021

vas11yev1work Jul 5, 2021

vas11yev1work Jul 6, 2021

vas11yev1work Jul 6, 2021

vas11yev1work Jul 6, 2021

vas11yev1work Jul 6, 2021

vas11yev1work Jul 6, 2021

vas11yev1work Jul 6, 2021

Shirokuiu Jul 9, 2021

vas11yev1work Jul 6, 2021

Djaler Jul 15, 2021

Djaler Jul 15, 2021

Shirokuiu Jul 15, 2021

Djaler Jul 15, 2021

Djaler Jul 15, 2021

Shirokuiu Jul 15, 2021

Djaler Jul 15, 2021

Djaler left a comment

Shirokuiu commented Jul 15, 2021

Shirokuiu commented Jul 15, 2021

Djaler commented Jul 15, 2021 •

edited

Loading

Shirokuiu commented Jul 15, 2021 •

edited

Loading

Djaler commented Jul 16, 2021

Shirokuiu commented Jul 16, 2021

Разбивка компонента «Конструктор пиццы» на мелкие компоненты #2

Разбивка компонента «Конструктор пиццы» на мелкие компоненты #2

Conversation

Shirokuiu commented Jul 4, 2021 • edited by keksobot Loading

vas11yev1work left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Djaler left a comment

Choose a reason for hiding this comment

Shirokuiu commented Jul 15, 2021

Shirokuiu commented Jul 15, 2021

Djaler commented Jul 15, 2021 • edited Loading

Shirokuiu commented Jul 15, 2021 • edited Loading

Djaler commented Jul 16, 2021

Shirokuiu commented Jul 16, 2021

Shirokuiu commented Jul 4, 2021 •

edited by keksobot

Loading

Djaler commented Jul 15, 2021 •

edited

Loading

Shirokuiu commented Jul 15, 2021 •

edited

Loading