feat(owner-vue): 점주용 주문 페이지 개발

- 라우터 경로 추가
- 주문 카드 컴포넌트화
- 날짜 검색 및 더보기 버튼 구현

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);
     }
 }

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>

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')
   }
 ]
 

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>