innoboxrr-vue-datatable 1.0.0

package/index.js

@@ -0,0 +1,3 @@
+import DataTable from './src/DataTable.vue';
+
+export default DataTable;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "innoboxrr-vue-datatable",
+  "version": "1.0.0",
+  "description": "Datatable para vue3",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/innoboxrr/vue-datatable.git"
+  },
+  "keywords": [
+    "vue3",
+    "datatable",
+    "table",
+    "crud"
+  ],
+  "author": "Homero Raul Vargas Cruz",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/innoboxrr/vue-datatable/issues"
+  },
+  "homepage": "https://github.com/innoboxrr/vue-datatable#readme"
+}

package/src/DataTable.vue

@@ -0,0 +1,545 @@
+<template>
+	
+	<div>
+
+		<div v-if="showTopbar">
+
+			<!-- Tools -->
+			<div class="uk-card uk-card-body">
+
+				<div uk-grid>
+					
+					<!-- Actions -->
+					<div class="uk-width-expand@m" v-if="hasActions">
+							
+						<!-- Action Button-->
+						<button 
+							class="uk-button button uk-button-large uk-border-rounded uk-box-shadow-medium uk-box-shadow-hover-small white-text uk-text-bold"
+							@click="actionButtonClicked(crudActions)">
+							
+							Acciones
+
+						</button>
+
+						<!-- Dropdown Actions-->
+						<nav-dropdown-component id="actionCrudDropdown" pos="right">
+
+							<li v-for="action in crudActions" :key="action.id">
+
+								<template v-if="action.route">
+
+									<icon-route-component
+										v-if="action.policy"
+		                                :name="action.params.to.name" 
+		                                :params="{...action.params.to.params, ...extraParams}"
+		                                :icon="action.icon"
+		                                :text="action.name" />
+
+		                            <disabled-link-component 
+		                            	v-else
+		                            	:icon="action.icon"
+		                            	:text="action.name"/> 
+
+								</template>
+
+								<template v-else>
+
+									<icon-link-component 
+										v-if="action.policy"
+										:icon="action.icon"
+										:text="action.name" 
+										@click="actionClicked(action) , closeDropdown($event)" />
+
+									<disabled-link-component 
+		                            	v-else
+		                            	:icon="action.icon"
+		                            	:text="action.name"/> 
+
+								</template>
+
+							</li>
+
+						</nav-dropdown-component>
+
+					</div>
+
+					<div v-if="hasFilter" class="uk-width-auto@m">
+						
+						<div class="uk-grid-divider uk-child-width-expand uk-text-center" uk-grid>
+
+						    <div>
+								
+								<a 
+						    		class="uk-text-right cursor"
+						    		:uk-tooltip="`title: ${'Update results'}`"
+						    		@click="updateFilters">
+								
+									<i class="fas fa-sync tools-icon"></i>
+								
+								</a>
+
+						    </div>
+
+						    <!-- Filter -->
+							<div>
+								
+								<a 
+						    		class="uk-text-right cursor" 
+						    		uk-toggle="target: .filter-form; animation: uk-animation-scale-up;"
+						    		:uk-tooltip="`title: Buscar">
+								
+									<i class="fas fa-sliders-h tools-icon"></i>
+								
+								</a>
+
+						    </div>
+
+						</div>
+
+					</div>
+
+				</div>
+
+			</div>
+
+			<!-- Filter Form-->
+			<div 
+				v-if="hasFilter"
+				class="filter-form uk-card uk-card-body uk-padding-remove-top" 
+				hidden>
+				
+				<slot name="filterForm"></slot>
+
+			</div>
+
+		</div>
+
+		<!-- Table -->
+		<div 
+			class="uk-container uk-container-expand"
+			:class="{
+				'ptb-20': showTopbar
+			}">
+
+			<div 
+				class="uk-card uk-card-body uk-border-rounded uk-overflow-auto uk-padding-small"
+				:class="{
+					'uk-card-default': cardWrapper
+				}">
+				
+				<data-table-component
+					:actions="hasActions"
+					:data-table="dataTable"
+					:extra-params="extraParams"
+					@sortColumn="sortColumn"
+					@actionButtonClicked="actionButtonClicked"
+					@actionClicked="actionClicked" />
+
+				<select-pagination-component
+					:meta="pagination.meta"
+					:links="pagination.links"
+					@updatePage="updatePage" />
+
+			</div>
+
+		</div>
+
+	</div>
+
+</template>
+
+<script>
+
+	import NavDropdownComponent from './components/NavDropdownComponent'
+	import IconRouteComponent from './components/IconRouteComponent'
+	import IconLinkComponent from './components/IconLinkComponent'
+	import DisabledLinkComponent from './components/DisabledLinkComponent'
+	import DataTableComponent from './components/DataTableComponent'
+	import SelectPaginationComponent from './components/SelectPaginationComponent'
+	
+	export default {
+
+		components: {
+			
+			NavDropdownComponent,
+			
+			IconRouteComponent,
+			
+			IconLinkComponent,
+			
+			DisabledLinkComponent,
+			
+			DataTableComponent,
+			
+			SelectPaginationComponent
+
+		},
+
+		props: {
+
+			dataUrl: {
+				type: String,
+				required: true
+			},
+
+			model: {
+				type: Object,
+				required: true
+			},
+
+			policyUrl: {
+				type: String,
+				required: true
+			},
+
+			showTopbar:{
+				type: Boolean,
+				default: true
+			},
+
+			hasActions: {
+				type: Boolean,
+				default: true,
+			},
+
+			hasFilter: {
+				type: Boolean,
+				default: true,
+			},
+
+			formFilters: {
+				type: Object,
+				default: {}
+			},
+
+			externalFilters: {
+				type: Object,
+				default: {}
+			},
+
+			extraParams: {
+				type: Object,
+				default: {}
+			},
+
+			hideColumns: {
+				type: Array,
+				default: []
+			},
+
+			cardWrapper: {
+				type: Boolean,
+				default: true
+			}
+
+		},
+
+		mounted() {
+
+			this.fetchData();
+
+		},
+
+		data() {
+
+			return {
+			
+				crudActions: this.model.crudActions(),
+			
+				dataTable: {
+					
+					head: this.dataTableHead(),
+
+					body: []
+
+				},
+			
+				pagination: {
+					
+					meta: [],
+					
+					links: []
+
+				},
+			
+				sort: this.model.dataTableSort(),
+			
+				orderBy: 'id',
+			
+				page: 1,
+			
+				fetchDataAttempts: 0,
+
+				fetchPoliciesAttempts: 0,
+			
+			}
+
+		},
+
+		watch: {
+
+			formFilters: {
+
+				handler(val, oldVal) {
+
+					this.page = 1;
+
+			    	this.updateFilters();
+
+			    },
+
+			    deep: true
+
+			},
+
+			externalFilters: {
+
+				handler(val, oldVal) {
+
+					if(!_.isEqual(val, oldVal)) 
+						this.updateFilters();
+
+			    },
+
+			    deep: true
+
+			}
+
+		},
+
+		methods: {
+
+			dataTableHead() {
+
+				// NOTA: En este punto puede existir una oportunidad para sobreescribir las columnas del datatable
+
+				let cols = this.model.dataTableHead();
+
+				let rm = this.hideColumns;
+
+				for( let i = cols.length - 1; i >= 0; i--) {
+
+				 	for( let j = 0; j < rm.length; j++) {
+				 	
+				 	    if(cols[i] && (cols[i].id === rm[j].id)){
+				    
+				    		cols.splice(i, 1);
+				    
+				    	}
+				    
+				    }
+
+				}
+
+				return cols;
+
+			},
+
+			fetchData() {
+
+				axios.post(this.dataUrl, this.getFilters()).then( res => {
+
+					this.fetchDataAttempts = 0;
+
+					this.dataTable.body = res.data.data;
+					
+					this.pagination.meta = res.data.meta;
+
+					this.pagination.links = res.data.links;
+
+				}).catch(error => {
+
+					console.log(error);
+
+					if(error.response.status == 403) { 
+
+						// this.$router.push({name: "NotAuthorized" });
+
+					} else {
+
+						if(this.fetchDataAttempts <= 3) {
+
+							setTimeout( () => {
+
+								++this.fetchDataAttempts;
+
+								this.fetchData();
+
+							}, 1500);
+
+						}
+
+					}
+
+				});
+
+			},
+
+			getFilters() {
+
+				let formFilters = this.formFilters;
+
+				let params = {
+					_token: csrf_token,
+					managed: true,
+					except_view_any: true,
+				}
+
+				let order = {
+					orderBy: this.orderBy,
+					orderMode: this.sort[this.orderBy]
+				}
+
+				let page = {
+					page: this.page
+				}
+
+				let filters = {
+					...params,
+					...formFilters,
+					...this.externalFilters,
+					...order,
+					...page
+				}
+
+				return filters;
+
+			},
+
+			updateFilters() {
+
+				// permite las restricciones de consulta estén disponible en el estado global de la aplicación
+				this.$store.commit('admin/setCrudFilters', this.getFilters());
+
+				this.fetchData();
+
+			},
+
+			sortColumn(data) {
+
+				if(data.sortable == true) {
+
+					let column_id = data.id;
+
+					// Determinar la columan que va a ordenar los resultados
+					this.orderBy = column_id;
+
+					// Encontrar el orden actual
+					let order = (this.sort[column_id] == 'asc') ? 'desc' : 'asc';
+
+					// Determinar el nuevo orden para la columna dada
+					this.sort[column_id] = order;
+
+					// Solicitar los datos
+					this.updateFilters();
+					
+				}
+
+			},
+
+			updatePage(page) {
+
+				this.page = page;
+
+				this.updateFilters();
+
+			},
+
+			actionClicked(action) {
+
+				this.model[action.callback](action.params).then( res => {
+
+					UIkit.notification({
+						message: res.message,
+						status: 'success'
+					});
+
+					this.updateFilters();
+
+				}).catch( error => {
+
+					UIkit.notification({
+						message: error.message,
+						status: 'danger'
+					});
+
+				});
+
+			},
+
+			actionButtonClicked(actions) {
+
+				// Recuperar el id
+				let id = actions[0].params.id;
+
+				axios.post(this.policyUrl, {
+
+					_token: csrf_token,
+
+					id: id
+
+				}).then(res => {
+
+					this.fetchPoliciesAttempts = 0;
+
+					let policies = res.data;
+
+					actions.forEach( action => {
+
+						if(policies[action.id]) {
+
+							action.policy = true;
+
+						}
+
+					});
+
+				}).catch(error => {
+
+					if(this.fetchPoliciesAttempts <= 3) {
+
+						setTimeout( () => {	
+
+							++this.fetchPoliciesAttempts;
+
+							this.actionButtonClicked(actions);
+
+						}, 1500);
+
+					} else {
+
+						setTimeout( () => {
+
+							this.fetchPoliciesAttempts = 0;
+
+						}, 3000);
+
+					}
+
+				});
+
+			},
+
+			closeDropdown(event){
+			
+				let dropdown = event.target.closest('.uk-dropdown');
+
+				UIkit.dropdown(dropdown).hide(false);
+
+			}
+
+		}
+
+	}
+
+</script>
+
+<style scoped>
+	
+	.tools-icon {
+		font-size: 30px;
+		color: var(--secondary-color);
+	    padding: 10px 15px;
+	}
+
+</style>

