Home Explore Help
Sign In
YanoPettanko
/
cunnyborea-fe
mirror of https://git.pleroma.social/yano_pettanko/pleroma-fe
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge branch 'admin-dashboard-fixes' into 'develop'

Fixes and minor improvements for admin dashboard

See merge request pleroma/pleroma-fe!1863
HJ 1 year ago
parent
18c0cf1845 b707a14b10
commit
d21e3d5de2
12 changed files with 132 additions and 22 deletions
Unified View Show Diff Stats
  1. 1 0
      changelog.d/admin-dash-fixes.fix
  2. 1 1
      index.html
  3. 1 1
      src/components/global_notice_list/global_notice_list.vue
  4. 48 3
      src/components/settings_modal/admin_tabs/frontends_tab.js
  5. 16 0
      src/components/settings_modal/admin_tabs/frontends_tab.scss
  6. 21 9
      src/components/settings_modal/admin_tabs/frontends_tab.vue
  7. 5 1
      src/components/settings_modal/admin_tabs/instance_tab.vue
  8. 1 0
      src/components/settings_modal/helpers/attachment_setting.js
  9. 34 4
      src/components/settings_modal/helpers/attachment_setting.vue
  10. 3 2
      src/i18n/en.json
  11. 0 1
      src/i18n/zh.json
  12. 1 0
      src/modules/adminSettings.js

+ 1 - 0
changelog.d/admin-dash-fixes.fix
View File 

@@ -0,0 +1 @@
 
+fix admin dashboard not having any feedback on frontend installation

+ 1 - 1
index.html
View File 

@@ -3,8 +3,8 @@
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
 
-    <!--server-generated-meta-->
 
     <link rel="icon" type="image/png" href="/favicon.png">
 
     <link rel="icon" type="image/png" href="/favicon.png">
 
+    <!--server-generated-meta-->
 
   </head>
 
   </head>
 
   <body class="hidden">
 
   <body class="hidden">
 
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
 
     <noscript>To use Pleroma, please enable JavaScript.</noscript>

+ 1 - 1
src/components/global_notice_list/global_notice_list.vue
View File 

@@ -32,7 +32,7 @@
 
   top: calc(var(--navbar-height) + 0.5em);
 
   top: calc(var(--navbar-height) + 0.5em);
 
   width: 100%;
 
   width: 100%;
 
   pointer-events: none;
 
   pointer-events: none;
 
-  z-index: var(--ZI_navbar_popovers);
 
+  z-index: var(--ZI_modals_popovers);
 
   display: flex;
 
   display: flex;
 
   flex-direction: column;
 
   flex-direction: column;
 
   align-items: center;
 
   align-items: center;

+ 48 - 3
src/components/settings_modal/admin_tabs/frontends_tab.js
View File 

@@ -4,6 +4,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 
 import StringSetting from '../helpers/string_setting.vue'
 
 import StringSetting from '../helpers/string_setting.vue'
 
 import GroupSetting from '../helpers/group_setting.vue'
 
 import GroupSetting from '../helpers/group_setting.vue'
 
 import Popover from 'src/components/popover/popover.vue'
 
 import Popover from 'src/components/popover/popover.vue'
 
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 
 
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 
@@ -22,12 +23,18 @@ const FrontendsTab = {
 
       defaultSource: 'admin'
 
       defaultSource: 'admin'
 
     }
 
     }
 
   },
 
   },
 
