refactor: use composition API (#8541)
This commit is contained in:
		
							parent
							
								
									065324d30b
								
							
						
					
					
						commit
						a99cd645bb
					
				
					 1 changed files with 29 additions and 39 deletions
				
			
		|  | @ -24,10 +24,10 @@ | ||||||
| 			</div> | 			</div> | ||||||
| 			<!-- TODO | 			<!-- TODO | ||||||
| 			<div class="inputs" style="display: flex; padding-top: 1.2em;"> | 			<div class="inputs" style="display: flex; padding-top: 1.2em;"> | ||||||
| 				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()"> | 				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false"> | ||||||
| 					<span>{{ $ts.username }}</span> | 					<span>{{ $ts.username }}</span> | ||||||
| 				</MkInput> | 				</MkInput> | ||||||
| 				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @update:modelValue="$refs.reports.reload()" :disabled="pagination.params().origin === 'local'"> | 				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" :disabled="pagination.params().origin === 'local'"> | ||||||
| 					<span>{{ $ts.host }}</span> | 					<span>{{ $ts.host }}</span> | ||||||
| 				</MkInput> | 				</MkInput> | ||||||
| 			</div> | 			</div> | ||||||
|  | @ -41,8 +41,8 @@ | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts"> | <script lang="ts" setup> | ||||||
| import { computed, defineComponent } from 'vue'; | import { computed } from 'vue'; | ||||||
| 
 | 
 | ||||||
| import MkInput from '@/components/form/input.vue'; | import MkInput from '@/components/form/input.vue'; | ||||||
| import MkSelect from '@/components/form/select.vue'; | import MkSelect from '@/components/form/select.vue'; | ||||||
|  | @ -50,45 +50,35 @@ import MkPagination from '@/components/ui/pagination.vue'; | ||||||
| import XAbuseReport from '@/components/abuse-report.vue'; | import XAbuseReport from '@/components/abuse-report.vue'; | ||||||
| import * as os from '@/os'; | import * as os from '@/os'; | ||||||
| import * as symbols from '@/symbols'; | import * as symbols from '@/symbols'; | ||||||
|  | import { i18n } from '@/i18n'; | ||||||
| 
 | 
 | ||||||
| export default defineComponent({ | let reports = $ref<InstanceType<typeof MkPagination>>(); | ||||||
| 	components: { |  | ||||||
| 		MkInput, |  | ||||||
| 		MkSelect, |  | ||||||
| 		MkPagination, |  | ||||||
| 		XAbuseReport, |  | ||||||
| 	}, |  | ||||||
| 
 | 
 | ||||||
| 	emits: ['info'], | let state = $ref('unresolved'); | ||||||
|  | let reporterOrigin = $ref('combined'); | ||||||
|  | let targetUserOrigin = $ref('combined'); | ||||||
|  | let searchUsername = $ref(''); | ||||||
|  | let searchHost = $ref(''); | ||||||
| 
 | 
 | ||||||
| 	data() { | const pagination = { | ||||||
| 		return { | 	endpoint: 'admin/abuse-user-reports' as const, | ||||||
| 			[symbols.PAGE_INFO]: { | 	limit: 10, | ||||||
| 				title: this.$ts.abuseReports, | 	params: computed(() => ({ | ||||||
| 				icon: 'fas fa-exclamation-circle', | 		state, | ||||||
| 				bg: 'var(--bg)', | 		reporterOrigin, | ||||||
| 			}, | 		targetUserOrigin, | ||||||
| 			searchUsername: '', | 	})), | ||||||
| 			searchHost: '', | }; | ||||||
| 			state: 'unresolved', |  | ||||||
| 			reporterOrigin: 'combined', |  | ||||||
| 			targetUserOrigin: 'combined', |  | ||||||
| 			pagination: { |  | ||||||
| 				endpoint: 'admin/abuse-user-reports' as const, |  | ||||||
| 				limit: 10, |  | ||||||
| 				params: computed(() => ({ |  | ||||||
| 					state: this.state, |  | ||||||
| 					reporterOrigin: this.reporterOrigin, |  | ||||||
| 					targetUserOrigin: this.targetUserOrigin, |  | ||||||
| 				})), |  | ||||||
| 			}, |  | ||||||
| 		} |  | ||||||
| 	}, |  | ||||||
| 
 | 
 | ||||||
| 	methods: { | function resolved(reportId) { | ||||||
| 		resolved(reportId) { | 	reports.removeItem(item => item.id === reportId); | ||||||
| 			this.$refs.reports.removeItem(item => item.id === reportId); | } | ||||||
| 		}, | 
 | ||||||
|  | defineExpose({ | ||||||
|  | 	[symbols.PAGE_INFO]: { | ||||||
|  | 		title: i18n.ts.abuseReports, | ||||||
|  | 		icon: 'fas fa-exclamation-circle', | ||||||
|  | 		bg: 'var(--bg)', | ||||||
| 	} | 	} | ||||||
| }); | }); | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue