Skip to content

Commit 3026f51

Browse files
perisicnikola37perisicnikola37
committed
Create users Index.vue component
1 parent d27e5c7 commit 3026f51

File tree

8 files changed

+264
-15
lines changed

8 files changed

+264
-15
lines changed

‎app/Http/Controllers/RoleController.php

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
use Illuminate\Http\Request;
6+
7+
class RoleController extends Controller
8+
{
9+
/**
10+
* Display a listing of the resource.
11+
*/
12+
public function index()
13+
{
14+
//
15+
}
16+
17+
/**
18+
* Show the form for creating a new resource.
19+
*/
20+
public function create()
21+
{
22+
//
23+
}
24+
25+
/**
26+
* Store a newly created resource in storage.
27+
*/
28+
public function store(Request $request)
29+
{
30+
//
31+
}
32+
33+
/**
34+
* Display the specified resource.
35+
*/
36+
public function show(string $id)
37+
{
38+
//
39+
}
40+
41+
/**
42+
* Show the form for editing the specified resource.
43+
*/
44+
public function edit(string $id)
45+
{
46+
//
47+
}
48+
49+
/**
50+
* Update the specified resource in storage.
51+
*/
52+
public function update(Request $request, string $id)
53+
{
54+
//
55+
}
56+
57+
/**
58+
* Remove the specified resource from storage.
59+
*/
60+
public function destroy(string $id)
61+
{
62+
//
63+
}
64+
}

‎app/Http/Controllers/UserController.php

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
use App\Models\User;
6+
use Illuminate\Http\Request;
7+
use Inertia\Inertia;
8+
9+
class UserController extends Controller
10+
{
11+
/**
12+
* Display a listing of the resource.
13+
*/
14+
public function index()
15+
{
16+
return Inertia::render('Users/Index', [
17+
'users' => User::all()
18+
]);
19+
}
20+
21+
/**
22+
* Show the form for creating a new resource.
23+
*/
24+
public function create()
25+
{
26+
//
27+
}
28+
29+
/**
30+
* Store a newly created resource in storage.
31+
*/
32+
public function store(Request $request)
33+
{
34+
//
35+
}
36+
37+
/**
38+
* Display the specified resource.
39+
*/
40+
public function show(string $id)
41+
{
42+
//
43+
}
44+
45+
/**
46+
* Show the form for editing the specified resource.
47+
*/
48+
public function edit(string $id)
49+
{
50+
//
51+
}
52+
53+
/**
54+
* Update the specified resource in storage.
55+
*/
56+
public function update(Request $request, string $id)
57+
{
58+
//
59+
}
60+
61+
/**
62+
* Remove the specified resource from storage.
63+
*/
64+
public function destroy(string $id)
65+
{
66+
//
67+
}
68+
}

‎composer.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"guzzlehttp/guzzle": "^7.2",
1010
"inertiajs/inertia-laravel": "^0.6.8",
1111
"laravel/framework": "^10.0",
12-
"laravel/jetstream": "^3.0",
12+
"laravel/jetstream": "^3.0.0",
1313
"laravel/sanctum": "^3.2",
1414
"laravel/tinker": "^2.8",
1515
"tightenco/ziggy": "^1.0"

‎composer.lock

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/Pages/Users/Index.vue

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<template>
2+
<div>
3+
<AppLayout>
4+
5+
<div class="py-12">
6+
7+
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
8+
<div class="overflow-hidden bg-white shadow-xl sm:rounded-lg">
9+
<div class="flex justify-end mt-3">
10+
<div class="mb-3 xl:w-96">
11+
<div class="relative flex items-stretch w-4/5 mb-3 input-group">
12+
13+
<input id="search" type='text' v-model="term" @keyup="search"
14+
class="outline-none focus:ring-0 rounded-r-none form-control relative min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0"
15+
placeholder="Search...">
16+
17+
<button
18+
class="rounded-l-none btn px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center"
19+
type="button" id="button-addon2">
20+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search"
21+
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
22+
<path fill="currentColor"
23+
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z">
24+
</path>
25+
</svg>
26+
</button>
27+
</div>
28+
</div>
29+
</div>
30+
<table class="min-w-full divide-y divide-gray-200">
31+
<thead class="bg-gray-50">
32+
<tr>
33+
<th scope="col"
34+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
35+
Name
36+
</th>
37+
<th scope="col"
38+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
39+
Email
40+
</th>
41+
<th scope="col"
42+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
43+
Role
44+
</th>
45+
<th scope="col"
46+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
47+
Created at
48+
</th>
49+
<th scope="col" class="relative px-6 py-3">
50+
<span class="sr-only">Edit</span>
51+
</th>
52+
</tr>
53+
</thead>
54+
<tbody class="bg-white divide-y divide-gray-200">
55+
<tr v-for="user in users" :key="user.id">
56+
<td class="px-6 py-4 whitespace-nowrap">
57+
<div class="flex items-center justify-center">
58+
<div class="ml-4">
59+
<div class="text-sm font-medium text-gray-900">
60+
<inertia-link class="transition hover:text-blue-500"
61+
:href="`users/${user.id}`">{{ user.name }}</inertia-link>
62+
</div>
63+
</div>
64+
</div>
65+
</td>
66+
<td class="px-6 py-4 whitespace-nowrap">
67+
<div class="text-sm text-center text-gray-900">
68+
<a :href="'mailto:' + user.email">{{ user.email }}</a>
69+
</div>
70+
</td>
71+
<td class="px-6 py-4 whitespace-nowrap">
72+
<div class="text-sm text-center text-gray-900">
73+
<!-- {{ user.role.name }} -->
74+
</div>
75+
</td>
76+
<td class="px-6 py-4 text-center whitespace-nowrap">
77+
<span
78+
class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
79+
<!-- {{ user.formatted_created_at }} -->
80+
</span>
81+
</td>
82+
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
83+
84+
<inertia-link :href="`/users/${user.id}/edit`"
85+
class="float-left px-4 py-2 text-green-400 duration-100 rounded hover:text-green-600">
86+
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
87+
viewBox="0 0 24 24" stroke="currentColor">
88+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
89+
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
90+
</svg></inertia-link>
91+
92+
<a href="#" @click="deleteUser(user)"
93+
class="float-left px-4 py-2 ml-2 text-red-400 duration-100 rounded hover:text-red-600">
94+
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
95+
viewBox="0 0 24 24" stroke="currentColor">
96+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
97+
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
98+
</svg>
99+
</a>
100+
</td>
101+
</tr>
102+
</tbody>
103+
</table>
104+
<Pagination class="mt-6" :links="users.links" />
105+
</div>
106+
</div>
107+
</div>
108+
109+
</AppLayout>
110+
</div>
111+
</template>
112+
113+
<script>
114+
import AppLayout from '@/Layouts/AppLayout.vue';
115+
export default {
116+
components: {
117+
AppLayout
118+
},
119+
props: {
120+
users: Object
121+
}
122+
}
123+
</script>

‎resources/views/app.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66

7-
<title inertia>{{ config('app.name', 'Laravel') }}</title>
7+
{{-- <title inertia>{{ config('app.name', 'Laravel') }}</title> --}}
88

99
<!-- Fonts -->
1010
<link rel="preconnect" href="https://fonts.bunny.net">

‎routes/web.php

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,11 @@
11
<?php
22

3+
use App\Http\Controllers\RoleController;
4+
use App\Http\Controllers\UserController;
35
use Illuminate\Foundation\Application;
46
use Illuminate\Support\Facades\Route;
57
use Inertia\Inertia;
68

7-
/*
8-
|--------------------------------------------------------------------------
9-
| Web Routes
10-
|--------------------------------------------------------------------------
11-
|
12-
| Here is where you can register web routes for your application. These
13-
| routes are loaded by the RouteServiceProvider within a group which
14-
| contains the "web" middleware group. Now create something great!
15-
|
16-
*/
17-
189
Route::get('/', function () {
1910
return Inertia::render('Welcome', [
2011
'canLogin' => Route::has('login'),
@@ -24,6 +15,9 @@
2415
]);
2516
});
2617

18+
Route::resource('/users', UserController::class);
19+
Route::resource('/roles', RoleController::class);
20+
2721
Route::middleware([
2822
'auth:sanctum',
2923
config('jetstream.auth_session'),

0 commit comments

Comments
 (0)