+  data () {
 
+    return {
 
+      working: false
 
+    }
 
+  },
 
   components: {
 
   components: {
 
     BooleanSetting,
 
     BooleanSetting,
 
     ChoiceSetting,
 
     ChoiceSetting,
 
     IntegerSetting,
 
     IntegerSetting,
 
     StringSetting,
 
     StringSetting,
 
     GroupSetting,
 
     GroupSetting,
 
+    PanelLoading,
 
     Popover
 
     Popover
 
   },
 
   },
 
   created () {
 
   created () {
 
@@ -42,18 +49,56 @@ const FrontendsTab = {
 
     ...SharedComputedObject()
 
     ...SharedComputedObject()
 
   },
 
   },
 
   methods: {
 
   methods: {
 
+    canInstall (frontend) {
 
+      const fe = this.frontends.find(f => f.name === frontend.name)
 
+      if (!fe) return false
 
+      return fe.refs.includes(frontend.ref)
 
+    },
 
+    getSuggestedRef (frontend) {
 
+      const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
 
+      if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
 
+        return defaultFe.ref
 
+      } else {
 
+        return frontend.refs[0]
 
+      }
 
+    },
 
     update (frontend, suggestRef) {
 
     update (frontend, suggestRef) {
 
-      const ref = suggestRef || frontend.refs[0]
 
+      const ref = suggestRef || this.getSuggestedRef(frontend)
 
       const { name } = frontend
 
       const { name } = frontend
 
       const payload = { name, ref }
 
       const payload = { name, ref }
 
 
 
+      this.working = true
 
       this.$store.state.api.backendInteractor.installFrontend({ payload })
 
       this.$store.state.api.backendInteractor.installFrontend({ payload })
 
-        .then((externalUser) => {
 
+        .finally(() => {
 
+          this.working = false
 
+        })
 
+        .then(async (response) => {
 
           this.$store.dispatch('loadFrontendsStuff')
 
           this.$store.dispatch('loadFrontendsStuff')
 
+          if (response.error) {
 
+            const reason = await response.error.json()
 
+            this.$store.dispatch('pushGlobalNotice', {
 
+              level: 'error',
 
+              messageKey: 'admin_dash.frontend.failure_installing_frontend',
 
+              messageArgs: {
 
+                version: name + '/' + ref,
 
+                reason: reason.error
 
+              },
 
+              timeout: 5000
 
+            })
 
+          } else {
 
+            this.$store.dispatch('pushGlobalNotice', {
 
+              level: 'success',
 
+              messageKey: 'admin_dash.frontend.success_installing_frontend',
 
+              messageArgs: {
 
+                version: name + '/' + ref
 
+              },
 
+              timeout: 2000
 
+            })
 
+          }
 
         })
 
         })
 
     },
 
     },
 
     setDefault (frontend, suggestRef) {
 
     setDefault (frontend, suggestRef) {
 
-      const ref = suggestRef || frontend.refs[0]
 
+      const ref = suggestRef || this.getSuggestedRef(frontend)
 
       const { name } = frontend
 
       const { name } = frontend
 
 
 
       this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
 
       this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })

+ 16 - 0
src/components/settings_modal/admin_tabs/frontends_tab.scss
View File 

@@ -3,6 +3,22 @@
 
     padding: 0;
 
     padding: 0;
 
   }
 
   }
 
 
 
+  .relative {
 
+    position: relative;
 
+  }
 
+
 
+  .overlay {
 
+    position: absolute;
 
+    background: var(--bg);
 
+    // fix buttons showing through
 
+    z-index: 2;
 
+    opacity: 0.9;
 
+    top: 0;
 
+    bottom: 0;
 
+    left: 0;
 
+    right: 0;
 
+  }
 
+
 
   dd {
 
   dd {
 
     text-overflow: ellipsis;
 
     text-overflow: ellipsis;
 
     word-wrap: nowrap;
 
     word-wrap: nowrap;

+ 21 - 9
src/components/settings_modal/admin_tabs/frontends_tab.vue
View File 

@@ -10,7 +10,6 @@
 
         <li>
 
         <li>
 
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
 
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
 
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
 
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
 
-          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
 
           <ul class="setting-list">
 
           <ul class="setting-list">
 
             <li>
 
             <li>
 
               <StringSetting path=":pleroma.:frontends.:primary.name" />
 
               <StringSetting path=":pleroma.:frontends.:primary.name" />
 
@@ -24,7 +23,8 @@
 
           </ul>
 
           </ul>
 
         </li>
 
         </li>
 
       </ul>
 
       </ul>
 
-      <div class="setting-list">
 
+      <div class="setting-list relative">
 
+        <PanelLoading class="overlay" v-if="working"/>
 
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
 
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
 
         <ul class="cards-list">
 
         <ul class="cards-list">
 
           <li
 
           <li
 
@@ -86,6 +86,11 @@
 
                       ? $t('admin_dash.frontend.reinstall')
 
                       ? $t('admin_dash.frontend.reinstall')
 
                       : $t('admin_dash.frontend.install')
 
                       : $t('admin_dash.frontend.install')
 
                   }}
 
                   }}
 
+                  <code>
 
+                    {{
 
+                      getSuggestedRef(frontend)
 
+                    }}
 
+                  </code>
 
                 </button>
 
                 </button>
 
                 <Popover
 
                 <Popover
 
                   v-if="frontend.refs.length > 1"
 
                   v-if="frontend.refs.length > 1"
 
@@ -93,13 +98,14 @@
 
                   class="button-dropdown"
 
                   class="button-dropdown"
 
                   placement="bottom"
 
                   placement="bottom"
 
                 >
 
                 >
 
-                  <template #content>
 
