[FEATURE] Adding selected tags on project selection

server/dbs/articles.js

@@ -12,6 +12,11 @@ module.exports = {
 			.limit(limit)
 			.populate('images');
 	},
+	get_one: (find) => {
+		return model
+			.findOne(find)
+			.populate('images');
+	},
 	get_count: (find) => {
 		return model
 			.countDocuments(find);

server/libs/utils.js

@@ -13,6 +13,9 @@ module.exports = {
 	add_name_filter: (filters, key, value) => {
 		module.exports.check_and_add_name_filter(filters, key, value, { $eq: value });
 	},
+	add_id_filter: (filters, key, value) => {
+		module.exports.check_and_add_name_filter(filters, key, value, value);
+	},
 	check_and_add_name_filter: (filters, key, value, operators) => {
 		if (module.exports.is_value_exist(value)) {
 			module.exports.add_filter(filters, key, operators);

server/routes/articles.js

@@ -13,6 +13,7 @@ const utils = require('../libs/utils');
 routes.route('/').get(async (request, response) => {
 	const params = {};
 	utils.add_tags_filter(params, 'tags', request.query.tags);
+	utils.add_id_filter(params, '_id', request.query.id);
 	const limit = constants.NUMBER_ARTICLES_BY_PAGE;
 	const page = request.query.page === undefined ? 0 : Number(request.query.page);
 
@@ -23,4 +24,11 @@ routes.route('/').get(async (request, response) => {
 	response.json(datas);
 });
 
+routes.route('/one').get(async (request, response) => {
+	const params = {};
+	utils.add_id_filter(params, '_id', request.query.id);
+	const datas = await services.get_one(params);
+	response.json(datas);
+});
+
 module.exports = routes;

server/services/articles.js

@@ -4,6 +4,9 @@ module.exports = dbs => ({
 	get_all: async (params, skip = 0, limit = null) => {
 		return dbs.get_all(params, skip, limit);
 	},
+	get_one: async (params) => {
+		return dbs.get_one(params);
+	},
 	get_count: async (params) => {
 		return dbs.get_count(params);
 	}

src/assets/less/main.less

@@ -12,7 +12,7 @@ a {
 
 html,
 body,
-#APP {
+#app {
 	margin: 0;
 	background-color: @background-color;
 	-webkit-font-smoothing: antialiased;

src/components/informations.vue

@@ -8,6 +8,7 @@
 			:text="description" />
 		<components_tags
 			:tags="tags"
+			:tags_selected="tags_selected"
 			@new_tags_selected="new_tags_selected" />
 		<components_text
 			:text="help" />
@@ -31,6 +32,10 @@ export default {
 			type: String,
 			required: true
 		},
+		tags_selected: {
+			type: Array,
+			required: true
+		},
 		tags: {
 			type: Array,
 			required: true

src/components/tags.vue

@@ -1,10 +1,10 @@
 <template>
 	<ul class="tags">
 		<li
-			v-for="(tag, index) in tags"
+			v-for="tag in tags"
 			:key="tag.id"
 			class="tags-tag"
-			:class="{'tags-tag--active': index == 0}"
+			:class="{'tags-tag--active': tags_selected.includes(tag.id)}"
 			:data-id="tag._id"
 			@click.stop="filter($event)">
 			{{ tag.name }}
@@ -19,6 +19,10 @@ export default {
 		tags: {
 			type: Array,
 			required: true
+		},
+		tags_selected: {
+			type: Array,
+			required: true
 		}
 	},
 	emits: ['new_tags_selected'],

src/pages/app.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="APP">
+	<div id="app">
 		<router-view />
 	</div>
 </template>

src/pages/portfolio.vue

@@ -6,6 +6,7 @@
 			<components_informations
 				:description="description"
 				:tags="tags"
+				:tags_selected="tags_selected"
 				:title="title"
 				:help="help"
 				@filter="filter" />
@@ -50,8 +51,11 @@ export default {
 		utils.add_class_to_elements_increase('.text', 'active', 200, 200);
 		this.get_page(this.$route.name);
 		const tags = await this.get_all_tags();
-		this.update_tags(tags);
-		this.get_all_projects_with_tags(tags[0]._id);
+		if (tags !== null && tags.length > 0) {
+			this.update_tags(tags);
+			this.update_tags_selected([tags[0]._id]);
+			this.get_all_projects_with_tags(tags[0]._id);
+		}
 	},
 	methods: {
 		async get_all_tags() {
@@ -62,6 +66,9 @@ export default {
 			const projects = await api.get_projects_by_page(this.slide, tags);
 			this.update_projects(projects);
 		},
+		async get_projects_by_id(id) {
+			return api.get_project_by_id(id);
+		},
 		async get_page(name) {
 			const page = await api.get_pages(name);
 			this.update_page(page[0]);
@@ -116,8 +123,11 @@ export default {
 				this.projects_are_not_loading();
 			}, 1250);
 		},
-		project(id) {
+		async project(id) {
 			utils.add_class_to_elements_increase('.text', 'unmounted', 0, 200);
+			const project = await this.get_projects_by_id(id);
+			this.update_tags_selected(project.tags);
+			console.log(project);
 			console.log(id);
 		}
 	}

src/services/api.js

@@ -1,7 +1,18 @@
 import Axios from 'axios';
 
-const get_projects = function () {
-    return Axios.get('http://localhost:8080/api/articles')
+const get_projects = function (id = null) {
+	const params = {};
+	if (id !== null) {
+		params.id = id;
+	}
+    return Axios.get('http://localhost:8080/api/articles', {params: params})
+        .then(response => {
+            return response.data;
+        });
+};
+
+const get_project_by_id = function (id) {
+    return Axios.get('http://localhost:8080/api/articles/one', {params: {id: id}})
         .then(response => {
             return response.data;
         });
@@ -60,6 +71,7 @@ export default {
     get_projects,
     get_projects_by_page,
 	get_pages,
+	get_project_by_id,
     getProject: getProject,
     getNextProject: getNextProject,
     getPrevProject: getPrevProject,