add nova

nova/resources/js/components/ActionSelector.vue

@@ -0,0 +1,111 @@
+<template>
+  <SelectControl
+    v-bind="$attrs"
+    v-if="actionsForSelect.length > 0"
+    ref="actionSelectControl"
+    size="xs"
+    @change="handleSelectionChange"
+    :options="actionsForSelect"
+    dusk="action-select"
+    selected=""
+    :class="{ 'max-w-[6rem]': width === 'auto', 'w-full': width === 'full' }"
+    :aria-label="__('Select Action')"
+  >
+    <option value="" disabled selected>{{ __('Actions') }}</option>
+  </SelectControl>
+
+  <!-- Confirm Action Modal -->
+  <component
+    class="text-left"
+    v-if="actionModalVisible"
+    :show="actionModalVisible"
+    :is="selectedAction?.component"
+    :working="working"
+    :selected-resources="selectedResources"
+    :resource-name="resourceName"
+    :action="selectedAction"
+    :errors="errors"
+    @confirm="executeAction"
+    @close="closeConfirmationModal"
+  />
+
+  <component
+    v-if="responseModalVisible"
+    :show="responseModalVisible"
+    :is="actionResponseData?.modal"
+    @confirm="closeResponseModal"
+    @close="closeResponseModal"
+    :data="actionResponseData"
+  />
+</template>
+
+<script setup>
+import { useActions } from '@/composables/useActions'
+import { useStore } from 'vuex'
+import { computed, ref } from 'vue'
+
+// Elements
+const actionSelectControl = ref(null)
+
+const store = useStore()
+
+const emitter = defineEmits(['actionExecuted'])
+
+const props = defineProps({
+  width: { type: String, default: 'auto' },
+  pivotName: { type: String, default: null },
+
+  resourceName: {},
+  viaResource: {},
+  viaResourceId: {},
+  viaRelationship: {},
+  relationshipType: {},
+  pivotActions: {
+    type: Object,
+    default: () => ({ name: 'Pivot', actions: [] }),
+  },
+  actions: { type: Array, default: [] },
+  selectedResources: { type: [Array, String], default: () => [] },
+  endpoint: { type: String, default: null },
+  triggerDuskAttribute: { type: String, default: null },
+})
+
+const {
+  errors,
+  actionModalVisible,
+  responseModalVisible,
+  openConfirmationModal,
+  closeConfirmationModal,
+  closeResponseModal,
+  handleActionClick,
+  selectedAction,
+  setSelectedActionKey,
+  determineActionStrategy,
+  working,
+  executeAction,
+  availableActions,
+  availablePivotActions,
+  actionResponseData,
+} = useActions(props, emitter, store)
+
+const handleSelectionChange = event => {
+  setSelectedActionKey(event)
+  determineActionStrategy()
+
+  actionSelectControl.value.resetSelection()
+}
+
+const actionsForSelect = computed(() => [
+  ...availableActions.value.map(a => ({
+    value: a.uriKey,
+    label: a.name,
+    disabled: a.authorizedToRun === false,
+  })),
+  ...availablePivotActions.value.map(a => ({
+    group: props.pivotName,
+    value: a.uriKey,
+    label: a.name,
+    disabled: a.authorizedToRun === false,
+  })),
+])
+</script>