Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Sarun Mungthanya
SpnPatch-Laravel
Commits
f8d82fd3
Commit
f8d82fd3
authored
Aug 20, 2024
by
Sarun Mungthanya
Browse files
add user company role group permission
parent
51f4cd8b
Changes
76
Show whitespace changes
Inline
Side-by-side
resources/views/livewire/navbar.blade.php
View file @
f8d82fd3
<nav
class=
"shadow p-4 z-100 bg-secondary "
wire:init=
"loadNav"
>
<nav
class=
"shadow p-4 z-100 bg-secondary "
wire:init=
"loadNav"
>
{{-- @if ($navLoaded) --}}
{{-- @if ($navLoaded) --}}
<div
class=
"container mx-auto flex justify-between items-center"
>
<div
class=
"container mx-auto flex justify-between items-center"
>
<div
class=
"text-xl font-bold text-stone-700"
><a
href=
"/"
>
SPN Patch
</a></div>
<div
class=
"text-xl font-bold text-stone-700"
><a
href=
"/"
>
SPN Patch
</a></div>
...
@@ -32,8 +32,8 @@
...
@@ -32,8 +32,8 @@
Patch
</a></li>
Patch
</a></li>
<li><a
href=
"/send-multi-patch"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Send
<li><a
href=
"/send-multi-patch"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Send
Multi Patch
</a></li>
Multi Patch
</a></li>
<li><a
href=
"/delete-multi-patch"
<li><a
href=
"/delete-multi-patch"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Delete
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Delete
Multi Patch
</a></li>
Multi Patch
</a></li>
</ul>
</ul>
</li>
</li>
...
@@ -55,11 +55,11 @@
...
@@ -55,11 +55,11 @@
<a
href=
"#"
>
Configuration
</a>
<a
href=
"#"
>
Configuration
</a>
<ul
x-cloak
x-show=
"open"
@
click=
"open = false"
@
mouseleave=
"open = false"
<ul
x-cloak
x-show=
"open"
@
click=
"open = false"
@
mouseleave=
"open = false"
class=
"absolute left-0 mt-2 w-48 bg-white shadow-lg"
>
class=
"absolute left-0 mt-2 w-48 bg-white shadow-lg"
>
<li><a
href=
"/
role
"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Role
</a></li>
<li><a
href=
"/
company
"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Company
</a></li>
<li><a
href=
"/
user
"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
User
</a>
<li><a
href=
"/
role
"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Role
</a>
</li>
<li><a
href=
"/group"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Group
</a>
</li>
<li><a
href=
"
#
"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
Submenu Item
<li><a
href=
"
/user
"
class=
"block px-4 py-2 text-gray-700 hover:bg-stone-100"
>
User
</a></li>
3
</a>
</li>
</li>
</ul>
</ul>
</li>
</li>
...
...
resources/views/livewire/no-permission-modal.blade.php
0 → 100644
View file @
f8d82fd3
<div
x-data=
"{ showModal: @entangle('showNoPermissionModal') }"
>
<div
x-show=
"showModal"
class=
"fixed z-10 inset-0 overflow-y-auto"
aria-labelledby=
"modal-title"
role=
"dialog"
aria-modal=
"true"
>
<div
class=
"flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div
x-show=
"showModal"
class=
"fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
aria-hidden=
"true"
>
</div>
<span
class=
"hidden sm:inline-block sm:align-middle sm:h-screen"
aria-hidden=
"true"
>
​
</span>
<div
x-show=
"showModal"
class=
"inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
>
<div
class=
"bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
>
<div
class=
"sm:flex sm:items-start"
>
<div
class=
"mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
>
<svg
class=
"h-6 w-6 text-red-600"
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
aria-hidden=
"true"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M6 18L18 6M6 6l12 12"
></path>
</svg>
</div>
<div
class=
"mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
>
<h3
class=
"text-lg leading-6 font-medium text-gray-900"
id=
"modal-title"
>
Permission Denied
</h3>
<div
class=
"mt-2"
>
<p
class=
"text-sm text-gray-500"
>
คุณไม่มีสิทธิ์ในการดำเนินการนี้.
</p>
</div>
</div>
</div>
</div>
<div
class=
"bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
>
<button
@
click=
"showModal = false"
type=
"button"
class=
"mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
>
ปิด
</button>
</div>
</div>
</div>
</div>
</div>
resources/views/livewire/pages/company/company-create.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<form
wire:submit.prevent=
"submitForm"
>
@csrf
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Create
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Comapny Type
</span>
</label>
<span
class=
"relative flex w-full"
>
<select
name=
"companyType"
wire:model.defer=
"companyType"
class=
"form-select mt-1.5 w-2/4 rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($companyTypes as $type)
<option
value=
"{{ $type->id }}"
>
{{ $type->name }}
</option>
@endforeach
</select>
@error('companyType')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Tax No.:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"tax"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"tax"
/>
@error('tax')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Branch:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"branch"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"branch"
type=
"text"
/>
@error('branch')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Thai name:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"name"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"name"
type=
"text"
/>
@error('name')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
English name:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"name_en"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"name_en"
type=
"text"
/>
@error('name_en')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Address:
</span>
</label>
<span
class=
"relative flex w-full"
>
<textarea
wire:model.defer=
"address"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
cols=
"30"
rows=
"5"
>
</textarea>
@error('address')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
District:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"district"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"district"
/>
@error('district')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Sub province:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"sub_province"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"sub_province"
/>
@error('sub_province')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Province:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"province"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"province"
/>
@error('province')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Postcode:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"postcode"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"postcode"
/>
@error('postcode')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Phone:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"phone"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"phone"
/>
@error('phone')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Fax:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"fax"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"fax"
/>
@error('fax')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Tax Incentive ID:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"tax_incentive"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"tax_incentive"
/>
@error('tax_incentive')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"grid grid-cols-8 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
</div>
</form>
</div>
resources/views/livewire/pages/company/company-edit.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<form
wire:submit.prevent=
"submitEditForm"
>
@csrf
<input
type=
"hidden"
name=
"id"
value=
"{{ $company->id }}"
>
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Edit
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Comapny Type
</span>
</label>
<span
class=
"relative flex w-full"
>
<select
name=
"companyType"
wire:model.defer=
"company.company_type_id"
class=
"form-select mt-1.5 w-2/4 rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($companyTypes as $type)
<option
value=
"{{ $type->id }}"
{!!
$
type-
>
id == $company->company_type_id ? 'selected' : '' !!}>{{ $type->name }}
</option>
@endforeach
</select>
@error('company.companyType')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Tax No.:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.tax"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
/>
@error('company.tax')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Branch:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.branch"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"branch"
type=
"text"
value=
"{{ $company->branch }}"
/>
@error('company.branch')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Thai name:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.name"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"name"
type=
"text"
value=
"{{ $company->name }}"
/>
@error('company.name')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
English name:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.name_en"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"name_en"
type=
"text"
value=
"{{ $company->name_en }}"
/>
@error('company.name_en')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Address:
</span>
</label>
<span
class=
"relative flex w-full"
>
<textarea
wire:model.defer=
"company.address"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
cols=
"30"
rows=
"5"
>
</textarea>
@error('company.address')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
District:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.district"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"district"
value=
"{{ $company->district }}"
/>
@error('company.district')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Sub province:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.sub_province"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"sub_province"
value=
"{{ $company->sub_province }}"
/>
@error('company.sub_province')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Province:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.province"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"province"
value=
"{{ $company->province }}"
/>
@error('company.province')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Postcode:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.postcode"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"postcode"
value=
"{{ $company->postcode }}"
/>
@error('company.postcode')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Phone:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.phone"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"phone"
value=
"{{ $company->phone }}"
/>
@error('company.phone')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Fax:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.fax"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"fax"
value=
"{{ $company->fax }}"
/>
@error('company.fax')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Tax Incentive ID:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"company.tax_incentive"
class=
"form-input peer w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
name=
"tax_incentive"
value=
"{{ $company->tax_incentive }}"
/>
@error('company.tax_incentive')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"grid grid-cols-8 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
</div>
</form>
</div>
resources/views/livewire/pages/company/company-index.blade.php
0 → 100644
View file @
f8d82fd3
<div>
@include('components.no-permission')
<div
wire:loading.class=
"flex"
wire:loading.class.remove=
"hidden"
wire:target=
"showCompanyList"
class=
"absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden"
>
<div
class=
"app-preloader grid h-full w-full place-content-center"
>
<div
class=
"app-preloader-inner relative inline-block h-48 w-48"
></div>
</div>
</div>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6 "
>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"/"
>
Home
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click=
"$emit('menuClicked', 'Company')"
>
Company
</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div
x-data=
"{ show: @entangle('showMessage'), message: '' }"
x-init=
"window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});"
>
<div
x-show.transition.duration.500ms=
"show"
class=
"fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg"
>
{{ $message }}
</div>
</div>
<div
x-data=
"{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedCompaniesAlpine.includes(groupId)) {
this.selectedCompaniesAlpine.push(groupId);
}
} else {
this.selectedCompaniesAlpine = this.selectedCompaniesAlpine.filter(id => id !== groupId);
}
},
selectedCompaniesAlpine: [],
selectedCompanies: @entangle('selectedCompanies')
}"
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 "
>
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Company Management
</h2>
</div>
<div
class=
"flex justify-between"
>
<div
class=
"px-2 ml-4"
>
<button
wire:click=
"showCompanyCreateForm()"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
>
</path>
</svg>
<span>
Create
</span>
</button>
<a
@
click.prevent=
"if (selectedCompaniesAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
>
</path>
</svg>
<span>
Delete
</span>
</a>
</div>
<div
class=
"inline-flex flex-initial"
>
<div
x-data=
"{ isInputActive: true }"
>
<div
class=
"flex gap-3 px-5 items-center"
>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-10 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
<span
class=
"w-64"
x-show=
"isInputActive === true"
>
<input
class=
"form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Search Keyword"
type=
"text"
wire:model=
"keyword"
/>
</span>
<span
class=
"w-52"
x-show=
"isInputActive === true"
>
<select
wire:model=
"searchSelected"
class=
"form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($searchBy as $key => $by)
<option
value=
"{{ $key }}"
>
{{ $by }}
</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div
class=
"mx-3 mt-3 px-4"
>
<div
class=
"is-scrollbar-hidden min-w-full overflow-x-auto"
x-data=
"pages.tables.initExample1"
>
<table
class=
"is-hoverable w-full text-left"
>
<thead>
<tr>
<th
class=
"whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Tax:Branch
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Thai name
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
English name
</th>
<th
class=
"whitespace-nowrap text-center rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $company)
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<label
class=
"inline-flex items-center space-x-2"
>
<input
@
change=
"toggleGroup($event)"
class=
"form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type=
"checkbox"
wire:model.defer=
"selectedCompanies"
value=
"{{ $company->id }}"
/>
</label>
</td>
{{--
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $company->id }}
</td>
--}}
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $company->tax . ':' . $company->branch }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $company->name }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $company->name_en }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5 text-center"
>
<div
class=
"flex justify-center space-x-2"
>
<a
wire:click=
"showCompanyEditForm({{ $company->id }})"
class=
"btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa fa-edit"
></i>
</a>
<div>
<a
@
click=
"$wire.emit('showDeleteModal', {{ $company->id }})"
class=
"btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
<i
class=
"fa fa-trash-alt"
></i>
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<template
x-if=
"showDeleteListModal "
>
<div
x-show=
"showDeleteListModal"
x-transition:enter=
"transition ease-out duration-300"
x-transition:enter-start=
"opacity-0 transform scale-90"
x-transition:enter-end=
"opacity-100 transform scale-100"
x-transition:leave=
"transition ease-in duration-300"
x-transition:leave-start=
"opacity-100 transform scale-100"
x-transition:leave-end=
"opacity-0 transform scale-90"
class=
"fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
@
keydown.window.escape=
"showDeleteListModal = false"
>
<div
class=
"absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@
click=
"showDeleteListModal = false"
></div>
<div
class=
"relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"inline h-28 w-28 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
>
</path>
</svg>
<div
class=
"mt-4 mx-5"
>
<h2
class=
"text-2xl text-slate-700 dark:text-navy-100"
>
Are you sure
<br>
you want to delete
<span
x-text=
"selectedCompaniesAlpine.length"
></span>
companies?
</h2>
<p
class=
"mt-2"
></p>
<button
type=
"button"
@
click=
"showDeleteListModal = false"
class=
"btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90"
>
Close
</button>
<button
@
click=
"$wire.emitSelf('deleteSelected', selectedCompanies ); showDeleteListModal = false"
class=
"btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Confirm
</button>
</div>
</div>
</div>
</template>
<livewire:delete-modal
/>
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
{{--
<div
class=
"px-4"
>
<div
x-data=
"pages.basicTable.initGridTable({{ $json_columns }}, {{ $users }}, {{ $paginate }}, '{{ $url }}', {{ json_encode($permission) }})"
></div>
</div>
--}}
</div>
@elseif($action === 'create')
<livewire:pages.company.company-create
:companyTypes=
"$companyTypes"
wire:key=
"company-create"
/>
@elseif($action === 'edit')
<livewire:pages.company.company-edit
:companyTypes=
"$companyTypes"
:editCompanyId=
"$editCompanyId"
wire:key=
"company-edit"
/>
@endif
</div>
resources/views/livewire/pages/group/group-create.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<form
wire:submit.prevent=
"submitForm"
>
@csrf
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Create
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"flex items-center w-3/5"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Name
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
class=
"form-input w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
wire:model=
"name"
/>
@error('name')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center w-3/5"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Comapany
</span>
</label>
<span
class=
"relative flex w-full"
>
<select
wire:model=
"company"
class=
"form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($companies as $company)
<option
value=
"{{ $company->id }}"
{{
old
('
company
'
) =
=
$
company-
>
id ? 'selected' : '' }}>{{ $company->name }}
</option>
@endforeach
</select>
</span>
</div>
<div
class=
"flex items-center w-3/5"
wire:ignore
>
<span
class=
"w-2/12 mr-2"
>
Add Roles :
</span>
<span
class=
"relative flex w-full"
>
<input
class=
"mt-1.5 relative flex w-full "
wire:ignore
x-data=
"{ roleLists: @entangle('role_lists') }"
x-init=
"roleLists = [];
const tempRole = pages.roleSelect;
pages.fetchRoles(tempRole).then(() => {
$el._x_tom = new Tom($el, {
...tempRole.role,
onChange: (value) => {
roleLists = value;
}
});
})"
type=
"text"
>
</span>
</div>
<div
class=
"flex items-center w-3/5"
wire:ignore
>
<span
class=
"w-2/12 mr-2"
>
Add Users :
</span>
<span
class=
"relative flex w-full"
>
<input
class=
"mt-1.5 relative flex w-full "
wire:ignore
x-data=
"{ userLists: @entangle('user_lists') }"
x-init=
"userLists = [];
const tempUser = pages.userSelect;
pages.fetchUsers(tempUser).then(() => {
$el._x_tom = new Tom($el, {
...tempUser.user,
onChange: (value) => {
userLists = value;
}
});
})"
type=
"text"
>
</span>
</div>
</form>
<div
class=
"grid grid-cols-12 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-4 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
resources/views/livewire/pages/group/group-edit.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
x-data=
"{ tomRReady: false, tomUReady: false }"
x-show=
"tomRReady && tomUReady "
>
<form
wire:submit.prevent=
"submitEditForm"
>
@csrf
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Create
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"flex items-center w-3/5"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Name
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
class=
"form-input w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
wire:model=
"name"
/>
@error('name')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center w-3/5"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Comapany
</span>
</label>
<span
class=
"relative flex w-full"
>
<select
wire:model=
"company"
class=
"form-select mt-1.5 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($companies as $company)
<option
value=
"{{ $company->id }}"
>
{{ $company->name }}
</option>
@endforeach
</select>
</span>
</div>
<div
class=
"flex items-center w-3/5"
wire:ignore
>
<span
class=
"w-2/12 mr-2"
>
Add Roles :
</span>
<span
class=
"relative flex w-full"
>
<input
class=
"mt-1.5 relative flex w-full"
wire:ignore
x-data=
"{ roleLists: @entangle('role_lists') }"
x-init=
"roleLists = @js($groupRoles);
const tempRole = pages.roleSelect;
pages.fetchRoles(tempRole).then(() => {
$el._x_tom = new Tom($el, {
...tempRole.role,
onChange: (value) => {
roleLists = value;
}
});
$el._x_tom.setValue(roleLists);
tomRReady = true
})"
type=
"text"
>
</span>
</div>
<div
class=
"flex items-center w-3/5"
wire:ignore
>
<span
class=
"w-2/12 mr-2"
>
Add Users :
</span>
<span
class=
"relative flex w-full"
>
<input
class=
"mt-1.5 relative flex w-full"
wire:ignore
x-data=
"{ userLists: @entangle('user_lists') }"
x-init=
"userLists = @js($groupUsers);
const tempUser = pages.userSelect;
pages.fetchUsers(tempUser).then(() => {
$el._x_tom = new Tom($el, {
...tempUser.user,
onChange: (value) => {
userLists = value;
}
});
$el._x_tom.setValue(userLists);
tomUReady = true
})"
type=
"text"
>
</span>
</div>
</form>
<div
class=
"grid grid-cols-12 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-4 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
resources/views/livewire/pages/group/group-index.blade.php
0 → 100644
View file @
f8d82fd3
<div>
@include('components.no-permission')
<div
class=
"flex items-center space-x-4 py-5 lg:py-6 "
>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"/"
>
Home
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click=
"$emit('menuClicked', 'Group')"
>
Group Management
</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div
x-data=
"{ show: @entangle('showMessage'), message: '' }"
x-init=
"window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});"
>
<div
x-show.transition.duration.500ms=
"show"
class=
"fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg"
>
{{ $message }}
</div>
</div>
<div
x-data=
"{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedGroupsAlpine.includes(groupId)) {
this.selectedGroupsAlpine.push(groupId);
}
} else {
this.selectedGroupsAlpine = this.selectedGroupsAlpine.filter(id => id !== groupId);
}
},
selectedGroupsAlpine: [],
selectedGroups: @entangle('selectedGroups')
}"
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 "
>
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Group Management
</h2>
</div>
<div
class=
"flex justify-between"
>
<div
class=
"px-2 ml-4"
>
<button
wire:click=
"showGroupCreateForm()"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
>
</path>
</svg>
<span>
Create
</span>
</button>
<a
@
click.prevent=
"if (selectedGroupsAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
>
</path>
</svg>
<span>
Delete
</span>
</a>
</div>
<div
class=
"inline-flex flex-initial"
>
<div
x-data=
"{ isInputActive: true }"
>
<div
class=
"flex gap-3 px-5 items-center"
>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-10 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
<span
class=
"w-64"
x-show=
"isInputActive === true"
>
<input
class=
"form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Search Keyword"
type=
"text"
wire:model=
"keyword"
/>
</span>
<span
class=
"w-52"
x-show=
"isInputActive === true"
>
<select
wire:model=
"searchSelected"
class=
"form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($searchBy as $key => $by)
<option
value=
"{{ $key }}"
>
{{ $by }}
</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div
class=
"mx-3 mt-3 px-4"
>
<div
class=
"is-scrollbar-hidden min-w-full overflow-x-auto"
x-data=
"pages.tables.initExample1"
>
<table
class=
"is-hoverable w-full text-left"
>
<thead>
<tr>
<th
class=
"whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
group
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Create Date
</th>
<th
class=
"whitespace-nowrap text-center rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $group)
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<label
class=
"inline-flex items-center space-x-2"
>
<input
@
change=
"toggleGroup($event)"
class=
"form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type=
"checkbox"
wire:model.defer=
"selectedGroups"
value=
"{{ $group->id }}"
/>
</label>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $group->name }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
@php
$roles = $group->roles->take(5); // Take the first 5 roles
$remainingCount = $group->roles->count() - $roles->count();
@endphp
@foreach ($roles as $permission)
<li
class=
"inline-block mr-2 mb-2 px-2 py-1 bg-primary text-white rounded text-xs"
>
{{ $permission->name }}
</li>
@endforeach
@if ($remainingCount > 0)
<li
class=
"inline-block px-2 py-1 bg-gray-300 text-gray-700 rounded"
>
+
{{ $remainingCount }} more
</li>
@endif
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $group->created_at }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex justify-center space-x-2"
>
<a
wire:click=
"showGroupEditForm({{ $group->id }})"
class=
"btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa fa-edit"
></i>
</a>
<div>
<a
@
click=
"$wire.emit('showDeleteModal', {{ $group->id }})"
class=
"btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
<i
class=
"fa fa-trash-alt"
></i>
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<template
x-if=
"showDeleteListModal"
>
<div
class=
"fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
@
keydown.window.escape=
"showDeleteListModal = false"
>
<div
class=
"absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@
click=
"showDeleteListModal = false"
></div>
<div
class=
"relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"inline h-28 w-28 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
>
</path>
</svg>
<div
class=
"mt-4 mx-5"
>
<h2
class=
"text-2xl text-slate-700 dark:text-navy-100"
>
Are you sure
<br>
you want to delete
<span
x-text=
"selectedGroupsAlpine.length"
></span>
groups?
</h2>
<p
class=
"mt-2"
></p>
<button
@
click=
"showDeleteListModal = false"
class=
"btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90"
>
Close
</button>
<button
@
click=
"$wire.emitSelf('deleteSelected', selectedGroups ); showDeleteListModal = false"
class=
"btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Confirm
</button>
</div>
</div>
</div>
</template>
<livewire:delete-modal
/>
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
@elseif($action === 'create')
<livewire:pages.group.group-create
:roles=
"$roles"
:users=
"$users"
:companies=
"$companies"
wire:key=
"group-create"
/>
@elseif($action === 'edit')
<livewire:pages.group.group-edit
:roles=
"$roles"
:users=
"$users"
:companies=
"$companies"
:editGroupId=
"$editGroupId"
wire:key=
"group-edit"
/>
@endif
</div>
resources/views/livewire/pages/role/role-create.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
x-data=
"{
permissionListAlpine: [],
submit() {
@this.call('submitForm', this.permissionListAlpine);
}
}"
>
<form
wire:submit.prevent=
""
>
@csrf
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Create
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"grid grid-cols-1"
>
<div
class=
"flex items-center mb-2 ml-4"
>
<label
class=
"w-3/12 mr-2"
>
<span>
Name
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
class=
"form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
type=
"text"
wire:model.defer=
"name"
/>
@error('name')
<div
class=
"ml-3 text-red-500 text-sm self-center"
>
{{ $message }}
</div>
@enderror
</span>
</div>
<div
class=
"flex items-center mb-2 ml-4"
>
<label
class=
"w-3/12 mr-2"
>
<span>
Description
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
class=
"form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
wire:model.defer=
"description"
type=
"text"
/>
</span>
</div>
</div>
<div
class=
"tabs flex flex-col"
>
<div
x-data=
"{ activeTab: 'Import' }"
class=
"tabs flex flex-col"
>
<div
class=
"is-scrollbar-hidden overflow-x-auto bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200 p-2"
>
<div
class=
"tabs-list flex"
>
<button
@
click=
"activeTab = 'Center'"
type=
"button"
:class=
"activeTab === 'Center' ? 'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class=
"btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
>
Center
</button>
<button
@
click=
"activeTab = 'Import'"
type=
"button"
:class=
"activeTab === 'Import' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class=
"btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
>
Import
</button>
<button
@
click=
"activeTab = 'Export'"
type=
"button"
:class=
"activeTab === 'Export' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class=
"btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
>
Export
</button>
</div>
</div>
<div
x-show=
"activeTab === 'Center'"
class=
"tab-content pt-4 bg-slate-200 px-2 mt-2 pb-2"
>
<div
x-transition:enter=
"transition-all duration-500 ease-in-out"
x-transition:enter-start=
"opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end=
"opacity-100 [transform:translate3d(0,0,0)]"
>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3"
>
@php
$currentGroup = '';
$tabGroup = [
'User Management',
'Role Management',
'Group Management',
'Company Management',
'Company Type Management',
];
@endphp
@foreach ($permissions as $permission)
@if (!in_array($permission['permission_group_name'], $tabGroup))
@continue
@endif
@if ($permission['permission_group_name'] !== $currentGroup)
@if ($currentGroup !== '')
</div>
</div>
@endif
<div
x-data=
"{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json($permissions->count());
}
}"
class=
"card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data-group=
"{{ $permission['permission_group_name'] }}"
@
click=
"toggleAll('{{ $permission['permission_group_name'] }}')"
>
<h3
class=
"pt-3 text-lg font-medium text-slate-700 dark:text-navy-100"
>
{{ $permission['permission_group_name'] }}
</h3>
<div
class=
"my-4 h-px w-full bg-slate-200 dark:bg-navy-500"
></div>
<div
class=
"grow space-y-4 permission-list"
>
@endif
<div
class=
"flex items-center space-x-4"
>
<label
class=
"inline-flex items-center space-x-2"
@
click=
"toggleIndividual($event)"
>
<input
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type=
"checkbox"
x-model=
"permissionListAlpine"
value=
"{{ $permission['id'] }}"
/>
<span>
{{ $permission['name'] }}
</span>
</label>
</div>
@php $currentGroup = $permission['permission_group_name']; @endphp
@endforeach
@if ($currentGroup !== '')
</div>
@endif
</div>
</div>
</div>
</div>
<div
x-show=
"activeTab === 'Import'"
class=
"tab-content pt-4 bg-slate-200 px-2 mt-2 pb-2"
>
<div
x-transition:enter=
"transition-all duration-500 ease-in-out"
x-transition:enter-start=
"opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end=
"opacity-100 [transform:translate3d(0,0,0)]"
>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3"
>
@php
$currentGroup = '';
$tabGroup2 = [
'File Management Import',
'Header Management Import',
'Detail Management Import',
'Item Management Import',
'Flight Management Import',
];
@endphp
@foreach ($permissions as $permission)
@if (!in_array($permission['permission_group_name'], $tabGroup2))
@continue
@endif
@if ($permission['permission_group_name'] !== $currentGroup)
@if ($currentGroup !== '')
</div>
</div>
@endif
<div
x-data=
"{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json($permissions->count());
}
}"
class=
"card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data-group=
"{{ $permission['permission_group_name'] }}"
@
click=
"toggleAll('{{ $permission['permission_group_name'] }}')"
>
<h3
class=
"pt-3 text-lg font-medium text-slate-700 dark:text-navy-100"
>
{{ $permission['permission_group_name'] }}
</h3>
<div
class=
"my-4 h-px w-full bg-slate-200 dark:bg-navy-500"
></div>
<div
class=
"grow space-y-4 permission-list"
>
@endif
<div
class=
"flex items-center space-x-4"
>
<label
class=
"inline-flex items-center space-x-2"
@
click=
"toggleIndividual($event)"
>
<input
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type=
"checkbox"
x-model=
"permissionListAlpine"
value=
"{{ $permission['id'] }}"
/>
<span>
{{ $permission['name'] }}
</span>
</label>
</div>
@php $currentGroup = $permission['permission_group_name']; @endphp
@endforeach
@if ($currentGroup !== '')
</div>
@endif
</div>
</div>
</div>
</div>
<div
x-show=
"activeTab === 'Export'"
class=
"tab-content pt-4 bg-slate-200 px-2 mt-2 pb-2"
>
<div
x-transition:enter=
"transition-all duration-500 ease-in-out"
x-transition:enter-start=
"opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end=
"opacity-100 [transform:translate3d(0,0,0)]"
>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3"
>
@php
$currentGroup = '';
$tabGroup3 = [
'File Management Export',
'Header Management Export',
'Detail Management Export',
'Item Management Export',
'Flight Management Export',
];
@endphp
@foreach ($permissions as $permission)
@if (!in_array($permission['permission_group_name'], $tabGroup3))
@continue
@endif
@if ($permission['permission_group_name'] !== $currentGroup)
@if ($currentGroup !== '')
</div>
</div>
@endif
<div
x-data=
"{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json($permissions->count());
}
}"
class=
"card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data-group=
"{{ $permission['permission_group_name'] }}"
@
click=
"toggleAll('{{ $permission['permission_group_name'] }}')"
>
<h3
class=
"pt-3 text-lg font-medium text-slate-700 dark:text-navy-100"
>
{{ $permission['permission_group_name'] }}
</h3>
<div
class=
"my-4 h-px w-full bg-slate-200 dark:bg-navy-500"
></div>
<div
class=
"grow space-y-4 permission-list"
>
@endif
<div
class=
"flex items-center space-x-4"
>
<label
class=
"inline-flex items-center space-x-2"
@
click=
"toggleIndividual($event)"
>
<input
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type=
"checkbox"
x-model=
"permissionListAlpine"
value=
"{{ $permission['id'] }}"
/>
<span>
{{ $permission['name'] }}
</span>
</label>
</div>
@php $currentGroup = $permission['permission_group_name']; @endphp
@endforeach
@if ($currentGroup !== '')
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</form>
<div
class=
"grid grid-cols-6 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"button"
@
click=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
resources/views/livewire/pages/role/role-edit.blade.php
0 → 100644
View file @
f8d82fd3
@
php
$jsonPermissionLists
=
json_encode
(
$permission_lists
??
[]);
@
endphp
<
div
class
=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
x
-
data
=
"{
permissionListAlpine: {!!
$jsonPermissionLists
!!},
submit() {
@this.call('submitEditForm', this.permissionListAlpine);
}
}"
>
<
form
wire
:
submit
.
prevent
=
""
>
@
csrf
<
div
class
=
"card pb-4"
>
<
div
class
=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<
h2
class
=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<
i
class
=
"fa-solid fa-edit text-primary"
></
i
>
Create
</
h2
>
</
div
>
<
div
class
=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<
div
class
=
"grid grid-cols-1"
>
<
div
class
=
"flex items-center mb-2 ml-4"
>
<
label
class
=
"w-3/12 mr-2"
>
<
span
>
Name
</
span
>
</
label
>
<
span
class
=
"relative flex w-full"
>
<
input
class
=
"form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs placeholder-text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder
=
""
type
=
"text"
wire
:
model
.
defer
=
"name"
/>
@
error
(
'name'
)
<
div
class
=
"ml-3 text-red-500 text-sm self-center"
>
{{
$message
}}
</
div
>
@
enderror
</
span
>
</
div
>
<
div
class
=
"flex items-center mb-2 ml-4"
>
<
label
class
=
"w-3/12 mr-2"
>
<
span
>
Description
</
span
>
</
label
>
<
span
class
=
"relative flex w-full"
>
<
input
class
=
"form-input w-3/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder
=
""
wire
:
model
.
defer
=
"description"
type
=
"text"
/>
</
span
>
</
div
>
</
div
>
<
div
class
=
"tabs flex flex-col"
>
<
div
x
-
data
=
"{ activeTab: 'Import' }"
class
=
"tabs flex flex-col"
>
<
div
class
=
"is-scrollbar-hidden overflow-x-auto bg-slate-200 text-slate-600 dark:bg-navy-800 dark:text-navy-200 p-2"
>
<
div
class
=
"tabs-list flex"
>
<
button
@
click
=
"activeTab = 'Center'"
type
=
"button"
:
class
=
"activeTab === 'Center' ? 'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class
=
"btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
>
Center
</
button
>
<
button
@
click
=
"activeTab = 'Import'"
type
=
"button"
:
class
=
"activeTab === 'Import' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class
=
"btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
>
Import
</
button
>
<
button
@
click
=
"activeTab = 'Export'"
type
=
"button"
:
class
=
"activeTab === 'Export' ?
'bg-white shadow dark:bg-navy-500 dark:text-navy-100' :
'hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class
=
"btn shrink-0 space-x-2 px-3 py-1.5 font-medium"
>
Export
</
button
>
</
div
>
</
div
>
<
div
x
-
show
=
"activeTab === 'Center'"
class
=
"tab-content pt-4 bg-slate-200 px-2 mt-2 pb-2"
>
<
div
x
-
transition
:
enter
=
"transition-all duration-500 ease-in-out"
x
-
transition
:
enter
-
start
=
"opacity-0 [transform:translate3d(1rem,0,0)]"
x
-
transition
:
enter
-
end
=
"opacity-100 [transform:translate3d(0,0,0)]"
>
<
div
class
=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3"
>
@
php
$currentGroup
=
''
;
$tabGroup
=
[
'User Management'
,
'Role Management'
,
'Group Management'
,
'Company Management'
,
'Company Type Management'
,
];
@
endphp
@
foreach
(
$permissions
as
$permission
)
@
if
(
!
in_array
(
$permission
[
'permission_group_name'
],
$tabGroup
))
@
continue
@
endif
@
if
(
$permission
[
'permission_group_name'
]
!==
$currentGroup
)
@
if
(
$currentGroup
!==
''
)
</
div
>
</
div
>
@
endif
<
div
x
-
data
=
"{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json(
$permissions->count
());
}
}"
class
=
"card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data
-
group
=
"{{
$permission['permission_group_name']
}}"
@
click
=
"toggleAll('{{
$permission['permission_group_name']
}}')"
>
<
h3
class
=
"pt-3 text-lg font-medium text-slate-700 dark:text-navy-100"
>
{{
$permission
[
'permission_group_name'
]
}}
</
h3
>
<
div
class
=
"my-4 h-px w-full bg-slate-200 dark:bg-navy-500"
></
div
>
<
div
class
=
"grow space-y-4 permission-list"
>
@
endif
<
div
class
=
"flex items-center space-x-4"
>
<
label
class
=
"inline-flex items-center space-x-2"
@
click
=
"toggleIndividual(
$event
)"
>
<
input
class
=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type
=
"checkbox"
x
-
model
=
"permissionListAlpine"
value
=
"{{
$permission['id']
}}"
/>
<
span
>
{{
$permission
[
'name'
]
}}
</
span
>
</
label
>
</
div
>
@
php
$currentGroup
=
$permission
[
'permission_group_name'
];
@
endphp
@
endforeach
@
if
(
$currentGroup
!==
''
)
</
div
>
@
endif
</
div
>
</
div
>
</
div
>
</
div
>
<
div
x
-
show
=
"activeTab === 'Import'"
class
=
"tab-content pt-4 bg-slate-200 px-2 mt-2 pb-2"
>
<
div
x
-
transition
:
enter
=
"transition-all duration-500 ease-in-out"
x
-
transition
:
enter
-
start
=
"opacity-0 [transform:translate3d(1rem,0,0)]"
x
-
transition
:
enter
-
end
=
"opacity-100 [transform:translate3d(0,0,0)]"
>
<
div
class
=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3"
>
@
php
$currentGroup
=
''
;
$tabGroup2
=
[
'File Management Import'
,
'Header Management Import'
,
'Detail Management Import'
,
'Item Management Import'
,
'Flight Management Import'
,
];
@
endphp
@
foreach
(
$permissions
as
$permission
)
@
if
(
!
in_array
(
$permission
[
'permission_group_name'
],
$tabGroup2
))
@
continue
@
endif
@
if
(
$permission
[
'permission_group_name'
]
!==
$currentGroup
)
@
if
(
$currentGroup
!==
''
)
</
div
>
</
div
>
@
endif
<
div
x
-
data
=
"{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json(
$permissions->count
());
}
}"
class
=
"card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data
-
group
=
"{{
$permission['permission_group_name']
}}"
@
click
=
"toggleAll('{{
$permission['permission_group_name']
}}')"
>
<
h3
class
=
"pt-3 text-lg font-medium text-slate-700 dark:text-navy-100"
>
{{
$permission
[
'permission_group_name'
]
}}
</
h3
>
<
div
class
=
"my-4 h-px w-full bg-slate-200 dark:bg-navy-500"
></
div
>
<
div
class
=
"grow space-y-4 permission-list"
>
@
endif
<
div
class
=
"flex items-center space-x-4"
>
<
label
class
=
"inline-flex items-center space-x-2"
@
click
=
"toggleIndividual(
$event
)"
>
<
input
class
=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type
=
"checkbox"
x
-
model
=
"permissionListAlpine"
value
=
"{{
$permission['id']
}}"
/>
<
span
>
{{
$permission
[
'name'
]
}}
</
span
>
</
label
>
</
div
>
@
php
$currentGroup
=
$permission
[
'permission_group_name'
];
@
endphp
@
endforeach
@
if
(
$currentGroup
!==
''
)
</
div
>
@
endif
</
div
>
</
div
>
</
div
>
</
div
>
<
div
x
-
show
=
"activeTab === 'Export'"
class
=
"tab-content pt-4 bg-slate-200 px-2 mt-2 pb-2"
>
<
div
x
-
transition
:
enter
=
"transition-all duration-500 ease-in-out"
x
-
transition
:
enter
-
start
=
"opacity-0 [transform:translate3d(1rem,0,0)]"
x
-
transition
:
enter
-
end
=
"opacity-100 [transform:translate3d(0,0,0)]"
>
<
div
class
=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-3"
>
@
php
$currentGroup
=
''
;
$tabGroup3
=
[
'File Management Export'
,
'Header Management Export'
,
'Detail Management Export'
,
'Item Management Export'
,
'Flight Management Export'
,
];
@
endphp
@
foreach
(
$permissions
as
$permission
)
@
if
(
!
in_array
(
$permission
[
'permission_group_name'
],
$tabGroup3
))
@
continue
@
endif
@
if
(
$permission
[
'permission_group_name'
]
!==
$currentGroup
)
@
if
(
$currentGroup
!==
''
)
</
div
>
</
div
>
@
endif
<
div
x
-
data
=
"{
allChecked: false,
permissionList: @entangle('permission_lists'),
toggleAll(group) {
this.allChecked = !this.allChecked;
document.querySelectorAll(`.permissionGroup[data-group='${group}'] input[type='checkbox']`).forEach(checkbox => {
checkbox.checked = this.allChecked;
if (this.allChecked) {
if (!this.permissionListAlpine.includes(checkbox.value)) {
this.permissionListAlpine.push(checkbox.value);
}
} else {
this.permissionListAlpine = this.permissionListAlpine.filter(id => id != checkbox.value);
}
});
},
toggleIndividual(event) {
event.stopPropagation();
this.allChecked = this.permissionListAlpine.length === @json(
$permissions->count
());
}
}"
class
=
"card grow items-center p-4 sm:p-5 cursor-pointer permissionGroup"
data
-
group
=
"{{
$permission['permission_group_name']
}}"
@
click
=
"toggleAll('{{
$permission['permission_group_name']
}}')"
>
<
h3
class
=
"pt-3 text-lg font-medium text-slate-700 dark:text-navy-100"
>
{{
$permission
[
'permission_group_name'
]
}}
</
h3
>
<
div
class
=
"my-4 h-px w-full bg-slate-200 dark:bg-navy-500"
></
div
>
<
div
class
=
"grow space-y-4 permission-list"
>
@
endif
<
div
class
=
"flex items-center space-x-4"
>
<
label
class
=
"inline-flex items-center space-x-2"
@
click
=
"toggleIndividual(
$event
)"
>
<
input
class
=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
type
=
"checkbox"
x
-
model
=
"permissionListAlpine"
value
=
"{{
$permission['id']
}}"
/>
<
span
>
{{
$permission
[
'name'
]
}}
</
span
>
</
label
>
</
div
>
@
php
$currentGroup
=
$permission
[
'permission_group_name'
];
@
endphp
@
endforeach
@
if
(
$currentGroup
!==
''
)
</
div
>
@
endif
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
form
>
<
div
class
=
"grid grid-cols-6 justify-center space-x-2 pt-4"
>
<
span
wire
:
click
=
"goBack"
class
=
"col-start-3 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</
span
>
<
button
type
=
"button"
@
click
=
"submit"
class
=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</
button
>
</
div
>
</
div
>
resources/views/livewire/pages/role/role-index.blade.php
View file @
f8d82fd3
<div>
<div>
<!-- Your content here -->
@include('components.no-permission')
<h1>
Role Index Page
</h1>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6 "
>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"/"
>
Home
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click=
"$emit('menuClicked', 'Role')"
>
Role Management
</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div
x-data=
"{ show: @entangle('showMessage'), message: '' }"
x-init=
"window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});"
>
<div
x-show.transition.duration.500ms=
"show"
class=
"fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg"
>
{{ $message }}
</div>
</div>
<div
x-data=
"{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedRolesAlpine.includes(groupId)) {
this.selectedRolesAlpine.push(groupId);
}
} else {
this.selectedRolesAlpine = this.selectedRolesAlpine.filter(id => id !== groupId);
}
},
selectedRolesAlpine: [],
selectedRoles: @entangle('selectedRoles')
}"
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 "
>
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Role Management
</h2>
</div>
{{-- @include('components/search-by', ['searchBy' => $searchBy ?? []]) --}}
<div
class=
"flex justify-between"
>
<div
class=
"px-2 ml-4"
>
<button
wire:click=
"showRoleCreateForm()"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
>
</path>
</svg>
<span>
Create
</span>
</button>
<a
@
click.prevent=
"if (selectedRolesAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
>
</path>
</svg>
<span>
Delete
</span>
</a>
</div>
<div
class=
"inline-flex flex-initial"
>
<div
x-data=
"{ isInputActive: true }"
>
<div
class=
"flex gap-4 px-5 items-center"
>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-14 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
<span
class=
"w-64"
x-show=
"isInputActive === true"
>
<input
class=
"form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Search Keyword"
type=
"text"
wire:model=
"keyword"
/>
</span>
<span
class=
"w-52"
x-show=
"isInputActive === true"
>
<select
wire:model=
"searchSelected"
class=
"form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($searchBy as $key => $by)
<option
value=
"{{ $key }}"
>
{{ $by }}
</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div
class=
"mx-3 mt-3 px-4"
>
<div
class=
"is-scrollbar-hidden min-w-full overflow-x-auto"
x-data=
"pages.tables.initExample1"
>
<table
class=
"is-hoverable w-full text-left"
>
<thead>
<tr>
<th
class=
"whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Permission
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Create Date
</th>
<th
class=
"whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $role)
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<label
class=
"inline-flex items-center space-x-2"
>
<input
@
change=
"toggleGroup($event)"
class=
"form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type=
"checkbox"
wire:model=
"selectedRoles"
value=
"{{ $role->id }}"
/>
</label>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $role->name }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
@php
$permissions = $role->permissions->take(5); // Take the first 5 permissions
$remainingCount = $role->permissions->count() - $permissions->count();
@endphp
@foreach ($permissions as $permission)
<li
class=
"inline-block mr-2 mb-2 px-2 py-1 bg-primary text-white rounded text-xs"
>
{{ $permission->name }}
</li>
@endforeach
@if ($remainingCount > 0)
<li
class=
"inline-block px-2 py-1 bg-gray-300 text-gray-700 rounded"
>
+
{{ $remainingCount }} more
</li>
@endif
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $role->created_at }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex justify-center space-x-2"
>
<a
wire:click=
"showRoleEditForm({{ $role->id }})"
class=
"btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa fa-edit"
></i>
</a>
<div>
<a
@
click=
"$wire.emit('showDeleteModal', {{ $role->id }})"
class=
"btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
<i
class=
"fa fa-trash-alt"
></i>
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<template
x-if=
"showDeleteListModal"
>
<div
class=
"fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
@
keydown.window.escape=
"showDeleteListModal = false"
>
<div
class=
"absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@
click=
"showDeleteListModal = false"
></div>
<div
class=
"relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"inline h-28 w-28 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
>
</path>
</svg>
<div
class=
"mt-4 mx-5"
>
<h2
class=
"text-2xl text-slate-700 dark:text-navy-100"
>
Are you sure
<br>
you want to delete
<span
x-text=
"selectedRolesAlpine.length"
></span>
roles?
</h2>
<p
class=
"mt-2"
></p>
<button
@
click=
"showDeleteListModal = false"
class=
"btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90"
>
Close
</button>
<button
@
click=
"$wire.emitSelf('deleteSelected', selectedRoles ); showDeleteListModal = false"
class=
"btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Confirm
</button>
</div>
</div>
</div>
</template>
<livewire:delete-modal
/>
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
</div>
@elseif($action === 'create')
<livewire:pages.role.role-create
:permissions=
"$permissions"
wire:key=
"role-create"
/>
@elseif($action === 'edit')
<livewire:pages.role.role-edit
:permissions=
"$permissions"
:editRoleId=
"$editRoleId"
wire:key=
"role-edit"
/>
@endif
</div>
</div>
resources/views/livewire/pages/user/user-create.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<form
wire:submit.prevent=
"submitForm"
>
@csrf
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Create
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Name :
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"name"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"name"
type=
"text"
value=
"{{ old('name') }}"
/>
@error('name')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Email :
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.email=
"email"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"email"
type=
"text"
value=
"{{ old('email') }}"
/>
@error('email')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Password :
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.password=
"password"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"password"
type=
"password"
value=
"{{ old('password') }}"
/>
@error('password')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Confirm Password :
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"password_confirmation"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
""
name=
"password_confirmation"
type=
"password"
/>
</span>
</div>
@error('password_confirmation')
<span
class=
"text-red-500 text-xs"
>
{{ $message }}
</span>
@enderror
<div
class=
"flex items-center "
wire:ignore
>
<label
class=
"w-2/12 mr-2"
>
<span>
Add Groups :
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
class=
"mt-1.5 relative flex w-2/4"
wire:ignore
x-data=
"{ groupLists: @entangle('group_lists') }"
x-init=
"groupLists = [];
const tempGroup = pages.groupSelect;
pages.fetchGroups(tempGroup).then(() => {
$el._x_tom = new Tom($el, {
...tempGroup.group,
onChange: (value) => {
groupLists = value;
}
});
})"
type=
"text"
>
</span>
</div>
</div>
<div
class=
"grid grid-cols-12 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-4 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
</form>
</div>
resources/views/livewire/pages/user/user-edit.blade.php
0 → 100644
View file @
f8d82fd3
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
x-data=
"{ changePassword: @entangle('changePassword'), tomGReady: false }"
x-show=
"tomGReady"
>
<form
wire:submit.prevent=
"submitEditForm"
>
@csrf
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
<i
class=
"fa-solid fa-edit text-primary"
></i>
Edit User
</h2>
</div>
<div
class=
"w-3/4 px-3 space-y-3 m-auto mb-4"
>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Name:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"name"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Name"
name=
"name"
type=
"text"
/>
@error('name')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Email:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"email"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Email"
name=
"email"
type=
"email"
/>
@error('email')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center "
wire:ignore
>
<span
class=
"w-2/12 mr-2"
>
Add Groups:
</span>
<span
class=
"relative flex w-full"
>
<input
class=
"mt-1.5 relative flex w-1/2"
wire:ignore
x-data=
"{ groupLists: @entangle('group_lists') }"
x-init=
"groupLists = @js($userGroups);
const tempGroup = pages.groupSelect;
pages.fetchGroups(tempGroup).then(() => {
$el._x_tom = new Tom($el, {
...tempGroup.group,
onChange: (value) => {
groupLists = value;
}
});
$el._x_tom.setValue(groupLists);
tomGReady = true
})"
type=
"text"
>
</span>
</div>
<!-- Toggle Button for Change Password -->
<div
class=
"flex items-center"
>
<button
type=
"button"
@
click=
"changePassword = !changePassword"
class=
"btn border bg-gray-300 border-gray-300 font-medium text-gray-800 hover:text-white focus:text-white hover:bg-gray-500 focus:bg-gray-500 active:bg-gray-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Change Password
</button>
</div>
<!-- Password Fields (Hidden by Default) -->
<div
x-show=
"changePassword"
>
<div
class=
"flex items-center mt-4"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Current Password:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"current_password"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Current Password"
name=
"current_password"
type=
"password"
/>
@error('current_password')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center mt-4"
>
<label
class=
"w-2/12 mr-2"
>
<span>
New Password:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"new_password"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"New Password"
name=
"new_password"
type=
"password"
/>
@error('new_password')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
<div
class=
"flex items-center mt-4"
>
<label
class=
"w-2/12 mr-2"
>
<span>
Confirm New Password:
</span>
</label>
<span
class=
"relative flex w-full"
>
<input
wire:model.defer=
"new_password_confirmation"
class=
"form-input w-2/4 rounded-lg border border-slate-300 bg-transparent px-3 py-2 text-xs pl-4 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Confirm New Password"
name=
"new_password_confirmation"
type=
"password"
/>
@error('new_password_confirmation')
<span
class=
"text-red-500 text-md self-center ml-4"
>
{{ $message }}
</span>
@enderror
</span>
</div>
</div>
</div>
<div
class=
"grid grid-cols-12 justify-center space-x-2 pt-4"
>
<span
wire:click=
"goBack"
class=
"col-start-4 btn border border-slate-300 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-450 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90"
>
Cancel
</span>
<button
type=
"submit"
class=
"btn ml-3 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
Save
</button>
</div>
</div>
</form>
</div>
resources/views/livewire/pages/user/user-index.blade.php
View file @
f8d82fd3
<div>
<div>
This User
@include('components.no-permission')
<div
class=
"flex items-center space-x-4 py-5 lg:py-6 "
>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"/"
>
Home
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
wire:click=
"$emit('menuClicked', 'User')"
>
User Management
</a>
</li>
</ul>
</div>
@if ($action === 'list')
<div
x-data=
"{ show: @entangle('showMessage'), message: '' }"
x-init=
"window.addEventListener('show-message', event => {
show = true;
message = event.detail.message;
console.log(show, message);
setTimeout(() => { show = false, console.log(show, message); }, 3000);
});"
>
<div
x-show.transition.duration.500ms=
"show"
class=
"fixed top-5 right-5 z-50 bg-green-500 text-white py-2 px-4 rounded-md shadow-lg"
>
{{ $message }}
</div>
</div>
<div
x-data=
"{
showDeleteListModal: @entangle('showDeleteListModal'),
showAlert: false,
toggleGroup(event) {
const groupId = event.target.value;
if (event.target.checked) {
if (!this.selectedUsersAlpine.includes(groupId)) {
this.selectedUsersAlpine.push(groupId);
}
} else {
this.selectedUsersAlpine = this.selectedUsersAlpine.filter(id => id !== groupId);
}
},
selectedUsersAlpine: [],
selectedUsers: @entangle('selectedUsers')
}"
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 "
>
<div
class=
"card pb-4"
>
<div
class=
"my-3 flex h-8 items-center justify-between px-4 sm:px-5"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
User Management
</h2>
</div>
{{-- @include('components/search-by', ['searchBy' => $searchBy ?? []]) --}}
<div
class=
"flex justify-between"
>
<div
class=
"px-2 ml-4"
>
<button
wire:click=
"showUserCreateForm()"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
>
</path>
</svg>
<span>
Create
</span>
</button>
<a
@
click.prevent=
"if (selectedUsersAlpine.length > 0) { showDeleteListModal = true; } else { showAlert = true;}"
class=
"btn h-6 w-28 rounded space-x-1 bg-primary px-3 text-xs font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
fill=
"none"
viewBox=
"0 0 24 24"
stroke-width=
"1.5"
stroke=
"currentColor"
class=
"w-3 h-3"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
>
</path>
</svg>
<span>
Delete
</span>
</a>
</div>
<div
class=
"inline-flex flex-initial"
>
<div
x-data=
"{ isInputActive: true }"
>
<div
class=
"flex gap-3 px-5 items-center"
>
<button
@
click=
"isInputActive = !isInputActive"
class=
"btn h-8 w-10 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</button>
<span
class=
"w-64"
x-show=
"isInputActive === true"
>
<input
class=
"form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder=
"Search Keyword"
type=
"text"
wire:model=
"keyword"
/>
</span>
<span
class=
"w-52"
x-show=
"isInputActive === true"
>
<select
wire:model=
"searchSelected"
class=
"form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
>
@foreach ($searchBy as $key => $by)
<option
value=
"{{ $key }}"
>
{{ $by }}
</option>
@endforeach
</select>
</span>
</div>
</div>
</div>
</div>
@include('livewire.select-atleast-modal')
<div
class=
"mx-3 mt-3 px-4"
>
<div
class=
"is-scrollbar-hidden min-w-full overflow-x-auto"
x-data=
"pages.tables.initExample1"
>
<table
class=
"is-hoverable w-full text-left"
>
<thead>
<tr>
<th
class=
"whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
#
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Name
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Email
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Group
</th>
<th
class=
"whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Create Date
</th>
<th
class=
"whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5"
>
Action
</th>
</tr>
</thead>
<tbody>
@foreach ($results as $user)
<tr
class=
"border-y border-transparent border-b-slate-200 dark:border-b-navy-500"
>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<label
class=
"inline-flex items-center space-x-2"
>
<input
@
change=
"toggleGroup($event)"
class=
"form-checkbox is-basic h-4 w-4 rounded border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
type=
"checkbox"
wire:model.defer=
"selectedUsers"
value=
"{{ $user->id }}"
/>
</label>
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $user->name }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $user->email }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
@php
$groups = $user->groups->take(5); // Take the first 5 groups
$remainingCount = $user->groups->count() - $groups->count();
@endphp
@foreach ($groups as $group)
<li
class=
"inline-block mr-2 mb-2 px-2 py-1 bg-primary text-white rounded text-xs"
>
{{ $group->name }}
</li>
@endforeach
@if ($remainingCount > 0)
<li
class=
"inline-block px-2 py-1 bg-gray-300 text-gray-700 rounded"
>
+
{{ $remainingCount }} more
</li>
@endif
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
{{ $user->created_at }}
</td>
<td
class=
"whitespace-nowrap px-4 py-3 sm:px-5"
>
<div
class=
"flex justify-center space-x-2"
>
<a
wire:click=
"showUserEditForm({{ $user->id }})"
class=
"btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<i
class=
"fa fa-edit"
></i>
</a>
<div>
<a
@
click=
"$wire.emit('showDeleteModal', {{ $user->id }})"
class=
"btn h-8 w-8 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25"
>
<i
class=
"fa fa-trash-alt"
></i>
</a>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<template
x-if=
"showDeleteListModal"
>
<div
class=
"fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
@
keydown.window.escape=
"showDeleteListModal = false"
>
<div
class=
"absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
@
click=
"showDeleteListModal = false"
></div>
<div
class=
"relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"inline h-28 w-28 text-error"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
>
</path>
</svg>
<div
class=
"mt-4 mx-5"
>
<h2
class=
"text-2xl text-slate-700 dark:text-navy-100"
>
Are you sure
<br>
you want to delete
<span
x-text=
"selectedUsersAlpine.length"
></span>
users?
</h2>
<p
class=
"mt-2"
></p>
<button
@
click=
"showDeleteListModal = false"
class=
"btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90"
>
Close
</button>
<button
@
click=
"$wire.emitSelf('deleteSelected', selectedUsers ); showDeleteListModal = false"
class=
"btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
>
Confirm
</button>
</div>
</div>
</div>
</template>
<livewire:delete-modal
/>
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
{{--
<div
class=
"px-4"
>
<div
x-data=
"pages.basicTable.initGridTable({{ $json_columns }}, {{ $users }}, {{ $paginate }}, '{{ $url }}', {{ json_encode($permission) }})"
></div>
</div>
--}}
</div>
@elseif($action === 'create')
<livewire:pages.user.user-create
wire:key=
"user-create"
/>
@elseif($action === 'edit')
<livewire:pages.user.user-edit
:editUserId=
"$editUserId"
wire:key=
"user-edit"
/>
@else
<div></div>
@endif
</div>
</div>
resources/views/livewire/select-atleast-modal.blade.php
0 → 100644
View file @
f8d82fd3
<style>
.bg-gray-800.bg-opacity-20
{
background-color
:
rgba
(
31
,
41
,
55
,
0.20
);
}
</style>
<div
x-show=
"showAlert"
@
click=
"showAlert = false"
class=
"fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-20"
>
<div
class=
"bg-white rounded-lg shadow-lg p-6 max-w-sm w-full"
>
<div
class=
"flex justify-between items-center mb-4"
>
<h2
class=
"text-lg font-semibold text-gray-800"
>
Alert
</h2>
<button
@
click=
"showAlert = false"
class=
"text-gray-400 hover:text-gray-600"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-6 w-6"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p
class=
"text-gray-700"
>
Please select at least one.
</p>
<div
class=
"mt-4 text-right"
>
<button
@
click=
"showAlert = false"
class=
"bg-primary text-white px-4 py-2 rounded hover:bg-primary-focus"
>
OK
</button>
</div>
</div>
</div>
routes/web.php
View file @
f8d82fd3
...
@@ -7,15 +7,15 @@ use Illuminate\Support\Facades\Route;
...
@@ -7,15 +7,15 @@ use Illuminate\Support\Facades\Route;
use
App\Models\ConfServerLicense
;
use
App\Models\ConfServerLicense
;
use
App\Http\Controllers\HomeController
;
use
App\Http\Controllers\HomeController
;
use
App\Http\Controllers\
Configuration\
UserController
;
use
App\Http\Controllers\UserController
;
use
App\Http\Controllers\
Configuration\
GroupController
;
use
App\Http\Controllers\GroupController
;
use
App\Http\Controllers\
Configuration\
CompanyController
;
use
App\Http\Controllers\CompanyController
;
use
App\Http\Controllers\
Configuration\
CompanyTypeController
;
//
use App\Http\Controllers\CompanyTypeController;
use
App\Http\Controllers\
Configuration\
CompanyProfileController
;
//
use App\Http\Controllers\CompanyProfileController;
use
App\Http\Controllers\
Configuration\
MenuController
;
//
use App\Http\Controllers\MenuController;
use
App\Http\Controllers\
Configuration\
ConfigOptionController
;
use
App\Http\Controllers\ConfigOptionController
;
use
App\Http\Controllers\
Configuration\
ExchangeRateController
;
use
App\Http\Controllers\ExchangeRateController
;
use
App\Http\Controllers\
Configuration\
ConsigneeController
;
use
App\Http\Controllers\ConsigneeController
;
use
App\Http\Controllers\DeletePatchController
;
use
App\Http\Controllers\DeletePatchController
;
use
App\Http\Controllers\DischargePortController
;
use
App\Http\Controllers\DischargePortController
;
use
App\Http\Controllers\ParameterController
;
use
App\Http\Controllers\ParameterController
;
...
@@ -57,6 +57,12 @@ Route::middleware('auth')->group(function () {
...
@@ -57,6 +57,12 @@ Route::middleware('auth')->group(function () {
Route
::
get
(
'/delete-multi-patch'
,
[
DeletePatchController
::
class
,
'indexMulti'
]);
Route
::
get
(
'/delete-multi-patch'
,
[
DeletePatchController
::
class
,
'indexMulti'
]);
Route
::
get
(
'/server-license'
,
[
ServerLicenseController
::
class
,
'index'
])
->
name
(
'server-license.index'
);
Route
::
get
(
'/server-license'
,
[
ServerLicenseController
::
class
,
'index'
])
->
name
(
'server-license.index'
);
Route
::
get
(
'/user'
,
[
UserController
::
class
,
'index'
])
->
name
(
'user.index'
);
Route
::
get
(
'/company'
,
[
CompanyController
::
class
,
'index'
])
->
name
(
'company.index'
);
Route
::
get
(
'/group'
,
[
GroupController
::
class
,
'index'
])
->
name
(
'group.index'
);
Route
::
get
(
'/role'
,
[
RoleController
::
class
,
'index'
])
->
name
(
'role.index'
);
Route
::
get
(
'/exchange-rate'
,
[
ExchangeRateController
::
class
,
'index'
]);
Route
::
get
(
'/exchange-rate'
,
[
ExchangeRateController
::
class
,
'index'
]);
Route
::
get
(
'/parameter'
,
[
ParameterController
::
class
,
'index'
]);
Route
::
get
(
'/parameter'
,
[
ParameterController
::
class
,
'index'
]);
Route
::
get
(
'/discharge-port'
,
[
DischargePortController
::
class
,
'index'
]);
Route
::
get
(
'/discharge-port'
,
[
DischargePortController
::
class
,
'index'
]);
...
@@ -65,69 +71,6 @@ Route::middleware('auth')->group(function () {
...
@@ -65,69 +71,6 @@ Route::middleware('auth')->group(function () {
// Route::get('/role', [RoleIndex::class])->name('role-index');
// Route::get('/role', [RoleIndex::class])->name('role-index');
// Route::get('/generateModels', [GenModelController::class, 'generateModels']);
// Route::get('/generateModels', [GenModelController::class, 'generateModels']);
Route
::
group
([
'prefix'
=>
'configurations'
],
function
()
{
Route
::
resource
(
'/user'
,
UserController
::
class
)
->
names
([
'index'
=>
'configurations.user.index'
,
'store'
=>
'configurations.user.store'
,
'edit'
=>
'configurations.user.edit'
,
'update'
=>
'configurations.user.update'
,
'destroy'
=>
'configurations.user.destroy'
,
]);
Route
::
resource
(
'/group'
,
GroupController
::
class
)
->
names
([
'index'
=>
'configurations.group.index'
,
'store'
=>
'configurations.group.store'
,
'edit'
=>
'configurations.group.edit'
,
'update'
=>
'configurations.group.update'
,
'destroy'
=>
'configurations.group.destroy'
,
]);
Route
::
resource
(
'/company'
,
CompanyController
::
class
)
->
names
([
'index'
=>
'configurations.company.index'
,
'store'
=>
'configurations.company.store'
,
'edit'
=>
'configurations.company.edit'
,
'update'
=>
'configurations.company.update'
,
'destroy'
=>
'configurations.company.destroy'
,
]);
Route
::
resource
(
'/company-type'
,
CompanyTypeController
::
class
)
->
names
([
'index'
=>
'configurations.company-type.index'
,
'store'
=>
'configurations.company-type.store'
,
'edit'
=>
'configurations.company-type.edit'
,
'update'
=>
'configurations.company-type.update'
,
'destroy'
=>
'configurations.company-type.destroy'
,
]);
Route
::
resource
(
'/menu'
,
MenuController
::
class
)
->
names
([
'index'
=>
'configurations.menu.index'
,
'store'
=>
'configurations.menu.store'
,
'edit'
=>
'configurations.menu.edit'
,
'update'
=>
'configurations.menu.update'
,
'destroy'
=>
'configurations.menu.destroy'
,
]);
Route
::
resource
(
'/consignee'
,
ConsigneeController
::
class
)
->
names
([
'index'
=>
'configurations.consignee.index'
,
'store'
=>
'configurations.consignee.store'
,
'edit'
=>
'configurations.consignee.edit'
,
'update'
=>
'configurations.consignee.update'
,
'destroy'
=>
'configurations.consignee.destroy'
,
]);
Route
::
resource
(
'/company-profile'
,
CompanyProfileController
::
class
)
->
names
([
'index'
=>
'configurations.company-profile.index'
,
'store'
=>
'configurations.company-profile.store'
,
'edit'
=>
'configurations.company-profile.edit'
,
'update'
=>
'configurations.company-profile.update'
,
'destroy'
=>
'configurations.company-profile.destroy'
,
]);
// Route::get('/exchange-rate', [ExchangeRateController::class, 'mainlistExchangeRate'])->name('configurations.exchangerate');
// /* MENU :: Currency Code */
// Route::get('/currency-code', [ExchangeRateController::class, 'mainlistCurrency'])->name('configurations.currency');
// /* MENU :: Config Option */
// Route::get('/config-option', [ConfigOptionController::class, 'mainlist'])->name('configurations.configoption');
// /* MENU :: Currency Code */
// Route::get('/currency-code', [ExchangeRateController::class, 'mainlistCurrency'])->name('configurations.currency');
});
});
});
...
...
Prev
1
2
3
4
Next
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
