Fix selected resources issue

package.json

@@ -12,7 +12,7 @@
     "devDependencies": {
         "@vue/compiler-sfc": "^3.2.22",
         "cross-env": "^7.0.2",
-        "laravel-mix": "^6.0.41",
+        "laravel-mix": "^6.0.49",
         "resolve-url-loader": "^3.1.1",
         "sass": "^1.51.0",
         "sass-loader": "^12.6.0",

resources/js/components/ActionButtonGroup.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="flex justify-end items-center mr-3 ml-1">
+    <invisible-actions-dropdown
+      class="mr-2"
+      v-if="shouldShowInvisibleActions"
+      :actions="invisibleActions"
+      :show-arrow="showInvisibleActionsArrow"
+      :icon-type="invisibleActionsIcon"
+      @dropdown-link-click="handleClick"
+    ></invisible-actions-dropdown>
+
+    <template v-for="action in visibleActions">
+      <action-button
+          class="mr-3"
+          v-if="shouldShowActions || action.standalone"
+          :key="action.uriKey"
+          :action="action"
+          @action-button-clicked="handleClick"
+      ></action-button>
+    </template>
+
+    <!-- Confirm Action Modal -->
+    <component
+      v-if="confirmActionModalOpened"
+      class="text-left"
+      :show="confirmActionModalOpened"
+      :is="selectedAction.component"
+      :working="working"
+      :selected-resources="selectedResources"
+      :resource-name="resourceName"
+      :action="selectedAction"
+      :errors="errors"
+      @confirm="executeAction"
+      @close="closeConfirmationModal"
+    />
+
+    <component
+      :is="actionResponseData.modal"
+      @close="closeActionResponseModal"
+      v-if="showActionResponseModal"
+      :show="showActionResponseModal"
+      :data="actionResponseData"
+    />
+  </div>
+</template>
+<script>
+import DetachedAction from "../mixins/DetachedAction";
+
+export default {
+  mixins: [DetachedAction],
+
+  props: ['shouldShowActions', 'resourceName', 'resourceId', 'actions', 'endpoint', 'actionQueryString', 'selectedResources'],
+
+  watch: {
+    actions(newActions, oldActions) {
+      this.actionsList = newActions.filter((action) => action.hasOwnProperty('detachedAction'));
+    },
+  },
+
+  computed: {
+    currentSearch() {
+      return this.actionQueryString.currentSearch
+    },
+
+    encodedFilters() {
+      return this.actionQueryString.encodedFilters
+    },
+
+    currentTrashed() {
+      return this.actionQueryString.currentTrashed
+    },
+
+    viaResource() {
+      return this.actionQueryString.viaResource
+    },
+
+    viaResourceId() {
+      return this.actionQueryString.viaResourceId
+    },
+
+    viaRelationship() {
+      return this.actionQueryString.viaRelationship
+    },
+
+    actionsForSelect() {
+      return [
+        ...this.visibleActions.map(a => ({
+          value: a.uriKey,
+          label: a.name,
+        })),
+      ]
+    },
+  },
+
+  created() {
+    this.actionsList = this.actions;
+  }
+};
+</script>

resources/js/mixins/DetachedAction.js

@@ -6,49 +6,17 @@ export default {
   mixins: [HandlesActions, InteractsWithResourceInformation],
 
   data: () => ({
-    visibleActionsDefault: 3,
+    visibleActionsDefaultLimit: 3,
     actionsList: [],
-    selectedResources: 'all',
     confirmActionModalOpened: false,
     invisibleActionsOpen: false,
   }),
 
-  /**
-   * Mount the component and retrieve its initial data.
-   */
-  async created() {
-    this.getDetachedActions()
-
-    Nova.$on('actionExecuted', () => {
-      Nova.$emit('refresh-resources')
-    })
-  },
-
   methods: {
-    /**
-     * Get the actions available for the current resource.
-     */
-    getDetachedActions() {
-      this.actionsList = []
-      return Nova.request()
-        .get(`/nova-api/${this.resourceName}/actions`, {
-          params: {
-            viaResource: this.viaResource,
-            viaResourceId: this.viaResourceId,
-            viaRelationship: this.viaRelationship,
-            relationshipType: this.relationshipType
-          }
-        })
-        .then(response => {
-          this.handleResponse(response)
-        })
-    },
-
     /**
      * Determine whether the action should redirect or open a confirmation modal
      */
     determineActionStrategy(action) {
-
       this.selectedActionKey = action.uriKey;
 
       if (this.selectedAction.withoutConfirmation) {
@@ -70,10 +38,10 @@ export default {
 
   computed: {
     /**
-     * Get all of the detached actions.
+     * Get all the detached actions.
      */
     detachedActions() {
-      return _.filter(this.allActions, a => a.detachedAction || false)
+      return _.filter(this.actionsList, action => action.detachedAction || false)
     },
 
     /**
@@ -98,14 +66,7 @@ export default {
     visibleActionsLimit() {
       return this.resourceInformation.hasOwnProperty('visibleActionsLimit')
         ? this.resourceInformation.visibleActionsLimit
-        : this.visibleActionsDefault;
-    },
-
-    /**
-     * Get all of the available actions.
-     */
-    allActions() {
-      return this.actionsList
+        : this.visibleActionsDefaultLimit;
     },
 
     /**

resources/js/nova-components/ResourceDetail.vue → resources/js/nova-components/ResourceDetailView.vue

@@ -50,12 +50,22 @@
           </div>
 
           <div class="ml-auto flex items-center">
-            <DetailActions :resourceName="resourceName"></DetailActions>
+            <ActionButtonGroup
+                :should-show-actions="computedShouldShowActions"
+                :resource-name="resourceName"
+                :resource-id="resource.id.value"
+                :actions="actions"
+                :endpoint="actionsEndpoint"
+                :action-query-string="actionQueryString"
+                :selected-resources="computedSelectedResources"
+                @actionExecuted="actionExecuted"
+            ></ActionButtonGroup>
+
             <!-- Actions Menu -->
             <DetailActionDropdown
               v-if="resource"
               :resource="resource"
-              :actions="actions"
+              :actions="computedActions"
               :via-resource="viaResource"
               :via-resource-id="viaResourceId"
               :via-relationship="viaRelationship"
@@ -96,5 +106,24 @@ import Detail from "@/views/Detail";
 
 export default {
   extends: Detail,
+
+  computed: {
+    computedActions() {
+      return this.actions.length
+          ? this.actions.filter(action => !action.hasOwnProperty('detachedAction'))
+          : this.actions;
+    },
+    computedStandaloneActions() {
+      return this.computedActions.length
+          ? this.computedActions.filter(action => action.standalone)
+          : this.computedActions;
+    },
+    computedShouldShowActions() {
+      return this.computedSelectedResources.length > 0 || this.computedStandaloneActions.length > 0
+    },
+    computedSelectedResources() {
+      return [this.resource.id.value];
+    },
+  }
 };
 </script>