package/src/components/DataTableComponent.vue

@@ -0,0 +1,194 @@
+<template>
+
+	<div class="uk-overflow-auto">
+	
+		<table class="uk-table uk-table-divider">
+					    
+		    <thead>
+		    
+		        <tr>
+		            
+		            <th 
+		            	v-for="head in dataTable.head" 
+		            	:key="head.id"
+		            	:id="`th_${head.id}`"
+		            	@click="sortColumn(head)"
+		            	:class="{pointer: head.sortable}">
+		            
+		            	{{ head.value }}
+		            
+		            </th>
+
+		            <th 
+		            	class="uk-table-shrink" 
+		            	v-if="actions"></th>
+
+		        </tr>
+		    
+		    </thead>
+
+		    <tbody>
+		        
+		        <tr v-for="body in dataTable.body" :key="body.id">
+		            
+		        	<td v-for="head in dataTable.head" :key="head.id">
+
+		        		<span 
+		        			v-if="head.html" 
+		        			v-html="setData(head, body)"></span>
+
+		        		<span v-else>{{ setData(head, body) }}</span>
+
+		        	</td>
+
+		            <td v-if="actions">
+
+		            	<button 
+		            		class="uk-button button" 
+		            		@click="actionButtonClicked(body.actions)">
+					
+							<i class="fas fa-cogs"></i>
+					
+						</button>
+						
+						<nav-dropdown-component :id="`dropdown_${body.id}`" pos="left">
+				
+							<li v-for="action in body.actions">
+
+								<template v-if="action.route">
+
+									<icon-route-component
+										v-if="action.policy"
+		                                :name="action.params.to.name" 
+		                                :params="{...action.params.to.params, ...extraParams}"
+		                                :icon="action.icon"
+		                                :text="action.name" />
+
+		                            <disabled-link-component 
+		                            	v-else
+		                            	:icon="action.icon"
+		                            	:text="action.name"/> 
+		                            	
+								</template>
+
+								<template v-else>
+
+									<icon-link-component 
+										v-if="action.policy"
+										:icon="action.icon"
+										:text="action.name" 
+										@click="actionClicked(action), closeDropdown($event)" />
+
+									<disabled-link-component 
+		                            	v-else
+		                            	:icon="action.icon"
+		                            	:text="action.name"/> 
+
+								</template>
+
+							</li>
+
+						</nav-dropdown-component>
+
+		            </td>
+
+		        </tr>
+
+		    </tbody>
+
+		</table>
+
+	</div>
+
+</template>
+
+<script>
+	
+	import NavDropdownComponent from './NavDropdownComponent'
+	import IconRouteComponent from './IconRouteComponent'
+	import IconLinkComponent from './IconLinkComponent'
+	import DisabledLinkComponent from './DisabledLinkComponent'
+
+	export default {
+
+		components: {
+			
+			NavDropdownComponent,
+			
+			IconRouteComponent,
+			
+			IconLinkComponent,
+			
+			DisabledLinkComponent
+
+		},
+
+		props: {
+
+			actions: {
+				type: Boolean,
+				default: false
+			},
+
+			dataTable: {
+				type: [Object, Boolean],
+				required: true
+			},
+
+			extraParams: {
+				type: Object,
+				default: {}
+			},
+
+		},
+
+		emits: ['sortColumn', 'actionButtonClicked', 'actionClicked'],
+
+		methods: {
+
+			sortColumn(data) {
+
+				this.$emit('sortColumn', data);
+
+			},
+
+			actionButtonClicked(data) {
+
+				this.$emit('actionButtonClicked', data);
+
+			},
+
+			actionClicked(data) {
+
+				this.$emit('actionClicked', data);
+
+			},
+
+			setData(head, body) {
+
+				return (typeof head.parser === 'function') ? head.parser(body[head.id]) : body[head.id]
+
+			},
+
+			closeDropdown(event){
+			
+				let dropdown = event.target.closest('.uk-dropdown');
+
+				UIkit.dropdown(dropdown).hide(false);
+
+			}
+
+		}
+
+	}
+
+</script>
+
+<style>
+	
+	.uk-table td {
+	    padding: 12px 14px;
+	    vertical-align: middle;
+	}
+
+</style>

