Skip to content

Commit

Permalink
Updated location create
Browse files Browse the repository at this point in the history 
Updated edit danger button component classname
  • Loading branch information
@cp6
cp6 committed Oct 5, 2023
1 parent f97d13f commit 527adee
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 62 deletions.
126 changes: 65 additions & 61 deletions resources/js/Pages/Locations/Create.jsx
View file
Original file line number Diff line number Diff line change
@@ -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: '',
Expand All @@ -20,8 +25,6 @@ export default function Create({auth}) {
e.preventDefault();

post(route('location.store'));

navigate(route('location.index'));
};

return (
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/Pages/Locations/Edit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 527adee

Please sign in to comment.