keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-12-01 18:47:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(client): refactor admin/ads to use Composition API (#8649)

Browse source
This commit is contained in:
Andreas Nedbal 2022-05-14 14:33:41 +02:00 committed by GitHub
parent 88307327e6
commit cafd29888d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 64 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
packages/client/src/pages/admin/ads.vue
View file

@ -7,7 +7,7 @@
<template #label>URL</template> <template #label>URL</template>
</MkInput> </MkInput>
<MkInput v-model="ad.imageUrl" class="_formBlock"> <MkInput v-model="ad.imageUrl" class="_formBlock">
<template #label>{{ $ts.imageUrl }}</template> <template #label>{{ i18n.ts.imageUrl }}</template>
</MkInput> </MkInput>
<FormRadios v-model="ad.place" class="_formBlock"> <FormRadios v-model="ad.place" class="_formBlock">
<template #label>Form</template> <template #label>Form</template>
@ -17,34 +17,34 @@
</FormRadios> </FormRadios>
<!-- <!--
<div style="margin: 32px 0;"> <div style="margin: 32px 0;">
{{ $ts.priority }} {{ i18n.ts.priority }}
<MkRadio v-model="ad.priority" value="high">{{ $ts.high }}</MkRadio> <MkRadio v-model="ad.priority" value="high">{{ i18n.ts.high }}</MkRadio>
<MkRadio v-model="ad.priority" value="middle">{{ $ts.middle }}</MkRadio> <MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
<MkRadio v-model="ad.priority" value="low">{{ $ts.low }}</MkRadio> <MkRadio v-model="ad.priority" value="low">{{ i18n.ts.low }}</MkRadio>
</div> </div>
--> -->
<FormSplit> <FormSplit>
<MkInput v-model="ad.ratio" type="number"> <MkInput v-model="ad.ratio" type="number">
<template #label>{{ $ts.ratio }}</template> <template #label>{{ i18n.ts.ratio }}</template>
</MkInput> </MkInput>
<MkInput v-model="ad.expiresAt" type="date"> <MkInput v-model="ad.expiresAt" type="date">
<template #label>{{ $ts.expiration }}</template> <template #label>{{ i18n.ts.expiration }}</template>
</MkInput> </MkInput>
</FormSplit> </FormSplit>
<MkTextarea v-model="ad.memo" class="_formBlock"> <MkTextarea v-model="ad.memo" class="_formBlock">
<template #label>{{ $ts.memo }}</template> <template #label>{{ i18n.ts.memo }}</template>
</MkTextarea> </MkTextarea>
<div class="buttons _formBlock"> <div class="buttons _formBlock">
<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="fas fa-save"></i> {{ $ts.save }}</MkButton> <MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
<MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton> <MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
</div> </div>
</div> </div>
</div> </div>
</MkSpacer> </MkSpacer>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue'; import MkInput from '@/components/form/input.vue';
import MkTextarea from '@/components/form/textarea.vue'; import MkTextarea from '@/components/form/textarea.vue';
@ -52,44 +52,16 @@ import FormRadios from '@/components/form/radios.vue';
import FormSplit from '@/components/form/split.vue'; import FormSplit from '@/components/form/split.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 ads: any[] = $ref([]);
components: {
MkButton,
MkInput,
MkTextarea,
FormRadios,
FormSplit,
},
emits: ['info'], os.api('admin/ad/list').then(adsResponse => {
ads = adsResponse;
data() {
return {
[symbols.PAGE_INFO]: {
title: this.$ts.ads,
icon: 'fas fa-audio-description',
bg: 'var(--bg)',
actions: [{
asFullButton: true,
icon: 'fas fa-plus',
text: this.$ts.add,
handler: this.add,
}],
},
ads: [],
}
},
created() {
os.api('admin/ad/list').then(ads => {
this.ads = ads;
}); });
},
methods: { function add() {
add() { ads.unshift({
this.ads.unshift({
id: null, id: null,
memo: '', memo: '',
place: 'square', place: 'square',
@ -99,22 +71,22 @@ export default defineComponent({
imageUrl: null, imageUrl: null,
expiresAt: null, expiresAt: null,
}); });
}, }
remove(ad) { function remove(ad) {
os.confirm({ os.confirm({
type: 'warning', type: 'warning',
text: this.$t('removeAreYouSure', { x: ad.url }), text: i18n.t('removeAreYouSure', { x: ad.url }),
}).then(({ canceled }) => { }).then(({ canceled }) => {
if (canceled) return; if (canceled) return;
this.ads = this.ads.filter(x => x != ad); ads = ads.filter(x => x !== ad);
os.apiWithDialog('admin/ad/delete', { os.apiWithDialog('admin/ad/delete', {
id: ad.id id: ad.id
}); });
}); });
}, }
save(ad) { function save(ad) {
if (ad.id == null) { if (ad.id == null) {
os.apiWithDialog('admin/ad/create', { os.apiWithDialog('admin/ad/create', {
...ad, ...ad,
@ -127,6 +99,18 @@ export default defineComponent({
}); });
} }
} }
defineExpose({
[symbols.PAGE_INFO]: {
title: i18n.ts.ads,
icon: 'fas fa-audio-description',
bg: 'var(--bg)',
actions: [{
asFullButton: true,
icon: 'fas fa-plus',
text: i18n.ts.add,
handler: add,
}],
} }
}); });
</script> </script>