├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── deploy.sh
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── api
    │   └── index.ts
    ├── main.ts
    ├── plugins
    │   └── vuetify.ts
    ├── router
    │   └── index.ts
    ├── shims-tsx.d.ts
    ├── shims-vue.d.ts
    ├── types
    │   ├── user.interface.ts
    │   └── vuedraggable.d.ts
    └── views
    │   ├── PageEdit
    │       └── PageEdit.vue
    │   └── PageTable
    │       └── PageTable.vue
├── tsconfig.json
├── vue.config.js
└── yarn.lock


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


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/airbnb',
 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 |   },
18 | };
19 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuetify-table-drag-article
 2 | 
 3 | ### article - https://dev.to/andynoir/draggable-table-row-with-vuejs-vuetify-and-sortablejs-1o7l
 4 | ### live preview - https://andynoir.github.io/vuetify-table-drag/#/
 5 | 
 6 | ## Project setup
 7 | ```
 8 | yarn install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | ```
13 | yarn serve
14 | ```
15 | 
16 | ### Compiles and minifies for production
17 | ```
18 | yarn build
19 | ```
20 | 
21 | ### Lints and fixes files
22 | ```
23 | yarn lint
24 | ```
25 | 
26 | ### Customize configuration
27 | See [Configuration Reference](https://cli.vuejs.org/config/).
28 | 


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


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # abort on errors
 4 | set -e
 5 | 
 6 | # build
 7 | npm run build
 8 | 
 9 | # navigate into the build output directory
10 | cd dist
11 | 
12 | git init
13 | git add -A
14 | git commit -m 'deploy'
15 | 
16 | git push -f git@github.com:andynoir/vuetify-table-drag.git master:gh-pages
17 | 
18 | cd -


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuetify-table-drag-article",
 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 |     "axios": "^0.19.2",
12 |     "core-js": "^3.6.5",
13 |     "vue": "^2.6.11",
14 |     "vue-class-component": "^7.2.3",
15 |     "vue-property-decorator": "^8.4.2",
16 |     "vue-router": "^3.2.0",
17 |     "vuedraggable": "^2.23.2",
18 |     "vuetify": "^2.2.11"
19 |   },
20 |   "devDependencies": {
21 |     "@typescript-eslint/eslint-plugin": "^2.33.0",
22 |     "@typescript-eslint/parser": "^2.33.0",
23 |     "@vue/cli-plugin-babel": "~4.4.0",
24 |     "@vue/cli-plugin-eslint": "~4.4.0",
25 |     "@vue/cli-plugin-router": "~4.4.0",
26 |     "@vue/cli-plugin-typescript": "~4.4.0",
27 |     "@vue/cli-service": "~4.4.0",
28 |     "@vue/eslint-config-airbnb": "^5.0.2",
29 |     "@vue/eslint-config-typescript": "^5.0.2",
30 |     "eslint": "^6.7.2",
31 |     "eslint-plugin-import": "^2.20.2",
32 |     "eslint-plugin-vue": "^6.2.2",
33 |     "node-sass": "^4.12.0",
34 |     "sass": "^1.19.0",
35 |     "sass-loader": "^8.0.2",
36 |     "typescript": "~3.9.3",
37 |     "vue-cli-plugin-vuetify": "~2.0.5",
38 |     "vue-template-compiler": "^2.6.11",
39 |     "vuetify-loader": "^1.3.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gaisinskii/vuetify-table-drag/ad060bdc4557cb2ce9bf2f4280f88abc74e56ac8/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 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 rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <router-view/>
 4 |   </v-app>
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import { Component, Vue } from 'vue-property-decorator';
 9 | 
10 | @Component({})
11 | export default class App extends Vue {
12 | 
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/api/index.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | const api = axios.create({
4 |   baseURL: 'https://jsonplaceholder.typicode.com/',
5 | });
6 | 
7 | export default api;
8 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import router from './router';
 4 | import vuetify from './plugins/vuetify';
 5 | 
 6 | Vue.config.productionTip = false;
 7 | 
 8 | new Vue({
 9 |   router,
10 |   vuetify,
11 |   render: (h) => h(App),
12 | }).$mount('#app');
13 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import Vuetify from 'vuetify/lib';
3 | 
4 | Vue.use(Vuetify);
5 | 
6 | export default new Vuetify({
7 | });
8 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter, { RouteConfig } from 'vue-router';
 3 | import PageTable from '@/views/PageTable/PageTable.vue';
 4 | import PageEdit from '@/views/PageEdit/PageEdit.vue';
 5 | 
 6 | Vue.use(VueRouter);
 7 | 
 8 | const routes: Array<RouteConfig> = [
 9 |   {
10 |     path: '/',
11 |     name: 'PageTable',
12 |     component: PageTable,
13 |   },
14 |   {
15 |     path: '/edit/:id',
16 |     name: 'PageEdit',
17 |     component: PageEdit,
18 |   },
19 | ];
20 | 
21 | const router = new VueRouter({
22 |   routes,
23 | });
24 | 
25 | export default router;
26 | 


--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
 1 | import Vue, { VNode } from 'vue';
 2 | 
 3 | declare global {
 4 |   namespace JSX {
 5 |     // tslint:disable no-empty-interface
 6 |     interface Element extends VNode {}
 7 |     // tslint:disable no-empty-interface
 8 |     interface ElementClass extends Vue {}
 9 |     interface IntrinsicElements {
10 |       [elem: string]: any;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import Vue from 'vue';
3 | 
4 |   export default Vue;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/types/user.interface.ts:
--------------------------------------------------------------------------------
1 | export interface User {
2 |     id: number;
3 |     name: string;
4 |     username: string;
5 |     email: string;
6 |     website: string;
7 | }
8 | 


--------------------------------------------------------------------------------
/src/types/vuedraggable.d.ts:
--------------------------------------------------------------------------------
 1 | declare module 'vuedraggable' {
 2 |   import Vue from 'vue';
 3 | 
 4 |   class Draggable extends Vue {
 5 |     static install(vue: typeof Vue): void;
 6 | 
 7 |     noTransitionOnDrag: boolean;
 8 | 
 9 |     element: string;
10 | 
11 |     tag: string;
12 | 
13 |     options: object;
14 | 
15 |     componentData: object;
16 | 
17 |     clone: any;
18 | 
19 |     move: any;
20 | 
21 |     list: any[];
22 | 
23 |     value: any[];
24 |   }
25 | 
26 |   export = Draggable;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/views/PageEdit/PageEdit.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main class="page page--edit">
  3 |     <v-progress-circular
  4 |       v-if="loading"
  5 |       indeterminate
  6 |       color="primary"
  7 |       class="page__loader"
  8 |     />
  9 |     <v-form
 10 |       v-else
 11 |       v-model="formIsValid"
 12 |       class="page__form"
 13 |       @submit.prevent="updateUser()"
 14 |     >
 15 |       <v-text-field
 16 |         v-for="(value, key, index) in user"
 17 |         :key="index"
 18 |         v-model="user[key]"
 19 |         :label="key.toUpperCase()"
 20 |         class="page__input"
 21 |         outlined
 22 |       >
 23 |       </v-text-field>
 24 |         <v-btn
 25 |           type="sumbit"
 26 |           color="green"
 27 |           class="page__btn"
 28 |           dark
 29 |         >
 30 |           Update
 31 |         </v-btn>
 32 |     </v-form>
 33 |   </main>
 34 | </template>
 35 | 
 36 | <script lang="ts">
 37 | import { Vue, Component } from 'vue-property-decorator';
 38 | 
 39 | import api from '@/api';
 40 | 
 41 | import { AxiosResponse, AxiosError } from 'axios';
 42 | 
 43 | import { User } from '@/types/user.interface';
 44 | 
 45 | @Component({})
 46 | export default class PageEdit extends Vue {
 47 |   private loading = false;
 48 | 
 49 |   private formIsValid = true;
 50 | 
 51 |   private user = {} as User;
 52 | 
 53 |   private async fetchSingleUser(id: string) {
 54 |     this.loading = true;
 55 |     await api
 56 |       .get(`/users/${id}`)
 57 |       .then((data: AxiosResponse) => {
 58 |         const computedUser = (({
 59 |           id: userId, name, username, email, website,
 60 |         }: User) => ({
 61 |           id: userId,
 62 |           name,
 63 |           username,
 64 |           email,
 65 |           website,
 66 |         }))(data.data);
 67 |         this.user = computedUser;
 68 |       })
 69 |       .catch((error: AxiosError) => {
 70 |         console.log(error);
 71 |       })
 72 |       .finally(() => {
 73 |         this.loading = false;
 74 |       });
 75 |   }
 76 | 
 77 |   created() {
 78 |     if (this.$route.params.id) {
 79 |       this.fetchSingleUser(this.$route.params.id);
 80 |     }
 81 |   }
 82 | }
 83 | </script>
 84 | 
 85 | <style lang="scss">
 86 | .page--edit {
 87 |   .page {
 88 |     &__form {
 89 |       max-width: 400px;
 90 |       margin: 0 auto;
 91 |       margin-top: 20px;
 92 |     }
 93 |     &__btn {
 94 |       display: block;
 95 |       margin: 0 auto;
 96 |     }
 97 |   }
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/views/PageTable/PageTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <main class="page page--table">
  3 |     <v-data-table
  4 |       :headers="tableHeaders"
  5 |       :items="tableItems"
  6 |       :loading="loading"
  7 |       item-key="id"
  8 |       :show-select="false"
  9 |       :disable-pagination="true"
 10 |       :hide-default-footer="true"
 11 |       class="page__table"
 12 |     >
 13 |       <template v-slot:body="props">
 14 |         <draggable
 15 |           :list="props.items"
 16 |           tag="tbody"
 17 |         >
 18 |           <tr
 19 |             v-for="(user, index) in props.items"
 20 |             :key="index"
 21 |           >
 22 |             <td>
 23 |               <v-icon
 24 |                 small
 25 |                 class="page__grab-icon"
 26 |               >
 27 |                 mdi-arrow-all
 28 |               </v-icon>
 29 |             </td>
 30 |             <td> {{ index + 1 }} </td>
 31 |             <td> {{ user.id }} </td>
 32 |             <td> {{ user.name }} </td>
 33 |             <td> {{ user.username }} </td>
 34 |             <td> {{ user.email }} </td>
 35 |             <td> {{ user.website }} </td>
 36 |             <td>
 37 |               <v-icon
 38 |                 small
 39 |                 @click="editUser(user.id)"
 40 |               >
 41 |                 mdi-pencil
 42 |               </v-icon>
 43 |             </td>
 44 |           </tr>
 45 |         </draggable>
 46 |       </template>
 47 |     </v-data-table>
 48 |   </main>
 49 | </template>
 50 | 
 51 | <script lang="ts">
 52 | import { Vue, Component } from 'vue-property-decorator';
 53 | 
 54 | import Draggable from 'vuedraggable';
 55 | 
 56 | import api from '@/api';
 57 | 
 58 | import { AxiosResponse, AxiosError } from 'axios';
 59 | 
 60 | import { User } from '@/types/user.interface';
 61 | 
 62 | @Component({
 63 |   components: {
 64 |     Draggable,
 65 |   },
 66 | })
 67 | export default class PageTable extends Vue {
 68 |   private tableItems: User[] = []
 69 | 
 70 |   private loading = false;
 71 | 
 72 |   private tableHeaders = [
 73 |     { text: '', sortable: false },
 74 |     { text: '#', sortable: false },
 75 |     { text: 'ID', value: 'id', sortable: false },
 76 |     { text: 'NAME', value: 'name', sortable: false },
 77 |     {
 78 |       text: 'USERNAME', value: 'username', sortable: false,
 79 |     },
 80 |     { text: 'EMAIL', value: 'email', sortable: false },
 81 |     { text: 'WEBSITE', value: 'website', sortable: false },
 82 |     { text: 'ACTIONS', sortable: false },
 83 |   ];
 84 | 
 85 |   private editUser(userId: number) {
 86 |     this.$router.push({ name: 'PageEdit', params: { id: `${userId}` } });
 87 |   }
 88 | 
 89 |   public async fetchAllUsers() {
 90 |     this.loading = true;
 91 |     await api
 92 |       .get('/users')
 93 |       .then((data: AxiosResponse) => {
 94 |         const computedArrayOfUsers = data.data.map((user: User) => ({
 95 |           id: user.id,
 96 |           name: user.name,
 97 |           username: user.username,
 98 |           email: user.email,
 99 |           website: user.website,
100 |         }));
101 |         this.tableItems = computedArrayOfUsers;
102 |       })
103 |       .catch((error: AxiosError) => {
104 |         console.log(error);
105 |       })
106 |       .finally(() => {
107 |         this.loading = false;
108 |       });
109 |   }
110 | 
111 |   created() {
112 |     this.fetchAllUsers();
113 |   }
114 | }
115 | </script>
116 | 
117 | <style lang="scss">
118 | .page--table {
119 |   .page {
120 |     &__table {
121 |       margin-top: 20px;
122 |     }
123 |     &__grab-icon {
124 |       cursor: move;
125 |     }
126 |   }
127 | }
128 | </style>
129 | 


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


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: process.env.NODE_ENV === 'production' ? '/vuetify-table-drag/' : '/',
3 |   transpileDependencies: ['vuetify'],
4 | };
5 | 


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