feat(owner-vue): 알림 서비스 구현

- 알림 페이지 추가
- 알림 개수에 맞게 상단바에 표시

owner-vue/src/api/notification.js

@@ -0,0 +1,19 @@
+import axios from "axios";
+
+const url = process.env.VUE_APP_OWNER_SERVICE_BASEURL + "/notification-service";
+
+export default {
+  requestNotification() {
+    return axios.get(url + "/notifications");
+  },
+  patchNotification(id, isRead) {
+    const body = {
+      read: isRead
+    }
+
+    return axios.patch(url + "/notification/" + id, body)
+  },
+  countsNotification() {
+    return axios.get(url + "/api/notification/counts");
+  }
+}

owner-vue/src/api/store.js

@@ -21,7 +21,6 @@ export default {
     },
     saveItem(method, itemData){
         const _url = process.env.VUE_APP_OWNER_SERVICE_BASEURL+'/store-service/api/owner/item'+(method==='put'?+"/"+itemData.itemId:'')
-        console.log(_url)
         return axios({
             method:method,
             url: _url,

owner-vue/src/common/jwt.js

@@ -3,8 +3,6 @@ const moment = require('moment');
 const ACCESS_TOKEN_NAME = "accessToken";
 const EXPIRED_TIME_NAME = "expiredTime";
 
-const tag = "[jwt]";
-
 export default {
   getToken() {
     return localStorage.getItem(ACCESS_TOKEN_NAME);
@@ -33,7 +31,7 @@ export default {
 
     const difference = moment.duration(expiredMoment.diff(currentMoment)).asSeconds();
 
-    console.log(tag, "expireMoment = ", expiredMoment, "currentMoment = ", currentMoment, "diff = ", difference);
+    // console.log(tag, "expireMoment = ", expiredMoment, "currentMoment = ", currentMoment, "diff = ", difference);
 
     // 만료 30초 전일 경우 만료로 판단
     return difference <= 30;

owner-vue/src/components/ItemOption.vue

@@ -64,7 +64,6 @@ export default {
     addItemOption : function () {
       if(!this.data) return;
 
-      console.log(this.optionType)
       this.dialog = false
       this.$emit('addItemOption',this.data,this.optionType)
     }

owner-vue/src/components/MenuItem.vue

@@ -166,7 +166,6 @@ export default {
       this.$emit('save')
     },
     addItemOption : function (itemOptionValue,optionType){
-      console.log("saveOption",itemOptionValue,optionType)
       this.$emit("addItemOption",itemOptionValue,optionType)
     }
   }

owner-vue/src/main.js

@@ -46,7 +46,6 @@ axios.interceptors.response.use(
     if (error.response.status === 401) {
       let code = error.response.data.code;
       if (code === "EXPIRED") {
-        console.log("## expired");
         try {
           const accessToken = await auth.requestReissue();
           originalRequest.headers.Authorization = "Bearer " + accessToken;

owner-vue/src/router/index.js

@@ -24,8 +24,8 @@ const authCheck = async function (to, from, next) {
 };
 const routes = [
   {
-    path: '/dashboard',
-    redirect: 'dashboard',
+    path: '/order',
+    redirect: 'order',
     component: DashboardLayout,
     children: [
       {
@@ -51,7 +51,13 @@ const routes = [
         name: 'order',
         beforeEnter: authCheck,
         component: () => import('./../views/Order.vue')
-      }
+      },
+      {
+        path: '/notification',
+        name: 'notificationr',
+        beforeEnter: authCheck,
+        component: () => import('./../views/NotificationView.vue')
+      },
     ]
   },
   {

owner-vue/src/views/Layout/DashboardLayout.vue

@@ -1,10 +1,15 @@
 <template>
   <v-app id="inspire">
     <side-bar v-bind:drawer="drawer"></side-bar>
-    <top-bar v-on:drawEvent="drawer = !drawer"></top-bar>
+    <top-bar v-on:drawEvent="drawer = !drawer"
+             :notificationCounts="notificationCounts"
+    ></top-bar>
     <v-main style="background: #f5f5f540">
       <v-container class="py-8, px-6" fluid>
-        <router-view></router-view>
+        <router-view
+            v-on:plusCount="notificationCounts++"
+            v-on:minusCount="notificationCounts--"
+        ></router-view>
       </v-container>
     </v-main>
   </v-app>
@@ -13,6 +18,7 @@
 <script>
 import Sidebar from './Sidebar.vue'
 import Topbar from "./Topbar.vue";
+import notificationApi from "@/api/notification";
 
 export default {
   name: "DashboardLayout",
@@ -20,9 +26,19 @@ export default {
     'side-bar': Sidebar,
     'top-bar': Topbar
   },
+  mounted() {
+    this.searchNotificationCounts();
+  },
   data: function() {
     return {
-      drawer: null
+      drawer: null,
+      notificationCounts: 0
+    }
+  },
+  methods: {
+    searchNotificationCounts: async function() {
+      const response = await notificationApi.countsNotification();
+      this.notificationCounts = response.data.data;
     }
   }
 }

owner-vue/src/views/Layout/Sidebar.vue

@@ -43,7 +43,7 @@ export default {
       links: [
         {name: "지난 주문", url: "/prev-order", icon: "mdi-home-outline"},
         {name: "카테고리", url: "/category", icon: "mdi-magnify"},
-        {name: "주문", url: "/order", icon: "mdi-cards-heart-outline"},
+        {name: "주문", url: "/order", icon: "mdi-cards-heart"},
         {name: "메뉴 관리", url: "/menu", icon: "mdi-cards-heart-outline"},
       ],
     };

owner-vue/src/views/Layout/Topbar.vue

@@ -11,39 +11,18 @@
           v-bind="attrs"
           v-on="on"
         >
-          <v-badge content="3" color="red" offset-y="10" offset-x="10">
-            <v-icon>mdi-bell</v-icon>
-          </v-badge>
+          <v-btn @click="goNotification"
+                 elevation="0"
+                 color="white"
+          >
+            <v-badge :content="notificationCounts"
+                     :value="notificationCounts"
+                     color="red" offset-y="10" offset-x="10">
+              <v-icon>mdi-bell</v-icon>
+            </v-badge>
+          </v-btn>
         </span>
       </template>
-      <v-list three-line width="250">
-        <template v-for="(item, index) in items">
-          <v-subheader
-            v-if="item.header"
-            :key="item.header"
-            v-text="item.header"
-          ></v-subheader>
-
-          <v-divider
-            v-else-if="item.divider"
-            :key="index"
-            :inset="item.inset"
-          ></v-divider>
-
-          <v-list-item v-else :key="item.title">
-            <v-list-item-avatar>
-              <v-img :src="item.avatar"></v-img>
-            </v-list-item-avatar>
-
-            <v-list-item-content>
-              <v-list-item-title v-html="item.title"></v-list-item-title>
-              <v-list-item-subtitle
-                v-html="item.subtitle"
-              ></v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-        </template>
-      </v-list>
     </v-menu>
     <v-menu offset-y>
       <template v-slot:activator="{ attrs, on }">
@@ -89,46 +68,10 @@ import authApi from "../../api/auth";
 
 export default {
   name: "Topbar",
+  props: ["notificationCounts"],
   data() {
     return {
       userName: '',
-      menus: [
-        { title: "Logout", icon: "mdi-logout", methods: "logout" },
-      ],
-      items: [
-        {
-          avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
-          title: "Brunch this weekend?",
-          subtitle: `<span class="text--primary">Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?`,
-        },
-        { divider: true, inset: true },
-        {
-          avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
-          title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
-          subtitle: `<span class="text--primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.`,
-        },
-        { divider: true, inset: true },
-        {
-          avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
-          title: "Oui oui",
-          subtitle:
-            '<span class="text--primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
-        },
-        { divider: true, inset: true },
-        {
-          avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
-          title: "Birthday gift",
-          subtitle:
-            '<span class="text--primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?',
-        },
-        { divider: true, inset: true },
-        {
-          avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
-          title: "Recipe to try",
-          subtitle:
-            '<span class="text--primary">Britta Holt</span> &mdash; We should eat this: Grate, Squash, Corn, and tomatillo Tacos.',
-        },
-      ],
     };
   },
   async mounted() {
@@ -141,9 +84,13 @@ export default {
       const response = await userApi.requestUserInfo();
       return response.data.data;
     },
-    logout: async function () {
+    logout: async function() {
       await authApi.logout();
     },
+    goNotification: function() {
+      this.$router.push("/notification");
+    },
+
   }
 };
 </script>

owner-vue/src/views/Menu.vue

@@ -198,10 +198,7 @@ export default {
         method='put'
       else
         method='post'
-      store.saveItem(method,itemData)
-        .then(response => console.log(response))
-        .catch(reason => console.log(reason))
-
+      store.saveItem(method,itemData);
     },
     addItemOption:function (itemOptionValue,type){
       var item = {

owner-vue/src/views/NotificationView.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="dashboard">
+    <v-subheader class="py-0 d-flex justify-space-between rounded-lg">
+      <h3>알림</h3>
+    </v-subheader>
+    <br>
+    <template
+        v-for="(item, index) in notifications">
+      <v-list-item three-line :key="item.id">
+        <v-list-item-content>
+          <v-list-item-title>{{item.title}}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{item.message}}
+          </v-list-item-subtitle>
+          <v-list-item-subtitle>
+            {{item.time}}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+
+        <v-list-item-action>
+          <v-checkbox
+              disabled
+              v-if="item.prevRead"
+              v-model="item.read"
+              hide-details></v-checkbox>
+          <v-checkbox
+              v-else
+              v-model="item.read"
+              @click="clickRead(item.id, item.read)"
+              hide-details></v-checkbox>
+        </v-list-item-action>
+      </v-list-item>
+      <v-divider
+          v-if="index < notifications.length - 1"
+          :key="'divider-' + index"
+      ></v-divider>
+    </template>
+  </div>
+</template>
+
+<script>
+import notificationApi from "../api/notification";
+
+export default {
+  name: "NotificationView",
+  mounted() {
+    this.search();
+  },
+  data: function() {
+    return {
+      notifications: []
+    }
+  },
+  methods: {
+    search: async function() {
+      const response = await notificationApi.requestNotification();
+      this.render(response.data);
+    },
+    render: function(json) {
+      const notifications = json.data.notifications;
+      notifications.forEach(notification => {
+        this.notifications.push({
+          id: notification.id,
+          message: notification.message,
+          title: notification.title,
+          prevRead: notification.read,
+          read: notification.read,
+          time: notification.time
+        });
+      });
+    },
+    clickRead: async function(id, isRead) {
+      await notificationApi.patchNotification(id, isRead);
+      if (isRead) {
+        alert("해당 알림은 읽음 처리되었습니다.");
+        this.$emit("minusCount");
+      } else {
+        alert("해당 알림은 읽음 해제 처리되었습니다.");
+        this.$emit("plusCount");
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

owner-vue/src/views/Order.vue

@@ -71,7 +71,6 @@ export default {
       this.renderCard(response.data)
     },
     renderCard: function (json) {
-      console.log(json);
       const orders = json.data.orders;
       const size = orders.length;