different names in different dynamics

2026-06-17 09:38:54 +02:00
parent 3c414e1ef1
commit 0fee3c1972
15 changed files with 283 additions and 11 deletions
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    dynamicId: number;
+    participant: {
+        id: number;
+        name: string;
+        display_name: string | null;
+    };
+}>();
+
+const form = useForm({
+    display_name: props.participant.display_name ?? '',
+});
+
+function submit() {
+    form.put(route('dynamics.participant.update', props.dynamicId));
+}
+</script>
+
+<template>
+    <div class="c-display-name-form">
+        <h4 class="c-display-name-form__title">
+            Display Name for {{ participant.name }}
+        </h4>
+        <form @submit.prevent="submit" class="c-display-name-form__form">
+            <div class="c-display-name-form__field">
+                <label
+                    for="display_name"
+                    class="c-display-name-form__label"
+                >
+                    Dynamic-specific Display Name
+                </label>
+                <input
+                    v-model="form.display_name"
+                    id="display_name"
+                    type="text"
+                    class="c-display-name-form__input"
+                />
+                <div
+                    v-if="form.errors.display_name"
+                    class="c-display-name-form__error"
+                >
+                    {{ form.errors.display_name }}
+                </div>
+            </div>
+
+            <div class="c-display-name-form__actions">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="c-display-name-form__submit-btn"
+                >
+                    Save
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
+
+<style scoped>
+@reference '../../css/app.css';
+
+.c-display-name-form {
+    @apply mt-8;
+}
+
+.c-display-name-form__title {
+    @apply text-lg font-medium;
+    color: var(--foreground);
+}
+
+.c-display-name-form__form {
+    @apply mt-4 space-y-4;
+}
+
+.c-display-name-form__field {
+    @apply block;
+}
+
+.c-display-name-form__label {
+    @apply block text-sm font-medium;
+    color: var(--foreground);
+}
+
+.c-display-name-form__input {
+    @apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500;
+    border-color: var(--border);
+    background-color: var(--background);
+    color: var(--foreground);
+}
+
+.c-display-name-form__error {
+    @apply text-sm;
+    color: var(--destructive);
+}
+
+.c-display-name-form__actions {
+    @apply flex items-center gap-4;
+}
+
+.c-display-name-form__submit-btn {
+    @apply inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+
+    &:hover {
+        opacity: 0.9;
+    }
+}
+</style>
@@ -3,6 +3,9 @@ defineProps<{
    participants: Array<{
        id: number;
        name: string;
+        pivot: {
+            display_name: string | null;
+        };
    }>;
 }>();
 </script>
@@ -16,7 +19,7 @@ defineProps<{
                :key="participant.id"
                class="c-participants-list__item"
            >
-                {{ participant.name }}
+                {{ participant.pivot.display_name ?? participant.name }}
            </li>
        </ul>
    </div>