-
Notifications
You must be signed in to change notification settings - Fork 30
/
EmojiList.svelte
68 lines (60 loc) · 1.67 KB
/
EmojiList.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script lang="ts">
import api from 'api';
import * as alerts from 'alerts';
import Emoji from './Emoji.svelte';
export let emojis: {
[id: number]: CustomEmoji,
};
let emojiList: { id: number, emoji: CustomEmoji }[];
$: {
emojiList = Object.keys(emojis).map(key => ({ id: parseInt(key, 10), emoji: emojis[key] }));
}
function onEdit(event: CustomEvent<{ id: number, emoji: CustomEmoji }>) {
const { id, emoji } = event.detail;
api.put(`/admin/plugins/emoji/customizations/emoji/${id}`, { item: emoji }).then(() => {
emojis = {
...emojis,
[id]: emoji,
};
}, () => alerts.error());
}
function onDelete(event: CustomEvent<{ id: number }>) {
const { id } = event.detail;
api.del(`/admin/plugins/emoji/customizations/emoji/${id}`, {}).then(() => {
delete emojis[id];
emojis = { ...emojis };
}, () => alerts.error());
}
const blank = {
name: '',
image: '',
aliases: [],
ascii: [],
};
let resetNew: () => void;
let newEmoji = { ...blank };
function onAdd(event: CustomEvent<{ id: -1, emoji: CustomEmoji }>) {
const { emoji } = event.detail;
api.post('/admin/plugins/emoji/customizations/emoji', { item: emoji }).then(({ id }) => {
emojis = {
...emojis,
[id]: emoji,
};
newEmoji = { ...blank };
resetNew();
}, () => alerts.error());
}
</script>
<table class="table">
<thead>
<tr><th>Name</th><th>Image</th><th>Aliases</th><th>ASCII patterns</th><th></th></tr>
</thead>
<tbody>
{#each emojiList as item (item.id)}
<Emoji {...item} on:save={onEdit} on:delete={onDelete} />
{/each}
</tbody>
<tfoot>
<Emoji bind:reset={resetNew} id={-1} emoji={newEmoji} on:save={onAdd} />
</tfoot>
</table>