From 8ca41d6388195aa3ed6ace4400acc910043832d3 Mon Sep 17 00:00:00 2001
From: Matt Young <matt@mattyoung.us>
Date: Thu, 30 May 2024 02:42:16 -0500
Subject: [PATCH] Complete refactoring of components. Some work on students
 page

---
 .../views/components/card/card.blade.php      | 19 ++++---
 .../views/components/card/heading.blade.php   |  8 +++
 .../views/components/form/body-grid.blade.php | 24 +++++++++
 .../views/components/form/field.blade.php     | 42 +++++++++++-----
 .../views/components/form/footer.blade.php    | 13 +++++
 .../views/components/form/form.blade.php      | 13 +++++
 .../views/components/layout/app.blade.php     |  1 +
 .../layout/page-section-container.blade.php   |  3 ++
 .../components/layout/page-section.blade.php  | 16 +++---
 resources/views/dashboard/profile.blade.php   | 25 +++++++++-
 .../views/dashboard/select_school.blade.php   | 13 +++--
 resources/views/schools/edit.blade.php        | 21 +++++++-
 resources/views/schools/show.blade.php        |  2 +-
 resources/views/students/index.blade.php      | 50 ++++++++++++++++---
 routes/web.php                                | 11 ++--
 15 files changed, 212 insertions(+), 49 deletions(-)
 create mode 100644 resources/views/components/card/heading.blade.php
 create mode 100644 resources/views/components/form/body-grid.blade.php
 create mode 100644 resources/views/components/form/footer.blade.php
 create mode 100644 resources/views/components/form/form.blade.php
 create mode 100644 resources/views/components/layout/page-section-container.blade.php

diff --git a/resources/views/components/card/card.blade.php b/resources/views/components/card/card.blade.php
index e9ba13a..f1251bc 100644
--- a/resources/views/components/card/card.blade.php
+++ b/resources/views/components/card/card.blade.php
@@ -1,13 +1,12 @@
-@props(['heading' => false, 'subheading' => false])
-<div {{ $attributes->merge(['class' => 'overflow-hidden bg-white shadow sm:rounded-lg']) }}>
-    @if($heading)
-        <div class="px-4 py-6 sm:px-6 border-b border-gray-100"> <!-- HEADING -->
-            <h3 class="text-base font-semibold leading-7 text-gray-900">{{ $heading }}</h3>
-            @if($subheading)
-                <p class="mt-1 max-w-2xl text-sm leading-6 text-gray-500">{{ $subheading }}</p>
-            @endif
-        </div>
-    @endif
+@props(['mw' => false])
+@php
+    $wrapper_classes = 'overflow-hidden bg-white shadow sm:rounded-lg';
+    if ($mw) {
+        $wrapper_classes .= ' mx-auto max-w-' . $mw;
+    }
+@endphp
+<div {{ $attributes->merge(['class' => $wrapper_classes]) }}>
+
 
     {{ $slot }}
 
