crud with vuex n axios

herenacreative · Apr 28, 2020 · ebdde8d · ebdde8d
commit ebdde8d
Show file tree

Hide file tree

Showing 23 changed files with 19,116 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+*node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# fe
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "fe",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "core-js": "^3.3.2",
+    "element-ui": "^2.12.0",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-router": "^4.0.0",
+    "@vue/cli-plugin-vuex": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>fe</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but fe doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id="app">
+
+        <Topbar></Topbar>
+
+
+        <div><el-main><router-view/></el-main>
+          </div>
+
+
+  </div>
+</template>
+
+<script>
+import Topbar from '@/components/Topbar'
+export default {
+  components: {
+    Topbar,
+  }
+}
+</script>
+
+<style>
+  .el-footer{
+    background-color: #909399;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+}
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 400px;
+  }
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+    <el-container style="padding: 10px">
+      <el-row>
+        <el-col :span="24"> <Topbar></Topbar> </el-col>
+
+        <el-row>
+          <el-col :span="8"><Sidebar></Sidebar></el-col>
+          <el-col :span="16"><el-main><router-view/></el-main></el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24"><el-footer>@Footer</el-footer></el-col>
+        </el-row>    
+
+      </el-row>
+    </el-container>  
+  </div>
+</template>
+
+<script>
+import Topbar from '@/components/Topbar'
+import Sidebar from '@/components/Sidebar'
+export default {
+  components: {
+    Topbar,
+    Sidebar,
+  }
+}
+</script>
+
+<style>
+  .el-footer{
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+}
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 400px;
+  }
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/components/MyButton.vue b/src/components/MyButton.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="MyHeader">
+        <el-header style="text-align: left; font-size: 12px">
+            <el-menu default-active="2" mode="horizontal" style="text-align: right; font-size: 12px">
+         <el-menu-item index="1">
+          <i class="el-icon-s-custom"></i>
+          <span><router-link to="/"><el-button>{{ value }}</el-button></router-link></span>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <span><router-link to="/kehadiran"><el-button>{{ value }}</el-button></router-link></span>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <i class="el-icon-s-release"></i>
+          <span><router-link to="/cuti"><el-button>{{ value }}</el-button></router-link></span>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <i class="el-icon-s-finance"></i>
+          <span><router-link to="/gaji">SETTING</router-link></span>
+        </el-menu-item>
+            </el-menu>
+        </el-header>
+    </div>
+</template>
+
+<script>
+
+</script>
+
+<style>
+.el-header{
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: left;
+    line-height: 60px;
+}
+.MyHeader{
+    width: 100%;
+}
+</style>
+
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
@@ -0,0 +1,33 @@
+<template>
+   <div class="MySidebar">
+    <el-aside>
+      <el-menu default-active="2" mode="horizontal">
+        <el-menu-item index="1">
+          <i class="el-icon-s-custom"></i>
+          <span><router-link to="/">CONTACT</router-link></span>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <i class="el-icon-s-claim"></i>
+          <span><router-link to="/kehadiran">CALENDER</router-link></span>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <i class="el-icon-s-release"></i>
+          <span><router-link to="/cuti">INBOX</router-link></span>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <i class="el-icon-s-finance"></i>
+          <span><router-link to="/gaji">SETTING</router-link></span>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+   </div>
+</template>
+
+<style>
+ .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: left;
+    line-height: 400px;
+  }
+</style>
diff --git a/src/components/Topbar.vue b/src/components/Topbar.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="MyHeader">
+      <el-header style="text-align: right; font-size: 12px">
+          <router-link to="/"> <el-button>LOGO</el-button></router-link>   
+          <router-link to="/contact"> <el-button>CONTACT</el-button></router-link>
+          <router-link to="/calender"> <el-button>CALENDER</el-button></router-link>
+          <router-link to="/inbox"> <el-button>INBOX</el-button></router-link>
+          <router-link to="/setting"> <el-button>SETTING</el-button></router-link> 
+      </el-header> 
+
+    </div>
+</template>
+
+<style>
+.el-header{
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import locale from 'element-ui/lib/locale/lang/en'
+
+Vue.use(ElementUI, { locale })
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Contact from '../views/Contact.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/contact',
+    name: 'contact',
+    component: Contact
+  },
+  {
+    path: '/calender',
+    name: 'calender',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Calender')
+  },
+  {
+    path: '/add_contact',
+    name: 'add_contact',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Add_contact')
+  },
+  {
+    path: '/update_contact/:id',
+    name: 'update_contact',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Update_contact')
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router