Add Option to Change Last Accepted Status Visibility

app/Http/Livewire/AcceptedStatusVisibilityToggle.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\User;
+use App\Student;
+use Livewire\Component;
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+
+class AcceptedStatusVisibilityToggle extends Component
+{
+    use AuthorizesRequests; 
+
+    /** @var User */
+    public $user;
+
+    public Student $student;
+
+    public int $profile_id;
+
+    public string $profile_name;
+
+    public $visible;
+
+    public $stats;
+
+    public function mount()
+    {
+        $this->user = auth()->user();
+        $this->syncStatsVisibility();
+    }
+
+    public function toggleVisibility()
+    {
+        $this->authorize('update', [$this->student, $this->user]);
+
+        $value = $this->visible = !$this->visible;
+
+        $this->stats->removeData("accepted_by.profile_{$this->profile_id}.visible");
+        $this->stats->insertData(['accepted_by' => ["profile_{$this->profile_id}" => ['visible' => $value ? '1' : '0']]]);
+        $this->emit('alert', $value
+            ? "Now Displaying Last Accepted Status!"
+            : "Last Accepted Status is Hidden Now.",
+            'success'
+        );
+
+        $this->syncStatsVisibility();
+    }
+
+    private function syncStatsVisibility()
+    {
+        $this->stats = $this->student->fresh()->stats;
+        $this->visible = !isset($this->stats->accepted_by["profile_{$this->profile_id}"]['visible']) || $this->stats->accepted_by["profile_{$this->profile_id}"]['visible'] === '1' ? true : false;
+    }
+}

app/Student.php

@@ -112,6 +112,7 @@ public function updateAcceptedStats(Profile $profile, $accepted = true)
                         $accepted_key => [
                             'profile' => $profile->id,
                             'profile_name' => $profile->full_name,
+                            'visible' => '1',
                         ],
                     ],
                     'accepted_on' => now()->toDateTimeString(),

public/mix-manifest.json

@@ -3,8 +3,8 @@
     "/js/app.js.map": "/js/app.js.map?id=271c8f103c569b8f5613b8778d48ee75",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
     "/js/manifest.js.map": "/js/manifest.js.map?id=389e00e7d7680b68d4e1d128ce27ff48",
-    "/css/app.css": "/css/app.css?id=0fd161f323dd5c77642c3240bbb47d16",
-    "/css/app.css.map": "/css/app.css.map?id=3ba6add83b449d9a830b1160dc25d43d",
+    "/css/app.css": "/css/app.css?id=b94039e3f74ab92a4c88352f22bb0334",
+    "/css/app.css.map": "/css/app.css.map?id=7d5ab92385140497a5e682d0633c052d",
     "/js/vendor.js": "/js/vendor.js?id=77012e19e850a379f73e3ac0c76bc9b1",
     "/js/vendor.js.map": "/js/vendor.js.map?id=f3f5514d1186aa088c887b6ebe999fe0"
 }

resources/assets/sass/_core.scss

@@ -363,14 +363,30 @@ div.content.showContent {
 /* Hide default HTML checkbox */
 .switch input {display:none;}
 
-/* The slider */
+/* Base container */
+.switch {
+  /* Default (original) values */
+  --switch-size: 26px;
+  --switch-gap: 4px;
+  --switch-translation: 26px;
+
+  position: relative;
+  display: inline-block;
+  width: calc(var(--switch-size) * 2 + (var(--switch-gap) * 2));
+  height: calc(var(--switch-size) + (var(--switch-gap) * 2));
+}
+
+/* SMALL VERSION OVERRIDE */
+.switch.small-switch {
+  --switch-size: 12px; /* Smaller knob */
+  --switch-gap: 3px;  /* Tighter padding */
+  --switch-translation: 12px; /* Smaller slide distance */
+}
+
 .slider {
   position: absolute;
   cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  top: 0; left: 0; right: 0; bottom: 0;
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
@@ -379,10 +395,10 @@ div.content.showContent {
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: var(--switch-size);
+  width: var(--switch-size);
+  left: var(--switch-gap);
+  bottom: var(--switch-gap);
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
@@ -397,9 +413,8 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
-  transform: translateX(26px);
+  /* Automatically uses the correct distance based on the class */
+  transform: translateX(var(--switch-translation));
 }
 
 /* Rounded sliders */

resources/views/livewire/accepted-status-visibility-toggle.blade.php

@@ -0,0 +1,24 @@
+<div class="row mb-2">
+    <div class="col-sm-8">
+        <span class="{{!$visible ? 'small font-weight-lighter text-muted' : ''}}">{{ $profile_name }}
+    </div>
+
+    @can('update', $student)
+        <div class="col-sm-4">
+            <button 
+                wire:click="toggleVisibility" 
+                wire:loading.attr="disabled"
+                class="btn btn-sm btn-link p-0 text-uppercase text-muted border-0 shadow-none hover-darken"
+                style="font-size: 0.75rem; text-decoration: underline; text-underline-offset: 4px;">
+
+                <small title="{{ $visible ? 'Hide this research work experience once it has ended' : 'Make this research work visible' }}"
+                        data-toggle="tooltip" 
+                        wire:loading.remove>{{ $visible ? 'Hide' : 'Display' }}
+                </small>
+                <small wire:loading>
+                    Updating...
+                </small>
+            </button>
+        </div>
+    @endcan
+</div>

resources/views/students/show.blade.php

@@ -95,16 +95,34 @@
                     </dd>
                     @endif
 
-                    @if($student->stats->accepted_by && !empty($student->stats->accepted_by))
                     <dt class="col-sm-4" title="Accepted to research with these labs" data-toggle="tooltip">
                         accepted by
                     </dt>
                     <dd class="col-sm-8">
-                        @foreach($student->stats->accepted_by as $accepted_record)
-                            <div>{{ $accepted_record['profile_name'] ?? 'n/a' }}</div>
-                        @endforeach
-                    </dd>
+                    @php
+                        $accepted_stats = $student->stats->accepted_by;
+                        $hidden_accepted_count = count(array_filter($accepted_stats, fn($accepted) => $accepted['visible'] === "0"));
+                    @endphp
+                    @if(count($accepted_stats) > 0)
+                        @can('update', $student)
+                            @foreach($accepted_stats as $accepted_record)
+                                <livewire:accepted-status-visibility-toggle 
+                                    :student="$student" 
+                                    :profile_id="$accepted_record['profile']" 
+                                    :profile_name="$accepted_record['profile_name']">
+                            @endforeach
+                        @else
+                            @foreach(array_filter($accepted_stats, fn($accepted) => $accepted['visible'] === "1"); as $accepted_record)
+                                <div class="col-sm-12">{{ $accepted_record['profile_name'] }}</div>
+                            @endforeach
+                            @if($hidden_accepted_count > 0)
+                                {{$hidden_accepted_count}} hidden.
+                            @endif
+                        @endcan
+                    @else
+                        n/a
                     @endif
+                    </dd>
                 @endif
             </dl>
         </div>