+                  <template #content="{close}">
 
                     <div class="dropdown-menu">
 
                     <div class="dropdown-menu">
 
                       <button
 
                       <button
 
                         v-for="ref in frontend.refs"
 
                         v-for="ref in frontend.refs"
 
                         :key="ref"
 
                         :key="ref"
 
                         class="button-default dropdown-item"
 
                         class="button-default dropdown-item"
 
-                        @click="update(frontend, ref)"
 
+                        @click.prevent="update(frontend, ref)"
 
+                        @click="close"
 
                       >
 
                       >
 
                         <i18n-t keypath="admin_dash.frontend.install_version">
 
                         <i18n-t keypath="admin_dash.frontend.install_version">
 
                           <template #version>
 
                           <template #version>
 
@@ -128,14 +134,19 @@
 
                   class="button button-default btn"
 
                   class="button button-default btn"
 
                   type="button"
 
                   type="button"
 
                   :disabled="
 
                   :disabled="
 
-                    adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
 
-                      adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
 
+                    adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
 
+                      adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
 
                   "
 
                   "
 
                   @click="setDefault(frontend)"
 
                   @click="setDefault(frontend)"
 
                 >
 
                 >
 
                   {{
 
                   {{
 
                     $t('admin_dash.frontend.set_default')
 
                     $t('admin_dash.frontend.set_default')
 
                   }}
 
                   }}
 
+                  <code>
 
+                    {{
 
+                      getSuggestedRef(frontend)
 
+                    }}
 
+                  </code>
 
                 </button>
 
                 </button>
 
                 {{ ' ' }}
 
                 {{ ' ' }}
 
                 <Popover
 
                 <Popover
 
@@ -144,13 +155,14 @@
 
                   class="button-dropdown"
 
                   class="button-dropdown"
 
                   placement="bottom"
 
                   placement="bottom"
 
                 >
 
                 >
 
-                  <template #content>
 
+                  <template #content="{close}">
 
                     <div class="dropdown-menu">
 
                     <div class="dropdown-menu">
 
                       <button
 
                       <button
 
-                        v-for="ref in frontend.refs.slice(1)"
 
+                        v-for="ref in frontend.installedRefs || frontend.refs"
 
                         :key="ref"
 
                         :key="ref"
 
                         class="button-default dropdown-item"
 
                         class="button-default dropdown-item"
 
-                        @click="setDefault(frontend, ref)"
 
+                        @click.prevent="setDefault(frontend, ref)"
 
+                        @click="close"
 
                       >
 
                       >
 
                         <i18n-t keypath="admin_dash.frontend.set_default_version">
 
                         <i18n-t keypath="admin_dash.frontend.set_default_version">
 
                           <template #version>
 
                           <template #version>

+ 5 - 1
src/components/settings_modal/admin_tabs/instance_tab.vue
View File 

@@ -6,6 +6,10 @@
 
         <li>
 
         <li>
 
           <StringSetting path=":pleroma.:instance.:name" />
 
           <StringSetting path=":pleroma.:instance.:name" />
 
         </li>
 
         </li>
 
+        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
 
+        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
 
+          <AttachmentSetting compact path=":pleroma.:instance.:favicon" />
 
+        </li>
 
         <li>
 
         <li>
 
           <StringSetting path=":pleroma.:instance.:email" />
 
           <StringSetting path=":pleroma.:instance.:email" />
 
         </li>
 
         </li>
 
@@ -16,7 +20,7 @@
 
           <StringSetting path=":pleroma.:instance.:short_description" />
 
           <StringSetting path=":pleroma.:instance.:short_description" />
 
         </li>
 
         </li>
 
         <li>
 
         <li>
 
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
 
+          <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
 
         </li>
 
         </li>
 
         <li>
 
         <li>
 
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
 
           <AttachmentSetting path=":pleroma.:instance.:background_image" />

+ 1 - 0
src/components/settings_modal/helpers/attachment_setting.js
View File 

