Последняя версия с сервера прошлого разработчика
This commit is contained in:
134
nova/resources/js/components/Modals/ConfirmActionModal.vue
Executable file
134
nova/resources/js/components/Modals/ConfirmActionModal.vue
Executable file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<modal
|
||||
data-testid="confirm-action-modal"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
@modal-close="handleClose"
|
||||
:classWhitelist="[
|
||||
'flatpickr-current-month',
|
||||
'flatpickr-next-month',
|
||||
'flatpickr-prev-month',
|
||||
'flatpickr-weekday',
|
||||
'flatpickr-weekdays',
|
||||
'flatpickr-calendar',
|
||||
]"
|
||||
>
|
||||
<form
|
||||
autocomplete="off"
|
||||
@keydown="handleKeydown"
|
||||
@submit.prevent.stop="handleConfirm"
|
||||
class="bg-white rounded-lg shadow-lg overflow-hidden"
|
||||
:class="{
|
||||
'w-action-fields': action.fields.length > 0,
|
||||
'w-action': action.fields.length == 0,
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<heading :level="2" class="border-b border-40 py-8 px-8">{{
|
||||
action.name
|
||||
}}</heading>
|
||||
|
||||
<p v-if="action.fields.length == 0" class="text-80 px-8 my-8">
|
||||
{{ action.confirmText }}
|
||||
</p>
|
||||
|
||||
<div v-else>
|
||||
<!-- Validation Errors -->
|
||||
<validation-errors :errors="errors" />
|
||||
|
||||
<!-- Action Fields -->
|
||||
<div
|
||||
class="action"
|
||||
v-for="field in action.fields"
|
||||
:key="field.attribute"
|
||||
>
|
||||
<component
|
||||
:is="'form-' + field.component"
|
||||
:errors="errors"
|
||||
:resource-name="resourceName"
|
||||
:field="field"
|
||||
:show-help-text="field.helpText != null"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-30 px-6 py-3 flex">
|
||||
<div class="flex items-center ml-auto">
|
||||
<button
|
||||
dusk="cancel-action-button"
|
||||
type="button"
|
||||
@click.prevent="handleClose"
|
||||
class="btn btn-link dim cursor-pointer text-80 ml-auto mr-6"
|
||||
>
|
||||
{{ action.cancelButtonText }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
ref="runButton"
|
||||
dusk="confirm-action-button"
|
||||
:disabled="working"
|
||||
type="submit"
|
||||
class="btn btn-default"
|
||||
:class="action.class"
|
||||
>
|
||||
<loader v-if="working" width="30"></loader>
|
||||
<span v-else>{{ action.confirmButtonText }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
working: Boolean,
|
||||
resourceName: { type: String, required: true },
|
||||
action: { type: Object, required: true },
|
||||
selectedResources: { type: [Array, String], required: true },
|
||||
errors: { type: Object, required: true },
|
||||
},
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
mounted() {
|
||||
// If the modal has inputs, let's highlight the first one, otherwise
|
||||
// let's highlight the submit button
|
||||
if (document.querySelectorAll('.modal input').length) {
|
||||
document.querySelectorAll('.modal input')[0].focus()
|
||||
} else {
|
||||
this.$refs.runButton.focus()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Stop propogation of input events unless it's for an escape or enter keypress
|
||||
*/
|
||||
handleKeydown(e) {
|
||||
if (['Escape', 'Enter'].indexOf(e.key) !== -1) {
|
||||
return
|
||||
}
|
||||
|
||||
e.stopPropagation()
|
||||
},
|
||||
|
||||
/**
|
||||
* Execute the selected action.
|
||||
*/
|
||||
handleConfirm() {
|
||||
this.$emit('confirm')
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the modal.
|
||||
*/
|
||||
handleClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
63
nova/resources/js/components/Modals/ConfirmUploadRemovalModal.vue
Executable file
63
nova/resources/js/components/Modals/ConfirmUploadRemovalModal.vue
Executable file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<modal @modal-close="handleClose">
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-lg overflow-hidden"
|
||||
style="width: 460px"
|
||||
>
|
||||
<div class="p-8">
|
||||
<heading :level="2" class="mb-6">{{ __('Delete File') }}</heading>
|
||||
<p class="text-80">
|
||||
{{ __('Are you sure you want to delete this file?') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-30 px-6 py-3 flex">
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
dusk="cancel-upload-delete-button"
|
||||
type="button"
|
||||
@click.prevent="handleClose"
|
||||
class="btn text-80 font-normal h-9 px-3 mr-3 btn-link"
|
||||
>
|
||||
{{ __('Cancel') }}
|
||||
</button>
|
||||
|
||||
<progress-button
|
||||
@click.prevent.native="handleConfirm"
|
||||
ref="confirmButton"
|
||||
dusk="confirm-upload-delete-button"
|
||||
:disabled="clicked"
|
||||
:processing="clicked"
|
||||
class="btn-danger"
|
||||
>
|
||||
{{ __('Delete') }}
|
||||
</progress-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
mounted() {
|
||||
this.$refs.confirmButton.focus()
|
||||
},
|
||||
|
||||
data: () => ({ clicked: false }),
|
||||
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
handleConfirm() {
|
||||
this.clicked = true
|
||||
this.$emit('confirm')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
67
nova/resources/js/components/Modals/CreateRelationModal.vue
Executable file
67
nova/resources/js/components/Modals/CreateRelationModal.vue
Executable file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<modal
|
||||
dusk="new-relation-modal"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
@modal-close="handleClose"
|
||||
:classWhitelist="[
|
||||
'flatpickr-current-month',
|
||||
'flatpickr-next-month',
|
||||
'flatpickr-prev-month',
|
||||
'flatpickr-weekday',
|
||||
'flatpickr-weekdays',
|
||||
'flatpickr-calendar',
|
||||
'form-file-input',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
class="bg-40 rounded-lg shadow-lg overflow-hidden p-8"
|
||||
style="width: 800px"
|
||||
>
|
||||
<Create
|
||||
mode="modal"
|
||||
@refresh="handleRefresh"
|
||||
@cancelled-create="handleCancelledCreate"
|
||||
:resource-name="resourceName"
|
||||
resource-id=""
|
||||
via-resource=""
|
||||
via-resource-id=""
|
||||
via-relationship=""
|
||||
/>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Create from '@/views/Create'
|
||||
|
||||
export default {
|
||||
components: { Create },
|
||||
|
||||
props: {
|
||||
resourceName: {},
|
||||
resourceId: {},
|
||||
viaResource: {},
|
||||
viaResourceId: {},
|
||||
viaRelationship: {},
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleRefresh(data) {
|
||||
// alert('wew refreshing')
|
||||
this.$emit('set-resource', data)
|
||||
},
|
||||
|
||||
handleCancelledCreate() {
|
||||
return this.$emit('cancelled-create')
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the modal.
|
||||
*/
|
||||
handleClose() {
|
||||
this.$emit('cancelled-create')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
86
nova/resources/js/components/Modals/DeleteResourceModal.vue
Executable file
86
nova/resources/js/components/Modals/DeleteResourceModal.vue
Executable file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<modal @modal-close="handleClose">
|
||||
<form
|
||||
@submit.prevent="handleConfirm"
|
||||
slot-scope="props"
|
||||
class="bg-white rounded-lg shadow-lg overflow-hidden"
|
||||
style="width: 460px"
|
||||
>
|
||||
<slot :uppercaseMode="uppercaseMode" :mode="mode">
|
||||
<div class="p-8">
|
||||
<heading :level="2" class="mb-6">{{
|
||||
__(uppercaseMode + ' Resource')
|
||||
}}</heading>
|
||||
<p class="text-80 leading-normal">
|
||||
{{
|
||||
__(
|
||||
'Are you sure you want to ' + mode + ' the selected resources?'
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<div class="bg-30 px-6 py-3 flex">
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="cancel-button"
|
||||
dusk="cancel-delete-button"
|
||||
@click.prevent="handleClose"
|
||||
class="btn text-80 font-normal h-9 px-3 mr-3 btn-link"
|
||||
>
|
||||
{{ __('Cancel') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="confirm-delete-button"
|
||||
ref="confirmButton"
|
||||
data-testid="confirm-button"
|
||||
type="submit"
|
||||
class="btn btn-default btn-danger"
|
||||
>
|
||||
{{ __(uppercaseMode) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'delete',
|
||||
validator: function (value) {
|
||||
return ['force delete', 'delete', 'detach'].indexOf(value) !== -1
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
handleConfirm() {
|
||||
this.$emit('confirm')
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
mounted() {
|
||||
this.$refs.confirmButton.focus()
|
||||
},
|
||||
|
||||
computed: {
|
||||
uppercaseMode() {
|
||||
return _.startCase(this.mode)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
65
nova/resources/js/components/Modals/RestoreResourceModal.vue
Executable file
65
nova/resources/js/components/Modals/RestoreResourceModal.vue
Executable file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<modal @modal-close="handleClose">
|
||||
<form
|
||||
@submit.prevent="handleConfirm"
|
||||
slot-scope="props"
|
||||
class="bg-white rounded-lg shadow-lg overflow-hidden"
|
||||
style="width: 460px"
|
||||
>
|
||||
<slot>
|
||||
<div class="p-8">
|
||||
<heading :level="2" class="mb-6">{{
|
||||
__('Restore Resource')
|
||||
}}</heading>
|
||||
<p class="text-80 leading-normal">
|
||||
{{ __('Are you sure you want to restore the selected resources?') }}
|
||||
</p>
|
||||
</div>
|
||||
</slot>
|
||||
|
||||
<div class="bg-30 px-6 py-3 flex">
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="cancel-button"
|
||||
@click.prevent="handleClose"
|
||||
class="btn text-80 font-normal h-9 px-3 mr-3 btn-link"
|
||||
>
|
||||
{{ __('Cancel') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
ref="confirmButton"
|
||||
id="confirm-restore-button"
|
||||
data-testid="confirm-button"
|
||||
type="submit"
|
||||
class="btn btn-default btn-primary"
|
||||
>
|
||||
{{ __('Restore') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClose() {
|
||||
this.$emit('close')
|
||||
},
|
||||
|
||||
handleConfirm() {
|
||||
this.$emit('confirm')
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
mounted() {
|
||||
this.$refs.confirmButton.focus()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user