package/src/components/DisabledLinkComponent.vue

@@ -0,0 +1,46 @@
+<template>
+	
+	<a href="#" class="disabled-link" :uk-tooltip="`title: ${ 'This action is not authorized' }; pos:right`">
+							
+		<span 
+			v-if="showIcon"
+			class="uk-margin-small-right uk-icon" 
+			:uk-icon="icon"></span>
+
+		<span>{{ text }}</span>
+
+	</a>
+
+</template>
+
+<script>
+	
+	export default {
+
+		props: {
+
+			icon: {
+				type: String,
+				default: ''
+			},
+
+			text: {
+				type: String,
+				required: true
+			}
+
+		},
+
+		computed: {
+
+			showIcon() {
+
+				return (this.icon != '' && this.icon != undefined);
+
+			}
+
+		}
+
+	}
+
+</script>

package/src/components/IconLinkComponent.vue

@@ -0,0 +1,69 @@
+<template>
+	
+	<a :href="link" :target="target">
+							
+		<span 
+			class="uk-margin-small-right uk-icon" 
+			:uk-icon="iconAttr"
+			:style="iconStyle"></span>
+
+		<span :class="textClass">{{ text }}</span>
+
+	</a>
+
+</template>
+
+
+<script>
+	
+	export default {
+
+		props: {
+			link: {
+				type: String,
+				default: '#'
+			},
+			text: {
+				type: String,
+				required: true
+			},
+			icon: {
+				type: String,
+				required: true
+			},
+			ratio: {
+				type: Number,
+				required: false,
+				default: 1
+			},
+			textClass: {
+				type: String,
+				default: ""
+			},
+			target: {
+				type: String,
+				default: "_self"
+			}
+		},
+
+		computed: {
+
+			iconAttr() {
+
+				return `icon: ${this.icon}; ratio: ${this.ratio};`;
+
+			},
+
+			iconStyle() {
+
+				return {
+					fontSize: (this.ratio * 16) + 'px'
+				}
+
+			}
+
+		}
+
+	}
+
+</script>

