add nova
This commit is contained in:
666
nova/resources/js/views/Attach.vue
Normal file
666
nova/resources/js/views/Attach.vue
Normal file
@@ -0,0 +1,666 @@
|
||||
<template>
|
||||
<LoadingView :loading="initialLoading">
|
||||
<template v-if="relatedResourceLabel">
|
||||
<Head
|
||||
:title="
|
||||
__('Attach :resource', {
|
||||
resource: relatedResourceLabel,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<Heading
|
||||
class="mb-3"
|
||||
v-text="__('Attach :resource', { resource: relatedResourceLabel })"
|
||||
dusk="attach-heading"
|
||||
/>
|
||||
|
||||
<form
|
||||
v-if="field"
|
||||
@submit.prevent="attachResource"
|
||||
@change="onUpdateFormStatus"
|
||||
:data-form-unique-id="formUniqueId"
|
||||
autocomplete="off"
|
||||
>
|
||||
<Card class="mb-8">
|
||||
<!-- Related Resource -->
|
||||
<div
|
||||
v-if="parentResource"
|
||||
dusk="via-resource-field"
|
||||
class="field-wrapper flex flex-col md:flex-row border-b border-gray-100 dark:border-gray-700"
|
||||
>
|
||||
<div class="w-1/5 px-8 py-6">
|
||||
<label
|
||||
:for="parentResource.name"
|
||||
class="inline-block text-gray-500 pt-2 leading-tight"
|
||||
>
|
||||
{{ parentResource.name }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="py-6 px-8 w-1/2">
|
||||
<span class="inline-block font-bold text-gray-500 pt-2">
|
||||
{{ parentResource.display }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DefaultField
|
||||
:field="field"
|
||||
:errors="validationErrors"
|
||||
:show-help-text="true"
|
||||
>
|
||||
<template #field>
|
||||
<div class="flex items-center">
|
||||
<SearchInput
|
||||
v-if="field.searchable"
|
||||
:dusk="`${field.resourceName}-search-input`"
|
||||
@input="performSearch"
|
||||
@clear="clearResourceSelection"
|
||||
@selected="selectResource"
|
||||
:debounce="field.debounce"
|
||||
:value="selectedResource"
|
||||
:data="availableResources"
|
||||
trackBy="value"
|
||||
class="w-full"
|
||||
>
|
||||
<div v-if="selectedResource" class="flex items-center">
|
||||
<div v-if="selectedResource.avatar" class="mr-3">
|
||||
<img
|
||||
:src="selectedResource.avatar"
|
||||
class="w-8 h-8 rounded-full block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{{ selectedResource.display }}
|
||||
</div>
|
||||
|
||||
<template #option="{ selected, option }">
|
||||
<div class="flex items-center">
|
||||
<div v-if="option.avatar" class="flex-none mr-3">
|
||||
<img
|
||||
:src="option.avatar"
|
||||
class="w-8 h-8 rounded-full block"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<div
|
||||
class="text-sm font-semibold leading-5"
|
||||
:class="{ 'text-white': selected }"
|
||||
>
|
||||
{{ option.display }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="field.withSubtitles"
|
||||
class="mt-1 text-xs font-semibold leading-5 text-gray-500"
|
||||
:class="{ 'text-white': selected }"
|
||||
>
|
||||
<span v-if="option.subtitle">{{
|
||||
option.subtitle
|
||||
}}</span>
|
||||
<span v-else>{{
|
||||
__('No additional information...')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</SearchInput>
|
||||
|
||||
<SelectControl
|
||||
v-else
|
||||
class="w-full"
|
||||
:class="{
|
||||
'form-control-bordered-error': validationErrors.has(
|
||||
field.attribute
|
||||
),
|
||||
}"
|
||||
dusk="attachable-select"
|
||||
v-model:selected="selectedResourceId"
|
||||
@change="selectResourceFromSelectControl"
|
||||
:options="availableResources"
|
||||
:label="'display'"
|
||||
>
|
||||
<option value="" disabled selected>
|
||||
{{
|
||||
__('Choose :resource', {
|
||||
resource: relatedResourceLabel,
|
||||
})
|
||||
}}
|
||||
</option>
|
||||
</SelectControl>
|
||||
|
||||
<CreateRelationButton
|
||||
v-if="canShowNewRelationModal"
|
||||
@click="openRelationModal"
|
||||
class="ml-2"
|
||||
:dusk="`${field.attribute}-inline-create`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<CreateRelationModal
|
||||
:show="canShowNewRelationModal && relationModalOpen"
|
||||
@set-resource="handleSetResource"
|
||||
@create-cancelled="closeRelationModal"
|
||||
:resource-name="field.resourceName"
|
||||
:resource-id="resourceId"
|
||||
:via-relationship="viaRelationship"
|
||||
:via-resource="viaResource"
|
||||
:via-resource-id="viaResourceId"
|
||||
/>
|
||||
|
||||
<TrashedCheckbox
|
||||
v-if="softDeletes"
|
||||
class="mt-3"
|
||||
:resource-name="field.resourceName"
|
||||
:checked="withTrashed"
|
||||
@input="toggleWithTrashed"
|
||||
/>
|
||||
</template>
|
||||
</DefaultField>
|
||||
|
||||
<LoadingView :loading="loading">
|
||||
<!-- Pivot Fields -->
|
||||
<div v-for="field in fields" :key="field.uniqueKey">
|
||||
<component
|
||||
:is="`form-${field.component}`"
|
||||
:resource-name="resourceName"
|
||||
:resource-id="resourceId"
|
||||
:related-resource-name="relatedResourceName"
|
||||
:field="field"
|
||||
:form-unique-id="formUniqueId"
|
||||
:errors="validationErrors"
|
||||
:via-resource="viaResource"
|
||||
:via-resource-id="viaResourceId"
|
||||
:via-relationship="viaRelationship"
|
||||
:show-help-text="true"
|
||||
/>
|
||||
</div>
|
||||
</LoadingView>
|
||||
</Card>
|
||||
|
||||
<!-- Attach Button -->
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-center justify-center md:justify-end space-y-2 md:space-y-0 space-x-3"
|
||||
>
|
||||
<Button
|
||||
dusk="cancel-attach-button"
|
||||
@click="cancelAttachingResource"
|
||||
:label="__('Cancel')"
|
||||
variant="ghost"
|
||||
/>
|
||||
|
||||
<Button
|
||||
dusk="attach-and-attach-another-button"
|
||||
@click.native.prevent="attachAndAttachAnother"
|
||||
:disabled="isWorking"
|
||||
:loading="submittedViaAttachAndAttachAnother"
|
||||
>
|
||||
{{ __('Attach & Attach Another') }}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
dusk="attach-button"
|
||||
:disabled="isWorking"
|
||||
:loading="submittedViaAttachResource"
|
||||
>
|
||||
{{
|
||||
__('Attach :resource', {
|
||||
resource: relatedResourceLabel,
|
||||
})
|
||||
}}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</LoadingView>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import each from 'lodash/each'
|
||||
import find from 'lodash/find'
|
||||
import tap from 'lodash/tap'
|
||||
import {
|
||||
PerformsSearches,
|
||||
TogglesTrashed,
|
||||
FormEvents,
|
||||
HandlesFormRequest,
|
||||
PreventsFormAbandonment,
|
||||
} from '@/mixins'
|
||||
import { mapActions } from 'vuex'
|
||||
import { Button } from 'laravel-nova-ui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Button,
|
||||
},
|
||||
|
||||
mixins: [
|
||||
FormEvents,
|
||||
HandlesFormRequest,
|
||||
PerformsSearches,
|
||||
TogglesTrashed,
|
||||
PreventsFormAbandonment,
|
||||
],
|
||||
|
||||
props: {
|
||||
resourceName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
resourceId: {
|
||||
required: true,
|
||||
},
|
||||
relatedResourceName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
viaResource: {
|
||||
default: '',
|
||||
},
|
||||
viaResourceId: {
|
||||
default: '',
|
||||
},
|
||||
parentResource: {
|
||||
type: Object,
|
||||
},
|
||||
viaRelationship: {
|
||||
default: '',
|
||||
},
|
||||
polymorphic: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
initialLoading: true,
|
||||
loading: true,
|
||||
submittedViaAttachAndAttachAnother: false,
|
||||
submittedViaAttachResource: false,
|
||||
|
||||
field: null,
|
||||
softDeletes: false,
|
||||
fields: [],
|
||||
selectedResource: null,
|
||||
selectedResourceId: null,
|
||||
relationModalOpen: false,
|
||||
initializingWithExistingResource: false,
|
||||
}),
|
||||
|
||||
created() {
|
||||
if (Nova.missingResource(this.resourceName)) return Nova.visit('/404')
|
||||
},
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
mounted() {
|
||||
this.initializeComponent()
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['fetchPolicies']),
|
||||
|
||||
/**
|
||||
* Initialize the component's data.
|
||||
*/
|
||||
initializeComponent() {
|
||||
this.softDeletes = false
|
||||
this.disableWithTrashed()
|
||||
this.clearSelection()
|
||||
this.getField()
|
||||
this.getPivotFields()
|
||||
this.resetErrors()
|
||||
this.allowLeavingForm()
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle pivot fields loaded event.
|
||||
*/
|
||||
handlePivotFieldsLoaded() {
|
||||
this.loading = false
|
||||
|
||||
each(this.fields, field => {
|
||||
field.fill = () => ''
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the many-to-many relationship field.
|
||||
*/
|
||||
getField() {
|
||||
this.field = null
|
||||
|
||||
Nova.request()
|
||||
.get(
|
||||
'/nova-api/' + this.resourceName + '/field/' + this.viaRelationship,
|
||||
{
|
||||
params: {
|
||||
relatable: true,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(({ data }) => {
|
||||
this.field = data
|
||||
this.field.searchable
|
||||
? this.determineIfSoftDeletes()
|
||||
: this.getAvailableResources()
|
||||
this.initialLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Get all of the available pivot fields for the relationship.
|
||||
*/
|
||||
getPivotFields() {
|
||||
this.fields = []
|
||||
this.loading = true
|
||||
|
||||
Nova.request()
|
||||
.get(
|
||||
'/nova-api/' +
|
||||
this.resourceName +
|
||||
'/' +
|
||||
this.resourceId +
|
||||
'/creation-pivot-fields/' +
|
||||
this.relatedResourceName,
|
||||
{
|
||||
params: {
|
||||
editing: true,
|
||||
editMode: 'attach',
|
||||
viaRelationship: this.viaRelationship,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(({ data }) => {
|
||||
this.fields = data
|
||||
|
||||
this.handlePivotFieldsLoaded()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Get all of the available resources for the current search / trashed state.
|
||||
*/
|
||||
getAvailableResources(search = '') {
|
||||
Nova.$progress.start()
|
||||
|
||||
return Nova.request()
|
||||
.get(
|
||||
`/nova-api/${this.resourceName}/${this.resourceId}/attachable/${this.relatedResourceName}`,
|
||||
{
|
||||
params: {
|
||||
search,
|
||||
current: this.selectedResourceId,
|
||||
first: this.initializingWithExistingResource,
|
||||
withTrashed: this.withTrashed,
|
||||
viaRelationship: this.viaRelationship,
|
||||
},
|
||||
}
|
||||
)
|
||||
.then(response => {
|
||||
Nova.$progress.done()
|
||||
|
||||
if (this.isSearchable) {
|
||||
this.initializingWithExistingResource = false
|
||||
}
|
||||
this.availableResources = response.data.resources
|
||||
this.withTrashed = response.data.withTrashed
|
||||
this.softDeletes = response.data.softDeletes
|
||||
})
|
||||
.catch(e => {
|
||||
Nova.$progress.done()
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if the related resource is soft deleting.
|
||||
*/
|
||||
determineIfSoftDeletes() {
|
||||
Nova.request()
|
||||
.get('/nova-api/' + this.relatedResourceName + '/soft-deletes')
|
||||
.then(response => {
|
||||
this.softDeletes = response.data.softDeletes
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Attach the selected resource.
|
||||
*/
|
||||
async attachResource() {
|
||||
this.submittedViaAttachResource = true
|
||||
|
||||
try {
|
||||
await this.attachRequest()
|
||||
|
||||
this.submittedViaAttachResource = false
|
||||
this.allowLeavingForm()
|
||||
|
||||
await this.fetchPolicies(),
|
||||
Nova.success(this.__('The resource was attached!'))
|
||||
|
||||
Nova.visit(`/resources/${this.resourceName}/${this.resourceId}`)
|
||||
} catch (error) {
|
||||
window.scrollTo(0, 0)
|
||||
|
||||
this.submittedViaAttachResource = false
|
||||
|
||||
this.preventLeavingForm()
|
||||
|
||||
this.handleOnCreateResponseError(error)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Attach a new resource and reset the form
|
||||
*/
|
||||
async attachAndAttachAnother() {
|
||||
this.submittedViaAttachAndAttachAnother = true
|
||||
|
||||
try {
|
||||
await this.attachRequest()
|
||||
|
||||
window.scrollTo(0, 0)
|
||||
|
||||
this.disableNavigateBackUsingHistory()
|
||||
|
||||
this.allowLeavingForm()
|
||||
|
||||
this.submittedViaAttachAndAttachAnother = false
|
||||
|
||||
await this.fetchPolicies()
|
||||
|
||||
// Reset the form by refetching the fields
|
||||
this.initializeComponent()
|
||||
} catch (error) {
|
||||
this.submittedViaAttachAndAttachAnother = false
|
||||
|
||||
this.handleOnCreateResponseError(error)
|
||||
}
|
||||
},
|
||||
|
||||
cancelAttachingResource() {
|
||||
this.handleProceedingToPreviousPage()
|
||||
this.allowLeavingForm()
|
||||
|
||||
this.proceedToPreviousPage(
|
||||
`/resources/${this.resourceName}/${this.resourceId}`
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Send an attach request for this resource
|
||||
*/
|
||||
attachRequest() {
|
||||
return Nova.request().post(
|
||||
this.attachmentEndpoint,
|
||||
this.attachmentFormData(),
|
||||
{
|
||||
params: {
|
||||
editing: true,
|
||||
editMode: 'attach',
|
||||
},
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the form data for the resource attachment.
|
||||
*/
|
||||
attachmentFormData() {
|
||||
return tap(new FormData(), formData => {
|
||||
each(this.fields, field => {
|
||||
field.fill(formData)
|
||||
})
|
||||
|
||||
if (!this.selectedResource) {
|
||||
formData.append(this.relatedResourceName, '')
|
||||
} else {
|
||||
formData.append(this.relatedResourceName, this.selectedResource.value)
|
||||
}
|
||||
|
||||
formData.append(this.relatedResourceName + '_trashed', this.withTrashed)
|
||||
formData.append('viaRelationship', this.viaRelationship)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* Select a resource using the <select> control
|
||||
*/
|
||||
selectResourceFromSelectControl(value) {
|
||||
this.selectedResourceId = value
|
||||
this.selectInitialResource()
|
||||
|
||||
if (this.field) {
|
||||
this.emitFieldValueChange(this.fieldAttribute, this.selectedResourceId)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the initial selected resource
|
||||
*/
|
||||
selectInitialResource() {
|
||||
this.selectedResource = find(
|
||||
this.availableResources,
|
||||
r => r.value == this.selectedResourceId
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the trashed state of the search
|
||||
*/
|
||||
toggleWithTrashed() {
|
||||
this.withTrashed = !this.withTrashed
|
||||
|
||||
// Reload the data if the component doesn't support searching
|
||||
if (!this.isSearchable) {
|
||||
this.getAvailableResources()
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Prevent accidental abandonment only if form was changed.
|
||||
*/
|
||||
onUpdateFormStatus() {
|
||||
this.updateFormStatus()
|
||||
},
|
||||
|
||||
handleSetResource({ id }) {
|
||||
this.closeRelationModal()
|
||||
this.selectedResourceId = id
|
||||
this.initializingWithExistingResource = true
|
||||
this.getAvailableResources().then(() => this.selectInitialResource())
|
||||
},
|
||||
|
||||
openRelationModal() {
|
||||
Nova.$emit('create-relation-modal-opened')
|
||||
this.relationModalOpen = true
|
||||
},
|
||||
|
||||
closeRelationModal() {
|
||||
this.relationModalOpen = false
|
||||
Nova.$emit('create-relation-modal-closed')
|
||||
},
|
||||
|
||||
clearResourceSelection() {
|
||||
this.clearSelection()
|
||||
|
||||
if (!this.isSearchable) {
|
||||
this.initializingWithExistingResource = false
|
||||
this.getAvailableResources()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Get the attachment endpoint for the relationship type.
|
||||
*/
|
||||
attachmentEndpoint() {
|
||||
return this.polymorphic
|
||||
? '/nova-api/' +
|
||||
this.resourceName +
|
||||
'/' +
|
||||
this.resourceId +
|
||||
'/attach-morphed/' +
|
||||
this.relatedResourceName
|
||||
: '/nova-api/' +
|
||||
this.resourceName +
|
||||
'/' +
|
||||
this.resourceId +
|
||||
'/attach/' +
|
||||
this.relatedResourceName
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the label for the related resource.
|
||||
*/
|
||||
relatedResourceLabel() {
|
||||
if (this.field) {
|
||||
return this.field.singularLabel
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if the related resources is searchable
|
||||
*/
|
||||
isSearchable() {
|
||||
return this.field.searchable
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if the form is being processed
|
||||
*/
|
||||
isWorking() {
|
||||
return (
|
||||
this.submittedViaAttachResource ||
|
||||
this.submittedViaAttachAndAttachAnother
|
||||
)
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the heading for the view
|
||||
*/
|
||||
headingTitle() {
|
||||
return this.__('Attach :resource', {
|
||||
resource: this.relatedResourceLabel,
|
||||
})
|
||||
},
|
||||
|
||||
shouldShowTrashed() {
|
||||
return Boolean(this.softDeletes)
|
||||
},
|
||||
|
||||
authorizedToCreate() {
|
||||
return find(Nova.config('resources'), resource => {
|
||||
return resource.uriKey == this.field.resourceName
|
||||
}).authorizedToCreate
|
||||
},
|
||||
|
||||
canShowNewRelationModal() {
|
||||
return this.field.showCreateRelationButton && this.authorizedToCreate
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user