From bbd57d72326a51c9f907fdfd771339fac45f3b28 Mon Sep 17 00:00:00 2001
From: bum12ark <bum12ark@gmail.com>
Date: Wed, 23 Feb 2022 18:15:51 +0900
Subject: [PATCH] =?UTF-8?q?feat(owner-vue):=20=EC=A0=90=EC=A3=BC=EC=9A=A9?=
 =?UTF-8?q?=20=EC=A3=BC=EB=AC=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B0=9C?=
 =?UTF-8?q?=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 라우터 경로 추가
- 주문 카드 컴포넌트화
- 날짜 검색 및 더보기 버튼 구현
---
 owner-vue/src/api/order.js             |   9 ++
 owner-vue/src/components/OrderCard.vue |  44 +++++++++
 owner-vue/src/router/index.js          |   5 ++
 owner-vue/src/views/Order.vue          | 119 +++++++++++++++++++++++++
 4 files changed, 177 insertions(+)
 create mode 100644 owner-vue/src/components/OrderCard.vue
 create mode 100644 owner-vue/src/views/Order.vue

diff --git a/owner-vue/src/api/order.js b/owner-vue/src/api/order.js
index 866823a..fb44238 100644
--- a/owner-vue/src/api/order.js
+++ b/owner-vue/src/api/order.js
@@ -10,5 +10,14 @@ export default {
             }
         }
         return axios.get("http://localhost:8001/order-service/prevOrder", options);
+    },
+    requestOrder(orderDate, lastOrderId) {
+        const options = {
+            params: {
+                orderDate: orderDate,
+                lastOrderId: lastOrderId
+            }
+        }
+        return axios.get("http://localhost:8001/order-service/orderMain", options);
     }
 }
\ No newline at end of file
diff --git a/owner-vue/src/components/OrderCard.vue b/owner-vue/src/components/OrderCard.vue
new file mode 100644
index 0000000..5b63bc4
--- /dev/null
+++ b/owner-vue/src/components/OrderCard.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-card>
+    <v-toolbar elevation="1" dense>
+      <v-toolbar-title>{{ userName }}</v-toolbar-title>
+      <v-spacer></v-spacer>
+      <v-btn outlined color="grey grey lighten-1" small>상세보기</v-btn>
+    </v-toolbar>
+    <v-card-title>{{ itemNames.join(", ") }}</v-card-title>
+    <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-card-actions>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "OrderCard",
+  data: function() {
+    return {
+
+    };
+  },
+  props: {
+    orderId: Number,
+    userName: Number,
+    itemNames: [],
+    orderTime: String,
+    orderStatus: String
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/owner-vue/src/router/index.js b/owner-vue/src/router/index.js
index 43009c5..b48a5c7 100644
--- a/owner-vue/src/router/index.js
+++ b/owner-vue/src/router/index.js
@@ -13,6 +13,11 @@ const routes = [
     path: '/prev-order',
     name: 'prev-order',
     component: () => import('./../views/PrevOrder')
+  },
+  {
+    path: '/order',
+    name: 'order',
+    component: () => import('./../views/Order.vue')
   }
 ]
 
diff --git a/owner-vue/src/views/Order.vue b/owner-vue/src/views/Order.vue
new file mode 100644
index 0000000..303a431
--- /dev/null
+++ b/owner-vue/src/views/Order.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="dashboard">
+    <v-subheader class="py-0 d-flex justify-space-between rounded-lg">
+      <h3>주문</h3>
+      <v-btn color="success" @click="search">
+        검색
+      </v-btn>
+    </v-subheader>
+    <br>
+
+    <v-row>
+      <date-picker :label=" '주문일' " @inputDate="inputDate"></date-picker>
+    </v-row>
+
+    <v-row>
+      <v-col v-for="card in cards" cols="4" :key="card.orderId">
+        <order-card
+            :order-id="card.orderId"
+            :userName="card.userName"
+            :itemNames="card.itemNames"
+            :orderTime="card.orderTime"
+            :orderStatus="card.orderStatus"
+        >
+        </order-card>
+      </v-col>
+    </v-row>
+
+    <br><br><br>
+    <v-row justify="center" v-if="showButton">
+      <v-btn rounded outlined color="primary"
+             @click="more">더보기</v-btn>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import OrderApi from '../api/order.js';
+
+import OrderCard from '../components/OrderCard.vue'
+import DatePicker from "@/components/DatePicker";
+
+export default {
+  name: "Order",
+  components: {
+    OrderCard,
+    DatePicker
+  },
+  mounted() {
+    this.search();
+  },
+  data: () => {
+    return {
+      date: '',
+      cards: [],
+      lastOrderId: null,
+      showButton: false
+    }
+  },
+  methods: {
+    search: function() {
+      this.cards = [];
+      this.lastOrderId = null;
+      OrderApi.requestOrder(this.date, this.lastOrderId)
+        .then( (response) => {
+          this.renderCard(response.data);
+        })
+        .catch( (error) => {
+          console.log(error);
+        })
+    },
+    renderCard: function (json) {
+      const orders = json.data;
+      const size = orders.length;
+
+      if (size === 0) {
+        alert("검색 데이터가 없습니다.");
+        this.showButton = false;
+      } else {
+        this.showButton = true;
+      }
+
+      orders.forEach( (order, index) => {
+        if (index === (size - 1)) {
+          this.lastOrderId = order.orderId;
+        }
+
+        let orderItemNames = []
+        order.orderItemResponses.forEach( (orderItem) => {
+          orderItemNames.push(orderItem.itemId);
+        })
+
+        this.cards.push({
+          orderId: order.orderId,
+          userName: order.orderId,
+          itemNames: orderItemNames,
+          orderTime: order.orderTime,
+          orderStatus: order.orderStatus
+        })
+      });
+    },
+    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);
+          })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file