Merge pull request #346 from yungifez/dev

Slight UI improvements and fixes, default semester now being created

app/Http/Livewire/Datatable.php

@@ -18,10 +18,15 @@ class Datatable extends Component
     protected $queryString = ['perPage', 'search'];
 
     public $model;
+
     public $filters;
+
     public $columns;
+
     public $uniqueId;
+
     public $search = null;
+
     public $perPage = 10;
 
     protected $rules = [
@@ -83,9 +88,16 @@ public function addSearchFilter($model)
         //create closure with filters to be applied to model
         $searchFilter = function ($query) use ($model) {
             foreach ($this->columns as $column) {
+                if (array_key_exists('searchable', $column) && !$column['searchable']) {
+                    continue;
+                }
+                if (array_key_exists('type', $column)) {
+                    continue;
+                }
+
                 if (!array_key_exists('columnName', $column)) {
                     if (!array_key_exists('property', $column) || empty($column['property'])) {
-                        break;
+                        continue;
                     }
                 }
 

app/Models/Semester.php

@@ -3,10 +3,10 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\HasManyThrough;
-use Illuminate\Database\Eloquent\Relations\Pivot;
 
-class Semester extends Pivot
+class Semester extends Model
 {
     use HasFactory;
 

app/Models/User.php

@@ -271,25 +271,4 @@ public function subjects(): BelongsToMany
     {
         return $this->belongsToMany(Subject::class);
     }
-
-    public function adminlte_image()
-    {
-        return $this->defaultProfilePhotoUrl();
-    }
-
-    public function adminlte_desc()
-    {
-        $description = [];
-        if ($this->school) {
-            $description[] = $this->school->academicYear ? 'Academic year: '.$this->school->academicYear->name() : '';
-            $description[] = $this->school->semester ? 'Semester: '.$this->school->semester->name : '';
-        }
-
-        return $descriptionString = implode(', ', $description);
-    }
-
-    public function adminlte_profile_url()
-    {
-        return 'profile/username';
-    }
 }

app/Services/AcademicYear/AcademicYearService.php

@@ -86,7 +86,10 @@ public function setAcademicYear($academicYearId, $schoolId = null): bool
         $school = $this->schoolService->getSchoolById($schoolId);
         $school->academic_year_id = $academicYearId;
         //set semester id to first semester or null
-        $school->semester_id = $academicYear->semesters?->first()->id ?? null;
+        $school->semester_id = $academicYear->semesters?->first()->id ?? $school->academicYear->semesters()->create([
+            'name'      => 'First',
+            'school_id' => auth()->user()->school_id,
+        ])->id;
 
         return $school->save();
     }

app/View/Components/Button.php

@@ -12,16 +12,19 @@ class Button extends Component
 
     public $label;
 
+    public $colour;
+
     /**
      * Create a new component instance.
      *
      * @return void
      */
-    public function __construct($class = null, $icon = null, $label = null)
+    public function __construct($class = null, $icon = null, $label = null, $colour = 'text-white  bg-blue-600')
     {
         $this->class = $class;
         $this->icon = $icon;
         $this->label = $label;
+        $this->colour = $colour;
     }
 
     /**

resources/views/auth/register.blade.php

@@ -3,11 +3,11 @@
 @section('title', 'Login')
 
 @section('body')
-    <x-partials.authentication-card class="md:w-11/12 lg:w-11/12 xl:w-11/12">
+    <x-partials.authentication-card class="w-full md:w-11/12 lg:w-11/12 xl:w-11/12" width="">
         <x-display-validation-errors />
         <livewire:registration-form />
         <div class="py-6">
-            <p>Have An account? <a href="{{route('login')}}" class="text-blue-800"> Login </a></p>
+            <p>Have An Account? <a href="{{route('login')}}" class="text-blue-800 mx-1"> Login </a></p>
         </div>
     </x-partials.authentication-card>
 @endsection

resources/views/components/button.blade.php

@@ -1,4 +1,4 @@
-<button @class(["$class bg-blue-600 hover:bg-opacity-90 active:bg-opacity-70 text-white py-2 px-4 border-2 dark:border-0 rounded my-3"] ) {{$attributes}}>
+<button @class(["$class $colour hover:bg-opacity-90 active:bg-opacity-70 py-2 px-4 border-2 dark:border-0 rounded my-3"] ) {{$attributes}}>
     <i class="{{$icon}}" aria-hidden="true"></i>
     {{$slot}} {{$label}}
 </button>

resources/views/components/confirms-password.blade.php

@@ -3,6 +3,7 @@
 @php
     $confirmableId = md5($attributes->wire('then'));
 @endphp
+<x-loading-spinner wire:target="confirmPassword"/>
 
 <span
     {{ $attributes->wire('then') }}

resources/views/components/partials/authentication-card.blade.php

@@ -1,7 +1,7 @@
-@props(['class' => ''])
+@props(['class' => '', 'width' => 'w-10/12 md:w-8/12 lg:w-5/12 xl:w-4/12', 'height' => 'min-h-[20%]'])
 <div class="flex flex-cols justify-center items-center my-12 flex-col">
     <img src="{{@asset(config('app.logo'))}}" alt="" class="rounded-full w-28 h-28 border border-gray-200 shadow-lg my-4">
-    <div class="{{$class}} w-10/12 md:w-8/12 lg:w-5/12 xl:w-4/12 min-h-[20%]">
+    <div class="{{$class}} {{$width}} {{$height}}">
         <div class="p-3 w-full flex flex-col justify-center items-center bg-white border border-gray-300 rounded">
             {{$slot}}
         </div>

resources/views/components/toggle.blade.php

@@ -0,0 +1,17 @@
+@props([
+    'id' => null,
+    'name' => null,
+    'labelCheckedText' => null,
+    'labelUncheckedText' => null,
+    'groupClass' => null,
+])
+<div class="{{ $groupClass }}">
+    <label class=" inline-flex items-center cursor-pointer" x-data="{'checked' : '{{$attributes->has('checked') && $attributes->get('checked') != false ? true : false}}' ?? false, 'labelText' : null}" x-modelable="checked" @if ($attributes->has('x-model')) x-model="{{$attributes->get('x-model')}}" @endif x-effect="checked == true ? labelText =  '{{$labelCheckedText}}' : labelText =  '{{$labelUncheckedText}}'">
+        <div class="relative">
+        <input type="hidden" name="{{$name}}" :value="checked == true ? '1' : '0'">
+        <input type="checkbox" class="sr-only peer" {{$attributes}} id="{{$id}}" x-model="checked"/>
+            <div class="w-11 h-6 bg-gray-300 dark:bg-gray-500 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+        </div>
+        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-50" x-text="labelText"></span>
+    </label>  
+</div>

resources/views/livewire/datatable.blade.php

@@ -11,9 +11,9 @@
             @endforeach
         </select>
     </div>
-    <div class="overflow-x-scroll beautify-scrollbar text-center">
+    <div class="overflow-x-scroll beautify-scrollbar">
         <table class="border w-full my-4 table-auto">
-            <thead class="border bg-gray-900 dark:bg-white dark:bg-opacity-20 text-white">
+            <thead class="border text-center bg-gray-900 dark:bg-white dark:bg-opacity-20 text-white">
                 <th class="p-4">S/N</th>
                 @foreach ($columns as $column)
                     @if (!isset($column['can']) || auth()->user()->can($column['can']))
@@ -42,13 +42,13 @@
                                             }
                                             
                                         @endphp
-                                        <p>
+                                        <p class="{{$column['class'] ?? null}}">
                                             @if (array_key_exists('method', $column) && !empty($column['method']))
                                                 {{ ($model?->{$column['method']}()) }}
                                             @elseif (array_key_exists('type', $column) && !empty($column['type']))
                                                 @if ($column['type'] == 'delete')
                                                     <x-modal title="Confirm {{$column['name']}}" background-colour="bg-red-600">
-                                                        <div class="text-gray-700 dark:text-white">
+                                                        <div class="text-gray-700 text-center dark:text-white">
                                                             <i class="fa fa-trash text-7xl" aria-hidden="true"></i>
                                                             <p class="my-2">Are you sure you want to {{Str::lower($column['name'])}} this resource</p>
                                                         </div>
@@ -71,14 +71,14 @@
                                                         @endforeach
                                                     </x-dropdown>
                                                 @elseif($column['type'] == 'boolean-switch')
-                                                <form action="{{route($column['action'], $model->id)}}" method="POST">
+                                                <form action="{{route($column['action'], $model->id)}}" method="POST" x-data>
                                                     @csrf
-                                                    <label class="relative inline-flex items-center cursor-pointer">
-                                                        <input type="checkbox" class="sr-only peer" name="{{$column['field']}}" onChange="this.form.submit()" @checked($model?->{$column['property'] ?? $column['name']}  == true)>
-                                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600"></div>
-                                                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{{$model?->{$column['property'] ?? $column['name']} == true ? ($column['true-statement'] ?? 'Yes') : ($column['false-statement'] ?? 'No') }}</span>
-                                                    </label>  
+                                                    <x-toggle :name="$column['field']" :checked="$model?->{$column['property'] ?? $column['name']}  == true"  :label-checked-text="$column['true-statement'] ?? 'yes'" :label-unchecked-text="$column['false-statement']?? 'no'" @Change="$nextTick(() => $el.form.submit())"/>
                                                 </form>
+                                                @elseif($column['type'] == 'image')
+                                                    <div class="flex justify-center">
+                                                        <img class="{{$column['img-class'] ?? " h-14 w-1/2 rounded-full"}}" loading="lazy" src="{{($model?->{$column['property'] ?? $column['name']}) }}" alt="">
+                                                    </div>
                                                 @endif
                                             @else
                                                 @php
@@ -99,8 +99,8 @@
                         </tr>
                     @endforeach
                 @else
-                    <tr w-full>
-                        <td class="p-4 capitalize" colspan="100%">No data to Show</td>
+                    <tr>
+                        <td class="p-4 capitalize text-center" colspan="100%">No data to Show</td>
                     </tr>
                 @endif
             </tbody>

resources/views/livewire/list-students-table.blade.php

@@ -8,6 +8,7 @@
         </div>
         @unlessrole(['parent', 'student'])
             <livewire:datatable :model="App\Models\User::class" uniqueId="students-list-table" :filters="[['name' => 'students'], ['name' => 'inSchool'], ['name' => 'orderBy' , 'arguments' => ['name']], ['name' => 'has', 'arguments' => ['StudentRecord']], ['name' => 'with' , 'arguments' => ['studentRecord','studentRecord.section', 'studentRecord.myClass']]]" :columns="[
+                ['type' => 'image', 'property' => 'profile_photo_url'] , 
                 ['property' => 'name'] , 
                 ['property' => 'email'] , 
                 ['property' => 'admission_number' ,'relation' => 'studentRecord'] , 

resources/views/profile/two-factor-authentication-form.blade.php

@@ -54,13 +54,13 @@
             @else
                 @if ($showingRecoveryCodes)
                     <x-confirms-password wire:then="regenerateRecoveryCodes">
-                        <x-button class=" bg-white text-black" wire:loading.attr="disabled">
+                        <x-button class=" bg-white text-black" colour="" wire:loading.attr="disabled">
                             {{ __('Regenerate Recovery Codes') }}
                         </x-button>
                     </x-confirms-password>
                 @else
                     <x-confirms-password wire:then="showRecoveryCodes">
-                        <x-button class=" bg-white text-black">
+                        <x-button class=" bg-white text-black " colour="">
                             {{ __('Show Recovery Codes') }}
                         </x-button>
                     </x-confirms-password>