package/src/components/IconRouteComponent.vue

@@ -0,0 +1,78 @@
+<template>
+	
+	<router-link :to="pathObject">
+							
+		<span 
+			class="uk-margin-small-right uk-icon" 
+			:uk-icon="iconAttr"
+			:style="iconStyle"></span>
+
+		<span :class="textClass">{{ text }}</span>
+
+	</router-link>
+
+</template>
+
+
+<script>
+	
+	export default {
+
+		props: {
+			name: {
+				type: String,
+				required: true
+			},
+			params: {
+				type: Object,
+				default: {}
+			},
+			text: {
+				type: String,
+				required: true
+			},
+			icon: {
+				type: String,
+				required: true
+			},
+			ratio: {
+				type: Number,
+				required: false,
+				default: 1
+			},
+			textClass: {
+				type: String,
+				default: ""
+			},
+		},	
+
+		data() {
+			return {
+				pathObject: {
+					name: this.name,
+					params: this.params
+				}
+			}
+		},
+
+		computed: {
+
+			iconAttr() {
+
+				return `icon: ${this.icon}; ratio: ${this.ratio};`;
+
+			},
+
+			iconStyle() {
+
+				return {
+					fontSize: (this.ratio * 16) + 'px'
+				}
+
+			}
+
+		}
+
+	}
+
+</script>

