From b3e502db57f71d8a17f110d3c718c3445971f967 Mon Sep 17 00:00:00 2001
From: bum12ark <bum12ark@gmail.com>
Date: Fri, 11 Feb 2022 16:52:49 +0900
Subject: [PATCH] =?UTF-8?q?feat(owner-frontend-service):=20=EC=A0=90?=
 =?UTF-8?q?=EC=A3=BC=20=EC=84=9C=EB=B9=84=EC=8A=A4=20-=20=EC=A7=80?=
 =?UTF-8?q?=EB=82=9C=20=EC=A3=BC=EB=AC=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- pagination plugin 사용
- 날짜 검색 유효성 검사 로직 추가
---
 .../prevorder/web/PrevOrderController.java    |  13 ++
 .../jquery.pwbsPagination.min.js              |  10 +
 .../domain/prev-order/prev-order.html         | 207 ++++++++++++++++++
 .../resources/templates/fragments/left.html   |   2 +-
 .../resources/templates/layouts/layout.html   |   3 +
 5 files changed, 234 insertions(+), 1 deletion(-)
 create mode 100644 owner-frontend-service/src/main/java/com/justpickup/ownerfrontendservice/domain/prevorder/web/PrevOrderController.java
 create mode 100644 owner-frontend-service/src/main/resources/static/vendor/twbs-pagination/jquery.pwbsPagination.min.js
 create mode 100644 owner-frontend-service/src/main/resources/templates/domain/prev-order/prev-order.html

