From b274374f918adda3a092babe1495b7ce90e94b84 Mon Sep 17 00:00:00 2001
From: Alina23 <mikheeva.alin@gmail.com>
Date: Tue, 29 Oct 2019 19:28:35 +0400
Subject: [PATCH] Category part 1
---
src/components/Category.vue | 2 +-
src/components/CategoryList.vue | 2 +-
src/components/CategoryVinput.vue | 21 ++++++++++++++++-----
src/components/Icon.vue | 6 +++---
src/components/IconColor.vue | 2 +-
src/components/Vinput.vue | 16 +++++++++++-----
src/pages/Settings.vue | 21 ++++++++++-----------
7 files changed, 43 insertions(+), 27 deletions(-)
diff --git a/src/components/Category.vue b/src/components/Category.vue
index c60bac6..eb9c0ec 100644
--- a/src/components/Category.vue
+++ b/src/components/Category.vue
@@ -161,7 +161,7 @@ export default {
border-top: none;
border-left: none;
border-right: none;
- border-bottom-color:indigo;
+ border-bottom-color: indigo;
border-radius: 0;
}
}
diff --git a/src/components/CategoryList.vue b/src/components/CategoryList.vue
index 62e4c88..8eeb605 100644
--- a/src/components/CategoryList.vue
+++ b/src/components/CategoryList.vue
@@ -10,7 +10,7 @@
v-for="category in categories"
:key="category.id"
:is-default="defaultCategoryId === category.id"
- v-bind="{...category}"
+ v-bind="category"
@set-as-default="setAsDefault(category.id)"
@delete-category="deleteCategory($event, category.id)"
diff --git a/src/components/CategoryVinput.vue b/src/components/CategoryVinput.vue
index 8320042..83faa6e 100644
--- a/src/components/CategoryVinput.vue
+++ b/src/components/CategoryVinput.vue
@@ -35,7 +35,7 @@
:color="color"
:selected="currentColor === color"
- @click.native="[currentColor = color, chosenIcon()]"
+ @click.native="chosenIcon({color})"
/>
<p>Icon</p>
<Icon
@@ -45,7 +45,7 @@
:current-color="currentColor"
:selected="currentIcon === name"
- @click.native="[currentIcon = name, chosenIcon()]"
+ @click.native="chosenIcon({name})"
/>
<br>
<input
@@ -75,6 +75,9 @@ export default {
disabledButton: {
type: Boolean,
},
+ disabledList: {
+ type: Boolean,
+ },
},
data() {
return {
@@ -88,7 +91,10 @@ export default {
};
},
methods: {
- chosenIcon() {
+ chosenIcon({ color, name }) {
+ if (name) this.currentIcon = name;
+ if (color) this.currentColor = color;
+
this.$emit('chosen-icon', this.currentIcon, this.currentColor);
},
checkForm(e) {
@@ -100,14 +106,19 @@ export default {
}
e.preventDefault();
- if (this.newCategory !== '' && !this.disabledButton) {
+ if (this.newCategory !== '' && !this.disabledButton && !this.disabledList) {
this.errors = [];
this.isInvalid = false;
this.newCategory = '';
}
e.preventDefault();
if (this.disabledButton) {
- this.errors.push('Choose another color/icon');
+ this.errors.push('This combination icon&color is already exist!');
+ this.isInvalid = true;
+ }
+ e.preventDefault();
+ if (this.disabledList) {
+ this.errors.push('You have reached icons\' limit!');
this.isInvalid = true;
}
},
diff --git a/src/components/Icon.vue b/src/components/Icon.vue
index 11030b0..98aa784 100644
--- a/src/components/Icon.vue
+++ b/src/components/Icon.vue
@@ -45,8 +45,8 @@ export default {
stroke: VIOLET;
transition: 0.5s;
}
- &__selected {
- transform: scaleX(1.2) scaleY(1.2);
- }
+ &__selected {
+ transform: scaleX(1.2) scaleY(1.2);
}
+ }
</style>
diff --git a/src/components/IconColor.vue b/src/components/IconColor.vue
index 49a6423..da220f3 100644
--- a/src/components/IconColor.vue
+++ b/src/components/IconColor.vue
@@ -43,7 +43,7 @@ export default {
&__selected {
border: solid gold;
- border-radius: 0;
+ border-radius: 15px;
transform: rotate(90deg);
}
}
diff --git a/src/components/Vinput.vue b/src/components/Vinput.vue
index e9bf11f..684a4f4 100644
--- a/src/components/Vinput.vue
+++ b/src/components/Vinput.vue
@@ -14,17 +14,18 @@
@keyup.enter="addTask"
>
- <v-select :options="options">
+ <v-select
+ :options="options"
+ class="select"
+ >
<template v-slot:search>
<div />
</template>
-
<template v-slot:selected-option>
- <icon-base><icon-sport /></icon-base>
- 123
+ <icon-base :name="'sport'" />
</template>
<template v-slot:option>
- <icon-base></icon-base>
+ <icon-base :name="'sport'" />
</template>
</v-select>
<input
@@ -51,6 +52,7 @@ export default {
newTask: '',
isInvalid: false,
error: '',
+ options: ['sport', 'work'],
};
},
methods: {
@@ -101,6 +103,10 @@ $main-border: 1px solid;
.error::placeholder {
color: red;
}
+ .select {
+ margin-left: 20px;
+ width: 90px;
+ }
.add {
min-width: 100px;
padding: 0 20px;
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 93c27c7..0776d6e 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -37,15 +37,16 @@ export default {
return {
categories: [],
arr: [],
- currentColor: '',
- currentIcon: '',
+ currentColor: 'VIOLET',
+ currentIcon: 'sport',
defaultCategoryId: 0,
};
},
computed: {
disabledButton() {
- return !!this.categories.filter(category => category.color === this.currentColor
- && category.icon === this.currentIcon).length;
+ return this.categories.some(
+ ({ color, icon }) => color === this.currentColor && icon === this.currentIcon,
+ );
},
orderedCategories() {
return [...this.categories].sort(({ id }) => (id === this.defaultCategoryId && -1));
@@ -83,7 +84,7 @@ export default {
.then((response) => {
this.categories.push(response.data);
})
- .then(() => !this.defaultCategoryId && this.updateDefaultId());
+ .then(() => this.defaultCategoryId || this.updateDefaultId());
},
updateCategory(event) {
const params = {};
@@ -99,16 +100,14 @@ export default {
.then(() => {
const index = this.findIndexForId(event.id);
- if (index === -1) {
- return;
- }
+ if (index === -1) return;
this.categories.splice(index, 1);
})
.then(() => this.defaultCategoryId === event.id && this.updateDefaultId());
},
updateDefaultId() {
- const id = !this.categories.length ? 0 : this.categories[0].id;
+ const { id } = this.categories[0] || { id: 0 };
return this.setAsDefault(id);
},
@@ -117,8 +116,8 @@ export default {
.then(this.saveDefault);
},
- saveDefault(response) {
- this.defaultCategoryId = response.data.value;
+ saveDefault({ data }) {
+ this.defaultCategoryId = data.value;
},
},
};
--
GitLab