커스텀 Laravel Nova 툴에서는 확인 다이얼로그를 어떻게 사용합니까?

커스텀 Laravel Nova 툴에서는 확인 다이얼로그를 어떻게 사용합니까?

내장된 Laravel Nova 확인 다이얼로그를 자신의 툴로 사용할 수 있습니까?제가 사용하고 싶은 것은 Nova가 스스로 작동하는 방식으로 상호작용하는 것입니다.

JS 토픽에 관한 문서는 매우 가볍습니다.작업할 수 있는 유일한 UI는 토스트 플러그인인 것 같습니다.

사용할 수 있습니다.<modal>컴포넌트를 사용할 수 있습니다.

다음은 Nova에서 내부적으로 작동하는 방법입니다.

<template>
    <modal
        data-testid="confirm-action-modal"
        tabindex="-1"
        role="dialog"
        @modal-close="handleClose"
        class-whitelist="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">
                    {{ __('Are you sure you want to run this action?') }}
                </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"
                        />
                    </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 text-80 font-normal h-9 px-3 mr-3 btn-link"
                    >
                        {{ __('Cancel') }}
                    </button>

                    <button
                        ref="runButton"
                        dusk="confirm-action-button"
                        :disabled="working"
                        type="submit"
                        class="btn btn-default"
                        :class="{
                            'btn-primary': !action.destructive,
                            'btn-danger': action.destructive,
                        }"
                    >
                        <loader v-if="working" width="30"></loader>
                        <span v-else>{{ __('Run Action') }}</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>

다음으로 간단한 예를 제시하겠습니다.

<modal>
    <form
            autocomplete="off"
            class="bg-white rounded-lg shadow-lg overflow-hidden"
    >
        <div>
            <heading :level="2" class="border-b border-40 py-8 px-8">test</heading>
            test
        </div>
        <div class="bg-30 px-6 py-3 flex">
            <div class="flex items-center ml-auto">
                <button
                        type="button"
                        class="btn text-80 font-normal h-9 px-3 mr-3 btn-link"
                >
                    {{ __('Cancel') }}
                </button>

                <button
                        ref="runButton"
                        type="submit"
                        class="btn-danger"
                >
                    <span>{{ __('Run Action') }}</span>
                </button>
            </div>
        </div>
    </form>
</modal>

• 도구의 동일한 폴더에 새 구성 요소를 생성해야 합니다.표시하다
• 사용한 부품을 여기에 첨부합니다.
• 그런 다음 "handleConfirm" 메서드에서 API에 Ajax 호출을 추가할 수 있습니다.
• 해당 API에서 논리를 추가할 수 있습니다.
• API 파일은 경로 ToolName/routes/api.php에 있습니다.

/* CustomModal.vue */

<template>
   <modal tabindex="-1" role="dialog" @modal-close="handleClose">
       <form @keydown="handleKeydown" @submit.prevent.stop="handleConfirm" class="bg-white rounded-lg shadow-lg overflow-hidden w-action">
           <div>
               <heading :level="2" class="border-b border-40 py-8 px-8">Confirm action</heading>
               <p class="text-80 px-8 my-8"> Are you sure you want to perform this action? </p>
           </div>
           <div class="bg-30 px-6 py-3 flex">
               <div class="flex items-center ml-auto">
                   <button type="button" @click.prevent="handleClose" class="btn btn-link dim cursor-pointer text-80 ml-auto mr-6">
                       Cancel
                   </button>
                   <button :disabled="working" type="submit" class="btn btn-default btn-primary">
                       <loader v-if="working" width="30"></loader>
                       <span v-else>Confirm</span>
                   </button>
               </div>
           </div>
       </form>
   </modal>
</template>

<script>
export default {
 methods: {
   handleConfirm() {
     // Here you can add an ajax call to API and you can add your logic there.
   },
   handleClose() {
     // Logic to hide the component
   },
 },
}
</script>

상세한 것에 대하여는, https://medium.com/vineeth-vijayan/how-to-use-confirm-dialogs-in-a-laravel-nova-tool-b16424ffee87 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/54823989/how-do-you-use-confirm-dialogues-in-a-custom-laravel-nova-tool