Skip to content

Commit c26b4a2

Browse files
perisicnikola37perisicnikola37
committed
Connect all components
1 parent bff7be0 commit c26b4a2

File tree

8 files changed

+170
-106
lines changed

8 files changed

+170
-106
lines changed

‎app/Http/Controllers/RoleController.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,6 @@ public function destroy(string $id)
6868
{
6969
Role::destroy($id);
7070

71-
return back();
71+
return back()->with('delete', 'Role has been deleted!');
7272
}
7373
}

‎app/Http/Controllers/UserController.php

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ public function index()
2323
*/
2424
public function create()
2525
{
26-
//
26+
return Inertia::render('Users/Create');
2727
}
2828

2929
/**
@@ -47,7 +47,9 @@ public function show(string $id)
4747
*/
4848
public function edit(string $id)
4949
{
50-
//
50+
$user = User::findOrFail($id);
51+
52+
return Inertia::render('Users/Edit', compact('user'));
5153
}
5254

5355
/**
@@ -65,6 +67,6 @@ public function destroy(string $id)
6567
{
6668
User::destroy($id);
6769

68-
return back();
70+
return back()->with('delete', 'User has been deleted!');
6971
}
7072
}

‎app/Http/Middleware/HandleInertiaRequests.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ public function version(Request $request): ?string
3636
*/
3737
public function share(Request $request): array
3838
{
39-
return array_merge(parent::share($request), []);
39+
return array_merge(parent::share($request), [
40+
'flash' => [
41+
'success' => session('success'),
42+
'delete' => session('delete'),
43+
],
44+
]);
4045
}
4146
}

