├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── deploy.sh
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── components
    │   ├── Loader.vue
    │   └── Pagination.vue
    ├── config
    │   └── env.js
    └── main.js
└── vue.config.js


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


--------------------------------------------------------------------------------
/.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 | # Vue Pagination with loader, axios REST API call without any external libraries
 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 | 
14 | ## <g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">🎉 </g-emoji> [Demo Link](https://jebasuthan.github.io/vue-pagination/)  <g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">🎉</g-emoji>
15 | 
16 | ## Features available in the applilcation:
17 | 1. Individual components
18 | 2. Loader added
19 | 3. Pagination added
20 | 4. No external libraries
21 | 5. REST API implemented
22 | 6. Pagination with records per page and goto page options
23 | 7. SCSS styles
24 | 
25 | 
26 | ## Screenshots
27 | ### List with multiple pagination options
28 | ![Screenshot](https://user-images.githubusercontent.com/3702438/142559810-943ba84f-9f6f-4189-9f76-76540f3fbc1f.png)
29 | 
30 | ![Demo](https://user-images.githubusercontent.com/3702438/142564944-01e82c6e-87b9-4713-bece-b423d36f0d7d.gif)
31 | 


--------------------------------------------------------------------------------
/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 | # abort on errors
 3 | set -e
 4 | # build
 5 | npm run build
 6 | # navigate into the build output directory
 7 | cd dist
 8 | # if you are deploying to a custom domain
 9 | # echo 'www.example.com' > CNAME
10 | git init
11 | git add -A
12 | git commit -m 'deploy'
13 | git push -f git@github.com:Jebasuthan/vue-pagination.git master:gh-pages
14 | cd -


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-pagination",
 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 |     "deploy": "sh deploy.sh"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^0.24.0",
13 |     "core-js": "^3.6.5",
14 |     "vue": "^2.6.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-service": "~4.5.0",
20 |     "@vue/eslint-config-standard": "^5.1.2",
21 |     "babel-eslint": "^10.1.0",
22 |     "eslint": "^6.7.2",
23 |     "eslint-plugin-import": "^2.20.2",
24 |     "eslint-plugin-node": "^11.1.0",
25 |     "eslint-plugin-promise": "^4.2.1",
26 |     "eslint-plugin-standard": "^4.0.0",
27 |     "eslint-plugin-vue": "^6.2.2",
28 |     "node-sass": "^4.12.0",
29 |     "sass-loader": "^8.0.2",
30 |     "vue-template-compiler": "^2.6.11"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jebasuthan/vue-pagination/3f8995586e632ffe999174cf2dc4d09fcc16571a/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 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Loader :loading="showLoader" />
  4 |     <h2>Vue Pagination</h2>
  5 |     <ul class="flex-container">
  6 |       <li v-for="item in listItems" :key="item.id" class="flex-item">
  7 |         <h4>Passenger: {{item.name}}</h4>
  8 |         <h4>Airline: {{item.airline[0] && item.airline[0].name}}</h4>
  9 |         <h4>Country: {{item.airline[0] && item.airline[0].country}}</h4>
 10 |         <img :src="item.airline[0] && item.airline[0].logo" />
 11 |       </li>
 12 |       <li v-if="listItems.length === 0" class="flex-item center">No Record Found</li>
 13 |     </ul>
 14 |     <ul class="showItems">
 15 |       <li>Show Items:
 16 |         <select @change="onChangeRecordsPerPage" v-model="recordsPerPage">
 17 |           <option :value="10">10</option>
 18 |           <option :value="20">20</option>
 19 |           <option :value="30">30</option>
 20 |           <option :value="40">40</option>
 21 |           <option :value="50">50</option>
 22 |         </select>
 23 |       </li>
 24 |       <li>
 25 |         Go to Page <input type="text" v-model="enterpageno"><button type="button" @click.prevent="gotoPage">Go</button>
 26 |       </li>
 27 |     </ul>
 28 |     <Pagination v-if="listItems" :total-pages="totalPages" :per-page="recordsPerPage" :current-page="page" @pagechanged="onPageChange" />
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 | import axios from 'axios'
 34 | import Pagination from './components/Pagination'
 35 | import Loader from './components/Loader'
 36 | import { baseApiURL } from '@/config/env'
 37 | 
 38 | export default {
 39 |   components: {
 40 |     Pagination,
 41 |     Loader
 42 |   },
 43 |   data () {
 44 |     return {
 45 |       showLoader: false,
 46 |       listItems: [],
 47 |       page: 1,
 48 |       totalPages: 0,
 49 |       totalRecords: 0,
 50 |       recordsPerPage: 10,
 51 |       enterpageno: ''
 52 |     }
 53 |   },
 54 |   created () {
 55 |     this.loadListItem()
 56 |   },
 57 |   methods: {
 58 |     loadListItem () {
 59 |       this.showLoader = true
 60 |       axios.get(`${baseApiURL}/v1/passenger?page=${this.page}&size=${this.recordsPerPage}`)
 61 |         .then(response => {
 62 |           console.log('response', response)
 63 |           this.showLoader = false
 64 |           this.listItems = response.data.data
 65 |           this.totalPages = Math.ceil(response.data.totalPassengers / this.recordsPerPage) // Calculate total records
 66 |           this.totalRecords = response.data.totalPassengers
 67 |         })
 68 |     },
 69 |     onPageChange (page) {
 70 |       this.page = page
 71 |       this.loadListItem()
 72 |     },
 73 |     onChangeRecordsPerPage () {
 74 |       this.loadListItem()
 75 |     },
 76 |     gotoPage () {
 77 |       if (!isNaN(parseInt(this.enterpageno))) {
 78 |         this.page = parseInt(this.enterpageno)
 79 |         this.loadListItem()
 80 |       }
 81 |     }
 82 |   }
 83 | }
 84 | 
 85 | </script>
 86 | 
 87 | <style lang="scss">
 88 | #app {
 89 |   font-family: Avenir, Helvetica, Arial, sans-serif;
 90 |   -webkit-font-smoothing: antialiased;
 91 |   -moz-osx-font-smoothing: grayscale;
 92 |   text-align: center;
 93 |   color: #2c3e50;
 94 |   margin-top: 60px;
 95 | }
 96 | h2 {
 97 |   text-align: center;
 98 | }
 99 | ul li {
100 |   list-style-type: none;
101 | }
102 | ul.flex-container {
103 |   padding: 0;
104 |   margin: 0;
105 |   list-style-type: none;
106 |   display: -webkit-box;
107 |   display: -moz-box;
108 |   display: -ms-flexbox;
109 |   display: -webkit-flex;
110 |   display: flex;
111 |   -webkit-flex-flow: row wrap;
112 |   flex-direction: row wrap;
113 |   flex-wrap: wrap;
114 |   justify-content: space-around;
115 |   .flex-item {
116 |     background: tomato;
117 |     width: calc(100% / 5.5);
118 |     padding: 5px;
119 |     height: auto;
120 |     margin-top: 10px;
121 |     color: white;
122 |     font-weight: bold;
123 |     text-align: center;
124 |   }
125 |   img {
126 |     display: initial;
127 |     width: 200px;
128 |   }
129 | }
130 | .showItems {
131 |   display: inline-block;
132 |   margin-left: -35px;
133 |   li {
134 |     list-style-type: none;
135 |     display: inline-block;
136 |     margin-left: 10px;
137 |   }
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/src/components/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div tabindex="0" class="loader-overlay is-active" :class="{ 'is-full-page': isFullPage }" aria-label="Loading" v-show="loading">
 3 |     <div class="loader-background"></div>
 4 |     <svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height" :stroke="color">
 5 |       <g fill="none" fill-rule="evenodd">
 6 |         <g transform="translate(1 1)" stroke-width="2">
 7 |           <circle stroke-opacity=".25" cx="18" cy="18" r="18"/>
 8 |           <path d="M36 18c0-9.94-8.06-18-18-18">
 9 |             <animateTransform
10 |               attributeName="transform"
11 |               type="rotate"
12 |               from="0 18 18"
13 |               to="360 18 18"
14 |               dur="0.8s"
15 |               repeatCount="indefinite"/>
16 |           </path>
17 |         </g>
18 |       </g>
19 |     </svg>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'loader',
26 |   props: {
27 |     loading: {
28 |       type: Boolean,
29 |       default: false
30 |     },
31 |     isActive: {
32 |       type: Boolean,
33 |       default: false
34 |     },
35 |     isFullPage: {
36 |       type: Boolean,
37 |       default: true
38 |     },
39 |     color: {
40 |       type: String,
41 |       default: '#39C6F2'
42 |     },
43 |     height: {
44 |       type: Number,
45 |       default: 64
46 |     },
47 |     width: {
48 |       type: Number,
49 |       default: 64
50 |     }
51 |   }
52 | }
53 | </script>
54 | <style lang="scss" scoped>
55 |   .loader-overlay {
56 |     bottom: 0;
57 |     left: 0;
58 |     position: absolute;
59 |     right: 0;
60 |     top: 0;
61 |     align-items: center;
62 |     display: none;
63 |     justify-content: center;
64 |     overflow: hidden;
65 |     z-index: 9999;
66 |     &.is-active {
67 |       display: flex;
68 |     }
69 |     &.is-full-page {
70 |       z-index: 9999;
71 |       position: fixed;
72 |     }
73 |     .loader-background {
74 |       bottom: 0;
75 |       left: 0;
76 |       position: absolute;
77 |       right: 0;
78 |       top: 0;
79 |       background: white;
80 |       opacity: 0.5;
81 |     }
82 |   }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/components/Pagination.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ul class="pagination">
  3 |     <li class="pagination-item">
  4 |       <a href="#" @click.prevent="onClickFirstPage" :class="isInFirstPage? 'disabled':''" :disabled="isInFirstPage">First</a>
  5 |     </li>
  6 |     <li class="pagination-item">
  7 |       <a href="#" @click.prevent="onClickPreviousPage" :class="isInFirstPage? 'disabled':''" :disabled="isInFirstPage">«</a>
  8 |     </li>
  9 |     <li :key="page.id" v-for="page in pages" class="pagination-item">
 10 |       <a href="#" @click.prevent="onClickPage(page.name)" :disabled="page.isDisabled"
 11 |         :class="{ active: isPageActive(page.name) }">{{ page.name }}</a>
 12 |     </li>
 13 |     <li class="pagination-item">
 14 |       <a href="#" @click.prevent="onClickNextPage" :class="isInLastPage? 'disabled':''" :disabled="isInLastPage">»</a>
 15 |     </li>
 16 |     <li class="pagination-item">
 17 |       <a href="#" @click.prevent="onClickLastPage" :class="isInLastPage? 'disabled':''" :disabled="isInLastPage">Last</a>
 18 |     </li>
 19 |   </ul>
 20 | </template>
 21 | 
 22 | <script>
 23 | export default {
 24 |   name: 'pagination',
 25 |   props: {
 26 |     maxVisibleButtons: {
 27 |       type: Number,
 28 |       required: false,
 29 |       default: 3
 30 |     },
 31 |     totalPages: {
 32 |       type: Number,
 33 |       required: true
 34 |     },
 35 |     perPage: {
 36 |       type: Number,
 37 |       required: true
 38 |     },
 39 |     currentPage: {
 40 |       type: Number,
 41 |       required: true
 42 |     }
 43 |   },
 44 |   computed: {
 45 |     isInFirstPage () {
 46 |       return this.currentPage === 1
 47 |     },
 48 |     isInLastPage () {
 49 |       if (this.totalPages === 0) {
 50 |         return true
 51 |       }
 52 |       return this.currentPage === this.totalPages
 53 |     },
 54 |     startPage () {
 55 |       // When on the first page
 56 |       if (this.currentPage === 1) {
 57 |         return 1
 58 |       }
 59 |       // When on the last page
 60 |       if (this.totalPages < this.maxVisibleButtons) {
 61 |         return 1
 62 |       }
 63 |       if (this.currentPage === this.totalPages) {
 64 |         return this.totalPages - this.maxVisibleButtons + 1
 65 |       }
 66 |       // When in between
 67 |       return this.currentPage - 1
 68 |     },
 69 |     endPage () {
 70 |       if (this.totalPages === 0) {
 71 |         return 1
 72 |       }
 73 |       if (this.totalPages < this.maxVisibleButtons) {
 74 |         return this.totalPages
 75 |       }
 76 |       return Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages)
 77 |     },
 78 |     pages () {
 79 |       const range = []
 80 |       for (let i = this.startPage; i <= this.endPage; i++) {
 81 |         range.push({
 82 |           name: i,
 83 |           isDisabled: i === this.currentPage
 84 |         })
 85 |       }
 86 |       return range
 87 |     }
 88 |   },
 89 |   methods: {
 90 |     onClickFirstPage () {
 91 |       if (this.isInFirstPage) {
 92 |         return false
 93 |       }
 94 |       this.$emit('pagechanged', 1)
 95 |     },
 96 |     onClickPreviousPage () {
 97 |       if (this.isInFirstPage) {
 98 |         return false
 99 |       }
100 |       this.$emit('pagechanged', this.currentPage - 1)
101 |     },
102 |     onClickPage (page) {
103 |       this.$emit('pagechanged', page)
104 |     },
105 |     onClickNextPage () {
106 |       if (this.isInLastPage) {
107 |         return false
108 |       }
109 |       this.$emit('pagechanged', this.currentPage + 1)
110 |     },
111 |     onClickLastPage () {
112 |       console.log('onClickLastPage')
113 |       if (this.isInLastPage) {
114 |         return false
115 |       }
116 |       this.$emit('pagechanged', this.totalPages)
117 |     },
118 |     isPageActive (page) {
119 |       return this.currentPage === page
120 |     }
121 |   }
122 | }
123 | </script>
124 | <style lang="scss" scoped>
125 |   .pagination {
126 |     list-style-type: none;
127 |     float: right;
128 |     margin: 10px 0;
129 |     .pagination-item {
130 |       display: inline-block;
131 |       color: #ddd;
132 |       a {
133 |         text-decoration: none;
134 |         margin: 5px;
135 |         color: #2c3e50;
136 |       }
137 |       a.disabled {
138 |         color: #ccc;
139 |         cursor: no-drop;
140 |       }
141 |       .active {
142 |         background-color: tomato;
143 |         color: #ffffff !important;
144 |         font-weight: bold;
145 |         padding: 3px 8px;
146 |       }
147 |     }
148 |   }
149 |   button[disabled], html input[disabled] {
150 |     cursor: default;
151 |     color: lightgray;
152 |   }
153 | </style>
154 | 


--------------------------------------------------------------------------------
/src/config/env.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * baseAPIUrl
3 |  */
4 | const baseApiURL = 'https://api.instantwebtools.net'
5 | 
6 | export {
7 |   baseApiURL
8 | }
9 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: process.env.NODE_ENV === 'production'
3 |     ? '/vue-pagination/'
4 |     : '/'
5 | }
6 | 


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