@@ -7,6 +7,7 @@ export default {
 
   ...Setting,
 
   ...Setting,
 
   props: {
 
   props: {
 
     ...Setting.props,
 
     ...Setting.props,
 
+    compact: Boolean,
 
     acceptTypes: {
 
     acceptTypes: {
 
       type: String,
 
       type: String,
 
       required: false,
 
       required: false,

+ 34 - 4
src/components/settings_modal/helpers/attachment_setting.vue
View File 

@@ -2,6 +2,7 @@
 
   <span
 
   <span
 
     v-if="matchesExpertLevel"
 
     v-if="matchesExpertLevel"
 
     class="AttachmentSetting"
 
     class="AttachmentSetting"
 
+    :class="{ '-compact': compact }"
 
   >
 
   >
 
     <label
 
     <label
 
       :for="path"
 
       :for="path"
 
@@ -24,8 +25,8 @@
 
       {{ backendDescriptionDescription + ' ' }}
 
       {{ backendDescriptionDescription + ' ' }}
 
     </p>
 
     </p>
 
     <div class="attachment-input">
 
     <div class="attachment-input">
 
-      <div>{{ $t('settings.url') }}</div>
 
-      <div class="controls">
 
+      <div class="controls control-field">
 
+        <label for="path">{{ $t('settings.url') }}</label>
 
         <input
 
         <input
 
           :id="path"
 
           :id="path"
 
           class="string-input"
 
           class="string-input"
 
@@ -40,7 +41,7 @@
 
         />
 
         />
 
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
 
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
 
       </div>
 
       </div>
 
-      <div>{{ $t('settings.preview') }}</div>
 
+      <div v-if="!compact">{{ $t('settings.preview') }}</div>
 
       <Attachment
 
       <Attachment
 
         class="attachment"
 
         class="attachment"
 
         :compact="compact"
 
         :compact="compact"
 
@@ -50,7 +51,7 @@
 
         @setMedia="onMedia"
 
         @setMedia="onMedia"
 
         @naturalSizeLoad="onNaturalSizeLoad"
 
         @naturalSizeLoad="onNaturalSizeLoad"
 
       />
 
       />
 
-      <div class="controls">
 
+      <div class="controls control-upload">
 
         <MediaUpload
 
         <MediaUpload
 
           ref="mediaUpload"
 
           ref="mediaUpload"
 
           class="media-upload-icon"
 
           class="media-upload-icon"
 
@@ -84,6 +85,35 @@
 
     width: 20em;
 
     width: 20em;
 
   }
 
   }
 
 
 
+  &.-compact {
 
+    .attachment-input {
 
+      flex-direction: row;
 
+      align-items: flex-end;
 
+    }
 
+
 
+    .attachment {
 
+      flex: 0;
 
+      order: 0;
 
+      display: block;
 
+      min-width: 4em;
 
+      height: 4em;
 
+      align-self: center;
 
+      margin-bottom: 0;
 
+    }
 
+
 
+    .control-field {
 
+      order: 1;
 
+      min-width: 12em;
 
+      margin-left: 0.5em;
 
+    }
 
+
 
+    .control-upload {
 
+      order: 2;
 
+      min-width: 12em;
 
+      padding: 0 0.5em;
 
+    }
 
+  }
 
+
 
   .controls {
 
   .controls {
 
     margin-bottom: 0.5em;
 
     margin-bottom: 0.5em;

+ 3 - 2
src/i18n/en.json
View File 

@@ -914,8 +914,9 @@
 
       "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
 
       "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
 
       "default_frontend": "Default front-end",
 
       "default_frontend": "Default front-end",
 
       "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
 
       "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
 
-      "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
 
-      "available_frontends": "Available for install"
 
+      "available_frontends": "Available for install",
 
+      "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
 
+      "success_installing_frontend": "Frontend {version} successfully installed"
 
     },
 
     },
 
     "temp_overrides": {
 
     "temp_overrides": {
 
       ":pleroma": {
 
       ":pleroma": {

+ 0 - 1
src/i18n/zh.json
View File 

@@ -1266,7 +1266,6 @@
 
       "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
 
       "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
 
       "default_frontend": "默认前端",
 
       "default_frontend": "默认前端",
 
       "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
 
       "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
 
-      "default_frontend_tip2": "WIP: 由于 Pleroma 后端没有正确列出所有已安装的前端，你必须手动输入名称和引用。下面的列表提供了填写这些值的快捷方式。",
 
       "available_frontends": "可供安装"
 
       "available_frontends": "可供安装"
 
     },
 
     },
 
     "temp_overrides": {
 
     "temp_overrides": {

+ 1 - 0
src/modules/adminSettings.js
View File 

@@ -26,6 +26,7 @@ const adminSettingsStorage = {
 
     },
 
     },
 
     setAvailableFrontends (state, { frontends }) {
 
     setAvailableFrontends (state, { frontends }) {
 
       state.frontends = frontends.map(f => {
 
       state.frontends = frontends.map(f => {
 
+        f.installedRefs = f.installed_refs
 
         if (f.name === 'pleroma-fe') {
 
         if (f.name === 'pleroma-fe') {
 
           f.refs = ['master', 'develop']
 
           f.refs = ['master', 'develop']
 
         } else {
 
         } else {