package/src/components/NavDropdownComponent.vue

@@ -0,0 +1,60 @@
+<template>
+	
+	<div :uk-dropdown="options">
+
+	    <ul class="uk-nav uk-dropdown-nav">
+
+	        <slot></slot>
+
+	    </ul>
+
+	</div>
+
+</template>
+
+<script>
+	
+	export default {
+
+		props: {
+			pos: {
+				type: String,
+				default: "bottom-left"
+			},
+			mode: {
+				type: String,
+				default: "click"
+			},
+			offset: {
+				type: Number,
+				default: 0
+			},
+			animation: {
+				type: String,
+				default: "uk-animation-slide-top-small"
+			},
+			duration: {
+				type: Number,
+				default: 500
+			}
+		},
+
+		computed: {
+
+			options () {
+
+				return `
+					pos: ${this.pos}; 
+					mode: ${this.mode};
+					offset: ${this.offset};
+					animation: ${this.animation};
+					duration: ${this.duration};
+				`;
+
+			}
+
+		}
+
+	}
+
+</script>

package/src/components/PaginationComponent.vue

@@ -0,0 +1,110 @@
+<template>
+	
+	<ul v-if="length > 3" class="uk-pagination uk-flex-center" uk-margin>
+	
+	    <li v-if="firstLink != null">
+
+	    	<a href="#" @click="$emit('go', firstLink)">
+
+	    		<span uk-pagination-previous></span>
+
+	    	</a>
+
+	    </li>
+	
+	    <li 
+	    	v-for="link in middleLinks" 
+	    	:key="link.label"
+	    	:class="{
+	    		'uk-disabled': link.url == null,
+	    		'uk-active': link.active,
+	    	}">
+
+	    	<a href="#" @click="$emit('go', link.url)">
+
+	    		{{ link.label }}
+
+	    	</a>
+
+	    </li>
+	
+	    <li v-if="lastLink != null">
+
+	    	<a href="#" @click="$emit('go', lastLink)">
+
+	    		<span uk-pagination-next></span>
+
+	    	</a>
+
+	    </li>
+	
+	</ul>
+
+</template>
+
+<script>
+	
+	export default {
+
+		props: {
+			links: {
+				type: Array,
+				required: true,
+			}
+		},
+
+		emits: ['go'],
+
+		computed: {
+
+			length() {
+
+				return this.links.length;
+
+			},
+
+			lastLinkIndex() {
+
+				return this.length - 1;
+
+			},
+
+			firstLink() {
+
+				return (this.length > 0) ? this.links[0].url : null;
+
+			},
+
+			lastLink() {
+
+				return (this.length > 0 && this.links[this.lastLinkIndex] != undefined) ? 
+					this.links[this.lastLinkIndex].url : 
+					null;
+
+			},
+
+			middleLinks() {
+
+				let auxLinks = this.links;
+
+				let middleLinks = auxLinks.slice(1, -1);
+
+				return middleLinks;
+
+			},
+
+		}
+
+	}
+
+</script>
+
+<style scoped>
+	
+	.uk-pagination > .uk-active > * {
+	    color: #666;
+	    font-weight: 600;
+	    border-bottom: 3px solid var(--primary-color);
+	}
+
+</style>

