Skip to content

Commit e903ff8

Browse files
committed
Updated UI for:
- Login Page Background. Used gradient - Login Form - Forgot Password Form - Dashboard Index. - Datatable UI. Made the table borders visible. Table header more contrast. - Changed the ID to SL. Now the serial of contents should be count. - Changed the AppPaginator component for "Showing 1 to 10 items out of 50 items" - Modified the Create button. Added remix plus icon. Now the button looks more relavent. - Made the Page header and section header dynamic.
1 parent 79e7a66 commit e903ff8

File tree

24 files changed

+255
-116
lines changed

24 files changed

+255
-116
lines changed

stubs/app/Http/Middleware/HandleInertiaRequests.php

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
namespace App\Http\Middleware;
44

5-
use Illuminate\Http\Request;
5+
use Carbon\Carbon;
66
use Inertia\Middleware;
7-
use Modules\Acl\Services\ListUserPermissions;
87
use Tighten\Ziggy\Ziggy;
8+
use Illuminate\Http\Request;
9+
use Modules\Acl\Services\ListUserPermissions;
910

1011
class HandleInertiaRequests extends Middleware
1112
{
@@ -41,10 +42,10 @@ public function share(Request $request)
4142
'permissions' => $user ? (new ListUserPermissions)->run($user->id) : [],
4243
'isRootUser' => $user ? ($user->hasRole('root') ? true : false) : false,
4344
],
44-
'ziggy' => fn () => array_merge((new Ziggy)->toArray(), [
45+
'ziggy' => fn() => array_merge((new Ziggy)->toArray(), [
4546
'location' => $request->url(),
4647
]),
47-
'flash' => fn () => [
48+
'flash' => fn() => [
4849
'success' => $request->session()->get('success'),
4950
'error' => $request->session()->get('error'),
5051
],

stubs/module-stub/modules/Database/Factories/ModelFactory.stub

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ class {{ ResourceName }}Factory extends Factory
1111

1212
public function definition(): array
1313
{
14-
//$name = $this->faker->unique()->sentence(4);
14+
$name = $this->faker->unique()->sentence(4);
1515

1616
return [
17-
//'name' => $name,
17+
'name' => $name,
1818

19-
//'created_at' => $this->faker->dateTimeBetween('-1 year', '-6 month'),
20-
//'updated_at' => $this->faker->dateTimeBetween('-5 month', 'now'),
19+
'created_at' => $this->faker->dateTimeBetween('-1 year', '-6 month'),
20+
'updated_at' => $this->faker->dateTimeBetween('-5 month', 'now'),
2121
];
2222
}
2323
}

stubs/module-stub/modules/Database/Migrations/create_table.stub

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ return new class extends Migration
1212
public function up(): void
1313
{
1414
Schema::create('${{ resourceName }}', function (Blueprint $table) {
15-
// $table->id();
16-
// $table->string('name');
17-
// $table->timestamps();
18-
// $table->softDeletes();
15+
$table->id();
16+
$table->string('name');
17+
$table->timestamps();
18+
$table->softDeletes();
1919
});
2020
}
2121

stubs/module-stub/modules/Http/Controllers/ModuleController.stub

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ class {{ ResourceName }}Controller extends BackendController
1818
->withQueryString()
1919
->through(fn (${{ resourceName }}) => [
2020
'id' => ${{ resourceName }}->id,
21-
// 'name' => ${{ resourceName }}->name,
21+
'name' => ${{ resourceName }}->name,
2222
'created_at' => ${{ resourceName }}->created_at->format('d/m/Y H:i') . 'h'
2323
]);
2424

stubs/module-stub/modules/Http/Requests/ModuleValidate.stub

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ class {{ ResourceName }}Validate extends Request
99
public function rules(): array
1010
{
1111
return [
12-
// 'name' => 'required',
12+
'name' => 'required',
1313
];
1414
}
1515
}

stubs/page-stub/Form.stub

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
2-
<AppSectionHeader title="{{ ResourceName }}s" :bread-crumb="breadCrumb">
2+
<Head :title="title"></Head>
3+
<AppSectionHeader :title="title" :bread-crumb="breadCrumb">
34
</AppSectionHeader>
45

56
<AppCard class="w-full md:w-3/4 xl:w-1/2">
@@ -30,11 +31,13 @@
3031

3132
<script setup>
3233
import { useForm } from '@inertiajs/vue3'
33-
34+
import { Head } from '@inertiajs/vue3'
3435
import useTitle from '@/Composables/useTitle'
3536
import useFormContext from '@/Composables/useFormContext'
3637
import useFormErrors from '@/Composables/useFormErrors'
3738

39+
const { title } = useTitle('{{ ResourceName }}')
40+
3841
const props = defineProps({
3942
{{ resourceName }}: {
4043
type: Object,
@@ -48,18 +51,20 @@ const breadCrumb = [
4851
{ label: '{{ ResourceName }}', last: true }
4952
]
5053

51-
const { title } = useTitle('{{ ResourceName }}')
54+
5255

5356
const form = useForm({
5457
name: props.{{ resourceName }} ? props.{{ resourceName }}.name : '',
5558
})
5659

57-
const { isCreate } = useFormContext()
60+
const { isCreate, isEdit } = useFormContext()
5861

5962
const submitForm = () => {
6063
if (isCreate.value) {
6164
form.post(route('{{ resourceName }}.store'))
62-
} else {
65+
}
66+
67+
if(isEdit.value) {
6368
form.put(route('{{ resourceName }}.update', props.{{ resourceName }}.id))
6469
}
6570
}

stubs/page-stub/Index.stub

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<template>
2-
<AppSectionHeader title="{{ ResourceName }}s" :bread-crumb="breadCrumb">
2+
<Head :title="title"></Head>
3+
<AppSectionHeader :title="title" :bread-crumb="breadCrumb">
34
<template #right>
45
<AppButton
56
class="btn btn-primary"
67
@click="$inertia.visit(route('{{ resourceName }}.create'))"
78
>
9+
<i class="ri-add-fill mr-1"></i>
810
Create {{ ResourceName }}
911
</AppButton>
1012
</template>
@@ -20,19 +22,23 @@
2022
<template #TableBody>
2123
<tbody>
2224
<AppDataTableRow
23-
v-for="item in {{ resourceName }}s.data"
25+
v-for="(item, index) in {{ resourceName }}s.data"
2426
:key="item.id"
2527
>
2628
<AppDataTableData>
27-
{{ item.id }}
29+
{{
30+
({{ resourceName }}s.current_page - 1) *
31+
{{ resourceName }}s.per_page +
32+
(index + 1)
33+
}}
2834
</AppDataTableData>
2935

3036
<!-- <AppDataTableData>
3137
{{ item.name }}
3238
</AppDataTableData> -->
3339

3440
<AppDataTableData>
35-
<!-- edit {{ resourceName }} -->
41+
<!-- Edit {{ resourceName }} -->
3642
<AppTooltip text="Edit {{ ResourceName }}" class="mr-2">
3743
<AppButton
3844
class="btn btn-icon btn-primary"
@@ -49,7 +55,7 @@
4955
</AppButton>
5056
</AppTooltip>
5157

52-
<!-- delete {{ resourceName }} -->
58+
<!-- Delete {{ resourceName }} -->
5359
<AppTooltip text="Delete {{ ResourceName }}">
5460
<AppButton
5561
class="btn btn-icon btn-destructive"
@@ -73,6 +79,9 @@
7379

7480
<AppPaginator
7581
:links="{{ resourceName }}s.links"
82+
:from="{{ resourceName }}s.from"
83+
:to="{{ resourceName }}s.to"
84+
:total="{{ resourceName }}s.total"
7685
class="mt-4 justify-center"
7786
></AppPaginator>
7887

@@ -85,6 +94,12 @@
8594

8695
<script setup>
8796
import { ref } from 'vue'
97+
import { Head } from '@inertiajs/vue3'
98+
import useTitle from '@/Composables/useTitle'
99+
import useAuthCan from '@/Composables/useAuthCan'
100+
101+
const { title } = useTitle('{{ ResourceName }}')
102+
const { can } = useAuthCan()
88103

89104
const props = defineProps({
90105
{{ resourceName }}s: {
@@ -98,7 +113,7 @@ const breadCrumb = [
98113
{ label: '{{ ResourceName }}s', last: true }
99114
]
100115

101-
const headers = ['ID', 'Actions']
116+
const headers = ['SL', 'Actions']
102117

103118
const confirmDialogRef = ref(null)
104119
const confirmDelete = (deleteRoute) => {
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<section class="flex h-screen flex-col items-center justify-center">
2+
<section
3+
class="flex h-screen flex-col items-center justify-center bg-gradient-to-r from-green-200 to-blue-300"
4+
>
35
<slot></slot>
46
</section>
57
</template>

stubs/resources/js/Components/DataTable/AppDataSearch.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="rounded-tl rounded-tr bg-skin-neutral-3 pb-4 pl-3 pt-3">
33
<label for="search" class="sr-only">Search</label>
4-
<div class="flex items-center align-middle">
4+
<div class="flex items-center pr-4 align-middle">
55
<div class="pointer-events-none absolute flex items-center pl-3">
66
<i class="ri-search-line"></i>
77
</div>
@@ -10,12 +10,12 @@
1010
v-model="searchTerm"
1111
:placeholder="__('Search')"
1212
name="search"
13-
class="!w-1/2 py-2 pl-9"
13+
class="w-full py-2 pl-9 md:w-1/2"
1414
></AppInputText>
1515

1616
<AppButton
1717
v-if="searchTerm"
18-
class="btn btn-secondary btn-icon ml-2 border border-skin-primary-6"
18+
class="btn ml-2 border border-skin-neutral-8 bg-skin-neutral-5 hover:bg-skin-neutral-8"
1919
@click="clearSearch"
2020
>
2121
<i class="ri-close-line"></i>
Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<template>
2-
<td class="whitespace-nowrap px-4 py-2 font-medium">
2+
<td
3+
class="whitespace-nowrap border border-skin-neutral-6 px-2 py-1 font-medium"
4+
>
35
<slot></slot>
46
</td>
57
</template>

0 commit comments

Comments
 (0)