Refactor: UI Changes in App services
- make the button bigger and active color - remove unnecessary info from UI - Removed redundant validation calls and improved permission handling for `ConnectApps`.
This commit is contained in:
parent
688b0307b8
commit
66ae0bad37
@ -3,7 +3,7 @@
|
|||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
|
|
||||||
new class extends Component {
|
new class extends Component {
|
||||||
public string $selectedTab = 'all-tab';
|
public string $selectedTab = "all-tab";
|
||||||
};
|
};
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|||||||
@ -141,8 +141,6 @@ public function openEditAppModal(int $assignmentId): void
|
|||||||
|
|
||||||
public function saveApp(): void
|
public function saveApp(): void
|
||||||
{
|
{
|
||||||
$this->assignForm->validate();
|
|
||||||
|
|
||||||
if ($this->isEditingApp) {
|
if ($this->isEditingApp) {
|
||||||
$this->updateApp();
|
$this->updateApp();
|
||||||
} else {
|
} else {
|
||||||
@ -191,7 +189,7 @@ public function assignApp(): void
|
|||||||
|
|
||||||
public function updateApp(): void
|
public function updateApp(): void
|
||||||
{
|
{
|
||||||
$this->authorize(RoleAndAppsPermissionEnum::ConnectApps->value);
|
$this->authorize(RoleAndAppsPermissionEnum::ConnectApps);
|
||||||
|
|
||||||
$this->attempt(
|
$this->attempt(
|
||||||
action: function (): void {
|
action: function (): void {
|
||||||
@ -285,9 +283,9 @@ public function savePriority(): void
|
|||||||
$userPriority = auth()->user()?->roles()->min('priority') ?? 999999;
|
$userPriority = auth()->user()?->roles()->min('priority') ?? 999999;
|
||||||
|
|
||||||
$this->validate([
|
$this->validate([
|
||||||
'newPriority' => 'required|integer|min:' . ($userPriority + 1),
|
'newPriority' => 'required|integer|min:'.($userPriority + 1),
|
||||||
], [
|
], [
|
||||||
'newPriority.min' => 'The priority must be greater than your own highest role priority (' . $userPriority . ').',
|
'newPriority.min' => 'The priority must be greater than your own highest role priority ('.$userPriority.').',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$this->attempt(
|
$this->attempt(
|
||||||
@ -335,8 +333,9 @@ class="btn-sm btn-ghost btn-circle"
|
|||||||
|
|
||||||
<x-shared.card title="Connected Apps" icon="lucide-blocks" class="pb-2 w-full h-min">
|
<x-shared.card title="Connected Apps" icon="lucide-blocks" class="pb-2 w-full h-min">
|
||||||
<x-slot:actions>
|
<x-slot:actions>
|
||||||
@can(RoleAndAppsPermissionEnum::ConnectApps->value)
|
@can(RoleAndAppsPermissionEnum::ConnectApps)
|
||||||
<x-mary-button wire:click="openAddAppModal" spinner="openAddAppModal" icon="lucide.plus" class="btn-sm">
|
<x-mary-button wire:click="openAddAppModal" spinner="openAddAppModal" icon="lucide.plus"
|
||||||
|
class="btn-sm">
|
||||||
Add App
|
Add App
|
||||||
</x-mary-button>
|
</x-mary-button>
|
||||||
@endcan
|
@endcan
|
||||||
@ -445,10 +444,13 @@ class="bg-gray-50 text-gray-500 cursor-not-allowed"
|
|||||||
/>
|
/>
|
||||||
@endif
|
@endif
|
||||||
<div x-data="{ isUnlimited: @entangle('assignForm.isUnlimited') }"
|
<div x-data="{ isUnlimited: @entangle('assignForm.isUnlimited') }"
|
||||||
class="flex gap-2 items-baseline-last">
|
class="flex gap-2 items-baseline-last"
|
||||||
|
>
|
||||||
|
|
||||||
<div class="flex-1 transition-opacity duration-200"
|
<div
|
||||||
x-bind:class="isUnlimited ? 'opacity-50 pointer-events-none' : ''">
|
class="flex-1 transition-opacity duration-200"
|
||||||
|
x-bind:class="isUnlimited ? 'opacity-50 pointer-events-none' : ''"
|
||||||
|
>
|
||||||
<x-mary-datepicker
|
<x-mary-datepicker
|
||||||
label="Date"
|
label="Date"
|
||||||
wire:model="assignForm.validUpto"
|
wire:model="assignForm.validUpto"
|
||||||
|
|||||||
@ -7,10 +7,10 @@
|
|||||||
use Livewire\Component;
|
use Livewire\Component;
|
||||||
use Mary\Traits\Toast;
|
use Mary\Traits\Toast;
|
||||||
|
|
||||||
new
|
new #[Layout("layouts.app.sidebar")]
|
||||||
#[Layout('layouts.app.sidebar')]
|
#[Title("Dashboard")]
|
||||||
#[Title('Dashboard')]
|
class extends
|
||||||
class extends Component {
|
Component {
|
||||||
use Toast;
|
use Toast;
|
||||||
|
|
||||||
private UserAppAccessService $service;
|
private UserAppAccessService $service;
|
||||||
@ -28,17 +28,17 @@ public function mount(): void
|
|||||||
if ($user) {
|
if ($user) {
|
||||||
activity()
|
activity()
|
||||||
->causedBy($user)
|
->causedBy($user)
|
||||||
->event('dashboard_access')
|
->event("dashboard_access")
|
||||||
->log('User accessed their assigned services dashboard.');
|
->log("User accessed their assigned services dashboard.");
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show toast from OAuth redirect flash data
|
// Show toast from OAuth redirect flash data
|
||||||
if (session('entra_success')) {
|
if (session("entra_success")) {
|
||||||
$this->success(session('entra_success'));
|
$this->success(session("entra_success"));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (session('entra_error')) {
|
if (session("entra_error")) {
|
||||||
$this->error(session('entra_error'));
|
$this->error(session("entra_error"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -138,15 +138,11 @@ class="w-3.5 h-3.5 inline animate-pulse text-amber-600 dark:text-amber-400"/>
|
|||||||
|
|
||||||
<div class="p-4 flex-1 flex flex-col justify-between gap-4">
|
<div class="p-4 flex-1 flex flex-col justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-xs text-gray-400 dark:text-gray-500 font-mono tracking-wider uppercase">
|
|
||||||
{{ $service->slug }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
@if($service->protocol_name === 'url' && $service->provider_slug === 'azure-fd')
|
@if($service->protocol_name === 'url' && $service->provider_slug === 'azure-fd')
|
||||||
<div
|
<div
|
||||||
class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 flex flex-col gap-3">
|
class="flex flex-col gap-3">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<span class="text-xs font-semibold text-gray-700 dark:text-gray-300">Microsoft Integration</span>
|
<span class="text-xs font-semibold text-gray-700">Microsoft Integration</span>
|
||||||
@if($this->isEntraConnected)
|
@if($this->isEntraConnected)
|
||||||
<x-mary-badge
|
<x-mary-badge
|
||||||
class="badge-soft badge-success text-[10px] font-semibold px-2 py-0.5">
|
class="badge-soft badge-success text-[10px] font-semibold px-2 py-0.5">
|
||||||
@ -160,20 +156,13 @@ class="badge-soft badge-neutral text-[10px] font-semibold px-2 py-0.5">
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if($this->isEntraConnected && $this->entraToken)
|
|
||||||
<div class="text-[10px] text-gray-400 flex items-center gap-1.5">
|
|
||||||
<x-mary-icon name="lucide.clock" class="w-3.5 h-3.5"/>
|
|
||||||
Expires {{ $this->entraToken->expires_at->diffForHumans() }}
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
@if($this->isEntraConnected)
|
@if($this->isEntraConnected)
|
||||||
<x-mary-button
|
<x-mary-button
|
||||||
external
|
external
|
||||||
icon="lucide.external-link"
|
icon="lucide.external-link"
|
||||||
:link="route('entra.open')"
|
:link="route('entra.open')"
|
||||||
class="btn-xs btn-soft btn-primary flex-1"
|
class=" btn-primary flex-1"
|
||||||
label="Open Outlook"
|
label="Open Outlook"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -184,7 +173,7 @@ class="inline">
|
|||||||
<x-mary-button
|
<x-mary-button
|
||||||
icon="lucide.unplug"
|
icon="lucide.unplug"
|
||||||
type="submit"
|
type="submit"
|
||||||
class="btn-xs btn-soft btn-error"
|
class=" btn-error"
|
||||||
tooltip="Disconnect"
|
tooltip="Disconnect"
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
@ -193,7 +182,7 @@ class="btn-xs btn-soft btn-error"
|
|||||||
no-wire-navigate
|
no-wire-navigate
|
||||||
icon="lucide.plug"
|
icon="lucide.plug"
|
||||||
:link="route('entra.connect')"
|
:link="route('entra.connect')"
|
||||||
class="btn-xs btn-soft btn-primary flex-1"
|
class="btn-primary flex-1"
|
||||||
label="Connect"
|
label="Connect"
|
||||||
/>
|
/>
|
||||||
@endif
|
@endif
|
||||||
@ -208,7 +197,7 @@ class="btn-xs btn-soft btn-primary flex-1"
|
|||||||
class="w-4 h-4 {{ $service->is_warning ? 'text-amber-500 animate-pulse' : 'text-gray-400 dark:text-gray-500' }}"/>
|
class="w-4 h-4 {{ $service->is_warning ? 'text-amber-500 animate-pulse' : 'text-gray-400 dark:text-gray-500' }}"/>
|
||||||
<span
|
<span
|
||||||
class="text-sm font-medium {{ $service->is_warning ? 'text-amber-600 dark:text-amber-400 font-semibold' : 'text-gray-600 dark:text-gray-400' }}">
|
class="text-sm font-medium {{ $service->is_warning ? 'text-amber-600 dark:text-amber-400 font-semibold' : 'text-gray-600 dark:text-gray-400' }}">
|
||||||
{{ $service->days_remaining }} {{ Str::plural('day', $service->days_remaining) }} left
|
{{ Illuminate\Support\Carbon::parse($service->duration)->diffForHumans() }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user