Refactor emoji-edit-dialog to use Composition API (#8657)

* refactor(client): refactor emoji-edit-dialog to use Composition API

* fix(client): fix editing emoji not updating emoji list

* Apply review suggestions from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

* fix(client): use cached category info instead of making a request

* fix(client): use updateItem in emoji pagination when editing

* fix(client): reimplement removeItem in MkPagination

* Apply review suggestion from @Johann150

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>

Co-authored-by: Johann150 <johann@qwertqwefsday.eu>
This commit is contained in:
Andreas Nedbal 2022-05-15 15:20:01 +02:00 committed by GitHub
parent 39bd71e064
commit d62a55b46f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 71 deletions

View file

@ -244,6 +244,11 @@ const append = (item: Item): void => {
items.value.push(item); items.value.push(item);
}; };
const removeItem = (finder: (item: Item) => boolean) => {
const i = items.value.findIndex(finder);
items.value.splice(i, 1);
};
const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => { const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
const i = items.value.findIndex(item => item.id === id); const i = items.value.findIndex(item => item.id === id);
items.value[i] = replacer(items.value[i]); items.value[i] = replacer(items.value[i]);
@ -276,6 +281,7 @@ defineExpose({
fetchMoreAhead, fetchMoreAhead,
prepend, prepend,
append, append,
removeItem,
updateItem, updateItem,
}); });
</script> </script>

View file

@ -27,85 +27,71 @@
</XModalWindow> </XModalWindow>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { defineComponent } from 'vue'; import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue'; import XModalWindow from '@/components/ui/modal-window.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 * as os from '@/os'; import * as os from '@/os';
import { unique } from '@/scripts/array'; import { unique } from '@/scripts/array';
import { i18n } from '@/i18n';
import { emojiCategories } from '@/instance';
export default defineComponent({ const props = defineProps<{
components: { emoji: any,
XModalWindow, }>();
MkButton,
MkInput,
},
props: { let dialog = $ref(null);
emoji: { let name: string = $ref(props.emoji.name);
required: true, let category: string = $ref(props.emoji.category);
let aliases: string = $ref(props.emoji.aliases.join(' '));
let categories: string[] = $ref(emojiCategories);
const emit = defineEmits<{
(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
(ev: 'closed'): void
}>();
function ok() {
update();
} }
},
emits: ['done', 'closed'], async function update() {
data() {
return {
name: this.emoji.name,
category: this.emoji.category,
aliases: this.emoji.aliases?.join(' '),
categories: [],
}
},
created() {
os.api('meta', { detail: false }).then(({ emojis }) => {
this.categories = unique(emojis.map((x: any) => x.category || '').filter((x: string) => x !== ''));
});
},
methods: {
ok() {
this.update();
},
async update() {
await os.apiWithDialog('admin/emoji/update', { await os.apiWithDialog('admin/emoji/update', {
id: this.emoji.id, id: props.emoji.id,
name: this.name, name,
category: this.category, category,
aliases: this.aliases.split(' '), aliases: aliases.split(' '),
}); });
this.$emit('done', { emit('done', {
updated: { updated: {
name: this.name, id: props.emoji.id,
category: this.category, name,
aliases: this.aliases.split(' '), category,
aliases: aliases.split(' '),
} }
}); });
this.$refs.dialog.close();
},
async del() { dialog.close();
}
async function del() {
const { canceled } = await os.confirm({ const { canceled } = await os.confirm({
type: 'warning', type: 'warning',
text: this.$t('removeAreYouSure', { x: this.emoji.name }), text: i18n.t('removeAreYouSure', { x: name }),
}); });
if (canceled) return; if (canceled) return;
os.api('admin/emoji/delete', { os.api('admin/emoji/delete', {
id: this.emoji.id id: props.emoji.id
}).then(() => { }).then(() => {
this.$emit('done', { emit('done', {
deleted: true deleted: true
}); });
this.$refs.dialog.close(); dialog.close();
}); });
},
} }
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View file

@ -135,12 +135,12 @@ const edit = (emoji) => {
}, { }, {
done: result => { done: result => {
if (result.updated) { if (result.updated) {
emojisPaginationComponent.value.replaceItem(item => item.id === emoji.id, { emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
...emoji, ...oldEmoji,
...result.updated ...result.updated
}); }));
} else if (result.deleted) { } else if (result.deleted) {
emojisPaginationComponent.value.removeItem(item => item.id === emoji.id); emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
} }
}, },
}, 'closed'); }, 'closed');