From d62a55b46f7308ed04971cbfba5572b0d0feea97 Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <github-bf215181b5140522137b3d4f6b73544a@desu.email>
Date: Sun, 15 May 2022 15:20:01 +0200
Subject: [PATCH] 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>
---
.../client/src/components/ui/pagination.vue | 6 +
.../src/pages/admin/emoji-edit-dialog.vue | 116 ++++++++----------
packages/client/src/pages/admin/emojis.vue | 8 +-
3 files changed, 61 insertions(+), 69 deletions(-)
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index ac6f59c332..9dd18785bc 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -244,6 +244,11 @@ const append = (item: Item): void => {
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 i = items.value.findIndex(item => item.id === id);
items.value[i] = replacer(items.value[i]);
@@ -276,6 +281,7 @@ defineExpose({
fetchMoreAhead,
prepend,
append,
+ removeItem,
updateItem,
});
</script>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 2e3903426e..d482fa49e6 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -27,85 +27,71 @@
</XModalWindow>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
import { unique } from '@/scripts/array';
+import { i18n } from '@/i18n';
+import { emojiCategories } from '@/instance';
-export default defineComponent({
- components: {
- XModalWindow,
- MkButton,
- MkInput,
- },
+const props = defineProps<{
+ emoji: any,
+}>();
- props: {
- emoji: {
- required: true,
- }
- },
-
- emits: ['done', 'closed'],
+let dialog = $ref(null);
+let name: string = $ref(props.emoji.name);
+let category: string = $ref(props.emoji.category);
+let aliases: string = $ref(props.emoji.aliases.join(' '));
+let categories: string[] = $ref(emojiCategories);
- data() {
- return {
- name: this.emoji.name,
- category: this.emoji.category,
- aliases: this.emoji.aliases?.join(' '),
- categories: [],
- }
- },
+const emit = defineEmits<{
+ (ev: 'done', v: { deleted?: boolean, updated?: any }): void,
+ (ev: 'closed'): void
+}>();
- created() {
- os.api('meta', { detail: false }).then(({ emojis }) => {
- this.categories = unique(emojis.map((x: any) => x.category || '').filter((x: string) => x !== ''));
- });
- },
+function ok() {
+ update();
+}
- methods: {
- ok() {
- this.update();
- },
+async function update() {
+ await os.apiWithDialog('admin/emoji/update', {
+ id: props.emoji.id,
+ name,
+ category,
+ aliases: aliases.split(' '),
+ });
- async update() {
- await os.apiWithDialog('admin/emoji/update', {
- id: this.emoji.id,
- name: this.name,
- category: this.category,
- aliases: this.aliases.split(' '),
- });
+ emit('done', {
+ updated: {
+ id: props.emoji.id,
+ name,
+ category,
+ aliases: aliases.split(' '),
+ }
+ });
- this.$emit('done', {
- updated: {
- name: this.name,
- category: this.category,
- aliases: this.aliases.split(' '),
- }
- });
- this.$refs.dialog.close();
- },
+ dialog.close();
+}
- async del() {
- const { canceled } = await os.confirm({
- type: 'warning',
- text: this.$t('removeAreYouSure', { x: this.emoji.name }),
- });
- if (canceled) return;
+async function del() {
+ const { canceled } = await os.confirm({
+ type: 'warning',
+ text: i18n.t('removeAreYouSure', { x: name }),
+ });
+ if (canceled) return;
- os.api('admin/emoji/delete', {
- id: this.emoji.id
- }).then(() => {
- this.$emit('done', {
- deleted: true
- });
- this.$refs.dialog.close();
- });
- },
- }
-});
+ os.api('admin/emoji/delete', {
+ id: props.emoji.id
+ }).then(() => {
+ emit('done', {
+ deleted: true
+ });
+ dialog.close();
+ });
+}
</script>
<style lang="scss" scoped>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 43dd83fc02..ffb7fb34aa 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -135,12 +135,12 @@ const edit = (emoji) => {
}, {
done: result => {
if (result.updated) {
- emojisPaginationComponent.value.replaceItem(item => item.id === emoji.id, {
- ...emoji,
+ emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
+ ...oldEmoji,
...result.updated
- });
+ }));
} else if (result.deleted) {
- emojisPaginationComponent.value.removeItem(item => item.id === emoji.id);
+ emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
}
},
}, 'closed');
--
GitLab