From 63951408b88104d5a253f7e34d3e52920e476157 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 19 Nov 2019 20:24:25 +0900
Subject: [PATCH] Render form for assets on Frontend tab, update computed
 values

---
 src/views/settings/components/Frontend.vue | 63 ++--------------------
 src/views/settings/components/Inputs.vue   | 46 +++++++++++++++-
 2 files changed, 50 insertions(+), 59 deletions(-)

diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue
index 7b693c3f..7c3069ea 100644
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@@ -11,22 +11,6 @@
     <el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
       <el-form-item label="Assets:"/>
       <setting :setting-group="assets" :data="assetsData"/>
-      <!-- <el-form-item label="Default mascot">
-        <el-select :value="assets.default_mascot" clearable @change="updateSetting($event, 'assets', 'default_mascot')"/>
-        <p class="expl">An element from mascots - This will be used as the default mascot on MastoFE
-        (default: <span class="code">:pleroma_fox_tan</span>)</p>
-      </el-form-item>
-      <el-form-item label="Mascots">
-        <div v-for="([name, url, mimeType], index) in mascots" :key="index" class="mascot-container">
-          <div class="mascot-name-container">
-            <el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', index)"/>
-            <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(index, 'emoji', 'groups')"/>
-          </div>
-          <el-input :value="url" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', index)"/>
-          <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
-        </div>
-        <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
-      </el-form-item> -->
     </el-form>
     <div class="line"/>
     <el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
@@ -64,37 +48,32 @@ export default {
       return this.settings.description.find(setting => setting.key === ':assets')
     },
     assetsData() {
-      return this.settings.settings[':assets']
+      return this.settings.settings.pleroma[':assets']
     },
     chat() {
       return this.settings.description.find(setting => setting.key === ':chat')
     },
     chatData() {
-      return this.settings.settings[':chat']
+      return this.settings.settings.pleroma[':chat']
     },
     emoji() {
       return this.settings.description.find(setting => setting.key === ':emoji')
     },
     emojiData() {
-      return this.settings.settings[':emoji']
+      return this.settings.settings.pleroma[':emoji']
     },
     frontend() {
       return this.settings.description.find(setting => setting.key === ':frontend_configurations')
     },
     frontendData() {
-      return this.settings.settings[':frontend_configurations']
+      return this.settings.settings.pleroma[':frontend_configurations']
     },
     markup() {
       return this.settings.description.find(setting => setting.key === ':markup')
     },
     markupData() {
-      return this.settings.settings[':markup']
+      return this.settings.settings.pleroma[':markup']
     },
