-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #47 from ansibleguy76/release/v3.0.3
v3.0.3 into main
- Loading branch information
Showing
14 changed files
with
713 additions
and
215 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| ext.version_code = 30002 | ||
| ext.version_name = "3.0.2" | ||
| ext.version_code = 30003 | ||
| ext.version_name = "3.0.3" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| <template> | ||
| <div> | ||
| <table class="table is-bordered is-striped is-fullwidth"> | ||
| <thead class="has-background-primary" @click="$emit('reset')"> | ||
| <tr> | ||
| <th class="has-text-white is-first">Actions</th> | ||
| <th class="has-text-white" v-for="label,idx in labels" :key="'label_'+label">{{label}} | ||
|
|
||
| <span | ||
| v-if="filters.includes(columns[idx])" | ||
| class="icon dropdown is-clickable is-active" | ||
| :class="{'has-text-warning':filterValues[columns[idx]]!=''}" | ||
| @click="showFilters=!showFilters" | ||
| > | ||
| <font-awesome-icon class="dropdown-trigger" icon="filter" size="xs" /> | ||
|
|
||
| </span> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr class="has-background-success-light" v-if="showFilters"> | ||
| <th class="has-text-white is-first"></th> | ||
| <th class="has-text-white" v-for="column in columns" :key="'filter_'+column"> | ||
| <p v-if="filters.includes(column)" class="control has-icons-left has-icons-right"> | ||
| <input class="input" v-model="filterValues[column]" /> | ||
| <span class="icon is-small is-left"> | ||
| <font-awesome-icon icon="filter" /> | ||
| </span> | ||
| </p> | ||
| </th> | ||
| </tr> | ||
| <tr v-for="item in displayedList" :key="'item_'+((identifier)?item[identifier]:item)" :class="{'has-background-link-light':(identifier)?currentItem==item[identifier]:currentItem==item}"> | ||
| <td class="is-first"> | ||
| <template v-for="a in actions" > | ||
| <span :key="'action_'+a.name" v-if="item['allow'+a.name]==undefined || item['allow'+a.name]==true" class="icon is-clickable" :class="a.color" :title="a.title" @click="(identifier)?action(a.name,item[identifier]):action(a.name,item)"><font-awesome-icon :icon="a.icon" /></span> | ||
| <span :key="'action_'+a.name" v-else class="icon has-text-grey-light"><font-awesome-icon :icon="a.icon" /></span> | ||
| </template> | ||
| </td> | ||
| <td | ||
| class="is-clickable" | ||
| @click="(identifier)?action(actions[0].name,item[identifier]):action(actions[0].name,item)" | ||
| v-for="column in columns" | ||
| :key="'item_'+item.name+'_value_'+column" | ||
| > | ||
| {{ (column)?item[column]:item }} | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <BulmaNavigation | ||
| :dataList="filteredList" | ||
| :perPage="perPage" | ||
| :buttonsShown="buttonsShown" | ||
| @change="setDisplayedList" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| import Vue from 'vue' | ||
| import BulmaNavigation from './BulmaNavigation.vue' | ||
| export default{ | ||
| name:"BulmaAdminTable", | ||
| components: {BulmaNavigation}, | ||
| props:{ | ||
| dataList:{type:Array}, | ||
| labels:{type:Array}, | ||
| columns:{type:Array}, | ||
| filters:{type:Array,default:()=>{return []}}, | ||
| actions:{type:Array}, | ||
| identifier:{type:String}, | ||
| currentItem:{type:[String,Number]}, | ||
| perPage:{type:Number,default:10}, | ||
| buttonsShown:{type:Number,default:3} | ||
| }, | ||
| data(){ | ||
| return { | ||
| displayedList:[], | ||
| filterValues:{}, | ||
| showFilters:false | ||
| } | ||
| },methods:{ | ||
| action(name,id){ | ||
| this.$emit(name,id) | ||
| }, | ||
| setDisplayedList(list){ | ||
| this.displayedList=list | ||
| } | ||
| }, | ||
| computed:{ | ||
| filteredList(){ | ||
| var ref=this | ||
| var idx | ||
| return this.dataList.filter(record => { | ||
| var found=true | ||
| ref.filters.forEach(field => { | ||
| if(ref.filterValues[field] && !record[field].toUpperCase().includes(ref.filterValues[field].toUpperCase()))found=false | ||
| }); | ||
| return found | ||
| }) | ||
| } | ||
| }, | ||
| mounted(){ | ||
| var ref=this | ||
| ref.filters.forEach(field => { | ||
| Vue.set(ref.filterValues,field,"") | ||
| }); | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| .table td,.table th{ | ||
| max-width: 0; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| table thead th.is-first,table tbody td.is-first{ | ||
| width:8em!important; | ||
| max-width:8em!important; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <template> | ||
| <nav v-if="dataList.length>perPage" class="pagination" role="pagination" aria-label="pagination"> | ||
| <a class="pagination-previous" v-if="page != 1" @click="setPage(page-1)">Previous</a> | ||
| <a class="pagination-next" @click="setPage(page+1)" v-if="page < pages.length">Next page</a> | ||
| <ul class="pagination-list"> | ||
| <li> | ||
| <a class="pagination-link" v-if="showFirstPage" :class="{'is-current':1==page}" @click="setPage(1)" aria-label="Goto page 1">1</a> | ||
| </li> | ||
| <li> | ||
| <span class="pagination-ellipsis" v-if="showFirstEllipsis">…</span> | ||
| </li> | ||
| <li v-for="pageNumber in displayedPages" :key="pageNumber"> | ||
| <a class="pagination-link" :class="{'is-current':pageNumber==page}" @click="setPage(pageNumber)" :aria-label="'Goto page '+pageNumber">{{pageNumber}}</a> | ||
| </li> | ||
| <li> | ||
| <span class="pagination-ellipsis" v-if="showLastEllipsis">…</span> | ||
| </li> | ||
| <li> | ||
| <a class="pagination-link" v-if="showLastPage" :class="{'is-current':page==(pages.length)}" @click="setPage(pages.length)" :aria-label="'Goto page '+pages.length">{{pages.length}}</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </template> | ||
| <script> | ||
| import Vue from 'vue' | ||
| export default{ | ||
| name:"BulmaNavigation", | ||
| components: {}, | ||
| props:{ | ||
| dataList:{type:Array}, | ||
| perPage:{type:Number}, | ||
| buttonsShown:{type:Number}, | ||
| index:{type:Number} | ||
| }, | ||
| data(){ | ||
| return { | ||
| page:1 | ||
| } | ||
| },methods:{ | ||
| setPage(page){ | ||
| this.page=page | ||
| this.change() | ||
| }, | ||
| paginate (list) { | ||
| let page = this.page; | ||
| let perPage = this.perPage; | ||
| let from = (page * perPage) - perPage; | ||
| let to = (page * perPage); | ||
| return list.slice(from, to); | ||
| }, | ||
| change(){ | ||
| this.$emit('change',this.displayedItems) | ||
| } | ||
| }, | ||
| watch: { | ||
| displayedItems() { | ||
| this.$emit('change',this.displayedItems) | ||
| } | ||
| }, | ||
| computed:{ | ||
| displayedItems () { | ||
| return this.paginate(this.dataList); | ||
| }, | ||
| displayedPages(){ | ||
| var from=this.page-1 // from the first | ||
| if(from==0)from=1 // force on first | ||
| var to = this.page+this.buttonsShown | ||
| // for x from the last | ||
| if(this.page>=this.pages.length-this.buttonsShown){ | ||
| from=this.pages.length-this.buttonsShown-1 | ||
| } | ||
| // make sure the have the right amount of buttons | ||
| if((to-from)!=this.buttonsShown)to=this.buttonsShown+from | ||
| // if all can be show, show all - otherwise a subset | ||
| if(this.buttonsShown>=this.pages.length){ | ||
| return this.pages | ||
| }else{ | ||
| return this.pages.slice(from, to) | ||
| } | ||
| }, | ||
| showFirstPage(){ | ||
| return !(this.displayedPages.includes(1)) | ||
| }, | ||
| showLastPage(){ | ||
| return !(this.displayedPages.includes(this.pages.length)) | ||
| }, | ||
| showFirstEllipsis(){ | ||
| return (this.page>2 && this.pages.length>=2 && !this.displayedPages.includes(2)) | ||
| }, | ||
| showLastEllipsis(){ | ||
| return (!this.displayedPages.includes(this.pages.length-1) && this.page<(this.pages.length-1)) | ||
| }, | ||
| pages () { | ||
| let numberOfPages = Math.ceil(this.dataList.length / this.perPage); | ||
| return Array.from(Array(numberOfPages), (_,x) => x+1); | ||
| }, | ||
| pageByIndex(){ | ||
| if(!(this.index>0))return 1 | ||
| var x = this.index/this.perPage | ||
| return Math.floor(x+1) | ||
| }, | ||
| }, | ||
| mounted(){ | ||
| this.page=this.pageByIndex | ||
| this.change() | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| </style> |
Oops, something went wrong.