Initial incomplete admin emoji settings implementation

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -0,0 +1,62 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import StringSetting from '../helpers/string_setting.vue'
+import Checkbox from 'components/checkbox/checkbox.vue'
+import StillImage from 'components/still-image/still-image.vue'
+
+const EmojiTab = {
+  components: {
+    TabSwitcher,
+    StringSetting,
+    Checkbox,
+    StillImage
+  },
+
+  data () {
+    return {
+      knownPacks: { },
+      editedParts: { }
+    }
+  },
+
+  methods: {
+    reloadEmoji () {
+      this.$store.state.api.backendInteractor.reloadEmoji()
+    },
+    importFromFS () {
+      this.$store.state.api.backendInteractor.importEmojiFromFS()
+    },
+    emojiAddr (packName, name) {
+      return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(packName)}/${name}`
+    },
+    editEmoji (packName, shortcode) {
+      if (this.editedParts[packName] === undefined) { this.editedParts[packName] = {} }
+
+      this.editedParts[packName][shortcode] = {
+        shortcode, file: this.knownPacks[packName].files[shortcode]
+      }
+    },
+    saveEditedEmoji (packName, shortcode) {
+      const edited = this.editedParts[packName][shortcode]
+
+      this.$store.state.api.backendInteractor.updateEmojiFile(
+        { 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[packName].files = resp
+        delete this.editedParts[packName][shortcode]
+      })
+    }
+  },
+
+  mounted () {
+    this.$store.state.api.backendInteractor.listEmojiPacks()
+      .then(data => data.json())
+      .then(packData => {
+        this.knownPacks = packData.packs
+        console.log(this.knownPacks)
+      })
+  }
+}
+
+export default EmojiTab

src/components/settings_modal/admin_tabs/emoji_tab.scss

@@ -0,0 +1,24 @@
+.emoji-tab {
+  .btn-group .btn {
+    margin-left: 0.5em;
+  }
+
+  .pack-info-wrapper {
+    margin-top: 1em;
+  }
+
+  .emoji-info-input {
+    width: 100%;
+  }
+
+  .emoji-data-input {
+    width: 40%;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
+}

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="emoji-tab"
+    :label="$t('admin_dash.tabs.emoji')"
+  >
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
+
+      <span class="btn-group">
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="reloadEmoji">
+          {{ $t('admin_dash.emoji.reload') }}
+        </button>
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="importFromFS">
+          {{ $t('admin_dash.emoji.importFS') }}
+        </button>
+      </span>
+
+      <tab-switcher :scrollable-tabs="true" v-if="Object.keys(knownPacks).length > 0">
+        <div v-for="(pack, packName) in knownPacks" :label="packName" :key="packName">
+          <div class="pack-info-wrapper">
+            <ul class="setting-list">
+              <li>
+                <div>Description</div>
+                <textarea
+                  v-model="pack.pack.description"
+                  class="bio resize-height" />
+              </li>
+              <li>
+                <div>Homepage</div>
+                <input class="emoji-info-input" v-model="pack.pack.homepage">
+              </li>
+              <li>
+                <div>Fallback source</div>
+                <input class="emoji-info-input" v-model="pack.pack['fallback-src']">
+              </li>
+              <li>
+                <Checkbox v-model="pack.pack['can-download']">Downloadable</Checkbox>
+              </li>
+            </ul>
+          </div>
+
+          <h2>Files</h2>
+
+          <ul class="setting-list">
+            <li v-for="(file, shortcode) in pack.files" :key="shortcode">
+              <StillImage
+                class="emoji img"
+                :src="emojiAddr(packName, file)"
+                :title="`:${shortcode}:`"
+                :alt="`:${shortcode}:`"
+              />
+
+              <template v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
+                <input class="emoji-data-input"
+                  v-model="editedParts[packName][shortcode].shortcode">
+                <input class="emoji-data-input"
+                  v-model="editedParts[packName][shortcode].file">
+
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  @click="saveEditedEmoji(packName, shortcode)">
+                  Save
+                </button>
+              </template>
+              <template v-else>
+                <input disabled class="emoji-data-input" :value="shortcode">
+                <input disabled class="emoji-data-input" :value="file">
+
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  @click="editEmoji(packName, shortcode)">
+                  Edit
+                </button>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </tab-switcher>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_tab.js"></script>
+
+<style lang="scss" src="./emoji_tab.scss"></style>

src/components/settings_modal/settings_modal_admin_content.js

@@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
 import FrontendsTab from './admin_tabs/frontends_tab.vue'
+import EmojiTab from './admin_tabs/emoji_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -33,7 +34,8 @@ const SettingsModalAdminContent = {
 
     InstanceTab,
     LimitsTab,
-    FrontendsTab
+    FrontendsTab,
+    EmojiTab
   },
   computed: {
     user () {

src/components/settings_modal/settings_modal_admin_content.vue

@@ -60,6 +60,14 @@
     >
       <FrontendsTab />
     </div>
+
+    <div
+      :label="$t('admin_dash.tabs.emoji')"
+      icon="laptop-code"
+      data-tab-name="emoji"
+    >
+      <EmojiTab />
+    </div>
   </tab-switcher>
 </template>