From 83d1b1b8bc2918d45954f2aa3dff6caaeb70881e Mon Sep 17 00:00:00 2001
From: hoon7566 <hoon7566@gmail.com>
Date: Wed, 23 Feb 2022 14:12:08 +0900
Subject: [PATCH] =?UTF-8?q?feat(owner-vue):=20owner-vue=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

owner-vue에서 카테고리 기능 frontend 개발
---
 config-service/.idea/.gitignore  |   8 +++
 owner-vue/.idea/.gitignore       |   8 +++
 owner-vue/src/App.vue            |   5 +-
 owner-vue/src/views/Category.vue | 105 ++++++++++++++++++++++---------
 owner-vue/vue.config.js          |  14 ++++-
 5 files changed, 109 insertions(+), 31 deletions(-)
 create mode 100644 config-service/.idea/.gitignore
 create mode 100644 owner-vue/.idea/.gitignore

diff --git a/config-service/.idea/.gitignore b/config-service/.idea/.gitignore
new file mode 100644
index 0000000..c3f502a
--- /dev/null
+++ b/config-service/.idea/.gitignore
@@ -0,0 +1,8 @@
+# 디폴트 무시된 파일
+/shelf/
+/workspace.xml
+# 에디터 기반 HTTP 클라이언트 요청
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/owner-vue/.idea/.gitignore b/owner-vue/.idea/.gitignore
new file mode 100644
index 0000000..c3f502a
--- /dev/null
+++ b/owner-vue/.idea/.gitignore
@@ -0,0 +1,8 @@
+# 디폴트 무시된 파일
+/shelf/
+/workspace.xml
+# 에디터 기반 HTTP 클라이언트 요청
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/owner-vue/src/App.vue b/owner-vue/src/App.vue
index 3674ca7..1121e76 100644
--- a/owner-vue/src/App.vue
+++ b/owner-vue/src/App.vue
@@ -13,6 +13,7 @@
 <script>
 import Sidebar from "./components/Sidebar";
 import Topbar from "./components/Topbar";
+
 export default {
   name: "App",
   components: { Topbar, Sidebar},
@@ -20,6 +21,8 @@ export default {
     cards: ["Today", "Yesterday"],
     drawer: null,
   }),
-  methods: {},
+  mounted() {
+
+  }
 };
 </script>
diff --git a/owner-vue/src/views/Category.vue b/owner-vue/src/views/Category.vue
index 10d1933..9ef4637 100644
--- a/owner-vue/src/views/Category.vue
+++ b/owner-vue/src/views/Category.vue
@@ -22,15 +22,24 @@
     </v-subheader>
 
     <v-expansion-panels style="display: block">
-      <draggable v-model="categoryList" >
+      <draggable v-model="categoryList" id="categoryEl" >
         <v-expansion-panel
-            v-for="item in categoryList" :key="item.order" class="category-item"
+            v-for="item in categoryList" :key="item.categoryId" class="category-item" :data-id="item.categoryId"
         >
-          <v-expansion-panel-header>
-            {{ item.name }}
+          <v-expansion-panel-header >
+            <span contenteditable="true" >{{ item.name }}</span>
+
+            <template v-slot:actions>
+              <v-btn
+                  elevation="2"
+                  icon
+                  @click.stop="clickDelete($event)"
+              ><v-icon>{{ icons.mdiDelete }}</v-icon></v-btn>
+            </template>
+
           </v-expansion-panel-header>
           <v-expansion-panel-content>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            item-list
           </v-expansion-panel-content>
         </v-expansion-panel>
       </draggable>
@@ -42,7 +51,7 @@
 <script>
 import draggable from 'vuedraggable'
 import {
-  mdiContentSave,
+  mdiContentSave, mdiDelete,
   mdiPlus,
 } from '@mdi/js'
 import axios from "axios";
@@ -57,43 +66,81 @@ export default {
       icons: {
         mdiContentSave,
         mdiPlus,
+        mdiDelete,
       },
       categoryList: [
-        {
-          name: 'cc',
-          no: 1,
-        },
-        {
-          name: 'bb',
-          no: 2,
-        },
-        {
-          name: 'aa',
-          no: 3,
-        },
+
       ],
+      deletedList: []
     }
   },
   methods:{
     clickAdd:function (){
-      alert();
+      var count = this.categoryList.length+1
+      var item = {
+        name: 'new Category',
+        order:count
+      }
+      this.categoryList.push(item)
+    },
+    clickDelete:function (event){
+      var category = event.currentTarget.parentNode.parentNode.parentNode;
+      let delCategory = {
+        categoryId : category.dataset.id,
+        name : category.children[0].children[0].innerHTML,
+      }
+      this.deletedList.push(delCategory)
+      category.remove();
     },
     clickSave:function (){
+      var vm =this;
+      let data = {
+        storeId : "1",
+        categoryList: [],
+        deletedList: vm.deletedList
+      }
 
+      var categoryEl = document.querySelector("#categoryEl");
+      categoryEl.childNodes.forEach(function(item ,index){
+        let category = {
+          categoryId : item.dataset.id,
+          name : item.children[0].children[0].innerHTML,
+          order : index+1
+        }
+        data.categoryList.push(category)
+      })
+      axios({
+        method:'put',
+        url:'/store-service/category',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json;charset=UTF-8'
+        },
+        data: data,
+        responseType:'json'
+      })
+      .then(function (response) {
+        console.log(response)
+        vm.deletedList=[]
+
+      });
 
     },
+    getCategoryList:function(){
+      var vm =this;
+      axios({
+        method:'get',
+        url:'/store-service/category',
+        responseType:'json'
+      })
+          .then(function (response) {
+            console.log(response.data.data)
+            vm.categoryList = response.data.data;
+          });
+    }
   },
   created() {
-    var vm =this;
-    axios({
-      method:'get',
-      url:'http://localhost:8001/store-service/category',
-      responseType:'json'
-    })
-    .then(function (response) {
-      console.log(response.data.data)
-      vm.categoryList = response.data.data;
-    });
+    this.getCategoryList();
   }
 }
 </script>
diff --git a/owner-vue/vue.config.js b/owner-vue/vue.config.js
index 2ae460b..bc0acb2 100644
--- a/owner-vue/vue.config.js
+++ b/owner-vue/vue.config.js
@@ -1,5 +1,17 @@
 module.exports = {
   transpileDependencies: [
     'vuetify'
-  ]
+  ],
+  devServer:{
+    proxy:{
+      'store-service/' :{
+        target: 'http://localhost:8001',
+        ws:true,
+      },
+      'order-service/' :{
+        target: 'http://localhost:8001',
+        ws:true,
+      }
+    }
+  }
 }