package/src/components/SelectPaginationComponent.vue

@@ -0,0 +1,133 @@
+<template>
+	
+	<div class="pagination" uk-grid>
+
+		<div class="uk-width-auto">
+			
+			<ul class="uk-pagination uk-flex-left uk-margin-medium-top" uk-margin>
+			    
+			    <li>
+			    
+			    	<span v-if="meta.total > 0">{{ 'Showing' }} {{ meta.from }} {{ 'to' }} {{ meta.to }} {{ 'of' }} {{ meta.total }} {{ 'entries' }}</span>
+
+			    	<span v-else>{{ ('No results found') }}</span>
+
+			    </li>
+
+			</ul>
+
+		</div>
+
+		<div class="uk-width-expand">
+			
+			<ul class="uk-pagination uk-flex-right uk-margin-medium-top" uk-margin>
+			    
+			    <!-- Prev -->
+			    <li v-if="current_page > 1">
+			    	
+			    	<a href="#" @click="prevPage()">
+			    	
+			    		<span uk-pagination-previous></span>
+			    	
+			    	</a>
+
+			    </li>
+			    
+			    <li>
+			    	<select
+			    		class="uk-select"
+			    		@change="updatePage()"
+			    		v-model="current_page">
+
+			    		<option 
+			    			v-for="page in meta.last_page" 
+			    			:key="'page_' + page" 
+			    			:value="page">{{ page }}</option>
+
+			    	</select>
+			    </li>
+			    
+			    <!-- Next -->
+			    <li v-if="current_page < meta.last_page">
+			    	
+			    	<a href="#" @click="nextPage()">
+			    	
+			    		<span uk-pagination-next></span>
+			    	
+			    	</a>
+
+			    </li>
+
+			</ul>
+
+		</div>
+
+	</div>
+
+</template>
+
+<script>
+	
+	export default {
+
+		props: {
+			
+			meta: {
+				type: Object,
+				required: true
+			},
+			
+			links: {
+				type: Object,
+				required: true
+			}
+
+		},
+
+		emits: ['updatePage'],
+
+		updated() {
+
+			this.current_page = this.meta.current_page;
+
+		},
+
+		data() {
+
+			return {
+
+				current_page: this.meta.current_page,
+				
+			}
+
+		},
+
+		methods: {
+
+			prevPage(){
+
+				this.current_page--;
+
+				this.updatePage();
+
+			},
+
+			nextPage(){
+
+				this.current_page++;
+
+				this.updatePage();
+
+			},
+
+			updatePage() {	
+
+				this.$emit('updatePage', this.current_page);
+
+			}
+
+		}
+
+	}
+
+</script>