‎database/seeders/DatabaseSeeder.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class DatabaseSeeder extends Seeder
1212
*/
1313
public function run(): void
1414
{
15-
// \App\Models\User::factory(10)->create();
15+
\App\Models\User::factory(10)->create();
1616

1717
// \App\Models\User::factory()->create([
1818
// 'name' => 'Test User',

‎resources/js/Layouts/AppLayout.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,27 @@ const logout = () => {
302302
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
303303
<slot name="header" />
304304
</div>
305+
306+
<div v-if="$page.props.flash.success" class="bg-indigo-900 text-center py-4 lg:px-4">
307+
<div style="background-color: #6875F5"
308+
class="p-2 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
309+
role="alert">
310+
<span
311+
class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Success</span>
312+
<span class="font-semibold mr-2 text-left flex-auto">{{ $page.props.flash.success }}</span>
313+
</div>
314+
</div>
315+
316+
<div v-if="$page.props.flash.delete" class="bg-indigo-900 text-center py-4 lg:px-4">
317+
<div style="background-color: #6875F5"
318+
class="p-2 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
319+
role="alert">
320+
<span
321+
class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">Success</span>
322+
<span class="font-semibold mr-2 text-left flex-auto">{{ $page.props.flash.delete }}</span>
323+
</div>
324+
</div>
325+
305326
</header>
306327

307328
<!-- Page Content -->

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
create component
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
10+
}
11+
</script>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div>
3+
<AppLayout title="Edit role">
4+
Edit user: {{ user.name }}
5+
</AppLayout>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import AppLayout from '@/Layouts/AppLayout.vue';
11+
12+
export default {
13+
props: {
14+
user: Object,
15+
},
16+
components: { AppLayout }
17+
}
18+
</script>

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

Lines changed: 107 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,123 @@
11
<template>
2-
<div>
3-
<AppLayout title="Users">
2+
<AppLayout title="Users">
43

5-
<div class="py-12">
4+
<template #header>
5+
<h2 class="flex justify-between text-xl font-semibold leading-tight text-gray-800">
6+
Users
67

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">
8+
<inertia-link href="users/create">
9+
<a
10+
class="px-4 py-2 mr-3 text-sm text-green-600 transition border border-green-300 rounded-full hover:bg-green-600 hover:text-white hover:border-transparent">Create
11+
user</a>
12+
</inertia-link>
1213

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...">
14+
</h2>
15+
</template>
1616

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>
17+
<div class="py-12">
18+
19+
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
20+
<div class="overflow-hidden bg-white shadow-xl sm:rounded-lg">
21+
<div class="flex justify-end mt-3">
22+
<div class="mb-3 xl:w-96">
23+
<div class="relative flex items-stretch w-4/5 mb-3 input-group">
24+
25+
<input id="search" type='text' v-model="term" @keyup="search"
26+
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"
27+
placeholder="Search...">
28+
29+
<button
30+
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"
31+
type="button" id="button-addon2">
32+
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search"
33+
class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
34+
<path fill="currentColor"
35+
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">
36+
</path>
37+
</svg>
38+
</button>
2839
</div>
2940
</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>
41+
</div>
42+
<table class="min-w-full divide-y divide-gray-200">
43+
<thead class="bg-gray-50">
44+
<tr>
45+
<th scope="col"
46+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
47+
Name
48+
</th>
49+
<th scope="col"
50+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
51+
Email
52+
</th>
53+
<th scope="col"
54+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
55+
Role
56+
</th>
57+
<th scope="col"
58+
class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase">
59+
Created at
60+
</th>
61+
<th scope="col" class="relative px-6 py-3">
62+
<span class="sr-only">Edit</span>
63+
</th>
64+
</tr>
65+
</thead>
66+
<tbody class="bg-white divide-y divide-gray-200">
67+
<tr v-for="user in users" :key="user.id">
68+
<td class="px-6 py-4 whitespace-nowrap">
69+
<div class="flex items-center justify-center">
70+
<div class="ml-4">
71+
<div class="text-sm font-medium text-gray-900">
72+
<inertia-link class="transition hover:text-blue-500"
73+
:href="`users/${user.id}`">{{ user.name }}</inertia-link>
6374
</div>
6475
</div>
65-
</td>
66-
<td class="px-6 py-4 whitespace-nowrap">
67-
<div class="text-sm text-center text-gray-900">
68-
<!-- Clickable user email address -->
69-
<a :href="'mailto:' + user.email">{{ user.email }}</a>
70-
</div>
71-
</td>
72-
<td class="px-6 py-4 whitespace-nowrap">
73-
<div class="text-sm text-center text-gray-900">
74-
<!-- Covering the case when there is no role -->
75-
{{ user.role ? user.role.name : 'Not available' }}
76-
</div>
77-
</td>
78-
<td class="px-6 py-4 text-center whitespace-nowrap">
79-
<span
80-
class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
81-
<!-- Formatted from user model appends propety -->
82-
{{ user.formatted_created_at }}
83-
</span>
84-
</td>
85-
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
76+
</div>
77+
</td>
78+
<td class="px-6 py-4 whitespace-nowrap">
79+
<div class="text-sm text-center text-gray-900">
80+
<a :href="'mailto:' + user.email">{{ user.email }}</a>
81+
</div>
82+
</td>
83+
<td class="px-6 py-4 whitespace-nowrap">
84+
<div class="text-sm text-center text-gray-900">
85+
{{ user.role ? user.role.name : 'Not available' }}
86+
</div>
87+
</td>
88+
<td class="px-6 py-4 text-center whitespace-nowrap">
89+
<span
90+
class="inline-flex px-2 text-xs font-semibold leading-5 text-green-800 bg-green-100 rounded-full">
91+
{{ user.formatted_created_at }}
92+
</span>
93+
</td>
94+
<td class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap">
8695

87-
<inertia-link :href="`/users/${user.id}/edit`"
88-
class="float-left px-4 py-2 text-green-400 duration-100 rounded hover:text-green-600">
89-
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
90-
viewBox="0 0 24 24" stroke="currentColor">
91-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
92-
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" />
93-
</svg></inertia-link>
96+
<inertia-link :href="`/users/${user.id}/edit`"
97+
class="float-left px-4 py-2 text-green-400 duration-100 rounded hover:text-green-600">
98+
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
99+
viewBox="0 0 24 24" stroke="currentColor">
100+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
101+
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" />
102+
</svg></inertia-link>
94103

95-
<a href="#" @click="deleteUser(user)"
96-
class="float-left px-4 py-2 ml-2 text-red-400 duration-100 rounded hover:text-red-600">
97-
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
98-
viewBox="0 0 24 24" stroke="currentColor">
99-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
100-
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" />
101-
</svg>
102-
</a>
103-
</td>
104-
</tr>
105-
</tbody>
106-
</table>
107-
<Pagination class="mt-6" :links="users.links" />
108-
</div>
104+
<a href="#" @click="deleteUser(user)"
105+
class="float-left px-4 py-2 ml-2 text-red-400 duration-100 rounded hover:text-red-600">
106+
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
107+
viewBox="0 0 24 24" stroke="currentColor">
108+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
109+
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" />
110+
</svg>
111+
</a>
112+
</td>
113+
</tr>
114+
</tbody>
115+
</table>
116+
<!-- <Pagination class="mt-6" :links="users.links" /> -->
109117
</div>
110118
</div>
111-
112-
</AppLayout>
113-
</div>
119+
</div>
120+
</AppLayout>
114121
</template>
115122

116123
<script>

0 commit comments

Comments
 (0)