Merge pull request #1647 from code-corps/1632-add-conversation-status-select

Add conversation status selector

Author: joshsmith

app/components/conversations/status-select.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  classNames: ['conversations__status-select', 'dropdown'],
+
+  showDropdown: false
+});

app/controllers/project/conversations.js

@@ -2,6 +2,11 @@ import Controller from '@ember/controller';
 import { set } from '@ember/object';
 
 export default Controller.extend({
+  queryParams: ['status'],
+  status: 'open',
+
+  currentlyLoading: null,
+
   actions: {
     close(conversation) {
       set(conversation, 'status', 'closed');

app/routes/project/conversations.js

@@ -21,17 +21,23 @@ export default Route.extend(AuthenticatedRouteMixin, CanMixin, {
     }
   },
 
-  async model() {
+  async model(params) {
     let project = this.modelFor('project');
     let projectId = get(project, 'id');
     let store = get(this, 'store');
-    // peekAll returns a live array, so it will alse render any newly created
-    // messages, causing the list to update properly on project.messages.new
-    await store.query('conversation', { project_id: projectId });
-    let conversations = store.peekAll('conversation');
+    let conversations = await store.query('conversation', {
+      project_id: projectId,
+      status: params.status
+    });
     return { conversations, project };
   },
 
+  queryParams: {
+    status: {
+      refreshModel: true
+    }
+  },
+
   renderTemplate() {
     this.render('project/conversations', { into: 'application' });
   },
@@ -64,6 +70,15 @@ export default Route.extend(AuthenticatedRouteMixin, CanMixin, {
       this._super(...arguments);
       get(this, 'conversations').activate();
       return true;
+    },
+
+    loading(transition) {
+      let controller = this.controllerFor('project.conversations');
+      controller.set('currentlyLoading', true);
+      transition.promise.finally(() => {
+        controller.set('currentlyLoading', false);
+        this.transitionTo('project.conversations.index');
+      });
     }
   }
 });

app/routes/project/conversations/index.js

@@ -3,10 +3,17 @@ import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
 
 export default Route.extend(AuthenticatedRouteMixin, {
-  redirect() {
+  redirect(model, transition) {
     let { conversations } = this.modelFor('project.conversations');
-    if (get(conversations, 'length') > 0) {
-      this.transitionTo('project.conversations.conversation', get(conversations, 'firstObject'));
+
+    // If status changed on one conversation, the model did not update
+    // We filter here to ensure the statuses are filtered
+    let status = transition.queryParams.status || 'open';
+    let filteredConversations = conversations.filterBy('status', status);
+
+    if (get(filteredConversations, 'length') > 0) {
+      let sortedConversations = filteredConversations.sortBy('updatedAt');
+      this.transitionTo('project.conversations.conversation',  get(sortedConversations, 'lastObject'));
     }
   }
 });

app/styles/_buttons.scss

@@ -116,6 +116,10 @@
     color: $text--dark;
     font-weight: 400;
 
+    .fa {
+      color: $text--lighter;
+    }
+
     &:disabled, &.disabled {
       background: $background-gray;
     }
@@ -156,7 +160,12 @@
   }
 
   .fa {
-    padding-right: 5px;
+    &:first-child {
+      padding-right: 5px;
+    }
+    &:last-child {
+      padding-left: 5px;
+    }
   }
 
   span {

app/styles/app.scss

@@ -113,6 +113,7 @@
 @import "components/conversations/conversation-list-item";
 @import "components/conversations/conversation-part";
 @import "components/conversations/new-conversation-modal";
+@import "components/conversations/status-select";
 
 //
 // COMPONENTS - DONATIONS

app/styles/components/conversations/status-select.scss

@@ -0,0 +1,34 @@
+.conversations__status-select {
+  position: relative;
+
+  .dropdown-menu {
+    margin-top: 0.5em;
+  }
+
+  &__selector {
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.2em 0.5em;
+
+    &.active, &:hover {
+      border: 1px solid $gray--lightest;
+      background: $clear-hover;
+      background-image: linear-gradient(white, $clear-hover);
+      color: $text--dark;
+    }
+  }
+
+  a {
+    color: $text--lightest;
+
+    i {
+      &:first-child {
+        padding-right: 2px;
+      }
+
+      &:last-child:not(:first-child) {
+        padding-left: 5px;
+      }
+    }
+  }
+}

app/styles/components/dropdown-menu.scss

@@ -93,6 +93,7 @@
     // having problems with "navigation__options a"
     // overwriting the properties below
     border: 0;
+    display: block;
     font-weight: normal;
     padding: 8px 11px;
 

app/styles/shared/conversation.scss

@@ -1,3 +1,9 @@
+.conversation__loading {
+  background: $clear-focus;
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+}
+
 .conversation-thread {
   background: $clear-focus;
   border-right: 1px solid $gray--lighter;

app/styles/shared/conversations.scss

@@ -37,3 +37,8 @@ p.conversations__empty__icon {
   font-size: $header-font-size-large;
   margin: 1em 0 0 0;
 }
+
+.conversations__list-actions {
+  border-bottom: 1px solid $gray--lighter;
+  padding: 1em;
+}