112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<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>
|