Feature: Tags Support

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,5 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr()
+})

app/pods/components/nav-bar/template.hbs

@@ -12,6 +12,12 @@
     <ul class="nav-list">
 
       {{#if (eq currentUser.user.role 'ADMIN')}}
+        {{#link-to 'tags'}}
+          <li class="nav-items pointer">
+            Tags
+          </li>
+        {{/link-to}}
+
         {{#link-to 'questions'}}
           <li class="nav-items pointer">
             Questions

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

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

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

@@ -30,6 +30,22 @@
     </div>
   </div>
 
+  <div class="row">
+    <div class="col-2">
+      <label>Tags</label>
+    </div>
+    <div class="col-6">
+      {{#power-select-multiple
+      search=(perform tagFilterTask)
+      options= tagFilterTask.lastSuccessful.value
+      selected=question.tags
+      onchange=(action (mut question.tags ))
+      as |tag|}}
+        {{tag.name}}
+      {{/power-select-multiple}}
+    </div>
+  </div>
+
   {{#unless question.isNew}}
 
     <div class="button-dashed add-choice">

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

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { task, timeout } from 'ember-concurrency';
+
+export default Component.extend({
+  notify: service(),
+  actions: {
+    save () {
+      const onSuccess = () => this.get('notify').success('Saved Successfully')
+
+      if (typeof this.get('onSave') === 'function') {
+        this.get('onSave')().then(onSuccess)
+      } else {
+        this.get('tag').save().then(onSuccess)
+      }
+    }
+  }
+});

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

@@ -0,0 +1,28 @@
+<div class="container">
+  <div class="row">
+    <div class="col-4"></div>
+    <div class="col-6">
+      <h1>Add new Tag:</h1>
+    </div>
+  </div>
+  <div class="row justify-content-center align-items-center">
+    <div class="col-2">
+      <label>Name</label>
+    </div>
+    <div class="col-6 input-group">
+      {{input type="text" class="input-text" value=tag.name}}
+    </div>
+    <div class="col-3">
+      {{markdown-to-html tag.name}}
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-4"></div>
+    <div class="col-6">
+      <div class="button-solid">
+        <button {{action 'save'}}>Save Changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+

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/tags/id/route.js

@@ -0,0 +1,11 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service'
+
+export default Route.extend({
+  model (params) {
+    return this.store.findRecord('tag', params.id)
+  },
+  setupController (controller, model) {
+    controller.set("tag", model)
+  }
+});

app/pods/tags/id/template.hbs

@@ -0,0 +1 @@
+{{tag-editor tag=tag}}

app/pods/tags/index/controller.js

@@ -0,0 +1,28 @@
+import Controller from '@ember/controller';
+import { task, timeout } from 'ember-concurrency';
+
+export default Controller.extend({
+  queryParams: ['page', 'limit'],
+  page: 1,
+  limit: 10,
+  searchString: '',
+  searchTask: task(function * () {
+    yield timeout(250)
+
+    const tags = yield this.get('store').query('tag', {
+      include: 'user',
+      filter: {
+        title: {
+          $iLike: `%${this.get('searchString')}%`
+        }
+      }
+    })
+    this.set('page', 1)
+    this.set('tags', tags)
+  }).restartable(),
+  actions : {
+    deleteTag(tag) {
+      tag.destroyRecord()
+    }
+  }
+});

app/pods/tags/index/route.js

@@ -0,0 +1,24 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  queryParams: {
+    page: {
+      refreshModel: true
+    },
+    limit: {
+      refreshModel: true
+    }
+  },
+  model (params) {
+    const {page, limit} = params
+    return this.store.query('tag', {
+      page: {
+        offset: (page-1)*limit > 0 ? (page-1)*limit: 0,
+        limit: params.limit
+      }
+    })
+  },
+  setupController (controller, model) {
+    controller.set("tags", model)
+  }
+});

app/pods/tags/index/template.hbs

@@ -0,0 +1,54 @@
+<div class="container pt-5">
+  <div class="row">
+    <div class="col-5"></div>
+    <div class="col-6">
+      <label class="col-6">Filter the Tag:</label>
+    </div>
+  </div>
+  <div class="row justify-content-center">
+    <div class="input-search nav-search col-8 justify-content-center">
+      {{input type="text"  placeholder="Enter Tag Name" key-up=(perform searchTask) value=searchString}}
+      <img src="http://online.codingblocks.com/images/searchicon-06d8faf96de7c883b5440b6594e39eda.png" alt="search">
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-5"></div>
+    <div class="col-6">
+      <div class="button-solid">
+        {{#link-to 'tags.new' class="white"}}
+          <button>+ Add Tags</button>
+        {{/link-to}}
+      </div>
+    </div>
+  </div>
+  {{#each tags as |tag|}}
+  <div class="row">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">{{tag.name}}</h5>
+        <div class="row">
+          <div class="col-7"></div>
+          <div class="col-2">
+            <div class="button-solid">
+              {{#confirm-dialog
+                dialogClass="custom-confirm-dialog"
+                title="Delete Tag"
+                text="Are you sure you want to delete this question?"}}
+                <button {{action "deleteTag" tag}}>Delete</button>
+              {{/confirm-dialog}}
+            </div>
+          </div>
+          <div class="col-2">
+            <div class="button-solid">
+              {{#link-to 'tags.id' tag.id class="white"}}
+                <button>Edit</button>
+              {{/link-to}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {{/each}}
+</div>
+{{outlet}}

app/pods/tags/new/controller.js

@@ -0,0 +1,11 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  actions: {
+    saveTag () {
+      return this.get('tag').save().then(tag => {
+        this.transitionToRoute('tags.id', tag.id)
+      })
+    }
+  }
+});

app/pods/tags/new/route.js

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service'
+
+export default Route.extend({
+  currentUser: service(),
+  model () {
+    return this.store.createRecord('tag', {})
+  },
+  setupController (controller, model) {
+    controller.set("tag", model)
+  }
+});

app/pods/tags/new/template.hbs

@@ -0,0 +1 @@
+{{tag-editor tag=tag onSave=(action 'saveTag')}}

app/pods/tags/route.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class TagsRoute extends Route {
+}

app/pods/tags/template.hbs

@@ -0,0 +1 @@
+{{outlet}}

app/router.js

@@ -17,6 +17,10 @@ Router.map(function() {
     this.route('id', {path: '/:id'});
   });
   this.route('err', {path: '/:code'});
+  this.route('tags', function() {
+    this.route('id', {path: '/:id'});
+    this.route('new');
+  });
 });
 
 export default Router;

tests/integration/pods/components/tag-editor/component-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | tag-editor', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{tag-editor}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#tag-editor}}
+        template block text
+      {{/tag-editor}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/unit/models/tag-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Model | tag', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('tag', {});
+    assert.ok(model);
+  });
+});

tests/unit/pods/tags/id/route-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | tags/id', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:tags/id');
+    assert.ok(route);
+  });
+});

tests/unit/pods/tags/index/controller-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | tags/index', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:tags/index');
+    assert.ok(controller);
+  });
+});

tests/unit/pods/tags/index/route-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | tags/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:tags/index');
+    assert.ok(route);
+  });
+});

tests/unit/pods/tags/new/controller-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | tags/new', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:tags/new');
+    assert.ok(controller);
+  });
+});