diff --git a/resources/views/components/card/heading.blade.php b/resources/views/components/card/heading.blade.php
new file mode 100644
index 0000000..4471909
--- /dev/null
+++ b/resources/views/components/card/heading.blade.php
@@ -0,0 +1,8 @@
+@props(['subheading' => false])
+
+<div class="px-4 py-2 sm:px-6 border-b border-gray-100">
+    <h3 {{ $attributes->merge(['class' => 'text-base font-semibold leading-7 text-gray-900']) }}>{{ $slot }}</h3>
+    @if($subheading)
+        <p {{ $subheading->attributes->merge(['class' => 'mt-.5 max-w-2xl text-sm leading-6 text-gray-500']) }}>{{ $subheading }}</p>
+    @endif
+</div>
diff --git a/resources/views/components/form/body-grid.blade.php b/resources/views/components/form/body-grid.blade.php
new file mode 100644
index 0000000..632b7ba
--- /dev/null
+++ b/resources/views/components/form/body-grid.blade.php
@@ -0,0 +1,24 @@
+@props([
+    'columns' => '6'
+])
+@php
+    $columnClasses = [
+        '1' => '',
+        '2' => 'sm:grid-cols-2',
+        '3' => 'sm:grid-cols-3',
+        '4' => 'sm:grid-cols-4',
+        '5' => 'sm:grid-cols-5',
+        '6' => 'sm:grid-cols-6',
+        '7' => 'sm:grid-cols-7',
+        '8' => 'sm:grid-cols-8',
+        '9' => 'sm:grid-cols-9',
+        '10' => 'sm:grid-cols-10',
+        '11' => 'sm:grid-cols-11',
+        '12' => 'sm:grid-cols-12'
+    ];
+    $classes = "grid max-w-2xl grid-cols-1 gap-x-6 gap-y-3 ";
+    $classes .= $columnClasses["$columns"]
+@endphp
+<div {{ $attributes->merge(['class' => $classes]) }}>
+    {{ $slot }}
+</div>
diff --git a/resources/views/components/form/field.blade.php b/resources/views/components/form/field.blade.php
index bb3c353..2f69e7b 100644
--- a/resources/views/components/form/field.blade.php
+++ b/resources/views/components/form/field.blade.php
@@ -1,27 +1,43 @@
 @props([
-    'name',
-    'type' => 'text',
-    'label',
-    'div_classes' => ''
+   'name',
+   'type' => 'text',
+   'label' => false,
+   'colspan' => '1',
+   'label_text' => false
 ])
 @php
-    $labelClasses = "block text-sm font-medium leading-6 text-gray-900";
+    $label_classes = "block text-sm font-medium leading-6 text-gray-900";
     $inputClasses = "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6";
     $inputAttributes = [
         'id' => $name,
         'name' => $name,
         'type' => $type,
         'class' => $inputClasses,
-        'value' => old($name)
+        'value' => old($name),
+
+    ];
+    $colspan_classes = [
+        '1' => '',
+        '2' => 'sm:col-span-2',
+        '3' => 'sm:col-span-3',
+        '4' => 'sm:col-span-4',
+        '5' => 'sm:col-span-5',
+        '6' => 'sm:col-span-6',
+        '7' => 'sm:col-span-7',
+        '8' => 'sm:col-span-8',
+        '9' => 'sm:col-span-9',
+        '10' => 'sm:col-span-10',
+        '11' => 'sm:col-span-11',
+        '12' => 'sm:col-span-12'
     ];
 @endphp
-<div class="{{ $div_classes }}">
-    <label for="{{ $name }}" class="{{ $labelClasses }}">{{ $label }}</label>
+<div @if($colspan > 1) class="{{ $colspan_classes["$colspan"] }}" @endif>
+    @if($label)
+        <label for="{{ $name }}" {{ $label->attributes->merge(['class' => $label_classes]) }}>{{ $label }}</label>
+    @elseif($label_text)
+        <label for="{{ $name }}" class="{{ $label_classes }}">{{ $label_text }}</label>
+    @endif
     <div class="mt-2">
-        <!--suppress HtmlFormInputWithoutLabel -->
-        <input {{$attributes->merge($inputAttributes)}}>
+        <input {{ $attributes->merge($inputAttributes) }}>
     </div>
-    @error($name)
-        <p class="text-xs text-red-500 font-semibold mt-1 ml-3">{{ $message }}</p>
-    @enderror
 </div>
