[FEATURE] introduced tags

Author: imdhruvgupta

app/models/question.js

@@ -5,5 +5,6 @@ export default DS.Model.extend({
   description: DS.attr(),
   difficulty: DS.attr(),
   user: DS.belongsTo('user'),
-  choices: DS.hasMany('choice')
+  choices: DS.hasMany('choice'),
+  tags: DS.hasMany('tag')
 })

app/models/tag.js

@@ -0,0 +1,7 @@
+import DS from "ember-data";
+
+export default DS.Model.extend({
+    title: DS.attr(),
+    user: DS.belongsTo('user'),
+    questions: DS.hasMany('question')
+})

app/pods/components/question-editor/component.js

@@ -1,11 +1,23 @@
 import Component from '@ember/component';
 import { inject as service } from '@ember/service';
+import { task, timeout } from 'ember-concurrency';
 
 export default Component.extend({
   store: service(),
   api: service(),
   notify: service(),
   isEditing: false,
+  tagsFilterTask: task(function * (str) {
+    yield timeout(250)
+    const tags = yield this.get('store').query('tag', {
+      filter: {
+        title: {
+          $iLike: `%${str}%`
+        }
+      }
+    })
+    return tags.toArray()
+  }),
   actions: {
     toggleEditing () {
       this.toggleProperty('isEditing')

app/pods/components/question-editor/template.hbs

@@ -50,6 +50,22 @@
       {{/each}}
     </ul>
 
+    <div class="row">
+      <div class="col-2">
+        <label>Tags</label>
+      </div>
+      <div class="col-6">
+        {{#power-select-multiple
+        search=(perform tagsFilterTask)
+        selected=question.tags
+        placeholder="Add tags for this question"
+        onchange=(action (mut question.tags ))
+        as |tag|}}
+          {{tag.title}}
+        {{/power-select-multiple}}
+      </div>
+    </div>
+
     Created By: <mark>{{question.user.firstname}}</mark>
 
   {{/unless}}

app/pods/questions/id/route.js

@@ -7,7 +7,7 @@ export default Route.extend({
   model (params) {
     return RSVP.hash({
       question: this.store.findRecord('question', params.id, {
-        include: 'user,choices'
+        include: 'user,choices,tags'
       }),
       answers: this.api.request(`/questions/${params.id}/answers`)
     })

app/pods/questions/index/controller.js

@@ -1,7 +1,9 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
 export default Controller.extend({
+  store: service(),
   queryParams: ['page', 'limit'],
   page: 1,
   limit: 10,
@@ -10,18 +12,36 @@ export default Controller.extend({
     yield timeout(250)
 
     let searchStr = this.get('searchString').trim()
+    let selectedTags = []
+
+    if(this.get('filterTags')) {
+      selectedTags = this.get('filterTags')
+      selectedTags = selectedTags.map(t => +t.id)
+    } 
 
     const questions = yield this.get('store').query('question', {
       include: 'user',
       filter: {
         title: {
           $iLike: `%${this.get('searchString')}%`
-        }
+        },
+        tags: selectedTags
       }
     })
     this.set('page', 1)
     this.set('questions', questions)
   }).restartable(),
+  tagsFilterTask: task(function * (str) {
+    yield timeout(250)
+    const tags = yield this.get('store').query('tag', {
+      filter: {
+        title: {
+          $iLike: `%${str}%`
+        }
+      }
+    })
+    return tags.toArray()
+  }),
   actions : {
     deleteQuestion(question) {
       question.destroyRecord()

app/pods/questions/index/route.js

@@ -21,5 +21,6 @@ export default Route.extend({
   },
   setupController (controller, model) {
     controller.set("questions", model)
+    controller.set("tags", model.filterTags)
   }
 });

app/pods/questions/index/template.hbs

@@ -11,6 +11,18 @@
       <img src="http://online.codingblocks.com/images/searchicon-06d8faf96de7c883b5440b6594e39eda.png" alt="search">
     </div>
   </div>
+  <div class="row justify-content-center">
+    <div class="col-8">
+      {{#power-select-multiple 
+      search=(perform tagsFilterTask)
+      selected=filterTags
+      onchange=(action (pipe (action (mut filterTags)) (perform searchTask)))
+      placeholder="Filter by tags"
+      as |tag|}}
+      {{tag.title}}
+      {{/power-select-multiple}}
+    </div>
+  </div>
   <div class="row">
     <div class="col-5"></div>
     <div class="col-6">

ember-cli-build.js

@@ -4,6 +4,9 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function(defaults) {
   let app = new EmberApp(defaults, {
+    'ember-composable-helpers': {
+      // Add conditions
+    }
     // Add options here
   });
 

package.json

@@ -36,6 +36,7 @@
     "ember-cli-showdown": "^4.4.4",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^2.0.0",
+    "ember-composable-helpers": "^2.3.1",
     "ember-data": "~3.3.0",
     "ember-datetime-picker": "^0.2.1",
     "ember-decorators": "^2.2.0",