This commit is contained in:
pbao9
2026-02-04 13:43:10 +07:00
parent 8e4e0f33e3
commit 86bb1c2527
7 changed files with 192 additions and 58 deletions
+26
View File
@@ -0,0 +1,26 @@
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class FixedActionBar extends Component
{
/**
* Create a new component instance.
*/
public function __construct()
{
//
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.fixed-action-bar');
}
}
+1
View File
@@ -102,6 +102,7 @@
@import "./components/auth";
@import "./components/chat";
@import "./components/email";
@import "./components/fixed-action-bar";
// 3rd-Party plugin overrides
@import "./plugin-overrides/ace";
@@ -0,0 +1,30 @@
// Fixed Action Bar Component
.fixed-action-bar {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 1030;
background: var(--#{$prefix}body-bg); // Use theme variable for background
border-top: 1px solid var(--#{$prefix}border-color);
padding: 1rem;
transition: margin .1s ease, width .1s ease; // Match sidebar transition
@media (min-width: 992px) {
margin-left: $sidebar-width-lg; // Align with main content
// Handle folded sidebar scenario
.sidebar-folded & {
margin-left: $sidebar-folded-width;
}
}
// Ensure it sits above other content but below modals (z-index check)
}
// Utility for vertical border on medium+ screens
@media (min-width: 768px) {
.border-md-end {
border-right: 1px solid var(--#{$prefix}border-color) !important;
}
}
@@ -1,58 +1,122 @@
@extends("administrator.layout.master")
@extends('administrator.layout.master')
@push('plugin-styles')
@foreach (config('assets.datatable.css') as $datatable)
<link href="{{ asset($datatable) }}" rel="stylesheet" />
@endforeach
@endpush
@section('breadcrumb')
@php
$breadcrumbItems = [
['label' => 'Modules'],
['label' => 'vCenter', 'url' => route('module.vcenter.index')],
['label' => 'Edit vCenter', 'active' => true],
];
@endphp
<x-admin-breadcrumb :items="$breadcrumbItems" />
@endsection
@section("content")
{{-- Page Header --}}
<div class="mb-4">
<h3 class="fw-bold fs-4 mb-2">Edit vCenter</h3>
<p class="text-muted mb-0">Manage connection information for this vCenter instance</p>
</div>
@if(auth()->guard('admins')->user()->can("edit module vcenter"))
<div class="card card-outline card-primary">
<form action="{{ route('module.vcenter.update',['id' => $server->id]) }}" method="post">
<form action="{{ route('module.vcenter.update', ['id' => $server->id]) }}" method="post" style="padding-bottom: 80px;">
@csrf
@method('put')
<div class="card-body">
<div class="row">
<div class="col">
{{--Server Host--}}
<div class="form-group row">
<label class="col-md-3" for="host">vCenter Host</label>
<div class="col-md-9">
<input type="text" id="host" name="host" placeholder="103.42.xx.xxx"
value="{{ $server->host }}" class="form-control">
{{-- Connection Information --}}
<div class="card card-outline card-primary mb-4">
<div class="card-header bg-white py-3 border-bottom">
<h5 class="card-title fw-bold mb-0">Connection Information</h5>
</div>
<div class="card-body p-4">
<div class="row g-4">
{{-- Left Column --}}
<div class="col-12 col-md-6 border-md-end pe-md-4">
<div class="mb-3">
<label class="form-label fw-medium" for="host">vCenter Host</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i data-lucide="server" width="18" height="18"></i>
</span>
<input type="text" id="host" name="host" class="form-control border-start-0 ps-3"
placeholder="e.g. 103.42.xx.xxx" value="{{ $server->host }}" required>
</div>
</div>
<div class="mb-0">
<label class="form-label fw-medium" for="user">User <span class="text-danger">*</span></label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i data-lucide="user" width="18" height="18"></i>
</span>
<input type="text" id="user" name="user" class="form-control border-start-0 ps-3"
placeholder="e.g. administrator@vsphere.local" value="{{ $server->user }}" required>
</div>
</div>
</div>
{{--User--}}
<div class="form-group row">
<label class="col-md-3" for="user">User</label>
<div class="col-md-9">
<input type="text" id="user" name="user" placeholder="root"
value="{{ $server->user }}" class="form-control">
</div>
</div>
{{--Password--}}
<div class="form-group row">
<label class="col-md-3" for="password">Password</label>
<div class="col-md-9">
<input type="password" id="password" name="password" placeholder="*********"
value="" class="form-control">
</div>
</div>
{{--Status--}}
<div class="form-group row">
<label class="col-md-3" for="password">Status</label>
<div class="col-md-9">
<label>
<select class="custom-select" name="status">
<option value="1" @selected($server->status === 1)>Active</option>
<option value="0" @selected($server->status === 0)>No Active</option>
</select>
</label>
{{-- Right Column --}}
<div class="col-12 col-md-6 ps-md-4">
<div class="mb-0">
<label class="form-label fw-medium" for="password">Password</label>
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i data-lucide="lock" width="18" height="18"></i>
</span>
<input type="password" id="password" name="password" class="form-control border-start-0 ps-3"
placeholder="Leave blank to keep current password">
</div>
<div class="form-text mt-2">
<i data-lucide="info" width="14" height="14" class="text-muted align-middle me-1"></i>
Leave blank to keep current password
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<a href="{{ route('module.vcenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
<button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
{{-- Configuration --}}
<div class="card card-outline card-primary mb-4">
<div class="card-header bg-white py-3 border-bottom">
<h5 class="card-title fw-bold mb-0">Configuration</h5>
</div>
<div class="card-body p-4">
<div class="row">
<div class="col-12 col-md-6">
<label class="form-label fw-medium" for="status">Status</label>
<div class="input-group flex-nowrap">
<span class="input-group-text bg-light border-end-0">
<i data-lucide="activity" width="18" height="18"></i>
</span>
<select class="form-control select2 single__select border-start-0 ps-3" name="status" id="status"
style="width: 100%;">
@foreach(App\Enums\Status::getOptions() as $value => $label)
<option value="{{ $value }}" {{ $server->status === $value ? 'selected' : '' }}>{{ $label }}
</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
{{-- Fixed Bottom Actions --}}
<x-fixed-action-bar>
<x-button-c-r-m route="module.vcenter.index" variant="secondary" icon="arrow-left">
Cancel
</x-button-c-r-m>
<x-button-c-r-m type="submit" variant="primary" icon="save">
Save Changes
</x-button-c-r-m>
</x-fixed-action-bar>
</form>
@else
<div class="alert alert-danger alert-dismissible">
<h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
@@ -60,3 +124,13 @@
</div>
@endif
@endsection
@push('plugin-scripts')
@foreach (config('assets.datatable.js') as $datatable)
<script src="{{ asset($datatable) }}"></script>
@endforeach
<script>
$(document).ready(function () {
$('.select2').select2();
});
</script>
@endpush
@@ -1,7 +1,7 @@
@props(['items' => []])
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-white shadow-sm p-3 rounded-3 d-flex align-items-center mb-4">
<ol class="breadcrumb card bg-white shadow-sm p-3 rounded-3 d-flex flex-row align-items-center mb-4">
<li class="breadcrumb-item">
<a href="{{ route('dashboard') }}"
class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
@@ -1,19 +1,19 @@
@php
$tag = 'button';
$href = null;
$tag = 'button';
$href = null;
if ($route) {
$href = route($route, $params);
$tag = 'a';
} elseif ($url) {
$href = $url;
$tag = 'a';
} elseif ($attributes->has('href')) {
$href = $attributes->get('href');
$tag = 'a';
}
if ($route) {
$href = route($route, $params);
$tag = 'a';
} elseif ($url) {
$href = $url;
$tag = 'a';
} elseif ($attributes->has('href')) {
$href = $attributes->get('href');
$tag = 'a';
}
$baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-md px-2 py-1 rounded-2';
$baseClasses = 'd-inline-flex gap-2 align-items-center justify-content-center text-white border-0 shadow-lg px-3 py-2 rounded-pill';
$variants = [
'primary' => 'bg-primary',
@@ -37,7 +37,7 @@
$variantClass = $variants[$variant] ?? $variants['primary'];
$sizeClass = $sizes[$size] ?? $sizes['default'];
$classes = "{$baseClasses} {$variantClass} {$sizeClass}";
$classes = "{$baseClasses} {$variantClass} {$sizeClass}";
@endphp
@if($tag === 'a')
@@ -0,0 +1,3 @@
<div {{ $attributes->merge(['class' => 'fixed-action-bar d-flex justify-content-end gap-2']) }}>
{{ $slot }}
</div>