diff --git a/resources/views/components/form/footer.blade.php b/resources/views/components/form/footer.blade.php
new file mode 100644
index 0000000..0e8a21a
--- /dev/null
+++ b/resources/views/components/form/footer.blade.php
@@ -0,0 +1,13 @@
+@props([
+    'submitButtonText' => '',
+    'buttons' => false
+])
+<div {{ $attributes->merge(['class' => 'flex items-center justify-end mt-4 gap-x-6 border-t border-gray-900/10 px-0 pt-4']) }}>
+    @if ($slot->isEmpty())
+        <!-- TODO make the cancel button do something -->
+        <x-form.button-nocolor type="button">Cancel</x-form.button-nocolor>
+        <x-form.button>{{ $submitButtonText }}</x-form.button>
+    @else
+        {{ $slot }}
+    @endif
+</div>
diff --git a/resources/views/components/form/form.blade.php b/resources/views/components/form/form.blade.php
new file mode 100644
index 0000000..3f9b9e5
--- /dev/null
+++ b/resources/views/components/form/form.blade.php
@@ -0,0 +1,13 @@
+@props([
+    'method' => 'POST',
+    'form_classes' => 'px-4 py-6 sm:p-8'
+])
+
+<form method="{{ ($method === 'GET' ? 'GET':'POST') }}" {{ $attributes->merge(['class' => $form_classes]) }}>
+    @csrf
+    @if(! in_array($method, ['POST','GET']))
+        @method($method)
+    @endif
+    {{ $slot }}
+</form>
+
diff --git a/resources/views/components/layout/app.blade.php b/resources/views/components/layout/app.blade.php
index 757a4a0..eb58fa3 100644
--- a/resources/views/components/layout/app.blade.php
+++ b/resources/views/components/layout/app.blade.php
@@ -1,3 +1,4 @@
+@props(['page_title' => false])
 <!doctype html>
 <html lang="en" class="h-full bg-gray-100">
 <head>
diff --git a/resources/views/components/layout/page-section-container.blade.php b/resources/views/components/layout/page-section-container.blade.php
new file mode 100644
index 0000000..4dbd19b
--- /dev/null
+++ b/resources/views/components/layout/page-section-container.blade.php
@@ -0,0 +1,3 @@
+<div {{ $attributes->merge(['class' => 'space-y-10 divide-y divide-gray-900/10']) }}>
+    {{ $slot }}
+</div>
diff --git a/resources/views/components/layout/page-section.blade.php b/resources/views/components/layout/page-section.blade.php
index 0a3e1dc..7ee55e4 100644
--- a/resources/views/components/layout/page-section.blade.php
+++ b/resources/views/components/layout/page-section.blade.php
@@ -1,20 +1,24 @@
 @props([
-    'section_name',
-    'section_description',
+    'section_name' => false,
+    'section_description' => false,
     'first' => false
     ])
-
 @php
     $topPadding = ($first) ? '':'pt-10';
 @endphp
 
 <div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-4 {{ $topPadding }}">
     <div class="px-4 sm:px-0">
-        <h2 class="text-base font-semibold leading-7 text-gray-900">{{ $section_name }}</h2>
-        <p class="mt-1 text-sm leading-6 text-gray-600">{{ $section_description }}</p>
+        @if($section_name)
+            <h2 {{ $section_name->attributes->merge(['class' => 'text-base font-semibold leading-7 text-gray-900']) }}>{{ $section_name }}</h2>
+        @endif
+
+        @if($section_description)
+            <p {{ $section_description->attributes->merge(['class' => 'mt-1 text-sm leading-6 text-gray-600']) }}>{{ $section_description }}</p>
+        @endif
     </div>
 
-    <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-3">
+    <div {{ $attributes->merge(['class' => 'bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-3']) }}>
         {{ $slot }}
     </div>
 </div>
diff --git a/resources/views/dashboard/profile.blade.php b/resources/views/dashboard/profile.blade.php
index 563b9a9..7a0de19 100644
--- a/resources/views/dashboard/profile.blade.php
+++ b/resources/views/dashboard/profile.blade.php
@@ -1,4 +1,27 @@
 @php use Illuminate\Support\Facades\Auth; @endphp
