commit: 4451cccb3c1244a179b9f5017e6a4536eb5456f1
parent 091532d577ae9a23f7a43f681bfd344f040c7738
Author: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 12:26:40 +0300
Error handling, uploading/deleting new emojis, sorting
Diffstat:
4 files changed, 164 insertions(+), 12 deletions(-)
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -8,6 +8,8 @@ import Popover from 'components/popover/popover.vue'
import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
import ModifiedIndicator from '../helpers/modified_indicator.vue'
+const newEmojiUploadBase = { shortcode: '', file: '', upload: [] }
+
const EmojiTab = {
components: {
TabSwitcher,
@@ -27,7 +29,8 @@ const EmojiTab = {
editedMetadata: { },
packName: '',
newPackName: '',
- deleteModalVisible: false
+ deleteModalVisible: false,
+ newEmojiUpload: clone(newEmojiUploadBase)
}
},
@@ -37,7 +40,7 @@ const EmojiTab = {
},
packMeta () {
if (this.editedMetadata[this.packName] === undefined) {
- this.editedMetadata[this.packName] = clone(this.knownPacks[this.packName].pack)
+ this.editedMetadata[this.packName] = clone(this.pack.pack)
}
return this.editedMetadata[this.packName]
@@ -55,6 +58,27 @@ const EmojiTab = {
return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
},
+ uploadEmoji () {
+ this.$refs.addEmojiPopover.hidePopover()
+
+ this.$store.state.api.backendInteractor.addNewEmojiFile({
+ packName: this.packName,
+ file: this.newEmojiUpload.upload[0],
+ shortcode: this.newEmojiUpload.shortcode,
+ filename: this.newEmojiUpload.file
+ }).then(resp => resp.json()).then(resp => {
+ if (resp.error !== undefined) {
+ this.displayError(resp.error)
+ return
+ }
+
+ this.pack.files = resp
+ this.sortPackFiles(this.packName)
+
+ this.newEmojiUpload = clone(newEmojiUploadBase)
+ })
+ },
+
createEmojiPack () {
this.$store.state.api.backendInteractor.createEmojiPack(
{ name: this.newPackName }
@@ -62,6 +86,7 @@ const EmojiTab = {
if (resp === 'ok') {
return this.refreshPackList()
} else {
+ this.displayError(resp.error)
return Promise.reject(resp)
}
}).then(done => {
@@ -78,6 +103,7 @@ const EmojiTab = {
if (resp === 'ok') {
return this.refreshPackList()
} else {
+ this.displayError(resp.error)
return Promise.reject(resp)
}
}).then(done => {
@@ -96,6 +122,11 @@ const EmojiTab = {
this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
resp => resp.json()
).then(resp => {
+ if (resp.error !== undefined) {
+ this.displayError(resp.error)
+ return
+ }
+
// Update actual pack data
this.pack.pack = resp
// Delete edited pack data, should auto-update itself
@@ -108,28 +139,81 @@ const EmojiTab = {
if (this.editedParts[this.packName][shortcode] === undefined) {
this.editedParts[this.packName][shortcode] = {
- shortcode, file: this.knownPacks[this.packName].files[shortcode]
+ shortcode, file: this.pack.files[shortcode]
}
}
},
+ deleteEmoji (shortcode) {
+ this.editedParts[this.packName][shortcode].deleteModalVisible = false
+
+ this.$store.state.api.backendInteractor.deleteEmojiFile(
+ { packName: this.packName, shortcode }
+ ).then(resp => resp.json()).then(resp => {
+ if (resp.error !== undefined) {
+ this.displayError(resp.error)
+ return
+ }
+
+ this.pack.files = resp
+ delete this.editedParts[this.packName][shortcode]
+
+ this.sortPackFiles(this.packName)
+ })
+ },
saveEditedEmoji (shortcode) {
const edited = this.editedParts[this.packName][shortcode]
+ if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) {
+ delete this.editedParts[this.packName][shortcode]
+ return
+ }
+
this.$store.state.api.backendInteractor.updateEmojiFile(
{ packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
- ).then(resp =>
- resp.ok ? resp.json() : resp.text().then(respText => Promise.reject(respText))
).then(resp => {
- this.knownPacks[this.packName].files = resp
+ if (resp.error !== undefined) {
+ this.displayError(resp.error)
+ return Promise.reject(resp.error)
+ }
+
+ return resp.json()
+ }).then(resp => {
+ this.pack.files = resp
delete this.editedParts[this.packName][shortcode]
+
+ this.sortPackFiles(this.packName)
})
},
refreshPackList () {
return this.$store.state.api.backendInteractor.listEmojiPacks()
.then(data => data.json())
.then(packData => {
+ if (packData.error !== undefined) {
+ this.displayError(packData.error)
+ return
+ }
+
this.knownPacks = packData.packs
+ for (const name of Object.keys(this.knownPacks)) {
+ this.sortPackFiles(name)
+ }
})
+ },
+ displayError (msg) {
+ this.$store.dispatch('pushGlobalNotice', {
+ messageKey: 'upload.error.message',
+ messageArgs: [msg],
+ level: 'error'
+ })
+ },
+ sortPackFiles (nameOfPack) {
+ // Sort by key
+ const sorted = Object.keys(this.knownPacks[nameOfPack].files).sort().reduce((acc, key) => {
+ if (key.length === 0) return acc
+ acc[key] = this.knownPacks[nameOfPack].files[key]
+ return acc
+ }, {})
+ this.knownPacks[nameOfPack].files = sorted
}
},
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -25,7 +25,7 @@
}
.emoji-unsaved {
- box-shadow: 2px 3px 5px var(--cBlue, $fallback--cBlue);
+ box-shadow: 0 3px 5px var(--cBlue, $fallback--cBlue);
}
.emoji-list {
@@ -44,3 +44,12 @@
.emoji-tab-popover-button {
margin-left: 0.5em;
}
+
+.emoji-tab-popover-input {
+ width: 20em;
+ margin-bottom: 0.5em;
+
+ &:not(:first-child) {
+ margin-left: 0.5em;
+ }
+}
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -22,7 +22,7 @@
</button>
</li>
- <li class="setting-item btn-group">
+ <li class="btn-group setting-item">
<button
class="button button-default btn"
type="button"
@@ -62,7 +62,7 @@
:confirm-text="$t('status.delete_confirm_accept_button')"
@cancelled="deleteModalVisible = false"
@accepted="deleteEmojiPack" >
- Are you sure you want to delete {{ packName }}?
+ Are you sure you want to delete <i>{{ packName }}</i>?
</ConfirmModal>
</li>
@@ -111,13 +111,58 @@
<ModifiedIndicator :changed="metaEdited('share-files')" />
</li>
- <li>
+ <li class="btn-group">
<button
class="button button-default btn"
type="button"
@click="savePackMetadata">
Save
</button>
+
+ <Popover
+ ref="addEmojiPopover"
+ trigger="click"
+ placement="bottom"
+ bound-to-selector=".emoji-tab"
+ popover-class="emoji-tab-edit-popover popover-default"
+ :bound-to="{ x: 'container' }"
+ :offset="{ y: 5 }"
+ >
+ <template #content>
+ <h3>Adding new emoji</h3>
+ <div>
+ <input
+ type="file"
+ class="emoji-tab-popover-input emoji-tab-popover-file"
+ @change="newEmojiUpload.upload = $event.target.files"
+ >
+ </div>
+ <div>
+ <div>
+ <input class="emoji-data-input emoji-tab-popover-input"
+ v-model="newEmojiUpload.shortcode"
+ placeholder="Shortcode, leave blank to infer">
+ <input class="emoji-data-input emoji-tab-popover-input"
+ v-model="newEmojiUpload.file"
+ placeholder="Filename, leave blank infer">
+
+ <button
+ class="button button-default btn emoji-tab-popover-button"
+ type="button"
+ :disabled="this.newEmojiUpload.upload.length == 0"
+ @click="uploadEmoji">
+ Save
+ </button>
+ </div>
+ </div>
+ </template>
+ </Popover>
+ <button
+ class="button button-default btn"
+ type="button"
+ @click="$refs.addEmojiPopover.showPopover">
+ Add file
+ </button>
</li>
</ul>
</div>
@@ -152,7 +197,21 @@
@click="saveEditedEmoji(shortcode)">
Save
</button>
-
+ <button
+ class="button button-default btn emoji-tab-popover-button"
+ type="button"
+ @click="editedParts[packName][shortcode].deleteModalVisible = true">
+ Delete
+ </button>
+ <ConfirmModal
+ v-if="editedParts[packName][shortcode].deleteModalVisible"
+ title="Delete?"
+ :cancel-text="$t('status.delete_confirm_cancel_button')"
+ :confirm-text="$t('status.delete_confirm_accept_button')"
+ @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
+ @accepted="deleteEmoji(shortcode)" >
+ Are you sure you want to delete <i>{{ shortcode }}</i>?
+ </ConfirmModal>
</div>
</template>
<template #trigger>
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
@@ -1863,7 +1863,7 @@ const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
return fetch(
PLEROMA_EMOJI_UPDATE_FILE_URL(packName),
- { method: 'POST', data }
+ { method: 'POST', body: data }
)
}
