feat(owner-vue): owner vue에 카테고리 얻어오는 기능 추가

owner vue에 카테고리 얻어오는 기능 추가

owner-vue/package.json

@@ -3,14 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8080",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "service": "node service.js"
   },
   "dependencies": {
+    "@mdi/js": "^6.5.95",
+    "axios": "^0.26.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vuedraggable": "^2.24.3",
     "vuetify": "^2.4.0"
   },
   "devDependencies": {
@@ -22,6 +26,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "font-awesome": "^4.7.0",
+    "gulp": "^3.9.1",
     "sass": "~1.32.0",
     "sass-loader": "^10.0.0",
     "vue-cli-plugin-vuetify": "~2.4.2",

owner-vue/src/App.vue

@@ -15,7 +15,7 @@ import Sidebar from "./components/Sidebar";
 import Topbar from "./components/Topbar";
 export default {
   name: "App",
-  components: { Topbar, Sidebar },
+  components: { Topbar, Sidebar},
   data: () => ({
     cards: ["Today", "Yesterday"],
     drawer: null,

owner-vue/src/main.js

@@ -1,7 +1,9 @@
+import 'font-awesome/css/font-awesome.min.css' // Ensure you are using css-loader
 import Vue from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import router from './router'
+import axios from "axios";
 
 Vue.config.productionTip = false
 
@@ -10,3 +12,5 @@ new Vue({
   router,
   render: h => h(App)
 }).$mount('#app')
+Vue.component('axios',axios)
+

owner-vue/src/router/index.js

@@ -9,6 +9,11 @@ const routes = [
     name: 'dashboard',
     component: () => import('./../views/Dashboard')
   },
+  {
+    path: '/category',
+    name: 'category',
+    component: () => import('./../views/Category')
+  },
 ]
 
 const router = new VueRouter({

owner-vue/src/views/Category.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <v-subheader class="py-0 d-flex justify-space-between rounded-lg">
+      <h3>Category List</h3>
+      <div style="text-align: right">
+        <span class="group pa-2">
+          <v-btn
+              elevation="2"
+              icon
+              color="success"
+              @click="clickAdd"
+          ><v-icon>{{ icons.mdiPlus }}</v-icon></v-btn>
+        </span>
+        <v-btn
+            elevation="2"
+            icon
+            color="primary"
+            @click="clickSave"
+        ><v-icon>{{ icons.mdiContentSave }}</v-icon></v-btn>
+      </div>
+
+    </v-subheader>
+
+    <v-expansion-panels style="display: block">
+      <draggable v-model="categoryList" >
+        <v-expansion-panel
+            v-for="item in categoryList" :key="item.order" class="category-item"
+        >
+          <v-expansion-panel-header>
+            {{ item.name }}
+          </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.
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </draggable>
+    </v-expansion-panels>
+
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable'
+import {
+  mdiContentSave,
+  mdiPlus,
+} from '@mdi/js'
+import axios from "axios";
+
+export default {
+  name: "Category",
+  components:{
+    draggable
+  },
+  data() {
+    return {
+      icons: {
+        mdiContentSave,
+        mdiPlus,
+      },
+      categoryList: [
+        {
+          name: 'cc',
+          no: 1,
+        },
+        {
+          name: 'bb',
+          no: 2,
+        },
+        {
+          name: 'aa',
+          no: 3,
+        },
+      ],
+    }
+  },
+  methods:{
+    clickAdd:function (){
+      alert();
+    },
+    clickSave:function (){
+
+
+    },
+  },
+  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;
+    });
+  }
+}
+</script>
+
+<style scoped>
+
+</style>