From 527adee5fed1aee6cd310e2f566d01f396352b10 Mon Sep 17 00:00:00 2001
From: cp6 <cp6@users.noreply.github.com>
Date: Thu, 5 Oct 2023 22:41:25 +1100
Subject: [PATCH] Updated location create Updated edit danger button component
 classname

---
 resources/js/Pages/Locations/Create.jsx | 126 ++++++++++++------------
 resources/js/Pages/Locations/Edit.jsx   |   2 +-
 2 files changed, 66 insertions(+), 62 deletions(-)

diff --git a/resources/js/Pages/Locations/Create.jsx b/resources/js/Pages/Locations/Create.jsx
index 4925352..0d30f8e 100644
--- a/resources/js/Pages/Locations/Create.jsx
+++ b/resources/js/Pages/Locations/Create.jsx
@@ -1,14 +1,19 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
-import {Head, useForm} from '@inertiajs/inertia-react';
+import {Head, useForm, usePage} from '@inertiajs/inertia-react';
 import InputLabel from "@/Components/InputLabel";
 import TextInput from "@/Components/TextInput";
 import InputError from "@/Components/InputError";
 import React from "react";
 import PrimaryButton from "@/Components/PrimaryButton";
 import BackButton from "@/Components/BackButton";
+import ResponseAlert from "@/Components/Alert";
 
 export default function Create({auth}) {
 
+    const alert = usePage().props.alert;
+
+    console.log(alert);
+
     const {data, setData, post, processing, reset, errors} = useForm({
         city: '',
         country: '',
@@ -20,8 +25,6 @@ export default function Create({auth}) {
         e.preventDefault();
 
         post(route('location.store'));
-
-        navigate(route('location.index'));
     };
 
     return (
@@ -35,66 +38,67 @@ export default function Create({auth}) {
                 <div className="flex flex-wrap gap-2 mb-4">
                     <BackButton href={route('location.index')}>Back to locations</BackButton>
                 </div>
+                <ResponseAlert details={alert}></ResponseAlert>
                 <section className='bg-white dark:bg-gray-700 overflow-hidden shadow-sm sm:rounded-lg p-2 sm:p-6'>
-                <form onSubmit={submit}>
-                    <div className="grid gap-2 grid-cols-1 md:grid-cols-8 sm:gap-4">
-                        <div className="col-span-4">
-                            <InputLabel forInput="city" value="City"/>
-                            <TextInput
-                                name="city"
-                                value={data.city}
-                                className="mt-1 block w-full"
-                                autoComplete="city"
-                                handleChange={(e) => setData('city', e.target.value)}
-                                maxLength={125}
-                                isFocused={true}
-                            />
-                            <InputError message={errors.city} className="mt-2"/>
-                        </div>
-                        <div className="col-span-4">
-                            <InputLabel forInput="country" value="Country"/>
-                            <TextInput
-                                name="country"
-                                className="mt-1 block w-full"
-                                autoComplete="country"
-                                value={data.country}
-                                handleChange={(e) => setData('country', e.target.value)}
-                                maxLength={125}
-                                required
-                            />
-                            <InputError message={errors.country} className="mt-2"/>
-                        </div>
-                        <div className="col-span-2">
-                            <InputLabel forInput="lat" value="Lat"/>
-                            <TextInput
-                                type="number"
-                                name="lat"
-                                className="mt-1 block w-full"
-                                autoComplete="lat"
-                                value={data.lat}
-                                handleChange={(e) => setData('lat', e.target.value)}
-                            />
-                            <InputError message={errors.lat} className="mt-2"/>
-                        </div>
-                        <div className="col-span-2">
-                            <InputLabel forInput="lon" value="Lon"/>
-                            <TextInput
-                                type="number"
-                                name="lon"
-                                className="mt-1 block w-full"
-                                autoComplete="lon"
-                                value={data.lon}
-                                handleChange={(e) => setData('lon', e.target.value)}
-                            />
-                            <InputError message={errors.lon} className="mt-2"/>
+                    <form onSubmit={submit}>
+                        <div className="grid gap-2 grid-cols-1 md:grid-cols-8 sm:gap-4">
+                            <div className="col-span-4">
+                                <InputLabel forInput="city" value="City"/>
+                                <TextInput
+                                    name="city"
+                                    value={data.city}
+                                    className="mt-1 block w-full"
+                                    autoComplete="city"
+                                    handleChange={(e) => setData('city', e.target.value)}
+                                    maxLength={125}
+                                    isFocused={true}
+                                />
+                                <InputError message={errors.city} className="mt-2"/>
+                            </div>
+                            <div className="col-span-4">
+                                <InputLabel forInput="country" value="Country"/>
+                                <TextInput
+                                    name="country"
+                                    className="mt-1 block w-full"
+                                    autoComplete="country"
+                                    value={data.country}
+                                    handleChange={(e) => setData('country', e.target.value)}
+                                    maxLength={125}
+                                    required
+                                />
+                                <InputError message={errors.country} className="mt-2"/>
+                            </div>
+                            <div className="col-span-2">
+                                <InputLabel forInput="lat" value="Lat"/>
+                                <TextInput
+                                    type="number"
+                                    name="lat"
+                                    className="mt-1 block w-full"
+                                    autoComplete="lat"
+                                    value={data.lat}
+                                    handleChange={(e) => setData('lat', e.target.value)}
+                                />
+                                <InputError message={errors.lat} className="mt-2"/>
+                            </div>
+                            <div className="col-span-2">
+                                <InputLabel forInput="lon" value="Lon"/>
+                                <TextInput
+                                    type="number"
+                                    name="lon"
+                                    className="mt-1 block w-full"
+                                    autoComplete="lon"
+                                    value={data.lon}
+                                    handleChange={(e) => setData('lon', e.target.value)}
+                                />
+                                <InputError message={errors.lon} className="mt-2"/>
+                            </div>
                         </div>
-                    </div>
-                    <PrimaryButton
-                        className="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
-                        processing={processing}>
-                        Create Location
-                    </PrimaryButton>
-                </form>
+                        <PrimaryButton
+                            className="inline-flex items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-primary-700 rounded-lg focus:ring-4 focus:ring-primary-200 dark:focus:ring-primary-900 hover:bg-primary-800"
+                            processing={processing}>
+                            Create Location
+                        </PrimaryButton>
+                    </form>
                 </section>
             </div>
         </AuthenticatedLayout>
diff --git a/resources/js/Pages/Locations/Edit.jsx b/resources/js/Pages/Locations/Edit.jsx
index 0e894fa..2b1f54e 100644
--- a/resources/js/Pages/Locations/Edit.jsx
+++ b/resources/js/Pages/Locations/Edit.jsx
@@ -112,7 +112,7 @@ export default function Edit({auth}) {
                         </div>
                         <UpdateButton processing={processing} className={''}>Update location</UpdateButton>
                         <DangerButton onClick={() => setShowModal(true)} type="button"
-                                      className="px-5 py-2.5 ml-2 text-sm font-medium text-center text-white bg-red-700 rounded-lg focus:ring-4 focus:ring-red-200 dark:focus:ring-red-900 hover:bg-red-800">
+                                      className="px-5 py-2 ml-0 sm:ml-4 text-sm font-medium text-center text-white bg-red-700 rounded-lg focus:ring-4 focus:ring-red-200 dark:focus:ring-red-900 hover:bg-red-800">
                             Delete location
                         </DangerButton>
                     </form>