diff --git a/owner-frontend-service/src/main/java/com/justpickup/ownerfrontendservice/domain/prevorder/web/PrevOrderController.java b/owner-frontend-service/src/main/java/com/justpickup/ownerfrontendservice/domain/prevorder/web/PrevOrderController.java
new file mode 100644
index 0000000..a7fdf7e
--- /dev/null
+++ b/owner-frontend-service/src/main/java/com/justpickup/ownerfrontendservice/domain/prevorder/web/PrevOrderController.java
@@ -0,0 +1,13 @@
+package com.justpickup.ownerfrontendservice.domain.prevorder.web;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class PrevOrderController {
+
+    @GetMapping("/prev-order")
+    public String prevOrder() {
+        return "domain/prev-order/prev-order";
+    }
+}
diff --git a/owner-frontend-service/src/main/resources/static/vendor/twbs-pagination/jquery.pwbsPagination.min.js b/owner-frontend-service/src/main/resources/static/vendor/twbs-pagination/jquery.pwbsPagination.min.js
new file mode 100644
index 0000000..315f27b
--- /dev/null
+++ b/owner-frontend-service/src/main/resources/static/vendor/twbs-pagination/jquery.pwbsPagination.min.js
@@ -0,0 +1,10 @@
+/*
+ * jQuery Bootstrap Pagination v1.4.2
+ * https://github.com/josecebe/twbs-pagination
+ *
+ * Copyright 2014-2018, Eugene Simakin <john-24@list.ru>
+ * Released under Apache-2.0 license
+ * http://apache.org/licenses/LICENSE-2.0.html
+ */
+
+!function(o,e,t,s){"use strict";var i=o.fn.twbsPagination,r=function(t,s){if(this.$element=o(t),this.options=o.extend({},o.fn.twbsPagination.defaults,s),this.options.startPage<1||this.options.startPage>this.options.totalPages)throw new Error("Start page option is incorrect");if(this.options.totalPages=parseInt(this.options.totalPages),isNaN(this.options.totalPages))throw new Error("Total pages option is not correct!");if(this.options.visiblePages=parseInt(this.options.visiblePages),isNaN(this.options.visiblePages))throw new Error("Visible pages option is not correct!");if(this.options.beforePageClick instanceof Function&&this.$element.first().on("beforePage",this.options.beforePageClick),this.options.onPageClick instanceof Function&&this.$element.first().on("page",this.options.onPageClick),this.options.hideOnlyOnePage&&1==this.options.totalPages)return this.options.initiateStartPageClick&&this.$element.trigger("page",1),this;if(this.options.href&&(this.options.startPage=this.getPageFromQueryString(),this.options.startPage||(this.options.startPage=1)),"UL"===("function"==typeof this.$element.prop?this.$element.prop("tagName"):this.$element.attr("tagName")))this.$listContainer=this.$element;else{var e=this.$element,i=o([]);e.each(function(t){var s=o("<ul></ul>");o(this).append(s),i.push(s[0])}),this.$listContainer=i,this.$element=i}return this.$listContainer.addClass(this.options.paginationClass),this.options.initiateStartPageClick?this.show(this.options.startPage):(this.currentPage=this.options.startPage,this.render(this.getPages(this.options.startPage)),this.setupEvents()),this};r.prototype={constructor:r,destroy:function(){return this.$element.empty(),this.$element.removeData("twbs-pagination"),this.$element.off("page"),this},show:function(t){if(t<1||t>this.options.totalPages)throw new Error("Page is incorrect.");this.currentPage=t,this.$element.trigger("beforePage",t);var s=this.getPages(t);return this.render(s),this.setupEvents(),this.$element.trigger("page",t),s},enable:function(){this.show(this.currentPage)},disable:function(){var t=this;this.$listContainer.off("click").on("click","li",function(t){t.preventDefault()}),this.$listContainer.children().each(function(){o(this).hasClass(t.options.activeClass)||o(this).addClass(t.options.disabledClass)})},buildListItems:function(t){var s=[];if(this.options.first&&s.push(this.buildItem("first",1)),this.options.prev){var e=1<t.currentPage?t.currentPage-1:this.options.loop?this.options.totalPages:1;s.push(this.buildItem("prev",e))}for(var i=0;i<t.numeric.length;i++)s.push(this.buildItem("page",t.numeric[i]));if(this.options.next){var a=t.currentPage<this.options.totalPages?t.currentPage+1:this.options.loop?1:this.options.totalPages;s.push(this.buildItem("next",a))}return this.options.last&&s.push(this.buildItem("last",this.options.totalPages)),s},buildItem:function(t,s){var e=o("<li></li>"),i=o("<a></a>"),a=this.options[t]?this.makeText(this.options[t],s):s;return e.addClass(this.options[t+"Class"]),e.data("page",s),e.data("page-type",t),e.append(i.attr("href",this.makeHref(s)).addClass(this.options.anchorClass).html(a)),e},getPages:function(t){var s=[],e=Math.floor(this.options.visiblePages/2),i=t-e+1-this.options.visiblePages%2,a=t+e,n=this.options.visiblePages;n>this.options.totalPages&&(n=this.options.totalPages),i<=0&&(i=1,a=n),a>this.options.totalPages&&(i=this.options.totalPages-n+1,a=this.options.totalPages);for(var o=i;o<=a;)s.push(o),o++;return{currentPage:t,numeric:s}},render:function(s){var e=this;this.$listContainer.children().remove();var t=this.buildListItems(s);o.each(t,function(t,s){e.$listContainer.append(s)}),this.$listContainer.children().each(function(){var t=o(this);switch(t.data("page-type")){case"page":t.data("page")===s.currentPage&&t.addClass(e.options.activeClass);break;case"first":t.toggleClass(e.options.disabledClass,1===s.currentPage);break;case"last":t.toggleClass(e.options.disabledClass,s.currentPage===e.options.totalPages);break;case"prev":t.toggleClass(e.options.disabledClass,!e.options.loop&&1===s.currentPage);break;case"next":t.toggleClass(e.options.disabledClass,!e.options.loop&&s.currentPage===e.options.totalPages)}})},setupEvents:function(){var e=this;this.$listContainer.off("click").on("click","li",function(t){var s=o(this);if(s.hasClass(e.options.disabledClass)||s.hasClass(e.options.activeClass))return!1;!e.options.href&&t.preventDefault(),e.show(parseInt(s.data("page")))})},changeTotalPages:function(t,s){return this.options.totalPages=t,this.show(s)},makeHref:function(t){return this.options.href?this.generateQueryString(t):"#"},makeText:function(t,s){return t.replace(this.options.pageVariable,s).replace(this.options.totalPagesVariable,this.options.totalPages)},getPageFromQueryString:function(t){var s=this.getSearchString(t),e=new RegExp(this.options.pageVariable+"(=([^&#]*)|&|#|$)").exec(s);return e&&e[2]?(e=decodeURIComponent(e[2]),e=parseInt(e),isNaN(e)?null:e):null},generateQueryString:function(t,s){var e=this.getSearchString(s),i=new RegExp(this.options.pageVariable+"=*[^&#]*");return e?"?"+e.replace(i,this.options.pageVariable+"="+t):""},getSearchString:function(t){var s=t||e.location.search;return""===s?null:(0===s.indexOf("?")&&(s=s.substr(1)),s)},getCurrentPage:function(){return this.currentPage},getTotalPages:function(){return this.options.totalPages}},o.fn.twbsPagination=function(t){var s,e=Array.prototype.slice.call(arguments,1),i=o(this),a=i.data("twbs-pagination"),n="object"==typeof t?t:{};return a||i.data("twbs-pagination",a=new r(this,n)),"string"==typeof t&&(s=a[t].apply(a,e)),void 0===s?i:s},o.fn.twbsPagination.defaults={totalPages:1,startPage:1,visiblePages:5,initiateStartPageClick:!0,hideOnlyOnePage:!1,href:!1,pageVariable:"{{page}}",totalPagesVariable:"{{total_pages}}",page:null,first:"First",prev:"Previous",next:"Next",last:"Last",loop:!1,beforePageClick:null,onPageClick:null,paginationClass:"pagination",nextClass:"page-item next",prevClass:"page-item prev",lastClass:"page-item last",firstClass:"page-item first",pageClass:"page-item",activeClass:"active",disabledClass:"disabled",anchorClass:"page-link"},o.fn.twbsPagination.Constructor=r,o.fn.twbsPagination.noConflict=function(){return o.fn.twbsPagination=i,this},o.fn.twbsPagination.version="1.4.2"}(window.jQuery,window,document);
\ No newline at end of file
diff --git a/owner-frontend-service/src/main/resources/templates/domain/prev-order/prev-order.html b/owner-frontend-service/src/main/resources/templates/domain/prev-order/prev-order.html
new file mode 100644
index 0000000..dbed2eb
--- /dev/null
+++ b/owner-frontend-service/src/main/resources/templates/domain/prev-order/prev-order.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="ko"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      layout:decorate="~{layouts/layout}"
+>
+
+
+<head></head>
+
+<div layout:fragment="content">
+    <!-- Page Heading -->
+    <h1 class="h3 mb-4 text-gray-800">지난 주문</h1>
+
+    <!-- Search Form -->
+    <form id="search-form" class="mb-4">
+        <div class="form-row align-items-center">
+            <div class="col-auto my-1">
+                <input type="date" class="form-control" id="start-date" name="startDate" />
+            </div>
+            <span> ~ </span>
+            <div class="col-auto my-1">
+                <input type="date" class="form-control" id="end-date" name="endDate" />
+            </div>
+            <div class="col-auto my-1">
+                <button type="button" class="btn btn-outline-primary" id="confirm">조회</button>
+            </div>
+        </div>
+        <input type="hidden" name="page" id="page" value="0" />
+        <input type="hidden" id="select-start-date" />
+        <input type="hidden" id="select-end-date" />
+    </form>
+
+    <h5 class="mb-4" id="header-date"></h5>
+
+    <!-- Table -->
+    <div class="table-responsive-xl">
+        <table class="table">
+            <thead>
+            <tr>
+                <th scope="col">주문번호</th>
+                <th scope="col">주문상태</th>
+                <th scope="col">주문시간</th>
+                <th scope="col">주문상품</th>
+                <th scope="col">결제금액</th>
+                <th scope="col">닉네임</th>
+            </tr>
+            </thead>
+            <tbody id="table-body">
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Pagination -->
+    <nav aria-label="Page navigation example">
+        <ul class="pagination justify-content-center" id="pagination">
+        </ul>
+    </nav>
+
+    <script>
+        const defaultOpts = {
+            'visiblePages': 10,
+            'initiateStartPageClick': false,
+            'first': '<<',
+            'prev': '<',
+            'next': '>',
+            'last': '>>',
+            'inPageClick': function (event, page) {
+                clickPage(page - 1);
+            }
+        };
+
+        function init() {
+
+        }
+
+        function setEvent() {
+            $("#confirm").click(() => {
+                searchPrevOrder();
+            });
+        }
+
+        function searchPrevOrder() {
+            if (!dateValidation()) return null;
+            $("#page").val(0);
+
+            getPrevOrderData()
+                .then((response) => response.json())
+                .then((myJson) => {
+                    if (myJson.code == "SUCCESS") {
+                        drawHeader();
+                        drawTable(myJson.data.orders, myJson.data.page.startPage + 1, myJson.data.page.totalPage);
+                        drawPagination(myJson.data.orders, myJson.data.page.startPage + 1, myJson.data.page.totalPage);
+                        return;
+                    }
+
+                    if (myJson.code == "ERROR") {
+                        alert(myJson.message);
+                        return;
+                    }
+                });
+        }
+
+        function clickPage(page) {
+            if (!dateValidation()) return null;
+
+            $("#page").val(page);
+            getPrevOrderData()
+                .then((response) => response.json())
+                .then((myJson) => {
+                    if (myJson.code == "SUCCESS") {
+                        drawHeader();
+                        drawTable(myJson.data.orders, myJson.data.page.startPage + 1, myJson.data.page.totalPage);
+                        return;
+                    }
+
+                    if (myJson.code == "ERROR") {
+                        alert(myJson.message());
+                        return;
+                    }
+                });
+        }
+
+        function drawHeader() {
+            let text = $("#start-date").val() + " ~ " + $("#end-date").val() + " 주문내역";
+            $("#header-date").html(text);
+        }
+
+        function drawTable(data, startPage, totalPage) {
+            $("#table-body").empty();
+
+            if (data.length <= 0) {
+                $("#table-body").html("<td>검색 결과가 없습니다.</td>");
+                return;
+            }
+
+            const limit = 10;
+            let html = "";
+            let rownum = (startPage - 1) * limit
+            for (let index = 0; index < data.length; index++) {
+                let order = data[index];
+                let tr = "<tr>";
+                tr += "<th scope=\"row\">" + ++rownum + "</th>\n";
+                tr += "<td>" + order.orderStatus + "</td>\n";
+                tr += "<td>" + order.orderTime + "</td>\n";
+
+                let orderItemNames = [];
+                order.orderItems.forEach(orderItem => {
+                    orderItemNames.push(orderItem.orderItemName);
+                });
+
+                tr += "<td><span class=\"d-inline-block text-truncate\" style=\"max-width: 80%\">"
+                    + orderItemNames.join(", ")
+                    + "</span></td>\n";
+                tr += "<td>" + order.orderPrice + "</td>\n";
+                tr += "<td>" + order.userName + "</td>\n";
+                tr += "</tr>";
+                html += tr;
+            }
+            $("#table-body").html(html);
+        }
+
+        function drawPagination(data, startPage, totalPages) {
+            $("#pagination").twbsPagination('destroy');
+            if (data.length <= 0) return;
+            $("#pagination").twbsPagination($.extend({}, defaultOpts, {
+                startPage: startPage,
+                totalPages: totalPages,
+            }));
+        }
+
+        function dateValidation() {
+            const startDateTag = document.querySelector("#start-date");
+            const endDateTag = document.querySelector("#end-date");
+
+            if (!startDateTag.value) {
+                alert("시작일을 선택해주세요.");
+                startDateTag.focus();
+                return false;
+            }
+
+            if (!endDateTag.value) {
+                alert("종료일을 선택해주세요");
+                endDateTag.focus();
+                return false;
+            }
+
+            let startDate = startDateTag.valueAsDate;
+            let endDate = endDateTag.valueAsDate;
+
+            if (startDate.getTime() > endDate.getTime()) {
+                alert("시작일은 종료일보다 클 수 없습니다.");
+                startDateTag.focus();
+                return false;
+            }
+
+            return true;
+        }
+
+        function getPrevOrderData() {
+            let params = $("#search-form").serialize();
+            return fetch(url.orderService + "/prevOrder?" + params);
+        }
+    </script>
+</div>
+
+</html>
\ No newline at end of file
diff --git a/owner-frontend-service/src/main/resources/templates/fragments/left.html b/owner-frontend-service/src/main/resources/templates/fragments/left.html
index f788360..6f38d42 100644
--- a/owner-frontend-service/src/main/resources/templates/fragments/left.html
+++ b/owner-frontend-service/src/main/resources/templates/fragments/left.html
@@ -49,7 +49,7 @@
     </li>
 
     <li class="nav-item">
-        <a class="nav-link" href="order">
+        <a class="nav-link" href="category">
             <i class="fas fa-fw fa-table"></i>
             <span>카테고리 관리</span></a>
     </li>
diff --git a/owner-frontend-service/src/main/resources/templates/layouts/layout.html b/owner-frontend-service/src/main/resources/templates/layouts/layout.html
index 9fe8b24..e840901 100644
--- a/owner-frontend-service/src/main/resources/templates/layouts/layout.html
+++ b/owner-frontend-service/src/main/resources/templates/layouts/layout.html
@@ -56,6 +56,9 @@
 <!-- Page level plugins -->
 <script src="vendor/chart.js/Chart.min.js"></script>
 
+<!-- Pagination plugins -->
+<script src="vendor/twbs-pagination/jquery.pwbsPagination.min.js"></script>
+
 <script src="common.js"></script>
 <script>
     $(function() {