125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
v-if="actions.length > 0 || availablePivotActions.length > 0"
|
|
class="flex items-center mr-3"
|
|
>
|
|
<select
|
|
data-testid="action-select"
|
|
dusk="action-select"
|
|
ref="selectBox"
|
|
v-model="selectedActionKey"
|
|
class="form-control form-select mr-2"
|
|
>
|
|
<option value="" disabled selected>{{ __('Select Action') }}</option>
|
|
|
|
<optgroup
|
|
v-if="availableActions.length > 0"
|
|
:label="resourceInformation.singularLabel"
|
|
>
|
|
<option
|
|
v-for="action in availableActions"
|
|
:value="action.uriKey"
|
|
:key="action.urikey"
|
|
:selected="action.uriKey == selectedActionKey"
|
|
>
|
|
{{ action.name }}
|
|
</option>
|
|
</optgroup>
|
|
|
|
<optgroup
|
|
class="pivot-option-group"
|
|
:label="pivotName"
|
|
v-if="availablePivotActions.length > 0"
|
|
>
|
|
<option
|
|
v-for="action in availablePivotActions"
|
|
:value="action.uriKey"
|
|
:key="action.urikey"
|
|
:selected="action.uriKey == selectedActionKey"
|
|
>
|
|
{{ action.name }}
|
|
</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
<button
|
|
data-testid="action-confirm"
|
|
dusk="run-action-button"
|
|
@click.prevent="determineActionStrategy"
|
|
:disabled="!selectedAction"
|
|
class="btn btn-default btn-primary flex items-center justify-center px-3"
|
|
:class="{ 'btn-disabled': !selectedAction }"
|
|
:title="__('Run Action')"
|
|
>
|
|
<icon type="play" class="text-white" style="margin-left: 7px" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Action Confirmation Modal -->
|
|
<portal to="modals" transition="fade-transition">
|
|
<component
|
|
v-if="confirmActionModalOpened"
|
|
class="text-left"
|
|
: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"
|
|
:data="actionResponseData"
|
|
/>
|
|
</portal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash'
|
|
import HandlesActions from '@/mixins/HandlesActions'
|
|
import { InteractsWithResourceInformation } from 'laravel-nova'
|
|
|
|
export default {
|
|
mixins: [InteractsWithResourceInformation, HandlesActions],
|
|
|
|
props: {
|
|
selectedResources: {
|
|
type: [Array, String],
|
|
default: () => [],
|
|
},
|
|
pivotActions: {},
|
|
pivotName: String,
|
|
},
|
|
|
|
data: () => ({
|
|
showActionResponseModal: false,
|
|
actionResponseData: {},
|
|
}),
|
|
|
|
watch: {
|
|
/**
|
|
* Watch the actions property for changes.
|
|
*/
|
|
actions() {
|
|
this.selectedActionKey = ''
|
|
this.initializeActionFields()
|
|
},
|
|
|
|
/**
|
|
* Watch the pivot actions property for changes.
|
|
*/
|
|
pivotActions() {
|
|
this.selectedActionKey = ''
|
|
this.initializeActionFields()
|
|
},
|
|
},
|
|
}
|
|
</script>
|