+
+<x-layout.app page_title="User Profile">
+    <x-layout.page-section-container>
+        <x-layout.page-section first>
+            <x-slot:section_name>User Information</x-slot:section_name>
+            <x-slot:section_description>Use a permanent address where you receive mail</x-slot:section_description>
+            <x-form.form method="PATCH" action="/user/{{ Auth::user()->id }}">
+                <x-form.body-grid columns="6" class="!max-w-full">
+                    <x-form.field name="first_name" label_text="First Name" value="{{ Auth::user()->first_name }}" colspan="3" required />
+                    <x-form.field name="last_name" label_text="Last Name" value="{{ Auth::user()->last_name }}" colspan="3" required />
+                    <x-form.field name="email" label_text="Email" type="email" value="{{ Auth::user()->email }}" colspan="3" required />
+                    <x-form.field name="cell_phone" label_text="Cell Phone" type="text" value="{{ Auth::user()->cell_phone }}" colspan="3" required />
+                    <x-form.field name="judging_preference" label_text="Judging Preference" type="text" value="{{ Auth::user()->judging_preference }}" colspan="6" required />
+                </x-form.body-grid>
+                <x-form.footer submit-button-text="Modify User"/>
+            </x-form.form>
+        </x-layout.page-section>
+    </x-layout.page-section-container>
+</x-layout.app>
+
+
+
+{{--@php use Illuminate\Support\Facades\Auth; @endphp
 <x-layout.app>
     <x-slot:page_title>User Profile</x-slot:page_title>
     <div class="space-y-10 divide-y divide-gray-900/10">
@@ -50,4 +73,4 @@
 
         </x-layout.page-section>
     </div>
-</x-layout.app>
+</x-layout.app>--}}
diff --git a/resources/views/dashboard/select_school.blade.php b/resources/views/dashboard/select_school.blade.php
index a05398d..f9092dd 100644
--- a/resources/views/dashboard/select_school.blade.php
+++ b/resources/views/dashboard/select_school.blade.php
@@ -3,10 +3,15 @@
 <x-layout.app>
     <x-slot:page_title>Choose School</x-slot:page_title>
 
-    <x-card.card heading="Choose your school"
-                 subheading="Based on your email address, one of these schools may be yours"
-                 class="mx-auto max-w-xl"
-                 >
+{{--    <x-card.card class="mx-auto max-w-xl">--}}
+<x-card.card mw="[32rem]">
+        <x-card.heading class="">
+            Choose your school
+            <x-slot:subheading>
+                Based on your email address, one of these schools may be yours
+            </x-slot:subheading>
+        </x-card.heading>
+
         <x-card.list.body>
             @foreach($possibilities as $possibility)
                 @php $school = $possibility->school; @endphp
diff --git a/resources/views/schools/edit.blade.php b/resources/views/schools/edit.blade.php
index abad79d..3af4da2 100644
--- a/resources/views/schools/edit.blade.php
+++ b/resources/views/schools/edit.blade.php
@@ -1,4 +1,23 @@
 <x-layout.app>
+    <x-card.card mw="xl">
+        <x-card.heading>
+            Edit School
+        </x-card.heading>
+
+        <x-form.form method="PATCH" action="/schools/{{ $school->id }}">
+            <x-form.body-grid columns="7">
+                <x-form.field name="name" type="text" colspan="7" label_text="School Name" value="{{ $school->name }}" />
+                <x-form.field name="address" type="text" colspan="7" label_text="School Address" value="{{ $school->address }}" />
+                <x-form.field name="city" type="text" colspan="4" label_text="City" value="{{ $school->city }}" />
+                <x-form.field name="state" type="text" colspan="1" label_text="State" value="{{ $school->state }}" />
+                <x-form.field name="zip" type="text" colspan="2" label_text="Zip" value="{{ $school->zip }}" />
+            </x-form.body-grid>
+            <x-form.footer submit-button-text="Edit School" />
+        </x-form.form>
+    </x-card.card>
+</x-layout.app>
+
+{{--<x-layout.app>
     <x-slot:page_title>Edit School - {{ $school->name }}</x-slot:page_title>
     <div class="space-y-10 divide-y divide-gray-900/10">
         <x-layout.page-section
@@ -20,4 +39,4 @@
 
         </x-layout.page-section>
     </div>
-</x-layout.app>
+</x-layout.app>--}}
diff --git a/resources/views/schools/show.blade.php b/resources/views/schools/show.blade.php
index 0a40fa2..c3d83aa 100644
--- a/resources/views/schools/show.blade.php
+++ b/resources/views/schools/show.blade.php
@@ -1,7 +1,7 @@
 <x-layout.app>
     <x-slot:page_title>School Info - {{ $school->name }}</x-slot:page_title>
 
-    <x-card.card>
+    <x-card.card mw="xl">
         <x-card.info.body>
             <x-card.info.row row_name="School Address">
                 <div class="md:grid md:grid-cols-3">
