home_automatization/laravel-app/resources/js/Pages/Devices/Form.vue

<script setup>
import { useForm } from '@inertiajs/vue3';
import { routes } from '@/routes';

const props = defineProps({
    device: { type: Object, default: null },
    zones: { type: Array, required: true },
    deviceTypes: { type: Array, required: true },
    unregisteredExternalIds: { type: Array, default: () => [] },
});

const isEdit = !!props.device;

const form = useForm({
    name: props.device?.name ?? '',
    zone_id: props.device?.zone_id ?? '',
    device_type_id: props.device?.device_type_id ?? '',
    external_id: props.device?.external_id ?? '',
    protocol: props.device?.protocol ?? 'mqtt',
});

function submit() {
    if (isEdit) {
        form.put(routes.devices.update(props.device.id));
    } else {
        form.post(routes.devices.store);
    }
}
</script>

<template>
    <form @submit.prevent="submit">
        <div>
            <label for="name" class="block font-medium text-sm text-gray-700">Название</label>
            <input
                id="name"
                v-model="form.name"
                type="text"
                required
                autofocus
                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            >
            <div v-if="form.errors.name" class="mt-2 text-sm text-red-600">{{ form.errors.name }}</div>
        </div>

        <div class="mt-4">
            <label for="zone_id" class="block font-medium text-sm text-gray-700">Зона</label>
            <select
                id="zone_id"
                v-model="form.zone_id"
                required
                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            >
                <option value="">— выбрать —</option>
                <option v-for="zone in zones" :key="zone.id" :value="zone.id">{{ zone.name }}</option>
            </select>
            <div v-if="form.errors.zone_id" class="mt-2 text-sm text-red-600">{{ form.errors.zone_id }}</div>
        </div>

        <div class="mt-4">
            <label for="device_type_id" class="block font-medium text-sm text-gray-700">Тип устройства</label>
            <select
                id="device_type_id"
                v-model="form.device_type_id"
                required
                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            >
                <option value="">— выбрать —</option>
                <option v-for="type in deviceTypes" :key="type.id" :value="type.id">{{ type.code }} ({{ type.category }})</option>
            </select>
            <div v-if="form.errors.device_type_id" class="mt-2 text-sm text-red-600">{{ form.errors.device_type_id }}</div>
        </div>

        <div class="mt-4">
            <label for="external_id" class="block font-medium text-sm text-gray-700">External ID (идентификатор физического устройства)</label>
            <input
                id="external_id"
                v-model="form.external_id"
                type="text"
                list="unregistered-external-ids"
                required
                placeholder="можно ввести вручную или выбрать увиденное устройство"
                class="mt-1 block w-full font-mono border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            >
            <datalist id="unregistered-external-ids">
                <option v-for="id in unregisteredExternalIds" :key="id" :value="id" />
            </datalist>
            <p v-if="unregisteredExternalIds.length" class="mt-1 text-xs text-gray-400">
                От {{ unregisteredExternalIds.length }} {{ unregisteredExternalIds.length === 1 ? 'устройства' : 'устройств' }} уже приходил сигнал, но они ещё не зарегистрированы — начните вводить, чтобы увидеть подсказки.
            </p>
            <div v-if="form.errors.external_id" class="mt-2 text-sm text-red-600">{{ form.errors.external_id }}</div>
        </div>

        <div class="mt-4">
            <label for="protocol" class="block font-medium text-sm text-gray-700">Протокол</label>
            <input
                id="protocol"
                v-model="form.protocol"
                type="text"
                required
                class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
            >
            <div v-if="form.errors.protocol" class="mt-2 text-sm text-red-600">{{ form.errors.protocol }}</div>
        </div>

        <div class="mt-4 flex items-center gap-4">
            <button
                type="submit"
                :disabled="form.processing"
                class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 disabled:opacity-50"
            >
                Сохранить
            </button>
            <a :href="routes.devices.index" class="text-sm text-gray-600 hover:underline">Отмена</a>
        </div>
    </form>
</template>