├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── docker-compose.yaml
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── ImageUpload.vue
    │   ├── Menu.vue
    │   ├── Nav.vue
    │   └── Paginator.vue
    ├── main.ts
    ├── models
    │   ├── permission.ts
    │   ├── product.ts
    │   ├── role.ts
    │   └── user.ts
    ├── pages
    │   ├── Dashboard.vue
    │   ├── Login.vue
    │   ├── Profile.vue
    │   ├── Register.vue
    │   ├── Wrapper.vue
    │   ├── orders
    │   │   └── Orders.vue
    │   ├── products
    │   │   ├── ProductCreate.vue
    │   │   ├── ProductEdit.vue
    │   │   └── Products.vue
    │   ├── roles
    │   │   ├── RoleCreate.vue
    │   │   ├── RoleEdit.vue
    │   │   └── Roles.vue
    │   └── users
    │   │   ├── UserCreate.vue
    │   │   ├── UserEdit.vue
    │   │   └── Users.vue
    ├── router
    │   └── index.ts
    ├── shims-vue.d.ts
    └── store
    │   ├── UserModule.ts
    │   └── index.ts
└── tsconfig.json


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     root: true,
 3 |     env: {
 4 |         node: true
 5 |     },
 6 |     'extends': [
 7 |         'plugin:vue/vue3-essential',
 8 |         'eslint:recommended',
 9 |         '@vue/typescript/recommended'
10 |     ],
11 |     parserOptions: {
12 |         ecmaVersion: 2020
13 |     },
14 |     rules: {
15 |         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
17 |         "@typescript-eslint/camelcase": "off"
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-admin
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/docker-compose.yaml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | services:
 3 |   backend:
 4 |     image: antoniopapa1991/backend
 5 |     environment:
 6 |       DB_HOST: db
 7 |       DB_DATABASE: admin
 8 |       DB_USERNAME: root
 9 |       DB_PASSWORD: root
10 |     ports:
11 |       - 8000:8000
12 |     depends_on:
13 |       - db
14 | 
15 |   db:
16 |     image: mysql:5.7.22
17 |     restart: always
18 |     environment:
19 |       MYSQL_DATABASE: admin
20 |       MYSQL_USER: root
21 |       MYSQL_PASSWORD: root
22 |       MYSQL_ROOT_PASSWORD: root
23 |     volumes:
24 |       - .dbdata:/var/lib/mysql
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-admin",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@types/axios": "^0.14.0",
12 |     "@types/c3": "^0.7.5",
13 |     "axios": "^0.21.1",
14 |     "c3": "^0.7.20",
15 |     "core-js": "^3.6.5",
16 |     "vue": "^3.0.0",
17 |     "vue-router": "^4.0.0-0",
18 |     "vuex": "^4.0.0-0"
19 |   },
20 |   "devDependencies": {
21 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
22 |     "@typescript-eslint/parser": "^2.33.0",
23 |     "@vue/cli-plugin-babel": "~4.5.0",
24 |     "@vue/cli-plugin-eslint": "~4.5.0",
25 |     "@vue/cli-plugin-router": "~4.5.0",
26 |     "@vue/cli-plugin-typescript": "~4.5.0",
27 |     "@vue/cli-plugin-vuex": "~4.5.0",
28 |     "@vue/cli-service": "~4.5.0",
29 |     "@vue/compiler-sfc": "^3.0.0",
30 |     "@vue/eslint-config-typescript": "^5.0.2",
31 |     "eslint": "^6.7.2",
32 |     "eslint-plugin-vue": "^7.0.0-0",
33 |     "typescript": "~3.9.3"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/antoniopapa/vue-frontend/e5b7f1009660472ea348260e7dac45c7084aa72c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
10 |           integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
11 | </head>
12 | <body>
13 | <noscript>
14 |     <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
15 |         Please enable it to continue.</strong>
16 | </noscript>
17 | <div id="app"></div>
18 | <!-- built files will be auto injected -->
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <router-view />
  3 | </template>
  4 | 
  5 | <style>
  6 | body {
  7 |   font-size: .875rem;
  8 | }
  9 | 
 10 | .feather {
 11 |   width: 16px;
 12 |   height: 16px;
 13 |   vertical-align: text-bottom;
 14 | }
 15 | 
 16 | /*
 17 |  * Sidebar
 18 |  */
 19 | 
 20 | .sidebar {
 21 |   position: fixed;
 22 |   top: 0;
 23 |   /* rtl:raw:
 24 |   right: 0;
 25 |   */
 26 |   bottom: 0;
 27 |   /* rtl:remove */
 28 |   left: 0;
 29 |   z-index: 100; /* Behind the navbar */
 30 |   padding: 48px 0 0; /* Height of navbar */
 31 |   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 32 | }
 33 | 
 34 | @media (max-width: 767.98px) {
 35 |   .sidebar {
 36 |     top: 5rem;
 37 |   }
 38 | }
 39 | 
 40 | .sidebar-sticky {
 41 |   position: relative;
 42 |   top: 0;
 43 |   height: calc(100vh - 48px);
 44 |   padding-top: .5rem;
 45 |   overflow-x: hidden;
 46 |   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
 47 | }
 48 | 
 49 | .sidebar .nav-link {
 50 |   font-weight: 500;
 51 |   color: #333;
 52 | }
 53 | 
 54 | .sidebar .nav-link .feather {
 55 |   margin-right: 4px;
 56 |   color: #727272;
 57 | }
 58 | 
 59 | .sidebar .nav-link.active {
 60 |   color: #007bff;
 61 | }
 62 | 
 63 | .sidebar .nav-link:hover .feather,
 64 | .sidebar .nav-link.active .feather {
 65 |   color: inherit;
 66 | }
 67 | 
 68 | .sidebar-heading {
 69 |   font-size: .75rem;
 70 |   text-transform: uppercase;
 71 | }
 72 | 
 73 | /*
 74 |  * Navbar
 75 |  */
 76 | 
 77 | .navbar-brand {
 78 |   padding-top: .75rem;
 79 |   padding-bottom: .75rem;
 80 |   font-size: 1rem;
 81 |   background-color: rgba(0, 0, 0, .25);
 82 |   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 83 | }
 84 | 
 85 | .navbar .navbar-toggler {
 86 |   top: .25rem;
 87 |   right: 1rem;
 88 | }
 89 | 
 90 | .navbar .form-control {
 91 |   padding: .75rem 1rem;
 92 |   border-width: 0;
 93 |   border-radius: 0;
 94 | }
 95 | 
 96 | .form-control-dark {
 97 |   color: #fff;
 98 |   background-color: rgba(255, 255, 255, .1);
 99 |   border-color: rgba(255, 255, 255, .1);
100 | }
101 | 
102 | .form-control-dark:focus {
103 |   border-color: transparent;
104 |   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/components/ImageUpload.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <label class="btn btn-primary">
 3 |     Upload <input type="file" hidden @change="upload($event.target.files)">
 4 |   </label>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import axios from 'axios';
 9 | import {SetupContext} from 'vue';
10 | 
11 | export default {
12 |   name: "ImageUpload",
13 |   emits: ['uploaded'],
14 |   setup(props: any, context: SetupContext) {
15 |     const upload = async (files: FileList | null) => {
16 |       if (files === null) return;
17 | 
18 |       const formData = new FormData();
19 |       formData.append('image', files[0]);
20 | 
21 |       const {data} = await axios.post('upload', formData);
22 | 
23 |       context.emit('uploaded', data.url);
24 |     }
25 | 
26 |     return {
27 |       upload
28 |     }
29 |   }
30 | }
31 | </script>
32 | 


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
 3 |     <div class="position-sticky pt-3">
 4 |       <ul class="nav flex-column">
 5 |         <li class="nav-item">
 6 |           <router-link to="/" exact-active-class="active" class="nav-link">
 7 |             Dashboard
 8 |           </router-link>
 9 |         </li>
10 |         <li class="nav-item">
11 |           <router-link to="/users" active-class="active" class="nav-link">
12 |             Users
13 |           </router-link>
14 |         </li>
15 |         <li class="nav-item">
16 |           <router-link to="/roles" active-class="active" class="nav-link">
17 |             Roles
18 |           </router-link>
19 |         </li>
20 |         <li class="nav-item">
21 |           <router-link to="/products" active-class="active" class="nav-link">
22 |             Products
23 |           </router-link>
24 |         </li>
25 |         <li class="nav-item">
26 |           <router-link to="/orders" active-class="active" class="nav-link">
27 |             Orders
28 |           </router-link>
29 |         </li>
30 |       </ul>
31 |     </div>
32 |   </nav>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   name: "Menu"
38 | }
39 | </script>
40 | 


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
 3 |     <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
 4 | 
 5 |     <nav class="my-2 my-md-0 mr-md-3">
 6 |       <router-link to="/profile" class="p-2 text-white text-decoration-none">{{ name }}</router-link>
 7 |       <router-link to="/login" class="p-2 text-white text-decoration-none" @click="logout">Sign out</router-link>
 8 |     </nav>
 9 |   </nav>
10 | </template>
11 | 
12 | <script lang="ts">
13 | import {ref, computed, watch} from "vue";
14 | import axios from "axios";
15 | import {useStore} from "vuex";
16 | 
17 | export default {
18 |   name: "Nav",
19 |   setup() {
20 |     const name = ref('');
21 |     const store = useStore();
22 | 
23 |     const user = computed(() => store.state.User.user);
24 | 
25 |     watch(user, () => {
26 |       name.value = user.value.first_name + ' ' + user.value.last_name;
27 |     });
28 | 
29 |     const logout = async () => {
30 |       await axios.post('logout');
31 |     }
32 | 
33 |     return {
34 |       name,
35 |       logout
36 |     }
37 |   }
38 | }
39 | </script>
40 | 
41 | 


--------------------------------------------------------------------------------
/src/components/Paginator.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <ul class="pagination">
 4 |       <li class="page-item">
 5 |         <a class="page-link" href="javascript:void(0)" @click="prev">Previous</a>
 6 |       </li>
 7 |       <li class="page-item">
 8 |         <a class="page-link" href="javascript:void(0)" @click="next">Next</a>
 9 |       </li>
10 |     </ul>
11 |   </nav>
12 | </template>
13 | 
14 | <script lang="ts">
15 | import {ref, watch, SetupContext} from "vue";
16 | 
17 | export default {
18 |   name: "Paginator",
19 |   emits: ['page-changed'],
20 |   props: {
21 |     lastPage: Number
22 |   },
23 |   setup(props: { lastPage: number }, context: SetupContext) {
24 |     const page = ref(1);
25 | 
26 |     watch(page, () => {
27 |       context.emit('page-changed', page.value);
28 |     });
29 | 
30 |     const next = () => {
31 |       if (page.value < props.lastPage) {
32 |         page.value++;
33 |       }
34 |     }
35 | 
36 |     const prev = () => {
37 |       if (page.value > 1) {
38 |         page.value--;
39 |       }
40 |     }
41 |     return {
42 |       next,
43 |       prev
44 |     }
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import {createApp} from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import axios from 'axios';
 6 | 
 7 | axios.defaults.baseURL = 'http://localhost:8000/api/';
 8 | axios.defaults.withCredentials = true;
 9 | 
10 | createApp(App).use(store).use(router).mount('#app')
11 | 


--------------------------------------------------------------------------------
/src/models/permission.ts:
--------------------------------------------------------------------------------
1 | export class Permission {
2 |     constructor(
3 |         public id: number,
4 |         public name: string
5 |     ) {
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/models/product.ts:
--------------------------------------------------------------------------------
 1 | export class Product {
 2 |     constructor(
 3 |         id: number,
 4 |         title: string,
 5 |         description: string,
 6 |         image: string,
 7 |         price: number
 8 |     ) {
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/models/role.ts:
--------------------------------------------------------------------------------
1 | export class Role {
2 |     constructor(
3 |         public id: number = 0,
4 |         public name: string = ''
5 |     ) {
6 |     }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/models/user.ts:
--------------------------------------------------------------------------------
 1 | import {Role} from "@/models/role";
 2 | 
 3 | export class User {
 4 |     constructor(
 5 |         public id: number = 0,
 6 |         public first_name: string = '',
 7 |         public last_name: string = '',
 8 |         public email: string = '',
 9 |         public role: Role = new Role()
10 |     ) {
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/pages/Dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h2>Daily Sales</h2>
 3 | 
 4 |   <div id="chart"></div>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import {onMounted} from 'vue';
 9 | import axios from 'axios';
10 | import * as c3 from 'c3';
11 | 
12 | export default {
13 |   name: "Dashboard",
14 |   setup() {
15 |     onMounted(async () => {
16 |       const chart = c3.generate({
17 |         bindto: '#chart',
18 |         data: {
19 |           x: 'x',
20 |           columns: [
21 |             ['x'],
22 |             ['Sales']
23 |           ],
24 |           types: {
25 |             Sales: 'bar'
26 |           }
27 |         },
28 |         axis: {
29 |           x: {
30 |             type: 'timeseries',
31 |             tick: {
32 |               format: '%Y-%m-%d'
33 |             }
34 |           }
35 |         }
36 |       });
37 | 
38 |       const {data} = await axios.get('chart');
39 | 
40 |       chart.load({
41 |         columns: [
42 |           ['x', ...data.map((r: any) => r.date)],
43 |           ['Sales', ...data.map((r: any) => r.sum)]
44 |         ]
45 |       })
46 |     });
47 |   }
48 | }
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/pages/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="form-signin">
 3 |     <form @submit.prevent="submit">
 4 |       <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
 5 | 
 6 |       <input v-model="form.email" type="email" class="form-control" placeholder="Email" required>
 7 | 
 8 |       <input v-model="form.password" type="password" class="form-control" placeholder="Password" required>
 9 | 
10 |       <button class="w-100 btn btn-lg btn-primary" type="submit">Submit</button>
11 |     </form>
12 |   </main>
13 | </template>
14 | 
15 | <script>
16 | import {reactive} from 'vue';
17 | import axios from "axios";
18 | import {useRouter} from "vue-router";
19 | 
20 | export default {
21 |   name: "Login",
22 |   setup() {
23 |     const form = reactive({
24 |       email: '',
25 |       password: ''
26 |     });
27 |     const router = useRouter();
28 | 
29 |     const submit = async () => {
30 |       await axios.post('login', {
31 |         email: form.email,
32 |         password: form.password
33 |       });
34 | 
35 |       await router.push('/');
36 |     }
37 | 
38 |     return {
39 |       form,
40 |       submit
41 |     }
42 |   }
43 | }
44 | </script>
45 | 
46 | <style scoped>
47 | html,
48 | body {
49 |   height: 100%;
50 | }
51 | 
52 | body {
53 |   display: flex;
54 |   align-items: center;
55 |   padding-top: 40px;
56 |   padding-bottom: 40px;
57 |   background-color: #f5f5f5;
58 | }
59 | 
60 | .form-signin {
61 |   width: 100%;
62 |   max-width: 330px;
63 |   padding: 15px;
64 |   margin: auto;
65 | }
66 | 
67 | .form-signin .checkbox {
68 |   font-weight: 400;
69 | }
70 | 
71 | .form-signin .form-control {
72 |   position: relative;
73 |   box-sizing: border-box;
74 |   height: auto;
75 |   padding: 10px;
76 |   font-size: 16px;
77 | }
78 | 
79 | .form-signin .form-control:focus {
80 |   z-index: 2;
81 | }
82 | 
83 | .form-signin input[type="email"] {
84 |   margin-bottom: -1px;
85 |   border-bottom-right-radius: 0;
86 |   border-bottom-left-radius: 0;
87 | }
88 | 
89 | .form-signin input[type="password"] {
90 |   margin-bottom: 10px;
91 |   border-top-left-radius: 0;
92 |   border-top-right-radius: 0;
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/src/pages/Profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h3>Account Information</h3>
 3 |   <form @submit.prevent="infoSubmit">
 4 |     <div class="mb-3">
 5 |       <label>First Name</label>
 6 |       <input v-model="infoData.first_name" class="form-control" name="first_name">
 7 |     </div>
 8 |     <div class="mb-3">
 9 |       <label>Last Name</label>
10 |       <input v-model="infoData.last_name" class="form-control" name="last_name">
11 |     </div>
12 |     <div class="mb-3">
13 |       <label>Email</label>
14 |       <input v-model="infoData.email" class="form-control" name="email">
15 |     </div>
16 | 
17 |     <button class="btn btn-outline-secondary">Save</button>
18 |   </form>
19 | 
20 |   <h3 class="mt-4">Change Password</h3>
21 |   <form @submit.prevent="passwordSubmit">
22 |     <div class="mb-3">
23 |       <label>Password</label>
24 |       <input v-model="passwordData.password" type="password" class="form-control" name="password">
25 |     </div>
26 |     <div class="mb-3">
27 |       <label>Password Confirm</label>
28 |       <input v-model="passwordData.password_confirm" type="password" class="form-control" name="password_confirm">
29 |     </div>
30 | 
31 |     <button class="btn btn-outline-secondary">Save</button>
32 |   </form>
33 | </template>
34 | 
35 | <script lang="ts">
36 | import {reactive, computed, watch} from 'vue';
37 | import axios from 'axios';
38 | import {useStore} from "vuex";
39 | 
40 | export default {
41 |   name: "Profile",
42 |   setup() {
43 |     const infoData = reactive({
44 |       first_name: '',
45 |       last_name: '',
46 |       email: ''
47 |     });
48 |     const passwordData = reactive({
49 |       password: '',
50 |       password_confirm: ''
51 |     })
52 | 
53 |     const store = useStore();
54 | 
55 |     const user = computed(() => store.state.User.user);
56 | 
57 |     watch(user, () => {
58 |       infoData.first_name = user.value.first_name;
59 |       infoData.last_name = user.value.last_name;
60 |       infoData.email = user.value.email;
61 |     });
62 | 
63 |     const infoSubmit = async () => {
64 |       const {data} = await axios.put('users/info', infoData);
65 | 
66 |       await store.dispatch('User/setUser', data);
67 |     }
68 | 
69 |     const passwordSubmit = async () => {
70 |       await axios.put('users/password', passwordData);
71 |     }
72 | 
73 |     return {
74 |       infoData,
75 |       passwordData,
76 |       infoSubmit,
77 |       passwordSubmit
78 |     }
79 |   }
80 | }
81 | </script>
82 | 
83 | 


--------------------------------------------------------------------------------
/src/pages/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main class="form-signin">
  3 |     <form @submit.prevent="submit">
  4 |       <h1 class="h3 mb-3 fw-normal">Please register</h1>
  5 | 
  6 |       <input v-model="firstName" class="form-control" placeholder="First Name" required>
  7 | 
  8 |       <input v-model="lastName" class="form-control" placeholder="Last Name" required>
  9 | 
 10 |       <input v-model="email" type="email" class="form-control" placeholder="Email" required>
 11 | 
 12 |       <input v-model="password" type="password" class="form-control" placeholder="Password" required>
 13 | 
 14 |       <input v-model="passwordConfirm" type="password" class="form-control" placeholder="Password Confirm" required>
 15 | 
 16 |       <button class="w-100 btn btn-lg btn-primary" type="submit">Submit</button>
 17 |     </form>
 18 |   </main>
 19 | </template>
 20 | 
 21 | <script lang="ts">
 22 | import {ref} from 'vue';
 23 | import axios from 'axios';
 24 | import {useRouter} from "vue-router";
 25 | 
 26 | export default {
 27 |   name: "Register",
 28 |   setup() {
 29 |     const firstName = ref('');
 30 |     const lastName = ref('');
 31 |     const email = ref('');
 32 |     const password = ref('');
 33 |     const passwordConfirm = ref('');
 34 |     const router = useRouter();
 35 | 
 36 |     const submit = async () => {
 37 |       await axios.post('register', {
 38 |         first_name: firstName.value,
 39 |         last_name: lastName.value,
 40 |         email: email.value,
 41 |         password: password.value,
 42 |         password_confirm: passwordConfirm.value,
 43 |       });
 44 | 
 45 |       await router.push('/login');
 46 |     }
 47 | 
 48 |     return {
 49 |       firstName,
 50 |       lastName,
 51 |       email,
 52 |       password,
 53 |       passwordConfirm,
 54 |       submit
 55 |     }
 56 |   }
 57 | }
 58 | </script>
 59 | 
 60 | <style scoped>
 61 | html,
 62 | body {
 63 |   height: 100%;
 64 | }
 65 | 
 66 | body {
 67 |   display: flex;
 68 |   align-items: center;
 69 |   padding-top: 40px;
 70 |   padding-bottom: 40px;
 71 |   background-color: #f5f5f5;
 72 | }
 73 | 
 74 | .form-signin {
 75 |   width: 100%;
 76 |   max-width: 330px;
 77 |   padding: 15px;
 78 |   margin: auto;
 79 | }
 80 | 
 81 | .form-signin .checkbox {
 82 |   font-weight: 400;
 83 | }
 84 | 
 85 | .form-signin .form-control {
 86 |   position: relative;
 87 |   box-sizing: border-box;
 88 |   height: auto;
 89 |   padding: 10px;
 90 |   font-size: 16px;
 91 | }
 92 | 
 93 | .form-signin .form-control:focus {
 94 |   z-index: 2;
 95 | }
 96 | 
 97 | .form-signin input[type="email"] {
 98 |   margin-bottom: -1px;
 99 |   border-bottom-right-radius: 0;
100 |   border-bottom-left-radius: 0;
101 | }
102 | 
103 | .form-signin input[type="password"] {
104 |   margin-bottom: 10px;
105 |   border-top-left-radius: 0;
106 |   border-top-right-radius: 0;
107 | }
108 | </style>
109 | 


--------------------------------------------------------------------------------
/src/pages/Wrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Nav/>
 3 | 
 4 |   <div class="container-fluid">
 5 |     <div class="row">
 6 |       <Menu/>
 7 | 
 8 |       <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
 9 |         <router-view/>
10 |       </main>
11 |     </div>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Nav from '@/components/Nav';
17 | import Menu from '@/components/Menu';
18 | import axios from "axios";
19 | import {onMounted} from 'vue';
20 | import {useRouter} from "vue-router";
21 | import {useStore} from "vuex";
22 | 
23 | export default {
24 |   name: "Wrapper",
25 |   components: {
26 |     Nav,
27 |     Menu
28 |   },
29 |   setup() {
30 |     const router = useRouter();
31 |     const store = useStore();
32 | 
33 |     onMounted(async () => {
34 |       try {
35 |         const {data} = await axios.get('user');
36 | 
37 |         await store.dispatch('User/setUser', data);
38 |       } catch (e) {
39 |         await router.push('/login');
40 |       }
41 |     });
42 |   }
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/src/pages/orders/Orders.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="pt-3 pb-2 mb-3 border-bottom">
  3 |     <a href="javascript:void(0)" class="btn btn-sm btn-outline-secondary" @click="exportCSV">Export</a>
  4 |   </div>
  5 | 
  6 |   <div class="table-responsive">
  7 |     <table class="table table-sm">
  8 |       <thead>
  9 |       <tr>
 10 |         <th>#</th>
 11 |         <th>Name</th>
 12 |         <th>Email</th>
 13 |         <th>Total</th>
 14 |         <th>Action</th>
 15 |       </tr>
 16 |       </thead>
 17 |       <tbody>
 18 |       <template v-for="order in orders" :key="order.id">
 19 |         <tr>
 20 |           <td>{{ order.id }}</td>
 21 |           <td>{{ order.name }}</td>
 22 |           <td>{{ order.email }}</td>
 23 |           <td>{{ order.total }}</td>
 24 |           <td>
 25 |             <div class="btn-group mr-2">
 26 |               <a href="javascript:void(0)" class="btn btn-sm btn-outline-secondary"
 27 |                  @click="select(order.id)"
 28 |               >View</a>
 29 |             </div>
 30 |           </td>
 31 |         </tr>
 32 |         <tr>
 33 |           <td colspan="5">
 34 |             <div class="overflow-hidden" :class="selected === order.id ? 'show' : 'hide'">
 35 |               <table class="table table-sm">
 36 |                 <thead>
 37 |                 <tr>
 38 |                   <th>#</th>
 39 |                   <th>Product Title</th>
 40 |                   <th>Quantity</th>
 41 |                   <th>Price</th>
 42 |                 </tr>
 43 |                 </thead>
 44 |                 <tbody>
 45 |                 <tr v-for="item in order.order_items" :key="item.id">
 46 |                   <td>{{ item.id }}</td>
 47 |                   <td>{{ item.product_title }}</td>
 48 |                   <td>{{ item.quantity }}</td>
 49 |                   <td>{{ item.price }}</td>
 50 |                 </tr>
 51 |                 </tbody>
 52 |               </table>
 53 |             </div>
 54 |           </td>
 55 |         </tr>
 56 |       </template>
 57 |       </tbody>
 58 |     </table>
 59 |   </div>
 60 | 
 61 |   <Paginator :last-page="lastPage" @page-changed="load($event)"/>
 62 | </template>
 63 | 
 64 | <script lang="ts">
 65 | import {ref, onMounted} from 'vue';
 66 | import axios from 'axios';
 67 | import Paginator from "@/components/Paginator.vue";
 68 | 
 69 | export default {
 70 |   name: "Orders",
 71 |   components: {Paginator},
 72 |   setup() {
 73 |     const orders = ref([]);
 74 |     const lastPage = ref(0);
 75 |     const selected = ref(0);
 76 | 
 77 |     const load = async (page = 1) => {
 78 |       const {data} = await axios.get(`orders?page=${page}`);
 79 | 
 80 |       orders.value = data.data;
 81 |       lastPage.value = data.meta.last_page;
 82 |     };
 83 | 
 84 |     onMounted(load);
 85 | 
 86 |     const select = (id: number) => selected.value = selected.value !== id ? id : 0;
 87 | 
 88 |     const exportCSV = async () => {
 89 |       const {data} = await axios.post('export', {}, {responseType: 'blob'});
 90 |       const blob = new Blob([data], {type: 'text/csv'});
 91 |       const link = document.createElement('a');
 92 |       link.href = window.URL.createObjectURL(data);
 93 |       link.download = 'orders.csv';
 94 |       link.click();
 95 |     }
 96 | 
 97 |     return {
 98 |       orders,
 99 |       lastPage,
100 |       selected,
101 |       load,
102 |       select,
103 |       exportCSV
104 |     }
105 |   }
106 | }
107 | </script>
108 | 
109 | <style scoped>
110 | .show {
111 |   max-height: 150px;
112 |   transition: max-height 1000ms ease-in;
113 | }
114 | 
115 | .hide {
116 |   max-height: 0;
117 |   transition: max-height 1000ms ease-out;
118 | }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/pages/products/ProductCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submit">
 3 |     <div class="mb-3">
 4 |       <label>Title</label>
 5 |       <input v-model="data.title" class="form-control" name="title">
 6 |     </div>
 7 |     <div class="mb-3">
 8 |       <label>Description</label>
 9 |       <textarea v-model="data.description" class="form-control" name="description"></textarea>
10 |     </div>
11 |     <div class="mb-3">
12 |       <label>Image</label>
13 |       <div class="input-group">
14 |         <input v-model="data.image" class="form-control" name="image">
15 |         <ImageUpload @uploaded="data.image = $event"/>
16 |       </div>
17 |     </div>
18 |     <div class="mb-3">
19 |       <label>Price</label>
20 |       <input v-model="data.price" type="number" class="form-control" name="price">
21 |     </div>
22 |     <button class="btn btn-outline-secondary">Save</button>
23 |   </form>
24 | </template>
25 | 
26 | <script lang="ts">
27 | import {reactive} from 'vue';
28 | import axios from 'axios';
29 | import {useRouter} from "vue-router";
30 | import ImageUpload from "@/components/ImageUpload.vue";
31 | 
32 | export default {
33 |   name: "ProductCreate",
34 |   components: {ImageUpload},
35 |   setup() {
36 |     const router = useRouter();
37 | 
38 |     const data = reactive({
39 |       title: '',
40 |       description: '',
41 |       image: '',
42 |       price: ''
43 |     });
44 | 
45 |     const submit = async () => {
46 |       await axios.post('products', data);
47 | 
48 |       await router.push('/products');
49 |     }
50 | 
51 |     return {
52 |       data,
53 |       submit
54 |     }
55 |   }
56 | }
57 | </script>
58 | 


--------------------------------------------------------------------------------
/src/pages/products/ProductEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submit">
 3 |     <div class="mb-3">
 4 |       <label>Title</label>
 5 |       <input v-model="data.title" class="form-control" name="title">
 6 |     </div>
 7 |     <div class="mb-3">
 8 |       <label>Description</label>
 9 |       <textarea v-model="data.description" class="form-control" name="description"></textarea>
10 |     </div>
11 |     <div class="mb-3">
12 |       <label>Image</label>
13 |       <div class="input-group">
14 |         <input v-model="data.image" class="form-control" name="image">
15 |         <ImageUpload @uploaded="data.image = $event"/>
16 |       </div>
17 |     </div>
18 |     <div class="mb-3">
19 |       <label>Price</label>
20 |       <input v-model="data.price" type="number" class="form-control" name="price">
21 |     </div>
22 |     <button class="btn btn-outline-secondary">Save</button>
23 |   </form>
24 | </template>
25 | 
26 | <script lang="ts">
27 | import {reactive, onMounted} from 'vue';
28 | import axios from 'axios';
29 | import {useRoute, useRouter} from "vue-router";
30 | import ImageUpload from "@/components/ImageUpload.vue";
31 | 
32 | export default {
33 |   name: "ProductEdit",
34 |   components: {ImageUpload},
35 |   setup() {
36 |     const router = useRouter();
37 |     const route = useRoute();
38 | 
39 |     const data = reactive({
40 |       title: '',
41 |       description: '',
42 |       image: '',
43 |       price: ''
44 |     });
45 | 
46 |     onMounted(async () => {
47 |       const response = await axios.get(`products/${route.params.id}`);
48 | 
49 |       data.title = response.data.title;
50 |       data.description = response.data.description;
51 |       data.image = response.data.image;
52 |       data.price = response.data.price;
53 |     });
54 | 
55 |     const submit = async () => {
56 |       await axios.put(`products/${route.params.id}`, data);
57 | 
58 |       await router.push('/products');
59 |     }
60 | 
61 |     return {
62 |       data,
63 |       submit
64 |     }
65 |   }
66 | }
67 | </script>
68 | 


--------------------------------------------------------------------------------
/src/pages/products/Products.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pt-3 pb-2 mb-3 border-bottom">
 3 |     <router-link to="/products/create" class="btn btn-sm btn-outline-secondary">Add</router-link>
 4 |   </div>
 5 | 
 6 |   <div class="table-responsive">
 7 |     <table class="table table-striped table-sm">
 8 |       <thead>
 9 |       <tr>
10 |         <th>#</th>
11 |         <th>Image</th>
12 |         <th>Title</th>
13 |         <th>Description</th>
14 |         <th>Price</th>
15 |         <th>Action</th>
16 |       </tr>
17 |       </thead>
18 |       <tbody>
19 |       <tr v-for="product in products" :key="product.id">
20 |         <td>{{ product.id }}</td>
21 |         <td><img :src="product.image" width="50"/></td>
22 |         <td>{{ product.title }}</td>
23 |         <td>{{ product.description }}</td>
24 |         <td>{{ product.price }}</td>
25 |         <td>
26 |           <div class="btn-group mr-2">
27 |             <router-link :to="`/products/${product.id}/edit`" class="btn btn-sm btn-outline-secondary">Edit
28 |             </router-link>
29 |             <a href="javascript:void(0)" class="btn btn-sm btn-outline-secondary" @click="del(product.id)">Delete</a>
30 |           </div>
31 |         </td>
32 |       </tr>
33 |       </tbody>
34 |     </table>
35 |   </div>
36 | 
37 |   <Paginator :last-page="lastPage" @page-changed="load($event)"/>
38 | </template>
39 | 
40 | <script lang="ts">
41 | import {onMounted, ref} from 'vue';
42 | import axios from 'axios';
43 | import {Product} from "@/models/product";
44 | import Paginator from "@/components/Paginator.vue";
45 | 
46 | export default {
47 |   name: "Products",
48 |   components: {Paginator},
49 |   setup() {
50 |     const products = ref<Product[]>([]);
51 |     const lastPage = ref(0);
52 | 
53 |     const load = async (page = 1) => {
54 |       const {data} = await axios.get(`products?page=${page}`);
55 | 
56 |       products.value = data.data;
57 |       lastPage.value = data.meta.last_page;
58 |     };
59 | 
60 |     onMounted(load);
61 | 
62 |     const del = async (id: number) => {
63 |       if (confirm('Are you sure?')) {
64 |         await axios.delete(`products/${id}`);
65 | 
66 |         products.value = products.value.filter((p: any) => p.id !== id);
67 |       }
68 |     }
69 | 
70 |     return {
71 |       products,
72 |       lastPage,
73 |       del,
74 |       load
75 |     }
76 |   }
77 | }
78 | </script>
79 | 


--------------------------------------------------------------------------------
/src/pages/roles/RoleCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submit">
 3 |     <div class="mb-3 mt-3 row">
 4 |       <label class="col-sm-2 col-form-label">Name</label>
 5 |       <div class="col-sm-10">
 6 |         <input v-model="formData.name" class="form-control" name="name">
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="mb-3 row">
11 |       <label class="col-sm-2 col-form-label">Permissions</label>
12 |       <div class="col-sm-10">
13 |         <div class="form-check form-check-inline col-3" v-for="permission in permissionList" :key="permission.id">
14 |           <input class="form-check-input" type="checkbox" :value="permission.id"
15 |                  @change="select(permission.id, $event.target.checked)">
16 |           <label class="form-check-label">{{ permission.name }}</label>
17 |         </div>
18 |       </div>
19 |     </div>
20 | 
21 |     <button class="btn btn-outline-secondary">Save</button>
22 |   </form>
23 | </template>
24 | 
25 | <script lang="ts">
26 | import {onMounted, reactive, ref} from 'vue';
27 | import axios from 'axios';
28 | import {useRouter} from "vue-router";
29 | 
30 | export default {
31 |   name: "RoleCreate",
32 |   setup() {
33 |     const {push} = useRouter();
34 | 
35 |     const formData = reactive({
36 |       name: '',
37 |       permissions: [] as number[]
38 |     });
39 |     const permissionList = ref([]);
40 | 
41 |     onMounted(async () => {
42 |       const {data} = await axios.get('permissions');
43 | 
44 |       permissionList.value = data;
45 |     });
46 | 
47 |     const select = (id: number, checked: boolean) => {
48 |       if (checked) {
49 |         formData.permissions = [...formData.permissions, id];
50 |         return;
51 |       }
52 | 
53 |       formData.permissions = formData.permissions.filter(p => p !== id);
54 |     }
55 | 
56 |     const submit = async () => {
57 |       await axios.post('roles', formData);
58 | 
59 |       await push('/roles');
60 |     }
61 | 
62 |     return {
63 |       formData,
64 |       permissionList,
65 |       select,
66 |       submit
67 |     }
68 |   }
69 | }
70 | </script>
71 | 


--------------------------------------------------------------------------------
/src/pages/roles/RoleEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submit">
 3 |     <div class="mb-3 mt-3 row">
 4 |       <label class="col-sm-2 col-form-label">Name</label>
 5 |       <div class="col-sm-10">
 6 |         <input v-model="formData.name" class="form-control" name="name">
 7 |       </div>
 8 |     </div>
 9 | 
10 |     <div class="mb-3 row">
11 |       <label class="col-sm-2 col-form-label">Permissions</label>
12 |       <div class="col-sm-10">
13 |         <div class="form-check form-check-inline col-3" v-for="permission in permissionList" :key="permission.id">
14 |           <input class="form-check-input" type="checkbox" :value="permission.id"
15 |                  :checked="checked(permission.id)"
16 |                  @change="select(permission.id, $event.target.checked)">
17 |           <label class="form-check-label">{{ permission.name }}</label>
18 |         </div>
19 |       </div>
20 |     </div>
21 | 
22 |     <button class="btn btn-outline-secondary">Save</button>
23 |   </form>
24 | </template>
25 | 
26 | <script lang="ts">
27 | import {onMounted, reactive, ref} from 'vue';
28 | import axios from 'axios';
29 | import {useRoute, useRouter} from "vue-router";
30 | import {Permission} from "@/models/permission";
31 | 
32 | export default {
33 |   name: "RoleCreate",
34 |   setup() {
35 |     const {push} = useRouter();
36 |     const {params} = useRoute();
37 | 
38 |     const formData = reactive({
39 |       name: '',
40 |       permissions: [] as number[]
41 |     });
42 |     const permissionList = ref([]);
43 | 
44 |     onMounted(async () => {
45 |       const {data} = await axios.get('permissions');
46 | 
47 |       permissionList.value = data;
48 | 
49 |       const response = await axios.get(`roles/${params.id}`);
50 | 
51 |       formData.name = response.data.name;
52 |       formData.permissions = response.data.permissions.map((p: Permission) => p.id);
53 |     });
54 | 
55 |     const select = (id: number, checked: boolean) => {
56 |       if (checked) {
57 |         formData.permissions = [...formData.permissions, id];
58 |         return;
59 |       }
60 | 
61 |       formData.permissions = formData.permissions.filter(p => p !== id);
62 |     }
63 | 
64 |     const submit = async () => {
65 |       await axios.put(`roles/${params.id}`, formData);
66 | 
67 |       await push('/roles');
68 |     }
69 | 
70 |     const checked = (id: number) => formData.permissions.some(p => p === id)
71 | 
72 |     return {
73 |       formData,
74 |       permissionList,
75 |       select,
76 |       submit,
77 |       checked
78 |     }
79 |   }
80 | }
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/pages/roles/Roles.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pt-3 pb-2 mb-3 border-bottom">
 3 |     <router-link to="/roles/create" class="btn btn-sm btn-outline-secondary">Add</router-link>
 4 |   </div>
 5 | 
 6 |   <div class="table-responsive">
 7 |     <table class="table table-striped table-sm">
 8 |       <thead>
 9 |       <tr>
10 |         <th>#</th>
11 |         <th>Name</th>
12 |         <th>Action</th>
13 |       </tr>
14 |       </thead>
15 |       <tbody>
16 |       <tr v-for="role in roles" :key="role.id">
17 |         <td>{{ role.id }}</td>
18 |         <td>{{ role.name }}</td>
19 |         <td>
20 |           <div class="btn-group mr-2">
21 |             <router-link :to="`/roles/${role.id}/edit`" class="btn btn-sm btn-outline-secondary">Edit</router-link>
22 |             <a href="javascript:void(0)" class="btn btn-sm btn-outline-secondary" @click="del(role.id)">Delete</a>
23 |           </div>
24 |         </td>
25 |       </tr>
26 |       </tbody>
27 |     </table>
28 |   </div>
29 | </template>
30 | 
31 | <script lang="ts">
32 | import {ref, onMounted} from 'vue';
33 | import axios from 'axios';
34 | import {Role} from "@/models/role";
35 | 
36 | export default {
37 |   name: "Roles",
38 |   setup() {
39 |     const roles = ref([]);
40 | 
41 |     onMounted(async () => {
42 |       const {data} = await axios.get('roles');
43 | 
44 |       roles.value = data;
45 |     });
46 | 
47 |     const del = async (id: number) => {
48 |       if (confirm('Are you sure?')) {
49 |         await axios.delete(`roles/${id}`);
50 | 
51 |         roles.value = roles.value.filter((r: Role) => r.id !== id);
52 |       }
53 |     }
54 | 
55 |     return {
56 |       roles,
57 |       del
58 |     }
59 |   }
60 | }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/pages/users/UserCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submit">
 3 |     <div class="mb-3">
 4 |       <label>First Name</label>
 5 |       <input v-model="data.first_name" class="form-control" name="first_name">
 6 |     </div>
 7 |     <div class="mb-3">
 8 |       <label>Last Name</label>
 9 |       <input v-model="data.last_name" class="form-control" name="last_name">
10 |     </div>
11 |     <div class="mb-3">
12 |       <label>Email</label>
13 |       <input v-model="data.email" class="form-control" name="email">
14 |     </div>
15 | 
16 |     <div class="mb-3">
17 |       <label>Role</label>
18 |       <select v-model="data.role_id" name="role_id" class="form-control">
19 |         <option v-for="role of roles" :key="role.id" :value="role.id">
20 |           {{ role.name }}
21 |         </option>
22 |       </select>
23 |     </div>
24 | 
25 |     <button class="btn btn-outline-secondary">Save</button>
26 |   </form>
27 | </template>
28 | 
29 | <script lang="ts">
30 | import {reactive, ref, onMounted} from "vue";
31 | import axios from 'axios';
32 | import {useRouter} from "vue-router";
33 | 
34 | export default {
35 |   name: "UserCreate",
36 |   setup() {
37 |     const data = reactive({
38 |       first_name: '',
39 |       last_name: '',
40 |       email: '',
41 |       role_id: ''
42 |     });
43 |     const roles = ref([]);
44 |     const router = useRouter();
45 | 
46 |     onMounted(async () => {
47 |       const {data} = await axios.get('roles');
48 | 
49 |       roles.value = data;
50 |     });
51 | 
52 |     const submit = async () => {
53 |       await axios.post('users', data);
54 | 
55 |       await router.push('/users');
56 |     }
57 | 
58 |     return {
59 |       data,
60 |       roles,
61 |       submit
62 |     }
63 |   }
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/pages/users/UserEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit.prevent="submit">
 3 |     <div class="mb-3">
 4 |       <label>First Name</label>
 5 |       <input v-model="data.first_name" class="form-control" name="first_name">
 6 |     </div>
 7 |     <div class="mb-3">
 8 |       <label>Last Name</label>
 9 |       <input v-model="data.last_name" class="form-control" name="last_name">
10 |     </div>
11 |     <div class="mb-3">
12 |       <label>Email</label>
13 |       <input v-model="data.email" class="form-control" name="email">
14 |     </div>
15 | 
16 |     <div class="mb-3">
17 |       <label>Role</label>
18 |       <select v-model="data.role_id" name="role_id" class="form-control">
19 |         <option v-for="role of roles" :key="role.id" :value="role.id">
20 |           {{ role.name }}
21 |         </option>
22 |       </select>
23 |     </div>
24 | 
25 |     <button class="btn btn-outline-secondary">Save</button>
26 |   </form>
27 | </template>
28 | 
29 | <script lang="ts">
30 | import {reactive, ref, onMounted} from "vue";
31 | import axios from 'axios';
32 | import {useRoute, useRouter} from "vue-router";
33 | 
34 | export default {
35 |   name: "UserEdit",
36 |   setup() {
37 |     const data = reactive({
38 |       first_name: '',
39 |       last_name: '',
40 |       email: '',
41 |       role_id: ''
42 |     });
43 |     const roles = ref([]);
44 |     const router = useRouter();
45 |     const route = useRoute();
46 | 
47 |     onMounted(async () => {
48 |       const rolesResponse = await axios.get('roles');
49 | 
50 |       roles.value = rolesResponse.data;
51 | 
52 |       const response = await axios.get(`users/${route.params.id}`);
53 | 
54 |       data.first_name = response.data.first_name;
55 |       data.last_name = response.data.last_name;
56 |       data.email = response.data.email;
57 |       data.role_id = response.data.role.id;
58 |     });
59 | 
60 |     const submit = async () => {
61 |       await axios.put(`users/${route.params.id}`, data);
62 | 
63 |       await router.push('/users');
64 |     }
65 | 
66 |     return {
67 |       data,
68 |       roles,
69 |       submit
70 |     }
71 |   }
72 | }
73 | </script>
74 | 


--------------------------------------------------------------------------------
/src/pages/users/Users.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="pt-3 pb-2 mb-3 border-bottom">
 3 |     <router-link to="/users/create" class="btn btn-sm btn-outline-secondary">Add</router-link>
 4 |   </div>
 5 | 
 6 |   <div class="table-responsive">
 7 |     <table class="table table-striped table-sm">
 8 |       <thead>
 9 |       <tr>
10 |         <th>#</th>
11 |         <th>Name</th>
12 |         <th>Email</th>
13 |         <th>Role</th>
14 |         <th>Action</th>
15 |       </tr>
16 |       </thead>
17 |       <tbody>
18 |       <tr v-for="user in users" :key="user.id">
19 |         <td>{{ user.id }}</td>
20 |         <td>{{ user.first_name }} {{ user.last_name }}</td>
21 |         <td>{{ user.email }}</td>
22 |         <td>{{ user.role.name }}</td>
23 |         <td>
24 |           <div class="btn-group mr-2">
25 |             <router-link :to="`/users/${user.id}/edit`" class="btn btn-sm btn-outline-secondary">Edit</router-link>
26 |             <a href="javascript:void(0)" class="btn btn-sm btn-outline-secondary" @click="del(user.id)">Delete</a>
27 |           </div>
28 |         </td>
29 |       </tr>
30 |       </tbody>
31 |     </table>
32 |   </div>
33 | 
34 |   <Paginator :last-page="lastPage" @page-changed="load($event)"/>
35 | </template>
36 | 
37 | <script lang="ts">
38 | import {onMounted, ref} from 'vue';
39 | import axios from 'axios';
40 | import {User} from "@/models/user";
41 | import Paginator from "@/components/Paginator.vue";
42 | 
43 | export default {
44 |   name: "Users",
45 |   components: {Paginator},
46 |   setup() {
47 |     const users = ref([]);
48 |     const lastPage = ref(0);
49 | 
50 |     const load = async (page = 1) => {
51 |       const {data} = await axios.get(`users?page=${page}`);
52 | 
53 |       users.value = data.data;
54 |       lastPage.value = data.meta.last_page;
55 |     };
56 | 
57 |     onMounted(load);
58 | 
59 |     const del = async (id: number) => {
60 |       if (confirm('Are you sure?')) {
61 |         await axios.delete(`users/${id}`);
62 | 
63 |         users.value = users.value.filter((u: User) => u.id !== id);
64 |       }
65 |     }
66 | 
67 |     return {
68 |       users,
69 |       lastPage,
70 |       del,
71 |       load
72 |     }
73 |   }
74 | }
75 | </script>
76 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
 2 | import Dashboard from '@/pages/Dashboard.vue';
 3 | import Register from '@/pages/Register.vue';
 4 | import Wrapper from '@/pages/Wrapper.vue';
 5 | import Login from '@/pages/Login.vue';
 6 | import Users from '@/pages/users/Users.vue';
 7 | import UserCreate from '@/pages/users/UserCreate.vue';
 8 | import UserEdit from '@/pages/users/UserEdit.vue';
 9 | import Roles from '@/pages/roles/Roles.vue';
10 | import RoleCreate from '@/pages/roles/RoleCreate.vue';
11 | import RoleEdit from '@/pages/roles/RoleEdit.vue';
12 | import Products from '@/pages/products/Products.vue';
13 | import ProductCreate from '@/pages/products/ProductCreate.vue';
14 | import ProductEdit from '@/pages/products/ProductEdit.vue';
15 | import Orders from '@/pages/orders/Orders.vue';
16 | import Profile from '@/pages/Profile.vue';
17 | 
18 | const routes: Array<RouteRecordRaw> = [
19 |     {path: '/register', component: Register},
20 |     {path: '/login', component: Login},
21 |     {
22 |         path: '',
23 |         component: Wrapper,
24 |         children: [
25 |             {path: '', component: Dashboard},
26 |             {path: '/profile', component: Profile},
27 |             {path: '/users', component: Users},
28 |             {path: '/users/create', component: UserCreate},
29 |             {path: '/users/:id/edit', component: UserEdit},
30 |             {path: '/roles', component: Roles},
31 |             {path: '/roles/create', component: RoleCreate},
32 |             {path: '/roles/:id/edit', component: RoleEdit},
33 |             {path: '/products', component: Products},
34 |             {path: '/products/create', component: ProductCreate},
35 |             {path: '/products/:id/edit', component: ProductEdit},
36 |             {path: '/orders', component: Orders},
37 |         ]
38 |     }
39 | ]
40 | 
41 | const router = createRouter({
42 |     history: createWebHistory(process.env.BASE_URL),
43 |     routes
44 | })
45 | 
46 | export default router
47 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/src/store/UserModule.ts:
--------------------------------------------------------------------------------
 1 | import {User} from "@/models/user";
 2 | import {Commit} from "vuex";
 3 | 
 4 | export default {
 5 |     namespaced: true,
 6 |     state: {
 7 |         user: new User()
 8 |     },
 9 |     mutations: {
10 |         SET_USER: (state: { user: User }, user: User) => state.user = user
11 |     },
12 |     actions: {
13 |         setUser: ({commit}: { commit: Commit }, user: User) => commit('SET_USER', user)
14 |     },
15 | }
16 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | import {createStore} from 'vuex'
 2 | import UserModule from "@/store/UserModule";
 3 | 
 4 | export default createStore({
 5 |     state: {},
 6 |     mutations: {},
 7 |     actions: {},
 8 |     modules: {
 9 |         User: UserModule
10 |     }
11 | })
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "module": "esnext",
 5 |     "strict": true,
 6 |     "jsx": "preserve",
 7 |     "importHelpers": true,
 8 |     "moduleResolution": "node",
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "sourceMap": true,
13 |     "baseUrl": ".",
14 |     "types": [
15 |       "webpack-env"
16 |     ],
17 |     "paths": {
18 |       "@/*": [
19 |         "src/*"
20 |       ]
21 |     },
22 |     "lib": [
23 |       "esnext",
24 |       "dom",
25 |       "dom.iterable",
26 |       "scripthost"
27 |     ]
28 |   },
29 |   "include": [
30 |     "src/**/*.ts",
31 |     "src/**/*.tsx",
32 |     "src/**/*.vue",
33 |     "tests/**/*.ts",
34 |     "tests/**/*.tsx"
35 |   ],
36 |   "exclude": [
37 |     "node_modules"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------