template work. Student list working
This commit is contained in:
parent
8ca41d6388
commit
b324ebd763
|
|
@ -8,7 +8,12 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>AuditionAdmin</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@stack('scripts')
|
||||
{{-- Code below from https://codepen.io/ryangjchandler/pen/WNQQKeR --}}
|
||||
{{-- JS for sorting tables by a column --}}
|
||||
{{-- Sortable columns need this on their <th>: @click="sortByColumn" class="cursor-pointer select-none" --}}
|
||||
{{-- One level above the table needs x-data="data()" --}}
|
||||
{{-- tbody needs x-ref="tbody" --}}
|
||||
<script src="{{ asset('js/sort_table_by_column.js') }}"></script>
|
||||
</head>
|
||||
<body class="h-full">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<tbody {{ $attributes->merge(['class' => "divide-y divide-gray-200 bg-white" ]) }}>
|
||||
@props(['sortable' => true])
|
||||
<tbody @if($sortable)x-ref="tbody"@endif {{ $attributes->merge(['class' => 'divide-y divide-gray-200']) }}>
|
||||
{{ $slot }}
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
@php($classes = 'text-indigo-600 hover:text-indigo-900 font-medium')
|
||||
@if($attributes->has('href'))
|
||||
<a {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</a>
|
||||
@else
|
||||
<button {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</button>
|
||||
@endif
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<div {{ $attributes->merge(['class' => 'px-4 sm:px-6 lg:px-8']) }}>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
|
@ -1,8 +1,29 @@
|
|||
<div class="mt-8 flow-root">
|
||||
<div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-300">
|
||||
@props([
|
||||
'with_title_area' => false,
|
||||
'title_block_right' => false,
|
||||
'title' => false,
|
||||
'subtitle' => false,
|
||||
'sortable' => true
|
||||
])
|
||||
<div>
|
||||
@if($with_title_area)
|
||||
<div class="mb-8 sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
@if($title)<h1 {{ $title->attributes->merge(['class' => 'text-base font-semibold leading-6 text-gray-900']) }}>{{ $title }}</h1>@endif
|
||||
@if($subtitle)<p {{ $subtitle->attributes->merge(['class' => 'mt-2 text-sm text-gray-700']) }}>{{ $subtitle }}</p>@endif
|
||||
</div>
|
||||
{{-- Title block right often used for add button--}}
|
||||
@if($title_block_right)
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
{{ $title_block_right }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
<div class="flow-root">
|
||||
<div class="-mx-4 -my-2 sm:-mx-6 lg:-mx-8 overflow-x-auto">
|
||||
<div class='inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8' @if($sortable)x-data="data()"@endif>
|
||||
<table {{ $attributes->merge(['class' => 'min-w-full divide-y divide-gray-300']) }}>
|
||||
{{ $slot }}
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
{{ $slot }}
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -1,7 +1,17 @@
|
|||
@props(['first' => false, 'emphasis'=> false])
|
||||
@props([
|
||||
'emphasis' => false,
|
||||
'first' => false,
|
||||
'for_button' => false,
|
||||
])
|
||||
@php
|
||||
$td_classes = "whitespace-nowrap py-4 text-sm";
|
||||
$td_classes .= $first ? ' pl-4 pr-3 sm:pl-6':' px-3';
|
||||
$td_classes .= $emphasis ? ' text-gray-900 font-medium':' text-gray-500';
|
||||
$classes = 'whitespace-nowrap py-4 text-sm';
|
||||
$classes .= $emphasis ? ' font-medium text-gray-900' : ' text-gray-500';
|
||||
$classes .= $first ? ' pl-3 pr-4 sm:pl-0' : ' px-3';
|
||||
$classes .= $for_button ? ' relative text-right sm:pr-0' : '';
|
||||
|
||||
|
||||
@endphp
|
||||
<td {{ $attributes->merge(['class'=>$td_classes]) }}>{{ $slot }}</td>
|
||||
<td {{ $attributes->merge(['class' => $classes]) }}>{{ $slot }}</td>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
@props(['sr_text' => false,'button' => false,'a' => false])
|
||||
@php $td_class = "relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"; @endphp
|
||||
@php $link_class = "text-indigo-600 hover:text-indigo-900"; @endphp
|
||||
<td {{ $attributes->merge(['class' => $td_class]) }}>
|
||||
@if($a)
|
||||
<a {{ $a->attributes->merge(['class' => $link_class]) }}>
|
||||
{{ $a }}@if($sr_text)<span class="sr-only">{{ $sr_text }}</span>@endif
|
||||
</a>
|
||||
@elseif($button)
|
||||
@php($aria_label = $button . $sr_text)
|
||||
<button {{ $button->attributes->merge(['class' => $link_class, 'aria-label'=> $aria_label]) }}>
|
||||
{{ $button }}
|
||||
</button>
|
||||
@else
|
||||
{{ $slot }}{{ $sr_text ? '<span class="sr-only">' . $sr_text . '</span>' : '' }}
|
||||
@endif
|
||||
</td>
|
||||
|
|
@ -1,8 +1,20 @@
|
|||
@props(['first' => false, 'placeholder' => false])
|
||||
@props([
|
||||
'first' => false,
|
||||
'spacer_only' => false,
|
||||
'sortable' => true
|
||||
])
|
||||
@php
|
||||
$th_classes = "py-3.5 text-left text-sm font-semibold text-gray-900";
|
||||
$th_classes .= $first ? ' pl-4 pr-3 sm:pl-6':' px-3';
|
||||
if($placeholder) $th_classes = "relative py-3.5 pl-3 pr-4 sm:pr-6";
|
||||
$classes = ($first) ? 'pl-4 pr-3 sm:pl-0' : 'px-3';
|
||||
$classes .= " py-3.5 text-left text-sm font-semibold text-gray-900";
|
||||
$classes .= $sortable ? ' cursor-pointer select-none' : '';
|
||||
if($spacer_only) $classes = 'relative py-3.5 pl-3 pr-4 sm:pr-0';
|
||||
$atrib = [
|
||||
'scope' => 'col',
|
||||
'class' => $classes
|
||||
];
|
||||
@endphp
|
||||
|
||||
<th {{ $attributes->merge(['scope' =>'col','class' => $th_classes]) }}>{{ $slot }}</th>
|
||||
<th @if($sortable)@click="sortByColumn"@endif {{ $attributes->merge($atrib) }}>
|
||||
{{ $slot }}
|
||||
</th>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
@props(['title' => false,'subtitle' => false, 'button' => false])
|
||||
<div class="sm:flex sm:items-center">
|
||||
<div class="sm:flex-auto">
|
||||
@if($title)
|
||||
<h1 {{ $title->attributes->merge(['class' => 'text-base font-semibold leading-6 text-gray-900']) }}>{{ $title }}</h1>
|
||||
@endif
|
||||
@if($subtitle)
|
||||
<p {{ $subtitle->attributes->merge(['class' => 'mt-2 text-sm text-gray-700']) }}>{{ $subtitle }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
|
||||
@if($button)
|
||||
@php $button_classes = 'block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'; @endphp
|
||||
<button {{ $button->attributes->merge(['type' => 'button','class' => $button_classes]) }}>{{ $button }}</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<x-layout.app>
|
||||
<x-card.card mw="xl">
|
||||
boo
|
||||
</x-card.card>
|
||||
</x-layout.app>
|
||||
|
|
@ -14,23 +14,39 @@
|
|||
<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--}}
|
||||
{{-- 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">
|
||||
<div class="px-4">
|
||||
<x-table.table>
|
||||
<thead>
|
||||
<tr>
|
||||
<x-table.th first>Name</x-table.th>
|
||||
<x-table.th>Grade</x-table.th>
|
||||
<x-table.th spacer_only>
|
||||
<span class="sr-only">Edit</span>
|
||||
</x-table.th>
|
||||
</x-table.table_header_row>
|
||||
</tr>
|
||||
</thead>
|
||||
<x-table.body>
|
||||
@foreach($students as $student)
|
||||
<tr>
|
||||
<x-table.td first>{{ $student->full_name(true) }}</x-table.td>
|
||||
<x-table.td>{{ $student->grade }}</x-table.td>
|
||||
<x-table.td for_button>
|
||||
<x-table.button href="/students/{{ $student->id }}/edit">Edit</x-table.button>
|
||||
</x-table.td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</x-table.body>
|
||||
</x-table.table>
|
||||
</div>
|
||||
</x-layout.page-section>
|
||||
</x-layout.page-section-container>
|
||||
</x-layout.app>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,48 @@
|
|||
<x-layout.app>
|
||||
<x-slot:page_title>Test Page</x-slot:page_title>
|
||||
|
||||
{{ request()->is('test') ? 'yes':'no' }}
|
||||
<x-card.card class="px-4 pt-6">
|
||||
<x-table.table with_title_area with_button>
|
||||
<x-slot:title>Users</x-slot:title>
|
||||
<x-slot:subtitle>A list of all the users in your account including their name, title, email and role.</x-slot:subtitle>
|
||||
<x-slot:title_block_right><x-form.button>Add User</x-form.button></x-slot:title_block_right>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<x-table.th first>Name</x-table.th>
|
||||
<x-table.th>Title</x-table.th>
|
||||
<x-table.th>Email</x-table.th>
|
||||
<x-table.th>Role</x-table.th>
|
||||
<x-table.th spacer_only>
|
||||
<span class="sr-only">Edit</span>
|
||||
</x-table.th>
|
||||
</tr>
|
||||
</thead>
|
||||
<x-table.body>
|
||||
<tr>
|
||||
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Lindsay Walton</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Front-end Developer</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">lindsay.walton@example.com</td>
|
||||
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">Member</td>
|
||||
<td class="relative whitespace-nowrap py-4 px-3 text-right text-sm sm:pr-0">
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-900 font-medium">Edit<span class="sr-only">, Lindsay Walton</span></a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<x-table.td first emphasis>Lindsay Walton</x-table.td>
|
||||
<x-table.td>Front-end Developer</x-table.td>
|
||||
<x-table.td>lindsay.walton@example.com</x-table.td>
|
||||
<x-table.td>Member</x-table.td>
|
||||
<x-table.td for_button>
|
||||
<x-table.button href="#" aria_data=", Lindsay Walton">Edit</x-table.button>
|
||||
</x-table.td>
|
||||
</tr>
|
||||
|
||||
<!-- More people... -->
|
||||
</x-table.body>
|
||||
</x-table.table>
|
||||
</x-card.card>
|
||||
|
||||
|
||||
</x-layout.app>
|
||||
|
|
|
|||
Loading…
Reference in New Issue