Merge pull request #392 from sparcs-kaist/feature/alarm-page-redesign

Redesign alarm page
sparcs-kaist · Jul 26, 2023 · 9f45bf8 · 9f45bf8
2 parents b736580 + d020a7e
commit 9f45bf8
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 13 deletions.
diff --git a/src/api/user.js b/src/api/user.js
@@ -57,6 +57,10 @@ export const readNotification = (notiId) =>
   http.post(`notifications/${notiId}/read/`)
     .then(({ data }) => data)
 
+export const readAllNotification = () =>
+  http.post('notifications/read_all/')
+    .then(({ data }) => data)
+
 export const fetchBlocks = () =>
   http.get('blocks/')
     .then(({ data }) => data)

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
@@ -11,7 +11,9 @@
     :class="{ 'is-read' : isRead }"
     class="noti"
   >
-    <i class="noti__icon material-icons-outlined">chat</i>
+    <i class="noti__icon material-icons-outlined">
+      {{ isSubcomment ? 'forum_outlined' : 'chat_bubble_outline_outlined' }}
+    </i>
     <div class="noti__container">
       <h3 class="noti__title">
         {{ $t(isSubcomment ? 'comment-title' : 'article-title') }}
@@ -22,12 +24,6 @@
       <div class="noti__related">
         <div class="noti__subcomment-container">
           <div>{{ $t('article') }}: [{{ boardName }}] {{ relatedArticle }}</div>
-          <i
-            v-if="!isSubcomment"
-            class="noti__subcomment-icon material-icons-outlined"
-          >
-            chat
-          </i>
         </div>
         <div v-if="isSubcomment">
           {{ $t('comment') }}: {{ relatedComment }}
@@ -140,14 +136,16 @@ en:
     color: white;
     background-color: var(--theme-400);
     border-radius: 15px;
-    text-align: center;
     line-height: 30px;
+    text-align: center;
+    padding-left: 5px;
 
     @include breakPoint(mobile) {
       height: 20px;
       width: 20px;
       font-size: 15px;
       line-height: 20px;
+      padding-left: 2px;
     }
   }
 

diff --git a/src/components/TheNotifications.vue b/src/components/TheNotifications.vue
@@ -1,8 +1,19 @@
 <template>
   <div class="the-notifications">
-    <h1 id="title">
-      {{ title }}
-    </h1>
+    <div class="read-all__wrapper">
+      <h1 id="title">
+        {{ title }}
+      </h1>
+      <button
+        class="read-all"
+        :class="{ 'read-all__on': isButtonOn}"
+        :disabled="!isButtonOn"
+        @click="readAllAlarm"
+      >
+        <i class="material-icons check-icon">check_circle_outline</i>
+        {{ $t('readAll') }}
+      </button>
+    </div>
     <div>
       <Notification
         v-for="notification in notifications.results"
@@ -18,9 +29,17 @@
   </div>
 </template>
 
+<i18n>
+ko:
+  readAll: '모두 읽음'
+en:
+  readAll: 'Read All'
+</i18n>
+
 <script>
 import Notification from '@/components/Notification.vue'
 import ThePaginator from '@/components/ThePaginator.vue'
+import { readAllNotification } from '@/api'
 
 export default {
   name: 'TheNotifications',
@@ -36,6 +55,31 @@ export default {
       required: true
     },
     title: String
+  },
+
+  data () {
+    return {
+      isButtonClicked: false
+    }
+  },
+
+  computed: {
+    isUnreadExist () {
+      return this.notifications.results?.filter(e => {
+        return e.is_read === false
+      }).length > 0
+    },
+    isButtonOn () {
+      return this.isUnreadExist && !this.isButtonClicked
+    }
+  },
+
+  methods: {
+    readAllAlarm () {
+      this.isButtonClicked = true
+      for (const v of this.notifications.results) v.is_read = true
+      readAllNotification()
+    }
   }
 }
 </script>
@@ -46,10 +90,47 @@ export default {
 .the-notifications {
   #title {
     display: block;
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     font-weight: 700;
-    margin-bottom: 1rem;
+    margin-bottom: 3px;
     color: var(--theme-400);
   }
+
+  .read-all {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    float: right;
+
+    width: 90px;
+    height: 33px;
+    left: 150px;
+    top: 99px;
+    background: #FFFFFF;
+    border: 0.5px solid #DBDBDB;
+    box-shadow: 0px 2px 6px rgba(169, 169, 169, 0.16);
+    border-radius: 8px;
+
+    color: var(--grey-400);
+    font-size: 12px;
+    cursor: pointer;
+    .check-icon{
+      font-size: 15px;
+    }
+
+    &__wrapper{
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-bottom: 7px;
+      justify-content: space-between;
+    }
+
+    &__on{
+      color: var(--theme-400) !important
+    }
+  }
 }
 </style>