feat: allow sorting of articles (#6833)

* feat: sort by position * chore: whitespace change * feat: add border bottom color to list item * feat: allow dragging articles * feat: add migration to reorder all articles * feat: add onsort method * feat: finish UI sorting * feat: show 50 per page in articles list * feat: add article sorting methods * feat: patch up reorder action with the API * refactor: better naming * chore: add comments * feat: attach position to article before create * feat: move article to end if moved between categories * chore: add comments * chore: update version * fix: don't change position if previous category was nil * fix: condition to trigger update on category change * refactor: store new_position * refactor: use grid instead of table * feat: add snug spacing * feat: add grab-icon * feat: add grab icon to list * refactor: show draggable only for category page * feat: add update_positions as a class method --------- Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
chatwoot · Apr 17, 2023 · ca2506a · ca2506a
1 parent 1886d4c
commit ca2506a
Show file tree

Hide file tree

Showing 13 changed files with 393 additions and 78 deletions.
diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb
@@ -1,14 +1,19 @@
 class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   before_action :portal
   before_action :check_authorization
-  before_action :fetch_article, except: [:index, :create, :attach_file]
+  before_action :fetch_article, except: [:index, :create, :attach_file, :reorder]
   before_action :set_current_page, only: [:index]
 
   def index
     @portal_articles = @portal.articles
     @all_articles = @portal_articles.search(list_params)
     @articles_count = @all_articles.count
-    @articles = @all_articles.order_by_updated_at.page(@current_page)
+
+    @articles = if list_params[:category_slug].present?
+                  @all_articles.order_by_position.page(@current_page).per(50)
+                else
+                  @all_articles.order_by_updated_at.page(@current_page)
+                end
   end
 
   def create
@@ -43,6 +48,11 @@ def attach_file
     render json: { file_url: url_for(file_blob) }
   end
 
+  def reorder
+    Article.update_positions(params[:positions_hash])
+    head :ok
+  end
+
   private
 
   def fetch_article

diff --git a/app/javascript/dashboard/api/helpCenter/articles.js b/app/javascript/dashboard/api/helpCenter/articles.js
@@ -60,6 +60,13 @@ class ArticlesAPI extends PortalsAPI {
       }
     );
   }
+
+  reorderArticles({ portalSlug, reorderedGroup, categorySlug }) {
+    return axios.post(`${this.url}/${portalSlug}/articles/reorder`, {
+      positions_hash: reorderedGroup,
+      category_slug: categorySlug,
+    });
+  }
 }
 
 export default new ArticlesAPI();
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@@ -1,21 +1,20 @@
 <template>
-  <tr class="row--article-block">
-    <td>
-      <div class="article-content-wrap">
-        <div class="article-block">
-          <router-link :to="articleUrl(id)">
-            <h6 :title="title" class="sub-block-title text-truncate">
-              {{ title }}
-            </h6>
-          </router-link>
-          <div class="author">
-            <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
-            <span class="name">{{ articleAuthorName }}</span>
-          </div>
+  <div class="article-container--row">
+    <span class="article-column article-title">
+      <emoji-or-icon class="icon-grab" icon="grab-handle" />
+      <div class="article-block">
+        <router-link :to="articleUrl(id)">
+          <h6 :title="title" class="sub-block-title text-truncate">
+            {{ title }}
+          </h6>
+        </router-link>
+        <div class="author">
+          <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
+          <span class="name">{{ articleAuthorName }}</span>
         </div>
       </div>
-    </td>
-    <td>
+    </span>
+    <span class="article-column article-category">
       <router-link
         class="fs-small button clear link secondary"
         :to="getCategoryRoute(category.slug)"
@@ -27,13 +26,13 @@
           {{ category.name }}
         </span>
       </router-link>
-    </td>
-    <td>
+    </span>
+    <span class="article-column article-read-count">
       <span class="fs-small" :title="formattedViewCount">
         {{ readableViewCount }}
       </span>
-    </td>
-    <td>
+    </span>
+    <span class="article-column article-status">
       <div>
         <woot-label
           :title="status"
@@ -42,22 +41,25 @@
           :color-scheme="labelColor"
         />
       </div>
-    </td>
-    <td>
+    </span>
+    <span class="article-column article-last-edited">
       <span class="fs-small">
         {{ lastUpdatedAt }}
       </span>
-    </td>
-  </tr>
+    </span>
+  </div>
 </template>
 <script>
 import timeMixin from 'dashboard/mixins/time';
 import portalMixin from '../mixins/portalMixin';
 import { frontendURL } from 'dashboard/helper/URLHelper';
+import EmojiOrIcon from '../../../../../shared/components/EmojiOrIcon.vue';
 
 export default {
+  components: {
+    EmojiOrIcon,
+  },
   mixins: [timeMixin, portalMixin],
-
   props: {
     id: {
       type: Number,
@@ -130,19 +132,79 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-td {
-  font-weight: var(--font-weight-normal);
-  color: var(--s-700);
-  font-size: var(--font-size-mini);
-  padding-left: 0;
-}
-.row--article-block {
-  border-bottom-color: transparent;
-  .article-content-wrap {
-    align-items: center;
-    display: flex;
-    text-align: left;
+.article-container--row {
+  background: var(--white);
+  border-bottom: 1px solid var(--s-50);
+  display: grid;
+  gap: var(--space-normal);
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  margin: 0 var(--space-minus-normal);
+  padding: 0 var(--space-normal);
+
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  &.draggable {
+    span.article-column.article-title {
+      margin-left: var(--space-minus-small);
+
+      .icon-grab {
+        display: block;
+        cursor: move;
+        height: var(--space-normal);
+        margin-top: var(--space-smaller);
+        width: var(--space-normal);
+
+        color: var(--s-100);
+
+        &:hover {
+          color: var(--s-300);
+        }
+      }
+    }
   }
+
+  span.article-column {
+    color: var(--s-700);
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-bold);
+    padding: var(--space-small) 0;
+    text-align: right;
+    text-transform: capitalize;
+
+    &.article-title {
+      align-items: start;
+      display: flex;
+      gap: var(--space-small);
+      grid-column: span 4 / span 4;
+      text-align: left;
+      text-align: left;
+
+      .icon-grab {
+        display: none;
+      }
+    }
+
+    // for screen sizes smaller than 1024px
+    @media (max-width: 63.9375em) {
+      &.article-read-count {
+        display: none;
+      }
+    }
+
+    @media (max-width: 47.9375em) {
+      &.article-read-count,
+      &.article-last-edited {
+        display: none;
+      }
+    }
+  }
+
   .article-block {
     min-width: 0;
   }
@@ -170,8 +232,10 @@ td {
   }
 }
 
-.category-link-content {
-  max-width: 16rem;
-  line-height: 1.5;
+span {
+  font-weight: var(--font-weight-normal);
+  color: var(--s-700);
+  font-size: var(--font-size-mini);
+  padding-left: 0;
 }
 </style>