48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { route } from 'ziggy-js';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import InputError from '@/components/InputError.vue';
|
|
|
|
const props = defineProps<{
|
|
dynamic: {
|
|
id: number;
|
|
name: string;
|
|
pivot: {
|
|
display_name: string | null;
|
|
};
|
|
};
|
|
}>();
|
|
|
|
const form = useForm({
|
|
display_name: props.dynamic.pivot?.display_name ?? '',
|
|
});
|
|
|
|
function submit() {
|
|
form.put(route('dynamics.participant.update', props.dynamic.id), {
|
|
preserveScroll: true,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submit" class="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 border rounded-lg bg-card text-card-foreground">
|
|
<div class="flex-1 w-full">
|
|
<div class="font-medium text-sm mb-1">{{ dynamic.name }}</div>
|
|
<Input
|
|
v-model="form.display_name"
|
|
class="w-full"
|
|
placeholder="Enter custom display name"
|
|
required
|
|
/>
|
|
<InputError class="mt-1" :message="form.errors.display_name" />
|
|
</div>
|
|
<div class="sm:self-end">
|
|
<Button type="submit" size="sm" :disabled="form.processing">
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</template>
|