Merge pull request #2 from Shirokuiu/module2-task1

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>

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="counter">
+    <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"
+      :value="count"
+      @change="onInputChange"
+    />
+    <button
+      type="button"
+      class="counter__button counter__button--plus"
+      @click="inc"
+    >
+      <span class="visually-hidden">Больше</span>
+    </button>
+  </div>
+</template>
+<script>
+import { countAction } from "../constants";
+
+export default {
+  name: "AppCounter",
+
+  props: {
+    count: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  methods: {
+    inc() {
+      this.$emit("onCountUpdate", {
+        action: countAction.INC,
+        value: null,
+      });
+    },
+
+    dec() {
+      this.$emit("onCountUpdate", {
+        action: countAction.DEC,
+        value: null,
+      });
+    },
+
+    onInputChange(evt) {
+      this.$emit("onCountUpdate", {
+        action: countAction.INPUT_CHANGE,
+        value: evt.target.value,
+      });
+    },
+  },
+};
+</script>

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>

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(payload);
+        this.$emit("drop", transferData);
+      }
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,46 @@
+<template>
+  <label class="radio">
+    <input
+      type="radio"
+      :name="radioName"
+      :value="value"
+      :checked="isChecked"
+      @change="onRadioChange(value)"
+    />
+    <span>{{ name }}</span>
+  </label>
+</template>
+<script>
+export default {
+  name: "AppRadioButton",
+
+  props: {
+    radioName: {
+      type: String,
+      default: "AppRadioButton",
+    },
+
+    value: {
+      type: [Object, String],
+      required: true,
+    },
+
+    isChecked: {
+      type: Boolean,
+      required: true,
+    },
+
+    name: {
+      type: String,
+      default: "Радио кнопка",
+    },
+  },
+
+  methods: {
+    onRadioChange(value) {
+      this.$emit("onRadioChange", value);
+    },
+  },
+};
+</script>
+<style></style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div class="sheet">
+    <h2 class="title title--small sheet__title">{{ title }}</h2>
+
+    <div class="sheet__content">
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "AppWidget",
+
+  props: {
+    title: {
+      type: String,
+      default: "Заголовок",
+    },
+
+    classMods: {
+      type: Array,
+    },
+  },
+};
+</script>

src/frontend/src/common/components/constants.js

@@ -0,0 +1,2 @@
+export const MOVE = "move";
+export const DATA_TRANSFER_PAYLOAD = "payload";

src/frontend/src/common/constants.js

@@ -0,0 +1,6 @@
+export const countAction = {
+  INC: "inc",
+  DEC: "dec",
+  INPUT_CHANGE: "inputChange",
+  DROP: "drop",
+};

src/frontend/src/common/normalizeDoughs.js

@@ -10,9 +10,15 @@ const valueMap = [
 ];
 
 export const normalizeDoughs = (doughs) =>
-  doughs.map((dough) => {
+  doughs.map(({ description, price, image, name }, index) => {
     return {
-      ...dough,
-      value: valueMap.find(({ name }) => dough.name === name).value,
+      description,
+      name,
+      value: {
+        price,
+        image,
+        name: valueMap.find(({ name: nameMap }) => name === nameMap).value,
+      },
+      isChecked: index === 0,
     };
   });

src/frontend/src/common/normalizeIngredients.js

@@ -64,5 +64,9 @@ const modMap = [
 export const normalizeIngredients = (ingredients) =>
   ingredients.map((ingredient) => ({
     ...ingredient,
+    count: 0,
+    totalPrice: 0,
+    maxInc: 3,
+    maxDec: 0,
     mod: modMap.find(({ name }) => ingredient.name === name).value,
   }));

src/frontend/src/common/normalizeSauces.js

@@ -1,7 +1,7 @@
 const valueMap = [
   {
     name: "Томатный",
-    value: "creamy",
+    value: "tomato",
   },
   {
     name: "Сливочный",
@@ -10,7 +10,11 @@ const valueMap = [
 ];
 
 export const normalizeSauces = (sauces) =>
-  sauces.map((sauce) => ({
-    ...sauce,
-    value: valueMap.find(({ name }) => sauce.name === name).value,
+  sauces.map(({ price, name }, index) => ({
+    name,
+    value: {
+      price,
+      name: valueMap.find(({ name: nameMap }) => name === nameMap).value,
+    },
+    isChecked: index === 0,
   }));

src/frontend/src/common/normalizeSizes.js

@@ -14,8 +14,14 @@ const valueMap = [
 ];
 
 export const normalizeSizes = (sizes) =>
-  sizes.map((size) => ({
-    ...size,
-    value: valueMap.find(({ multiplier }) => size.multiplier === multiplier)
-      .value,
+  sizes.map(({ name, image, multiplier }, index) => ({
+    name,
+    value: {
+      image,
+      multiplier,
+      name: valueMap.find(
+        ({ multiplier: multiplierMap }) => multiplier === multiplierMap
+      ).value,
+    },
+    isChecked: index === 1,
   }));

src/frontend/src/layouts/AppLayout.vue

@@ -0,0 +1,21 @@
+<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>