Merge pull request #390 from sparcs-kaist/feature/top-board

Create top articles board

src/api/board.js

@@ -32,6 +32,24 @@ export const fetchArticles = ({ boardId, query, page, pageSize, topicId, usernam
     .then(({ data }) => data)
 }
 
+export const fetchTopArticles = ({ query, page, pageSize, username, ordering, filter } = {}) => {
+  const context = {}
+  if (ordering) context.ordering = ordering
+  if (query) context.main_search__contains = query
+  if (filter) {
+    if (filter.communication_article__school_response_status !== undefined) {
+      context.communication_article__school_response_status = filter.communication_article__school_response_status
+    } else if (filter.communication_article__school_response_status__lt !== undefined) {
+      context.communication_article__school_response_status__lt = filter.communication_article__school_response_status__lt
+    }
+  }
+  if (page) context.page = page
+  if (pageSize) context.page_size = pageSize
+  if (username) context.created_by = username
+  return http.get(`articles/top/?${queryBuilder(context)}`)
+    .then(({ data }) => data)
+}
+
 export const fetchArchives = ({ query, page, pageSize } = {}) => {
   const context = {}
   if (query) context.main_search__contains = query

src/components/OrganizationCard.vue

@@ -5,7 +5,11 @@
       :style="{ 'background-color': backgroundColor }"
       class="organization-card"
     >
-      <i v-if="icon" class="logo logo--icon material-icons">{{ icon }}</i>
+      <i
+        v-if="icon"
+        :style="{ 'color': color }"
+        class="logo logo--icon material-icons"
+      >{{ icon }}</i>
       <img
         v-else-if="id"
         :src="require(`@/assets/Logo${id}.png`)"
@@ -33,6 +37,7 @@ export default {
       type: String,
       default: '#fdf0f0'
     },
+    color: String,
     icon: String,
     slug: String
   },
@@ -51,6 +56,13 @@ export default {
           return {
             name: 'board'
           }
+        case 'top':
+          return {
+            name: 'board',
+            params: {
+              boardSlug: 'top'
+            }
+          }
         default:
           return this.generateOrganizationHref()
       }
@@ -81,6 +93,7 @@ export default {
 ko:
   portal-notice: '포탈공지'
   all-posts: '전체 게시물'
+  top-board: '인기글 게시판'
   clubs-union: '동아리연합회'
   dormitory-council: '생활관 자치회'
   welfare-committee: '학생복지위원회'
@@ -92,6 +105,7 @@ ko:
 en:
   portal-notice: 'Portal Notice'
   all-posts: 'All Posts'
+  top-board: 'Top Articles'
   clubs-union: 'Clubs Union'
   dormitory-council: 'Dormitory Council'
   welfare-committee: 'Welfare Committee'

src/components/TheNavbar.vue

@@ -86,6 +86,7 @@
               :to="{ name: 'board', params: { boardSlug: 'talk' } }"
               class="navbar-item"
             >
+              <i class="material-icons is-hidden-desktop">navigate_next</i>
               <span>{{ group[[`${$i18n.locale}_name`]] }}</span>
             </router-link>
             <div
@@ -120,6 +121,14 @@
               </router-link>
             </div>
           </div>
+
+          <router-link
+            :to="{ name: 'board', params: { boardSlug: 'top' } }"
+            class="navbar-item"
+          >
+            <i class="material-icons is-hidden-desktop">navigate_next</i>
+            <span>{{ $t('top') }}</span>
+          </router-link>
         </div>
 
         <div class="navbar-end">
@@ -335,6 +344,7 @@ ko:
   notification: '알림'
   write: '게시글 작성하기'
   all: '전체보기'
+  top: '인기글 게시판'
   talk: '자유게시판'
   my-page: '마이페이지'
   logout: '로그아웃'
@@ -350,6 +360,7 @@ en:
   notification: 'Notifications'
   write: 'Write Post'
   all: 'All'
+  top: 'Top Articles'
   talk: 'Talk'
   my-page: 'My Page'
   logout: 'Logout'

src/components/TheOrganizations.vue

@@ -72,6 +72,7 @@ export default {
       organizations: [
         { name: 'portal-notice', id: 'KAIST', backgroundColor: '#dbdbdb' },
         { name: 'all-posts', id: 'all', icon: 'dashboard', backgroundColor: '#ed3a3a' },
+        { name: 'top-board', id: 'top', icon: 'trending_up', backgroundColor: '#fafafa', color: '#ed3a3a' },
         { name: 'clubs-union', id: 'UA', slug: 'clubs-union' },
         { name: 'dormitory-council', id: 'GSDC', slug: 'dorm-council' },
         { name: 'welfare-committee', id: 'SWF', slug: 'welfare-cmte' },
@@ -82,7 +83,7 @@ export default {
       ],
       primaryOptions: {
         type: 'loop',
-        perPage: 9,
+        perPage: 10,
         interval: 3000,
         perMove: 1,
         gap: '1rem',

src/components/ThePostHeader.vue

@@ -8,7 +8,7 @@
             {{ beforeBoardName }}
           </span>
         </div>
-        <span v-if="beforeBoardName === $t('all')" class="title__info">
+        <span v-if="[ $t('all'), $t('top'), $t('archive-board'), $t('recent-board'), $t('prev-page') ].includes(beforeBoardName)" class="title__info">
           <router-link :to="{name: 'board', params: { boardSlug }} " class="title__info">
             | {{ boardName }}
           </router-link>
@@ -172,6 +172,9 @@ export default {
       if (fromView === '-portal') {
         return { name, query: { ...query, portal: 'exclude' } }
       }
+      if (fromView === 'top') {
+        return { name, params: { boardSlug: 'top' }, query }
+      }
       return { name, query }
     },
     beforeBoardName () {
@@ -185,6 +188,9 @@ export default {
       if (fromView === 'recent') {
         return this.$t('recent-board')
       }
+      if (fromView === 'top') {
+        return this.$t('top')
+      }
       if (this.hasHistory()) {
         if (fromView === 'all') {
           return this.$t('all')
@@ -223,6 +229,7 @@ ko:
   unblock: '사용자 차단해제'
   confirm-delete: '정말로 삭제하시겠습니까?'
   all: '전체보기'
+  top: '인기글 게시판'
   prev-page: '이전 페이지'
   recent-board: '최근 본 글'
   archive-board: '담아둔 글'
@@ -246,6 +253,7 @@ en:
   unblock: 'Unblock User'
   confirm-delete: 'Are you really want to delete this post?'
   all: 'All'
+  top: 'Top Articles'
   prev-page: 'Previous Page'
   recent-board: 'Recent Articles'
   archive-board: 'Bookmarks'

src/router/index.js

@@ -15,7 +15,7 @@ export default new Router({
     ...app,
     {
       path: '*',
-      name: 'not-found',
+      name: 'error',
       component: NotFound
     }
   ],

src/views/Board.vue

@@ -170,7 +170,7 @@
 
 <script>
 import store from '@/store'
-import { fetchArticles } from '@/api'
+import { fetchArticles, fetchTopArticles } from '@/api'
 import { fetchWithProgress } from '@/views/helper'
 import TheBoard from '@/components/TheBoard.vue'
 import TheLayout from '@/components/TheLayout.vue'
@@ -189,6 +189,7 @@ export default {
     return {
       board: {},
       boardId: null,
+      boardSlug: '',
       selectedOrdering: this.$route.query.ordering ? 0 : 1,
       selectedFilter: this.$route.query.communication_article__school_response_status ? 0 : (this.$route.query.communication_article__school_response_status__lt ? 1 : 2)
     }
@@ -204,6 +205,7 @@ export default {
     },
     topic () { return this.topics.find(topic => topic.slug === this.topicId) },
     boardName () {
+      if (this.boardSlug === 'top') return this.$t('top')
       return this.$store.getters.getNameById(this.boardId, this.$i18n.locale)
     },
     bannerDetail () {
@@ -236,6 +238,10 @@ export default {
           current
         }
       }
+
+      if (this.boardSlug === 'top') {
+        return { from_view: 'top', current }
+      }
       return { from_view: 'all', current }
     }
   },
@@ -266,11 +272,16 @@ export default {
     const topicId = topic ? topic.id : null
 
     const [ board ] = await fetchWithProgress(
-      [ fetchArticles({ boardId, topicId, ...query, filter }) ], 'board-failed-fetch'
+      [
+        boardSlug === 'top'
+          ? fetchTopArticles({ ...query, filter })
+          : fetchArticles({ boardId, topicId, ...query, filter })
+      ], 'board-failed-fetch'
     )
     next(vm => {
       vm.board = board
       vm.boardId = boardId
+      vm.boardSlug = boardSlug
       document.title = `Ara - ${vm.boardName}`
     })
   },
@@ -296,10 +307,15 @@ export default {
 
     const topicId = topic ? topic.id : null
     const [ board ] = await fetchWithProgress(
-      [ fetchArticles({ boardId, topicId, ...query, filter }) ], 'board-failed-fetch'
+      [
+        boardSlug === 'top'
+          ? fetchTopArticles({ ...query, filter })
+          : fetchArticles({ boardId, topicId, ...query, filter })
+      ], 'board-failed-fetch'
     )
     this.board = board
     this.boardId = boardId
+    this.boardSlug = boardSlug
     document.title = `Ara - ${this.boardName}`
     next()
   },
@@ -348,6 +364,7 @@ export default {
 
 <i18n>
 ko:
+  top: '인기글 게시판'
   no-filter: '없음'
   filter: '필터'
   exclude_portal: '포탈 공지글 제외하기'
@@ -358,6 +375,7 @@ ko:
   answered: '답변 완료'
 
 en:
+  top: 'Top Articles'
   no-filter: 'No Filter'
   filter: 'Filter'
   exclude_portal: 'Exclude portal notices'

src/views/Home.vue

@@ -11,6 +11,12 @@
     <div class="columns is-multiline">
       <SmallBoard
         :listitems="dailyBests"
+        :href="{
+          name: 'board',
+          params: {
+            boardSlug: 'top'
+          }
+        }"
         class="home__board column is-4"
         detail
       >
@@ -19,6 +25,12 @@
 
       <SmallBoard
         :listitems="weeklyBests"
+        :href="{
+          name: 'board',
+          params: {
+            boardSlug: 'top'
+          }
+        }"
         class="home__board column is-4"
         detail
       >