-
-
-
-
-
-
+
+
+
+
+
-
+
+
+
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index b58e52b9..00000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
- {{ msg }}
-
-
-
-
- Edit
- components/HelloWorld.vue
to test HMR
-
-
-
-
- Check out
- create-vue, the official Vue + Vite starter
-
-
- Learn more about IDE Support for Vue in the
- Vue Docs Scaling up Guide.
-
- Click on the Vite and Vue logos to learn more
-
-
-
diff --git a/src/components/ItemsList.vue b/src/components/ItemsList.vue
new file mode 100644
index 00000000..64194f0a
--- /dev/null
+++ b/src/components/ItemsList.vue
@@ -0,0 +1,52 @@
+
+
+
+ No items has to select
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/SelectedChooseItems.vue b/src/components/SelectedChooseItems.vue
new file mode 100644
index 00000000..8ca105d2
--- /dev/null
+++ b/src/components/SelectedChooseItems.vue
@@ -0,0 +1,25 @@
+
+
+ No item selected yet
+
+
+ {{ item.name }}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/SelectedUserItems.vue b/src/components/SelectedUserItems.vue
new file mode 100644
index 00000000..5fdeabaa
--- /dev/null
+++ b/src/components/SelectedUserItems.vue
@@ -0,0 +1,39 @@
+
+
+
+
Selected: {{ selected.length }} / {{ maxSelectedUserItems }}
+
+
+
+
+
\ No newline at end of file
diff --git a/src/composables/useDataStore.ts b/src/composables/useDataStore.ts
new file mode 100644
index 00000000..9389855c
--- /dev/null
+++ b/src/composables/useDataStore.ts
@@ -0,0 +1,42 @@
+import { computed, inject, ref, Ref } from 'vue';
+import {
+ chooseItemsKey,
+ selectedChooseItemsKey,
+ selectedUsersItemsKey,
+ userItemsKey,
+} from '../constants/dataKeys';
+import { IItem } from '../types/data';
+import { maxSelectedUserItems } from '../constants/data';
+
+export const useDataStore =
(type: T) => {
+ const itemsKey = type === 'user' ? userItemsKey : chooseItemsKey
+ const selectedKey =
+ type === 'user' ? selectedUsersItemsKey : selectedChooseItemsKey
+
+ const items = inject(itemsKey, []);
+ const selectedIds = inject[>(selectedKey, ref([]))
+
+ const selected = computed(() =>
+ items.filter(({ id }) => selectedIds.value.includes(id))
+ )
+
+ const toggleItem = (id: number) => {
+ const hasItem = !!items.find(item => item.id === id)
+ if (type === 'chosen') {
+ selectedIds.value = hasItem ? [id] : []
+ return
+ }
+ const selectedIdx = selectedIds.value.indexOf(id);
+ if (selectedIdx < 0) {
+ if (selectedIds.value.length >= maxSelectedUserItems) {
+ // TODO: Notification?
+ return
+ }
+ selectedIds.value.push(id)
+ } else {
+ selectedIds.value.splice(selectedIdx, 1)
+ }
+ }
+
+ return { items, selected, toggleItem, rawSelected: selectedIds }
+};
diff --git a/src/composables/useInitDataStore.ts b/src/composables/useInitDataStore.ts
new file mode 100644
index 00000000..857782e4
--- /dev/null
+++ b/src/composables/useInitDataStore.ts
@@ -0,0 +1,22 @@
+import { provide, reactive, ref } from "vue"
+import { defaultChooseItems, defaultUserItems } from "../constants/data"
+import { chooseItemsKey, selectedChooseItemsKey, selectedUsersItemsKey, userItemsKey } from "../constants/dataKeys"
+
+export const useInitDataStore = () => {
+ /**
+ * TODO: возможно стоило использовать какой-будь store, вроде Pinia,
+ * но для одностраничного приложения не вижу смысла
+ */
+
+ const userItems = reactive(defaultUserItems)
+ const chooseItems = reactive(defaultChooseItems)
+
+ const selectedUserItems = ref(Array())
+ const selectedChooseItems = ref(Array())
+
+ provide(userItemsKey, userItems)
+ provide(chooseItemsKey, chooseItems)
+ provide(selectedUsersItemsKey, selectedUserItems)
+ provide(selectedChooseItemsKey, selectedChooseItems)
+
+}
\ No newline at end of file
diff --git a/src/constants/data.ts b/src/constants/data.ts
new file mode 100644
index 00000000..e1f172e7
--- /dev/null
+++ b/src/constants/data.ts
@@ -0,0 +1,73 @@
+import { IItem } from "../types/data"
+
+export const defaultUserItems: IItem[] = [
+ {
+ "id": 1,
+ "name": "Shoes 1"
+ },
+ {
+ "id": 2,
+ "name": "Shoes 2"
+ },
+ {
+ "id": 3,
+ "name": "Shoes 3"
+ },
+ {
+ "id": 4,
+ "name": "Shoes 4"
+ },
+ {
+ "id": 5,
+ "name": "T-shirt 1"
+ },
+ {
+ "id": 6,
+ "name": "T-shirt 2"
+ },
+ {
+ "id": 7,
+ "name": "T-shirt 3"
+ },
+ {
+ "id": 8,
+ "name": "T-shirt 4"
+ }
+]
+
+export const defaultChooseItems: IItem[] = [
+ {
+ "id": 11,
+ "name": "Jacket 1"
+ },
+ {
+ "id": 12,
+ "name": "Jacket 2"
+ },
+ {
+ "id": 13,
+ "name": "Jacket 3"
+ },
+ {
+ "id": 14,
+ "name": "Jacket 4"
+ },
+ {
+ "id": 15,
+ "name": "Hoodie 1"
+ },
+ {
+ "id": 16,
+ "name": "Hoodie 2"
+ },
+ {
+ "id": 17,
+ "name": "Hoodie 3"
+ },
+ {
+ "id": 18,
+ "name": "Hoodie 4"
+ }
+]
+
+export const maxSelectedUserItems = 6
diff --git a/src/constants/dataKeys.ts b/src/constants/dataKeys.ts
new file mode 100644
index 00000000..89789a60
--- /dev/null
+++ b/src/constants/dataKeys.ts
@@ -0,0 +1,4 @@
+export const userItemsKey = Symbol()
+export const chooseItemsKey = Symbol()
+export const selectedUsersItemsKey = Symbol()
+export const selectedChooseItemsKey = Symbol()
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index bb131d6b..4eab5e31 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,79 +1,8 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
+* {
+ box-sizing: border-box;
}
-body {
+html, body, #app {
margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
min-height: 100vh;
}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
- padding: 2em;
-}
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
diff --git a/src/types/data.ts b/src/types/data.ts
new file mode 100644
index 00000000..89baea6e
--- /dev/null
+++ b/src/types/data.ts
@@ -0,0 +1,4 @@
+export interface IItem {
+ id: number,
+ name: string,
+}
\ No newline at end of file
From 28df3518db9f1d8cb690e6fb63689305c1ba82bc Mon Sep 17 00:00:00 2001
From: Bogdan Tretyakov
Date: Fri, 23 Aug 2024 17:21:24 +0300
Subject: [PATCH 3/4] init empty vite+vue
---
README.md | 2 +-
src/components/HelloWorld.vue | 41 +++++++++++++++++++++++++++++++++++
2 files changed, 42 insertions(+), 1 deletion(-)
create mode 100644 src/components/HelloWorld.vue
diff --git a/README.md b/README.md
index e847bdbc..fd3d909e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,2 @@
# Выполненное тестовое задание
-[Телеграм для связи](https://t.me/bogdan_tretyakov)
\ No newline at end of file
+[Телеграм для связи](https://t.me/bogdan_tretyakov)
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 00000000..b58e52b9
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,41 @@
+
+
+
+ ]{{ msg }}
+
+
+
+
+ Edit
+ components/HelloWorld.vue
to test HMR
+
+
+
+
+ Check out
+ create-vue, the official Vue + Vite starter
+
+
+ Learn more about IDE Support for Vue in the
+ Vue Docs Scaling up Guide.
+
+ Click on the Vite and Vue logos to learn more
+
+
+
From e38bf4bb24736f960dfc86e16d85a9e18723fd17 Mon Sep 17 00:00:00 2001
From: Bogdan Tretyakov
Date: Fri, 23 Aug 2024 19:26:42 +0300
Subject: [PATCH 4/4] base layout&functions
---
src/components/HelloWorld.vue | 41 -----------------------------------
1 file changed, 41 deletions(-)
delete mode 100644 src/components/HelloWorld.vue
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index b58e52b9..00000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-
-
-
- {{ msg }}
-
-
-
-
- Edit
- components/HelloWorld.vue
to test HMR
-
-
-
-
- Check out
- create-vue, the official Vue + Vite starter
-
-
- Learn more about IDE Support for Vue in the
- Vue Docs Scaling up Guide.
-
- Click on the Vite and Vue logos to learn more
-
-
-