Improve widget paging looks (#3482)
* Improve widget paging looks * rewind when error
This commit is contained in:
		
							parent
							
								
									2ab8a5bc0a
								
							
						
					
					
						commit
						227798300f
					
				
					 2 changed files with 23 additions and 2 deletions
				
			
		|  | @ -2,7 +2,10 @@ | |||
| <div class="mkw-polls"> | ||||
| 	<mk-widget-container :show-header="!props.compact"> | ||||
| 		<template slot="header"><fa icon="chart-pie"/>{{ $t('title') }}</template> | ||||
| 		<button slot="func" :title="$t('title')" @click="fetch"><fa icon="sync"/></button> | ||||
| 		<button slot="func" :title="$t('title')" @click="fetch"> | ||||
| 			<fa v-if="!fetching &&  more" icon="arrow-right"/> | ||||
| 			<fa v-if="!fetching && !more" icon="sync"/> | ||||
| 		</button>  | ||||
| 
 | ||||
| 		<div class="mkw-polls--body"> | ||||
| 			<div class="poll" v-if="!fetching && poll != null"> | ||||
|  | @ -32,6 +35,7 @@ export default define({ | |||
| 		return { | ||||
| 			poll: null, | ||||
| 			fetching: true, | ||||
| 			more: true, | ||||
| 			offset: 0 | ||||
| 		}; | ||||
| 	}, | ||||
|  | @ -53,12 +57,18 @@ export default define({ | |||
| 			}).then(notes => { | ||||
| 				const poll = notes ? notes[0] : null; | ||||
| 				if (poll == null) { | ||||
| 					this.more = false; | ||||
| 					this.offset = 0; | ||||
| 				} else { | ||||
| 					this.more = true; | ||||
| 					this.offset++; | ||||
| 				} | ||||
| 				this.poll = poll; | ||||
| 				this.fetching = false; | ||||
| 			}).catch(() => { | ||||
| 				this.poll = null; | ||||
| 				this.fetching = false; | ||||
| 				this.more = false; | ||||
| 			}); | ||||
| 		} | ||||
| 	} | ||||
|  |  | |||
|  | @ -2,7 +2,10 @@ | |||
| <div class="mkw-users"> | ||||
| 	<mk-widget-container :show-header="!props.compact"> | ||||
| 		<template slot="header"><fa icon="users"/>{{ $t('title') }}</template> | ||||
| 		<button slot="func" :title="$t('title')" @click="refresh"><fa icon="sync"/></button> | ||||
| 		<button slot="func" :title="$t('title')" @click="refresh"> | ||||
| 			<fa v-if="!fetching &&  more" icon="arrow-right"/> | ||||
| 			<fa v-if="!fetching && !more" icon="sync"/> | ||||
| 		</button> | ||||
| 
 | ||||
| 		<div class="mkw-users--body"> | ||||
| 			<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p> | ||||
|  | @ -38,6 +41,7 @@ export default define({ | |||
| 		return { | ||||
| 			users: [], | ||||
| 			fetching: true, | ||||
| 			more: true, | ||||
| 			page: 0 | ||||
| 		}; | ||||
| 	}, | ||||
|  | @ -59,12 +63,19 @@ export default define({ | |||
| 			}).then(users => { | ||||
| 				this.users = users; | ||||
| 				this.fetching = false; | ||||
| 			}).catch(() => { | ||||
| 				this.users = []; | ||||
| 				this.fetching = false; | ||||
| 				this.more = false; | ||||
| 				this.page = 0; | ||||
| 			}); | ||||
| 		}, | ||||
| 		refresh() { | ||||
| 			if (this.users.length < limit) { | ||||
| 				this.more = false; | ||||
| 				this.page = 0; | ||||
| 			} else { | ||||
| 				this.more = true; | ||||
| 				this.page++; | ||||
| 			} | ||||
| 			this.fetch(); | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue