Skip to content

Commit

Permalink
Updates with Pagination.
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaitak-gorai
chaitak-gorai committed Aug 8, 2023
1 parent d796678 commit c24064e
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 124 deletions.
6 changes: 4 additions & 2 deletions app/Http/Controllers/Dashboard/User/SetupAccount.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
namespace App\Http\Controllers\Dashboard\User;

use App\Http\Controllers\Controller;
use App\Models\Facilities\Facility;
use Illuminate\Http\Request;
use Inertia\Inertia;

class SetupAccount extends Controller
{
//

public function index()
{
$facilities = Facility::pluck('name', 'id');

return Inertia::render('AddUsers');
return Inertia::render('AddUsers', ['facilities' => $facilities]);
}
}
31 changes: 28 additions & 3 deletions app/Http/Controllers/InvitationController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,46 @@
namespace App\Http\Controllers;

use App\Invite;
use App\Models\Facilities\Facility;
use App\Models\Invitation;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Redirect;
use Inertia\Response;
use JamesDordoy\LaravelVueDatatable\Http\Resources\DataTableCollectionResource;
use Str;

class InvitationController extends Controller
{
public function showInvitations(): Response
{
// Fetch invitation data from the database
$invitations = Invitation::with('user')->get();

return Inertia::render('Invitations', ['invitations' => $invitations]);
$facilities = Facility::pluck('name', 'id');

return Inertia::render('Invitations', ['facilities' => $facilities]);
}


//URL for datatable for invitations
public function getInvitations(Request $request)
{
$length = $request->input('length', 10);
$sortBy = $request->input('column');
$orderBy = $request->input('dir');
$facility = $request->input('facility');


$query = Invitation::with('user');

$query->orderBy($sortBy, $orderBy);

if ($facility != null) {
$query->where('facility', $facility);
}

$data = $query->paginate($length);

return new DataTableCollectionResource($data);
}

public function index($token): Response
Expand Down
23 changes: 6 additions & 17 deletions resources/app/pages/AddUsers.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,12 @@
class="absolute w-72 mt-2 py-2 bg-white rounded-md shadow-lg z-10 max-h-72 overflow-y-auto no-scrollbar"
>
<li
v-for="facility in facilityOptions"
v-for="facility in facilities"
:key="facility.id"
@click="selectDefaultFacility(facility)"
class="px-4 py-2 hover:bg-gray-100 cursor-pointer w-full"
>
{{ facility.name }}
{{ facility }}
</li>
</ul>
</div>
Expand Down Expand Up @@ -205,6 +205,9 @@
</template>
<script>
export default {
props: {
facilities: Object,
},
data() {
return {
role_dropdown: null,
Expand Down Expand Up @@ -232,20 +235,6 @@ export default {
username: "",
full_name: "",
},
facilityOptions: [
{
id: 1,
name: "Facility 1",
},
{
id: 2,
name: "Facility 2",
},
{
id: 3,
name: "Facility 3",
},
],
roleOptions: [],
};
},
Expand All @@ -263,7 +252,7 @@ export default {
this.userForm.post(this.route("dashboard.users.add"));
},
selectDefaultFacility(facility) {
this.userForm.default_facility = facility.name;
this.userForm.default_facility = facility;
this.default_facility_dropdown = false;
},
selectRole(role) {
Expand Down
219 changes: 117 additions & 102 deletions resources/app/pages/Invitations.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,125 +4,140 @@
<h2 class="text-2xl font-bold mb-4">Invitation Details</h2>
</div>

<!-- Facility Filter -->
<div class="mb-4">
<label class="block mb-2 text-sm font-medium text-gray-700"
>Filter by Facility:</label
<data-table :columns="columns" :url="url">
<div
class="flex justify-between mb-2"
slot="filters"
slot-scope="{ tableFilters, perPage }"
>
<select
v-model="selectedFacility"
class="w-full px-4 py-2 border rounded-md"
>
<option value="">All Facilities</option>
<option
v-for="facility in uniqueFacilities"
:key="facility"
:value="facility"
>
{{ facility }}
</option>
</select>
</div>

<table class="w-full border-collapse">
<!-- Table Headers -->
<thead>
<tr>
<th class="p-4 bg-gray-200">Invitation ID</th>
<th class="p-4 bg-gray-200">Name</th>
<th class="p-4 bg-gray-200">Email</th>
<th class="p-4 bg-gray-200">Facility</th>
<th class="p-4 bg-gray-200">Role</th>
<th class="p-4 bg-gray-200">Status</th>
<th class="p-4 bg-gray-200">Additional Info</th>
</tr>
</thead>
<tbody>
<!-- Table Rows -->
<tr
v-for="invitation in filteredInvitations"
:key="invitation.id"
>
<td class="p-4 border">{{ invitation.id }}</td>
<td class="p-4 border">
{{ invitation.user.first_name }}
{{ invitation.user.last_name }}
</td>
<td class="p-4 border">{{ invitation.email }}</td>
<td class="p-4 border">{{ invitation.facility }}</td>
<td class="p-4 border">
{{ invitation.user.access_control }}
</td>
<td class="p-4 border">
<span
:class="{
'text-green-500':
invitation.status === 'accepted',
' text-red-500':
invitation.status === 'rejected',
' text-yellow-500':
invitation.status === 'pending',
}"
class="px-2 py-1 rounded"
>
{{ invitation.status }}
</span>
</td>
<td class="p-4 border">
<span
v-if="invitation.status === 'accepted'"
class="text-green-500 px-2 py-1 rounded"
<div class="w-1/2 mr-5">
<label class="block mb-2 text-sm font-medium text-gray-700"
>Filter by Facility:</label
>
<select
v-model="tableFilters.filters.facility"
class="w-full px-4 py-2 border rounded-md"
>
<option :value="null">All Facilities</option>
<option
v-for="facility in facilities"
:key="facility"
:value="facility"
>
Accepted at: {{ invitation.accepted_at }}
</span>
<span
v-if="invitation.status === 'pending'"
class="text-yellow-500 px-2 py-1 rounded"
>
Valid till: {{ invitation.valid_till }}
</span>
</td>
</tr>
</tbody>
</table>
{{ facility }}
</option>
</select>
</div>
<div class="w-1/2">
<label class="block mb-2 text-sm font-medium text-gray-700"
>Rows Per Page:</label
>
<select
v-model="tableFilters.length"
class="w-full px-4 py-2 border rounded-md"
>
<option :key="page" v-for="page in perPage">
{{ page }}
</option>
</select>
</div>
</div>
<div
class="flex justify-center mt-4"
slot="pagination"
slot-scope="{ links = {}, meta = {} }"
>
<div class="flex items-center">
<nav>
<div class="inline-flex">
<div class="mr-4 mt-2">
<span class="text-gray-600">
Showing {{ meta.from }} to {{ meta.to }} of
{{ meta.total }} Entries
</span>
</div>
<div>
<button
:disabled="!links.prev"
class="px-4 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
@click="url = links.prev"
>
Prev
</button>
<button
:disabled="!links.next"
class="ml-2 px-4 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50"
@click="url = links.next"
>
Next
</button>
</div>
</div>
</nav>
</div>
</div>
</data-table>
</div>
</template>

<script>
import DashboardLayout from "../layouts/DashboardLayout";
export default {
layout: DashboardLayout,
props: {
invitations: Array, // Get the invitations data from the controller
facilities: Object,
},
data() {
return {
selectedFacility: "", // Holds the selected facility for filtering
filters: {
facility: null,
},
url: "",
};
},
computed: {
// Get a list of unique facilities from the invitations data
uniqueFacilities() {
console.log(this.invitations);
columns() {
return [
...new Set(
this.invitations.map((invitation) => invitation.facility)
),
{ label: "Invitation ID", name: "id", orderable: true },
{
label: "Name",
name: "user.first_name",
transform: ({ data, name }) =>
`${data.user.first_name} ${data.user.last_name}`,
},
{ label: "Email", name: "email", orderable: true },
{ label: "Facility", name: "facility", orderable: true },
{ label: "Role", name: "user.access_control" },
{
label: "Status",
name: "status",
transform: ({ data, name }) => {
const status = data[name];
let className = "";
if (status === "accepted") className = "text-green-500";
else if (status === "rejected")
className = "text-red-500";
else if (status === "pending")
className = "text-yellow-500";
return `<span class="px-2 py-1 rounded ${className}">${status}</span>`;
},
},
{
label: "Additional Info",
name: "status_info",
transform: ({ data, name }) => {
const status = data.status;
if (status === "accepted") {
return `<span class="text-green-500 px-2 py-1 rounded">Accepted at: ${data.accepted_at}</span>`;
} else if (status === "pending") {
return `<span class="text-yellow-500 px-2 py-1 rounded">Valid till: ${data.valid_till}</span>`;
}
return "";
},
},
];
},
// Filter the invitations based on the selected facility
filteredInvitations() {
if (this.selectedFacility === "") {
// If no facility selected, show all invitations
return this.invitations;
} else {
// Filter the invitations based on the selected facility
return this.invitations.filter(
(invitation) =>
invitation.facility === this.selectedFacility
);
}
},
},
mounted() {
this.url = route("invitation.fetch");
},
};
</script>
Expand Down
1 change: 1 addition & 0 deletions routes/web.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,7 @@ function () {

Route::get('/invitations/join/{token}', [InvitationController::class, 'index'])->name('invitation.get');
Route::post('/invitations/accept', [InvitationController::class, 'acceptOrRejectInvite'])->name('invitation.accept');
Route::get('/invitations', [InvitationController::class, 'getInvitations'])->name('invitation.fetch');


/* =================================
Expand Down

0 comments on commit c24064e

Please sign in to comment.