Share button visible on custom reports page

frontend/src/modules/report/components/report-dropdown.vue

@@ -22,15 +22,6 @@
         <i class="text-xl ri-more-fill"></i>
       </button>
       <template #dropdown>
-        <el-dropdown-item
-          v-if="report.public && showViewReportPublic"
-          :command="{
-            action: 'reportPublicUrl',
-            report: report
-          }"
-          ><i class="ri-link mr-1"></i>Copy Public
-          Url</el-dropdown-item
-        >
         <el-dropdown-item
           v-if="showViewReport"
           :command="{
@@ -49,6 +40,15 @@
           ><i class="ri-pencil-line mr-1" />Edit
           Report</el-dropdown-item
         >
+        <el-dropdown-item
+          v-if="report.public && showViewReportPublic"
+          :command="{
+            action: 'reportPublicUrl',
+            report: report
+          }"
+          ><i class="ri-link mr-1"></i>Copy Public
+          Url</el-dropdown-item
+        >
         <el-divider
           v-if="showEditReport || showViewReportPublic"
           class="border-gray-200 !my-2"

frontend/src/modules/report/components/report-share-button.vue

@@ -1,8 +1,12 @@
 <template>
-  <el-dropdown trigger="click" placement="bottom-end"
+  <el-dropdown
+    trigger="click"
+    placement="bottom-end"
+    @visible-change="open = $event"
     ><el-button
       type="button"
       class="btn btn--transparent btn--md"
+      :class="{ '!bg-gray-200': open }"
     >
       <i class="ri-share-line mr-2"></i>Share
     </el-button>
@@ -62,7 +66,12 @@
 
 <script setup>
 import Message from '@/shared/message/message'
-import { computed, defineProps, defineEmits } from 'vue'
+import {
+  ref,
+  computed,
+  defineProps,
+  defineEmits
+} from 'vue'
 import AuthCurrentTenant from '@/modules/auth/auth-current-tenant'
 import { mapActions } from '@/shared/vuex/vuex.helpers'
 
@@ -78,6 +87,8 @@ const props = defineProps({
   }
 })
 
+const open = ref(false)
+
 const { doUpdate } = mapActions('report')
 
 const model = computed({

frontend/src/modules/report/pages/report-form-page.vue

@@ -24,11 +24,6 @@
             ><i class="ri-eye-line mr-2"></i>View
             report</router-link
           >
-          <app-report-share-button
-            :id="record.id"
-            v-model="isPublic"
-            class="mr-4"
-          />
           <app-report-dropdown
             :report="record"
             :show-view-report="false"
@@ -49,15 +44,13 @@
 import { mapActions, mapGetters } from 'vuex'
 import AppReportForm from '@/modules/report/components/report-form.vue'
 import AppReportDropdown from '@/modules/report/components/report-dropdown.vue'
-import AppReportShareButton from '@/modules/report/components/report-share-button.vue'
 
 export default {
   name: 'AppReportFormPage',
 
   components: {
     AppReportForm,
-    AppReportDropdown,
-    AppReportShareButton
+    AppReportDropdown
   },
 
   props: {

frontend/src/modules/report/pages/report-view-page.vue

@@ -27,22 +27,27 @@
               {{ report.name }}
             </h1>
             <div v-if="!tenantId" class="flex items-center">
-              <span
-                class="badge mr-4"
-                :class="report.public ? 'badge--green' : ''"
-                >{{
-                  report.public ? 'Public' : 'Private'
-                }}</span
-              >
-              <router-link
-                class="btn btn--transparent btn--sm mr-4"
-                :to="{ name: 'reportEdit', params: { id } }"
-                ><i class="ri-pencil-line mr-2"></i
-                >Edit</router-link
+              <div
+                v-if="report.public"
+                class="flex items-center gap-2 mr-9"
               >
+                <i
+                  class="ri-global-line text-base text-green-600"
+                />
+                <div
+                  class="text-sm text-green-600 font-medium"
+                >
+                  Public
+                </div>
+              </div>
+              <app-report-share-button
+                :id="id"
+                v-model="report.public"
+                class="mr-4"
+              />
               <app-report-dropdown
                 :report="report"
-                :show-edit-report="false"
+                :show-edit-report="true"
                 :show-view-report="false"
               />
             </div>
@@ -64,11 +69,13 @@ import { mapState, mapGetters, mapActions } from 'vuex'
 import ReportGridLayout from '../components/report-grid-layout'
 import ReportDropdown from '../components/report-dropdown'
 import AuthCurrentTenant from '@/modules/auth/auth-current-tenant'
+import ReportShareButton from '@/modules/report/components/report-share-button.vue'
 
 export default {
   name: 'AppReportViewPage',
 
   components: {
+    'app-report-share-button': ReportShareButton,
     'app-report-grid-layout': ReportGridLayout,
     'app-report-dropdown': ReportDropdown
   },