-    // mascots() {
-    //   return Object.keys(this.assets.mascots)
-    //     .map(mascotName =>
-    //       [mascotName, this.assets.mascots[mascotName].url, this.assets.mascots[mascotName].mime_type])
-    // },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
@@ -106,38 +85,6 @@ export default {
     }
   },
   methods: {
-    //
-    // addRowToMascots() {
-    //   const updatedValue = this.mascots.reduce((acc, el, i) => {
-    //     return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
-    //   }, {})
-    //   this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, 'assets', 'mascots')
-    // },
-    // deleteMascotsRow(index) {
-    //   const filteredValues = this.mascots.filter((el, i) => index !== i)
-    //   const updatedValue = filteredValues.reduce((acc, el, i) => {
-    //     return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
-    //   }, {})
-    //   this.updateSetting(updatedValue, 'assets', 'mascots')
-    // },
-    // parseMascots(value, inputType, index) {
-    //   const updatedValue = this.mascots.reduce((acc, el, i) => {
-    //     if (index === i) {
-    //       if (inputType === 'name') {
-    //         return { ...acc, [value]: { url: el[1], mime_type: el[2] }}
-    //       } else if (inputType === 'url') {
-    //         return { ...acc, [el[0]]: { url: value, mime_type: el[2] }}
-    //       } else {
-    //         return { ...acc, [el[0]]: { url: el[1], mime_type: value }}
-    //       }
-    //     }
-    //     return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
-    //   }, {})
-    //   this.updateSetting(updatedValue, 'assets', 'mascots')
-    // },
-    updateSetting(value, tab, input) {
-      this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
-    },
     async onSubmit() {
       try {
         await this.$store.dispatch('SubmitChanges')
diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index 553026e2..5b89e2fc 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -62,7 +62,7 @@
       @input="updateSetting($event, settingGroup.key, setting.key)"/>
     <el-input
       v-if="setting.type === 'atom'"
-      :value="data[setting.key]"
+      :value="data[setting.key] ? data[setting.key].substr(1) : null"
       :placeholder="setting.suggestions[0]"
       @input="updateSetting($event, settingGroup.key, setting.key)">
       <template slot="prepend">:</template>
@@ -156,6 +156,17 @@
       <el-switch :value="autoLinkerBooleanValue(setting.key)" @change="processAutoLinker($event, 'auto_linker', 'opts', 'class')"/>
       <el-input-number v-if="autoLinkerBooleanValue(setting.key)" :value="autoLinkerIntegerValue(setting.key)" @input="processAutoLinker($event, settingGroup.key, ':opts', setting.key)"/>
     </div>
+    <div v-if="setting.key === ':mascots'">
+      <div v-for="([name, url, mimeType], index) in mascotsValue" :key="index" class="mascot-container">
+        <div class="mascot-name-container">
+          <el-input :value="name" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', index)"/>
+          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(index, 'emoji', 'groups')"/>
+        </div>
+        <el-input :value="url" placeholder="URL" class="mascot-input" @input="parseMascots($event, 'url', index)"/>
+        <el-input :value="mimeType" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', index)"/>
+      </div>
+      <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
+    </div>
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
 </template>
@@ -221,6 +232,11 @@ export default {
     labelWidth() {
       return this.isMobile ? '100px' : '240px'
     },
+    mascotsValue() {
+      return Object.keys(this.data)
+        .map(mascotName =>
+          [mascotName, this.data[mascotName][':url'], this.data[mascotName][':mime_type']])
+    },
     proxyUrlData() {
       if (!this.data[this.setting.key]) {
         return null
@@ -259,6 +275,12 @@ export default {
       }, {})
       this.updateSetting({ ...updatedValue, '': [] }, this.settingGroup.key, this.setting.key)
     },
+    addRowToMascots() {
+      const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
+        return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
+      }, {})
+      this.updateSetting({ ...updatedValue, '': { url: '', mime_type: '' }}, 'assets', 'mascots')
+    },
     autoLinkerBooleanValue(key) {
       const value = this.data[this.setting.key]
       return typeof value === 'string' || typeof value === 'number'
@@ -279,6 +301,13 @@ export default {
       console.log(updatedValue)
       this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
+    deleteMascotsRow(index) {
+      const filteredValues = this.data[':mascots'].filter((el, i) => index !== i)
+      const updatedValue = filteredValues.reduce((acc, el, i) => {
+        return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
+      }, {})
+      this.updateSetting(updatedValue, 'assets', 'mascots')
+    },
     editableKeywordWithInput(key) {
       return key === ':replace'
     },
@@ -304,6 +333,21 @@ export default {
       console.log(updatedValue)
       this.updateSetting(updatedValue, this.settingGroup.key, this.setting.key)
     },
+    parseMascots(value, inputType, index) {
+      const updatedValue = this.data[':mascots'].reduce((acc, el, i) => {
+        if (index === i) {
+          if (inputType === 'name') {
+            return { ...acc, [value]: { url: el[1], mime_type: el[2] }}
+          } else if (inputType === 'url') {
+            return { ...acc, [el[0]]: { url: value, mime_type: el[2] }}
+          } else {
+            return { ...acc, [el[0]]: { url: el[1], mime_type: value }}
+          }
+        }
+        return { ...acc, [el[0]]: { url: el[1], mime_type: el[2] }}
+      }, {})
+      this.updateSetting(updatedValue, 'assets', 'mascots')
+    },
     parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
       if (typeOfLimit === 'oneLimit') {
         const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }