From a5fe01a07a1f7cf53a61a5b27cfe48c2cddcaff0 Mon Sep 17 00:00:00 2001
From: Martin Artnik <martin@scinote.net>
Date: Mon, 29 May 2023 09:33:18 +0200
Subject: [PATCH] Add 'no actions' message to action toolbar [SCI-8525]

---
 app/assets/stylesheets/shared/action_toolbar.scss |  4 ++++
 app/javascript/vue/components/action_toolbar.vue  | 15 ++++++++++++++-
 config/locales/en.yml                             |  3 +++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/shared/action_toolbar.scss b/app/assets/stylesheets/shared/action_toolbar.scss
index d76f29050..7d75f18c0 100644
--- a/app/assets/stylesheets/shared/action_toolbar.scss
+++ b/app/assets/stylesheets/shared/action_toolbar.scss
@@ -15,6 +15,10 @@
     margin-bottom: -2px;
     width: 16px;
   }
+
+  .sn-action-toolbar__message {
+    padding: 8px;
+  }
 }
 
 @media (max-width: 1000px) {
diff --git a/app/javascript/vue/components/action_toolbar.vue b/app/javascript/vue/components/action_toolbar.vue
index 8554109f0..0fb424950 100644
--- a/app/javascript/vue/components/action_toolbar.vue
+++ b/app/javascript/vue/components/action_toolbar.vue
@@ -1,9 +1,12 @@
 <template>
-  <div v-if="loading || actions.length" class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md shadow-[0_-12px_24px_-12px_rgba(35,31,32,0.2)]" :style="`width: ${width}px; bottom: ${bottom}px;`">
+  <div v-if="!paramsAreBlank" class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md shadow-[0_-12px_24px_-12px_rgba(35,31,32,0.2)]" :style="`width: ${width}px; bottom: ${bottom}px;`">
     <div class="sn-action-toolbar__actions flex">
       <div v-if="loading && !actions.length" class="sn-action-toolbar__action mr-1.5">
         <a class="btn btn-light"></a>
       </div>
+      <div v-if="!loading && actions.length === 0" class="sn-action-toolbar__message">
+        {{ i18n.t('action_toolbar.no_actions') }}
+      </div>
       <div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action mr-1.5">
         <a :class="`btn btn-light ${action.button_class}`"
           :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
@@ -36,6 +39,7 @@
         multiple: false,
         params: {},
         reloadCallback: null,
+        loaded: false,
         loading: false,
         width: 0,
         bottom: 0
@@ -60,6 +64,15 @@
     beforeDestroy() {
       delete window.actionToolbarComponent;
     },
+    computed: {
+      paramsAreBlank() {
+        let values = Object.values(this.params);
+
+        if (values.length === 0) return true;
+
+        return values.map((v) => !v.length).reduce((v) => v);
+      }
+    },
     methods: {
       setWidth() {
         this.width = $(this.$el).parent().width();
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ddae45c1e..430ebfa8c 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -291,6 +291,9 @@ en:
     core_version: "SciNote core version"
     addon_versions: "Addon versions"
 
+  action_toolbar:
+    no_actions: "There is no action available"
+
   left_menu_bar:
     dashboard: "Dashboard"
     projects: "Projects"