feat(owner-vue): 점주 서비스 주문 상태 변경 로직 추가

- 픽업완료, 픽업대기, 거절 상태에 따른 상태값 변경 이벤트 추가
2022-03-17 18:53:12 +09:00
parent 4175eb2b25
commit 0007dcf171
6 changed files with 105 additions and 34 deletions
--- a/order-service/src/main/java/com/justpickup/orderservice/domain/order/repository/OrderRepositoryCustom.java
+++ b/order-service/src/main/java/com/justpickup/orderservice/domain/order/repository/OrderRepositoryCustom.java
@@ -49,8 +49,7 @@ public class OrderRepositoryCustom {
                        orderIdLt(condition.getLastOrderId()),
                        order.orderTime.between(start, end),
                        order.storeId.eq(storeId),
-                        order.orderStatus.ne(OrderStatus.PENDING),
-                        order.orderStatus.ne(OrderStatus.FAILED)
+                        order.orderStatus.ne(OrderStatus.PENDING)
                )
                .orderBy(order.id.desc())
                .limit(pageSize + 1)
@@ -88,6 +87,7 @@ public class OrderRepositoryCustom {
                .leftJoin(order.transaction).fetchJoin()
                .where(
                        order.orderTime.between(search.getStartDateTime(), search.getEndDateTime()),
+                        order.orderStatus.ne(OrderStatus.PENDING),
                        order.storeId.eq(storeId)
                )
                .orderBy(order.orderTime.desc())
@@ -105,7 +105,8 @@ public class OrderRepositoryCustom {
                .selectFrom(order)
                .leftJoin(order.transaction).fetchJoin()
                .where(
-                        order.userId.eq(userId)
+                        order.userId.eq(userId),
+                        order.orderStatus.ne(OrderStatus.PENDING)
                )
                .orderBy(order.orderTime.desc())
                .offset(pageable.getOffset())
@@ -122,7 +123,7 @@ public class OrderRepositoryCustom {
        return new SliceImpl<>(contents, pageable, hasNext);
    }

-    public Optional<Order> fetchOrder(Long userId){
+    public Optional<Order> fetchOrderBasket(Long userId){

        return Optional.ofNullable(queryFactory.selectFrom(order)
                .leftJoin(order.orderItems, orderItem).fetchJoin()
--- a/order-service/src/main/java/com/justpickup/orderservice/domain/order/service/OrderServiceImpl.java
+++ b/order-service/src/main/java/com/justpickup/orderservice/domain/order/service/OrderServiceImpl.java
@@ -184,7 +184,7 @@ public class OrderServiceImpl implements OrderService {

    @Override
    public FetchOrderDto fetchOrder(Long userId) {
-        Order order = orderRepositoryCustom.fetchOrder(userId)
+        Order order = orderRepositoryCustom.fetchOrderBasket(userId)
                .orElseThrow(() -> new OrderException("장바구니 정보를 찾을 수 없습니다."));
        GetStoreReseponse store = storeClient.getStore(String.valueOf(order.getStoreId())).getData();

--- a/order-service/src/main/java/com/justpickup/orderservice/domain/order/web/OrderController.java
+++ b/order-service/src/main/java/com/justpickup/orderservice/domain/order/web/OrderController.java
@@ -26,8 +26,8 @@ public class OrderController {
    public ResponseEntity<Result> patchOrder(@PathVariable("orderId") Long orderId,
                                             @RequestBody PatchOrderRequest patchOrderRequest) {
        OrderStatus orderStatus = patchOrderRequest.getOrderStatus();
-        if (orderStatus != OrderStatus.PLACED && orderStatus != OrderStatus.REJECTED) {
-            throw new OrderException("주문 수락, 거절 외에는 변경 불가능합니다.");
+        if (orderStatus == OrderStatus.PENDING && orderStatus != OrderStatus.FAILED) {
+            throw new OrderException(orderStatus.getMessage() + "는 변경 불가능합니다.");
        }

        orderService.modifyOrder(orderId, orderStatus);
--- a/owner-vue/src/components/OrderCard.vue
+++ b/owner-vue/src/components/OrderCard.vue
@@ -3,7 +3,11 @@
    <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-btn outlined color="grey grey lighten-1" small
+        @click="clickDetail"
+      >
+        상세보기
+      </v-btn>
    </v-toolbar>
    <v-card-title v-if="itemNames.length == 1">
      {{ itemNames[0] }}
@@ -11,40 +15,58 @@
    <v-card-title v-if="itemNames.length > 1">
      {{ itemNames[0] }} 외 {{ itemNames.length - 1 }}건
    </v-card-title>
-    <v-card-subtitle></v-card-subtitle>
+    <v-card-subtitle>{{this.getOrderStatusName(orderStatus)}}</v-card-subtitle>
    <v-card-text>{{ orderTime }}</v-card-text>
    <v-card-actions>
-      <v-row v-if="orderStatus === 'ORDER'">
+      <v-row v-if="orderStatus === 'PLACED'">
        <v-col sm="6">
          <v-btn
-              block depressed color="success"
-              @click="placed"
+              block depressed color="#006A95" class="white--text"
+              @click="accepted"
          >
-            주문 수령
+            주문수락하기
          </v-btn>
        </v-col>
        <v-col sm="6">
-          <v-btn block depressed color="error"
-            @click="reject"
+          <v-btn block depressed color="#FF1400" class="white--text"
+            @click="rejected"
          >
-            주문 거절
+            주문거절하기
          </v-btn>
        </v-col>
      </v-row>
-      <v-row v-else-if="orderStatus === 'PLACED'">
+      <v-row v-else-if="orderStatus === 'ACCEPTED'">
        <v-col>
-          <v-btn block depressed color="primary">
-            수락됨
+          <v-btn block depressed color="#58ADA0" class="white--text"
+            @click="waiting"
+          >
+            픽업 요청하기
          </v-btn>
        </v-col>
      </v-row>
-      <v-row v-else-if="orderStatus === 'REJECT'">
+      <v-row v-else-if="orderStatus === 'REJECTED'">
        <v-col>
-          <v-btn block depressed color="blue-grey" class="white--text">
+          <v-btn block disabled>
            거절됨
          </v-btn>
        </v-col>
      </v-row>
+      <v-row v-else-if="orderStatus === 'WAITING'">
+        <v-col>
+          <v-btn block depressed color="#FF5C00" class="white--text"
+                 @click="finished"
+          >
+            고객 수령완료하기
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row v-else-if="orderStatus === 'FINISHED'">
+        <v-col>
+          <v-btn block depressed color="#F9E0AF" class="grey--text">
+            픽업 완료됨
+          </v-btn>
+        </v-col>
+      </v-row>
    </v-card-actions>
  </v-card>
 </template>
@@ -67,24 +89,63 @@ export default {
    orderStatus: String
  },
  methods: {
-    placed: async function() {
+    accepted: async function() {
      try {
-        await orderApi.patchOrder(this.id, 'PLACED');
-        this.$emit("placed");
+        await orderApi.patchOrder(this.id, 'ACCEPTED');
+        this.$emit("accepted");
        alert("해당 주문이 수락 되었습니다.");
      } catch(error) {
        console.log(error);
      }
    },
-    reject: async function() {
+    rejected: async function() {
      try {
-        await orderApi.patchOrder(this.id, 'REJECT');
-        this.$emit("reject");
+        await orderApi.patchOrder(this.id, 'REJECTED');
+        this.$emit("rejected");
        alert("해당 주문이 거절 되었습니다.");

      } catch(error) {
        console.log(error);
      }
+    },
+    waiting: async function() {
+      try {
+        await orderApi.patchOrder(this.id, 'WAITING');
+        this.$emit("waiting");
+        alert("해당 주문의 픽업이 요청 되었습니다.");
+
+      } catch(error) {
+        console.log(error);
+      }
+    },
+    finished: async function() {
+      try {
+        await orderApi.patchOrder(this.id, 'FINISHED');
+        this.$emit("finished");
+        alert("해당 주문이 픽업완료 처리 되었습니다.");
+
+      } catch(error) {
+        console.log(error);
+      }
+    },
+    getOrderStatusName: function(orderStatus) {
+      switch (orderStatus) {
+        case "PLACED":
+          return "주문신청됨";
+        case "ACCEPTED":
+          return "주문수락됨";
+        case "REJECTED":
+          return "주문거절됨";
+        case "WAITING":
+          return "픽업대기중";
+        case "FINISHED":
+          return "픽업완료됨";
+        default:
+          break;
+      }
+    },
+    clickDetail: function() {
+      alert("준비중 입니다...");
    }
  }
 }
--- a/owner-vue/src/views/LoginUser.vue
+++ b/owner-vue/src/views/LoginUser.vue
@@ -10,6 +10,7 @@
            :rules="[v => /.+@.+\..+/.test(v) || 'E-mail must be valid', v => !!v || '이메일은 필수 값입니다']"
            label="이메일"
            prepend-icon="mdi-account-circle"
+            v-on:keydown.enter="login"
        ></v-text-field>
        <v-text-field
            v-model="password"
@@ -18,6 +19,7 @@
            type="Password"
            prepend-icon="mdi-lock"
            append-icon="mdi-eye-off"
+            v-on:keydown.enter="login"
        ></v-text-field>
      </v-form>
    </v-card-text>
@@ -25,7 +27,11 @@
    <v-card-actions>
      <v-btn color="success" v-on:click="links('/register')">Register</v-btn>
      <v-spacer></v-spacer>
-      <v-btn color="info" v-on:click="login">Login</v-btn>
+      <v-btn color="info"
+             v-on:click="login"
+      >
+        Login
+      </v-btn>
    </v-card-actions>
  </v-card>
 </template>
@@ -37,8 +43,8 @@ export default {
  name: "LoginUser",
  data: function() {
    return {
-      email: '',
-      password: ''
+      email: 'owner@gmail.com',
+      password: '1234'
    }
  },
  methods: {
--- a/owner-vue/src/views/Order.vue
+++ b/owner-vue/src/views/Order.vue
@@ -20,18 +20,21 @@
            :itemNames="card.itemNames"
            :orderTime="card.orderTime"
            :orderStatus="card.orderStatus"
-            @placed="card.orderStatus = 'PLACED'"
-            @reject="card.orderStatus = 'REJECT'"
+            @accepted="card.orderStatus = 'ACCEPTED'"
+            @rejected="card.orderStatus = 'REJECTED'"
+            @waiting="card.orderStatus = 'WAITING'"
+            @finished="card.orderStatus = 'FINISHED'"
        >
        </order-card>
      </v-col>
    </v-row>

-    <br><br><br>
+    <br><br>
    <v-row justify="center" v-if="hasNext">
-      <v-btn rounded outlined color="primary"
+      <v-btn color="#006A95" outlined
             @click="more">더보기</v-btn>
    </v-row>
+    <br>
  </div>
 </template>