feat(owner-vue): 상태변경 로직 추가

owner-vue/src/api/order.js

@@ -9,7 +9,7 @@ export default {
                 page: page
             }
         }
-        return axios.get( process.env.VUE_APP_ORDER_URL + "/order/prev-order", options);
+        return axios.get( process.env.VUE_APP_API_URL + "/order/prev-order", options);
     },
     requestOrder(orderDate, lastOrderId) {
         const options = {
@@ -18,6 +18,12 @@ export default {
                 lastOrderId: lastOrderId
             }
         }
-        return axios.get(process.env.VUE_APP_ORDER_URL + "/order/order-main", options);
+        return axios.get(process.env.VUE_APP_API_URL + "/order/order-main", options);
+    },
+    patchOrder(orderId, orderStatus) {
+        const body = {
+            orderStatus: orderStatus
+        }
+        return axios.patch(process.env.VUE_APP_OWNER_SERVICE_BASEURL + "/order-service/order/" + orderId, body);
     }
 }

owner-vue/src/components/OrderCard.vue

@@ -9,19 +9,44 @@
     <v-card-subtitle></v-card-subtitle>
     <v-card-text>{{ orderTime }}</v-card-text>
     <v-card-actions>
-      <v-btn v-if="orderStatus === 'PENDING'"
-          block depressed color="primary">
-        주문 대기
-      </v-btn>
-      <v-btn v-else-if="orderStatus === 'PLACED'"
-             block depressed color="primary">
-        주문 수령
-      </v-btn>
+      <v-row v-if="orderStatus === 'ORDER'">
+        <v-col sm="6">
+          <v-btn
+              block depressed color="success"
+              @click="placed"
+          >
+            주문 수령
+          </v-btn>
+        </v-col>
+        <v-col sm="6">
+          <v-btn block depressed color="error"
+            @click="reject"
+          >
+            주문 거절
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row v-else-if="orderStatus === 'PLACED'">
+        <v-col>
+          <v-btn block depressed color="primary">
+            수락됨
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row v-else-if="orderStatus === 'REJECT'">
+        <v-col>
+          <v-btn block depressed color="blue-grey" class="white--text">
+            거절됨
+          </v-btn>
+        </v-col>
+      </v-row>
     </v-card-actions>
   </v-card>
 </template>
 
 <script>
+import orderApi from "../api/order";
+
 export default {
   name: "OrderCard",
   data: function() {
@@ -30,11 +55,32 @@ export default {
     };
   },
   props: {
-    orderId: Number,
+    id: Number,
     userName: Number,
     itemNames: [],
     orderTime: String,
     orderStatus: String
+  },
+  methods: {
+    placed: async function() {
+      try {
+        await orderApi.patchOrder(this.id, 'PLACED');
+        this.$emit("placed");
+        alert("해당 주문이 수락 되었습니다.");
+      } catch(error) {
+        console.log(error);
+      }
+    },
+    reject: async function() {
+      try {
+        await orderApi.patchOrder(this.id, 'REJECT');
+        this.$emit("reject");
+        alert("해당 주문이 거절 되었습니다.");
+
+      } catch(error) {
+        console.log(error);
+      }
+    }
   }
 }
 </script>

owner-vue/src/views/Order.vue

@@ -15,18 +15,20 @@
     <v-row>
       <v-col v-for="card in cards" cols="4" :key="card.orderId">
         <order-card
-            :order-id="card.orderId"
+            :id="card.orderId"
             :userName="card.userName"
             :itemNames="card.itemNames"
             :orderTime="card.orderTime"
             :orderStatus="card.orderStatus"
+            @placed="card.orderStatus = 'PLACED'"
+            @reject="card.orderStatus = 'REJECT'"
         >
         </order-card>
       </v-col>
     </v-row>
 
     <br><br><br>
-    <v-row justify="center" v-if="showButton">
+    <v-row justify="center" v-if="hasNext">
       <v-btn rounded outlined color="primary"
              @click="more">더보기</v-btn>
     </v-row>
@@ -53,45 +55,38 @@ export default {
       date: '',
       cards: [],
       lastOrderId: null,
-      showButton: false
+      hasNext: false
     }
   },
   methods: {
-    search: function() {
+    search: async function() {
       this.cards = [];
       this.lastOrderId = null;
-      OrderApi.requestOrder(this.date, this.lastOrderId)
-        .then( (response) => {
-          this.renderCard(response.data);
-        })
-        .catch( (error) => {
-          console.log(error);
-        })
+
+      const response = await OrderApi.requestOrder(this.date, this.lastOrderId);
+
+      this.renderCard(response.data)
     },
     renderCard: function (json) {
-      const orders = json.data;
+      console.log(json);
+      const orders = json.data.orders;
       const size = orders.length;
 
-      if (size === 0) {
-        alert("검색 데이터가 없습니다.");
-        this.showButton = false;
-      } else {
-        this.showButton = true;
-      }
+      this.hasNext = json.data.hasNext;
 
       orders.forEach( (order, index) => {
         if (index === (size - 1)) {
-          this.lastOrderId = order.orderId;
+          this.lastOrderId = order.id;
         }
 
-        let orderItemNames = []
-        order.orderItemResponses.forEach( (orderItem) => {
-          orderItemNames.push(orderItem.itemId);
+        let orderItemNames = [];
+        order.orderItems.forEach( (orderItem) => {
+          orderItemNames.push(orderItem.itemName);
         })
 
         this.cards.push({
-          orderId: order.orderId,
-          userName: order.orderId,
+          orderId: order.id,
+          userName: order.userName,
           itemNames: orderItemNames,
           orderTime: order.orderTime,
           orderStatus: order.orderStatus
@@ -101,14 +96,9 @@ export default {
     inputDate: function(value) {
       this.date = value;
     },
-    more: function() {
-      OrderApi.requestOrder(this.date, this.lastOrderId)
-          .then( (response) => {
-            this.renderCard(response.data);
-          })
-          .catch( (error) => {
-            console.log(error);
-          })
+    more: async function() {
+      const response = await OrderApi.requestOrder(this.date, this.lastOrderId);
+      this.renderCard(response.data);
     }
   }
 }