Add form remember, dirty and reset functionality to playgrounds

reinink · reinink · commit 8fc6067c2a27 · 2023-04-20T07:55:26.000-04:00
diff --git a/playgrounds/react/resources/js/Pages/Form.tsx b/playgrounds/react/resources/js/Pages/Form.tsx
@@ -18,6 +18,11 @@ const Form = () => {
       <Head title="Form" />
       <h1 className="text-3xl">Form</h1>
       <form onSubmit={submit} className="mt-6 max-w-md space-y-4">
+        {form.isDirty && (
+          <div className="my-5 rounded border border-amber-100 bg-amber-50 p-3 text-amber-800">
+            There are unsaved changes!
+          </div>
+        )}
         <div>
           <label className="block" htmlFor="name">
             Name:
@@ -61,10 +66,13 @@ const Form = () => {
           </select>
           {form.errors.role && <div className="mt-2 text-sm text-red-600">{form.errors.role}</div>}
         </div>
-        <div>
+        <div className="flex gap-4">
           <button type="submit" disabled={form.processing} className="rounded bg-slate-800 px-6 py-2 text-white">
             Submit
           </button>
+          <button type="button" onClick={() => form.reset()}>
+            Reset
+          </button>
         </div>
       </form>
     </>
diff --git a/playgrounds/svelte/resources/js/Pages/Form.svelte b/playgrounds/svelte/resources/js/Pages/Form.svelte
@@ -23,6 +23,9 @@
 <h1 class="text-3xl">Form</h1>
 
 <form on:submit|preventDefault={submit} class="mt-6 max-w-md space-y-4">
+  {#if $form.isDirty}
+    <div class="my-5 rounded border border-amber-100 bg-amber-50 p-3 text-amber-800">There are unsaved changes!</div>
+  {/if}
   <div>
     <label class="block" for="name">Name:</label>
     <input
@@ -59,9 +62,10 @@
       <div class="mt-2 text-sm text-red-600">{$form.errors.role}</div>
     {/if}
   </div>
-  <div>
+  <div class="flex gap-4">
     <button type="submit" disabled={$form.processing} class="rounded bg-slate-800 px-6 py-2 text-white">
       Submit
     </button>
+    <button type="button" on:click={() => $form.reset()}>Reset</button>
   </div>
 </form>
diff --git a/playgrounds/vue2/resources/js/Pages/Form.vue b/playgrounds/vue2/resources/js/Pages/Form.vue
@@ -6,7 +6,7 @@ export default { layout: Layout }
 <script setup>
 import { Head, useForm } from '@inertiajs/vue2'
 
-const form = useForm({
+const form = useForm('NewUser', {
   name: '',
   company: '',
   role: '',
@@ -18,6 +18,9 @@ const form = useForm({
     <Head title="Form" />
     <h1 class="text-3xl">Form</h1>
     <form @submit.prevent="form.post('/user')" class="mt-6 max-w-md space-y-4">
+      <div v-if="form.isDirty" class="my-5 rounded border border-amber-100 bg-amber-50 p-3 text-amber-800">
+        There are unsaved changes!
+      </div>
       <div>
         <label class="block" for="name">Name:</label>
         <input
@@ -48,10 +51,11 @@ const form = useForm({
         </select>
         <div v-if="form.errors.role" class="mt-2 text-sm text-red-600">{{ form.errors.role }}</div>
       </div>
-      <div>
+      <div class="flex gap-4">
         <button type="submit" :disabled="form.processing" class="rounded bg-slate-800 px-6 py-2 text-white">
           Submit
         </button>
+        <button type="button" @click="form.reset()">Reset</button>
       </div>
     </form>
   </div>
diff --git a/playgrounds/vue3/resources/js/Pages/Form.vue b/playgrounds/vue3/resources/js/Pages/Form.vue
@@ -6,7 +6,7 @@ export default { layout: Layout }
 <script setup lang="ts">
 import { Head, useForm } from '@inertiajs/vue3'
 
-const form = useForm({
+const form = useForm('NewUser', {
   name: '',
   company: '',
   role: '',
@@ -17,6 +17,9 @@ const form = useForm({
   <Head title="Form" />
   <h1 class="text-3xl">Form</h1>
   <form @submit.prevent="form.post('/user')" class="mt-6 max-w-md space-y-4">
+    <div v-if="form.isDirty" class="my-5 rounded border border-amber-100 bg-amber-50 p-3 text-amber-800">
+      There are unsaved changes!
+    </div>
     <div>
       <label class="block" for="name">Name:</label>
       <input
@@ -47,10 +50,11 @@ const form = useForm({
       </select>
       <div v-if="form.errors.role" class="mt-2 text-sm text-red-600">{{ form.errors.role }}</div>
     </div>
-    <div>
+    <div class="flex gap-4">
       <button type="submit" :disabled="form.processing" class="rounded bg-slate-800 px-6 py-2 text-white">
         Submit
       </button>
+      <button type="button" @click="form.reset()">Reset</button>
     </div>
   </form>
 </template>