diff --git a/resources/views/students/index.blade.php b/resources/views/students/index.blade.php
index 7c81437..45a9425 100644
--- a/resources/views/students/index.blade.php
+++ b/resources/views/students/index.blade.php
@@ -6,12 +6,46 @@
 <x-layout.app>
     <x-slot:page_title>Students</x-slot:page_title>
 
-    <x-layout.page-section>
-        <x-slot:section_name>Create Student</x-slot:section_name>
-        <x-slot:section_description>Student full names must be unique. Add a middle initial to the first name if necessary.</x-slot:section_description>
-        <x-form.card method="POST" action="/students/create" submit-button-text="Create Student"  >
-            <x-form.field name="first_name" label="First Name" div_classes="sm:col-span-3" required />
-            <x-form.field name="last_name" label="Last Name" div_classes="sm:col-span-3" required />
-        </x-form.card>
-    </x-layout.page-section>
+    <x-layout.page-section-container>
+        <x-layout.page-section>
+            <x-slot:section_name>Add Student</x-slot:section_name>
+            <x-form.form method="POST" action="/students">
+                <x-form.body-grid columns="8" class="max-w-full">
+                    <x-form.field name="first_name" label_text="First Name" colspan="3" />
+                    <x-form.field name="last_name" label_text="Last Name" colspan="3" />
+                    <x-form.field name="grade" label_text="Grade" colspan="1" />
+{{--                    TODO make grade a dropdown--}}
+                    <x-form.button class="mt-8">Save</x-form.button>
+                </x-form.body-grid>
+            </x-form.form>
+        </x-layout.page-section>
+
+        <x-layout.page-section>
+            <x-slot:section_name>Student Listing</x-slot:section_name>
+                <x-table.table class="!mt-0">
+                    <x-table.table_header_row>
+                        <x-table.th first @click="sortByColumn" class="cursor-pointer select-none">Name</x-table.th>
+                        <x-table.th @click="sortByColumn" class="cursor-pointer select-none">Grade</x-table.th>
+                        <x-table.th :placeholder="true">
+                            <span class="sr-only">Edit</span>
+                        </x-table.th>
+                    </x-table.table_header_row>
+                </x-table.table>
+        </x-layout.page-section>
+    </x-layout.page-section-container>
 </x-layout.app>
+
+
+
+{{--<x-layout.app>--}}
+{{--    <x-slot:page_title>Students</x-slot:page_title>--}}
+
+{{--    <x-layout.page-section>--}}
+{{--        <x-slot:section_name>Create Student</x-slot:section_name>--}}
+{{--        <x-slot:section_description>Student full names must be unique. Add a middle initial to the first name if necessary.</x-slot:section_description>--}}
+{{--        <x-form.card method="POST" action="/students/create" submit-button-text="Create Student"  >--}}
+{{--            <x-form.field name="first_name" label="First Name" div_classes="sm:col-span-3" required />--}}
+{{--            <x-form.field name="last_name" label="Last Name" div_classes="sm:col-span-3" required />--}}
+{{--        </x-form.card>--}}
+{{--    </x-layout.page-section>--}}
+{{--</x-layout.app>--}}
diff --git a/routes/web.php b/routes/web.php
index 47fb3fe..78dfdca 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -16,7 +16,12 @@ Route::middleware(['auth','verified'])->group(function () {
     Route::get('/dashboard', [DashboardController::class, 'dashboard']);
     Route::get('/profile', [DashboardController::class, 'profile']);
     Route::get('/my_school', [DashboardController::class, 'my_school']);
-    Route::patch('/users/{user}/set_school', [UserController::class, 'set_school']);
+});
+
+// User Related Routes
+Route::middleware(['auth','verified'])->controller(UserController::class)->group(function() {
+    Route::patch('/users/{user}/set_school', 'set_school');
+    Route::patch('/users/{$user}', 'update');
 });
 
 // Student Related Routes
@@ -26,10 +31,6 @@ Route::middleware(['auth','verified'])->controller(StudentController::class)->gr
 });
 
 
-
-
-
-
 // School Related Routes
 Route::middleware(['auth','verified'])->controller(SchoolController::class)->group(function() {
     Route::get('/schools/create', 'create');