mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 07:24:13 +00:00 
			
		
		
		
	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
		
		Reference in a new issue