Use laravel nova actions instead of getting new ones

resources/js/components/IndexActions.vue → resources/js/components/ActionButtonGroup.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="flex justify-end items-center mr-3 ml-1">
-    <invisible-actions
+    <invisible-actions-dropdown
       class="mr-2"
       v-if="shouldShowInvisibleActions"
-      :actions="invisibleActions.reverse()"
+      :actions="invisibleActions"
       :show-arrow="showInvisibleActionsArrow"
       :icon-type="invisibleActionsIcon"
       @dropdown-link-click="handleClick"
-    ></invisible-actions>
+    ></invisible-actions-dropdown>
 
     <template v-for="action in visibleActions">
       <action-button
@@ -45,20 +45,18 @@
 </template>
 <script>
 import DetachedAction from "../mixins/DetachedAction";
-import ActionLink from "./ActionButton";
 
 export default {
-  components: { ActionLink },
   mixins: [DetachedAction],
 
-  props: ['shouldShowActions', 'resourceName', 'selectedResources'],
-  methods: {
-    handleResponse(response) {
-      this.actionsList = _.filter(
-        response.data.actions,
-        (action) => action.showOnIndexToolbar
-      );
+  props: ['shouldShowActions', 'resourceName', 'resourceId', 'actions', 'selectedResources'],
+  watch: {
+    actions(newActions, oldActions) {
+      this.actionsList = newActions.filter((action) => action.hasOwnProperty('detachedAction'));
     },
   },
+  mounted() {
+    this.actionsList = this.actions;
+  }
 };
 </script>

resources/js/mixins/DetachedAction.js

@@ -6,48 +6,23 @@ export default {
   mixins: [HandlesActions, InteractsWithResourceInformation],
 
   data: () => ({
-    visibleActionsDefault: 3,
+    visibleActionsDefaultLimit: 3,
     actionsList: [],
     confirmActionModalOpened: false,
     invisibleActionsOpen: false,
   }),
 
-  /**
-   * Mount the component and retrieve its initial data.
-   */
-  async created() {
-    this.getDetachedActions()
-
+  created() {
     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) {
@@ -69,10 +44,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)
     },
 
     /**
@@ -97,14 +72,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

@@ -50,12 +50,14 @@
           </div>
 
           <div class="ml-auto flex items-center">
-            <DetailActions
-                :should-show-actions="shouldShowActionSelector"
-                :resource-id="resource.id.value"
+            <ActionButtonGroup
+                :should-show-actions="computedShouldShowActions"
                 :resource-name="resourceName"
-                @actionExecuted="getResources"
-            ></DetailActions>
+                :resource-id="resource.id.value"
+                :actions="actions"
+                :selected-resources="computedSelectedResources"
+                @actionExecuted="actionExecuted"
+            ></ActionButtonGroup>
 
             <!-- Actions Menu -->
             <DetailActionDropdown
@@ -102,5 +104,23 @@ 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>

resources/js/nova-components/ResourceTableToolbar.vue

@@ -23,20 +23,22 @@
 
       <!-- Toolbar Items -->
       <div class="h-9 ml-auto flex items-center pr-2 md:pr-3">
-        <IndexActions
-            :should-show-actions="shouldShowActionSelector"
+        <ActionButtonGroup
+            :should-show-actions="computedShouldShowActionSelector"
             :resource-name="resourceName"
+            :actions="availableActions"
             :selected-resources="selectedResourcesForActionSelector"
             @actionExecuted="getResources"
-        ></IndexActions>
+        ></ActionButtonGroup>
 
         <!-- Action Selector -->
         <div class="hidden md:flex px-2">
           <ActionSelector
-            v-if="shouldShowActionSelector"
+            v-if="computedShouldShowActionSelector"
             :resource-name="resourceName"
-            :actions="availableActions"
-            :pivot-actions="pivotActions"
+            :resource-id="null"
+            :actions="computedAvailableActions"
+            :pivot-actions="computedPivotActions"
             :pivot-name="pivotName"
             :endpoint="actionsEndpoint"
             :action-query-string="actionQueryString"
@@ -85,19 +87,11 @@
           :via-many-to-many="viaManyToMany"
           :all-matching-resource-count="allMatchingResourceCount"
           :all-matching-selected="selectAllMatchingChecked"
-          :authorized-to-delete-selected-resources="
-            authorizedToDeleteSelectedResources
-          "
-          :authorized-to-force-delete-selected-resources="
-            authorizedToForceDeleteSelectedResources
-          "
+          :authorized-to-delete-selected-resources="authorizedToDeleteSelectedResources"
+          :authorized-to-force-delete-selected-resources="authorizedToForceDeleteSelectedResources"
           :authorized-to-delete-any-resources="authorizedToDeleteAnyResources"
-          :authorized-to-force-delete-any-resources="
-            authorizedToForceDeleteAnyResources
-          "
-          :authorized-to-restore-selected-resources="
-            authorizedToRestoreSelectedResources
-          "
+          :authorized-to-force-delete-any-resources="authorizedToForceDeleteAnyResources"
+          :authorized-to-restore-selected-resources="authorizedToRestoreSelectedResources"
           :authorized-to-restore-any-resources="authorizedToRestoreAnyResources"
           @deleteSelected="deleteSelectedResources"
           @deleteAllMatching="deleteAllMatchingResources"
@@ -113,14 +107,14 @@
 
     <!-- Mobile Action Selector -->
     <div
-      v-if="shouldShowActionSelector"
+      v-if="computedShouldShowActionSelector"
       class="flex items-center md:hidden px-2 pt-3 mt-2 md:mt-0 border-t border-gray-200 dark:border-gray-700"
     >
       <ActionSelector
         width="full"
         :resource-name="resourceName"
-        :actions="availableActions"
-        :pivot-actions="pivotActions"
+        :actions="computedAvailableActions"
+        :pivot-actions="computedPivotActions"
         :pivot-name="pivotName"
         :endpoint="actionsEndpoint"
         :query-string="actionQueryString"
@@ -135,5 +129,31 @@
 import ResourceTableToolbar from "@/components/ResourceTableToolbar";
 export default {
   extends: ResourceTableToolbar,
+
+  computed: {
+    computedAvailableActions() {
+      return this.availableActions.length
+          ? this.availableActions.filter(action => !action.hasOwnProperty('detachedAction'))
+          : this.availableActions;
+    },
+    computedStandaloneActions() {
+      return this.computedAvailableActions.length
+          ? this.computedAvailableActions.filter(action => action.standalone)
+          : this.computedAvailableActions;
+    },
+    computedPivotActions() {
+      if (!this.pivotActions) {
+        return this.pivotActions;
+      }
+
+      this.pivotActions.actions = this.pivotActions.actions
+          .filter(action => !action.hasOwnProperty('detachedAction'))
+
+      return this.pivotActions;
+    },
+    computedShouldShowActionSelector() {
+      return this.selectedResources.length > 0 || this.computedStandaloneActions.length > 0
+    }
+  }
 };
 </script>

resources/js/tool.js

@@ -1,30 +1,9 @@
 Nova.booting((app, store) => {
-  app.component(
-    "ActionButton",
-    require("./components/ActionButton.vue").default
-  );
   app.component("ActionLink", require("./components/ActionLink.vue").default);
-  app.component(
-    "InvisibleActions",
-    require("./components/InvisibleActions.vue").default
-  );
-  app.component(
-    "DetailActions",
-    require("./components/DetailActions.vue").default
-  );
-  app.component(
-    "IndexActions",
-    require("./components/IndexActions.vue").default
-  );
-
-  app.component(
-    "ResourceDetail",
-    require("./nova-components/ResourceDetail.vue").default
-  );
-
-  app.component(
-    "ResourceTableToolbar",
-    require("./nova-components/ResourceTableToolbar.vue").default
-  );
+  app.component("InvisibleActionsDropdown", require("./components/InvisibleActionsDropdown.vue").default);
+  app.component("ActionButton", require("./components/ActionButton.vue").default);
+  app.component("ActionButtonGroup", require("./components/ActionButtonGroup.vue").default);
 
+  app.component("ResourceDetail", require("./nova-components/ResourceDetail.vue").default);
+  app.component("ResourceTableToolbar", require("./nova-components/ResourceTableToolbar.vue").default);
 });