@ -1,18 +1,14 @@
< x-modal id = "api-form-modal" :title = "$this->title" size = "modal-xl" wire:submit = "save" wire:loading form livewire >
< x-modal id = "api-form-modal" data-coreui-focus = "false" :title = "$this->title" size = "modal-xl" wire:submit = "save" wire:loading form livewire >
< div class = "row g-3 g-lg-4" >
@foreach($this->endpoints as $key => $endpoint)
< div class = "col-12 col-md-6" wire:key = "endpoint-card-{{ $key }}" >
< div class = "card border border-2 shadow-sm rounded-3 h-100 mb-0 overflow-hidden transition-all"
:class="$wire.api_code === '{{ $key }}' ? 'border-primary ring-1' : 'border-body-tertiary'">
< div class = "card-header border-bottom p-3 d-flex align-items-center justify-content-between gap-2 transition-all"
:class="$wire.api_code === '{{ $key }}' ? 'bg-primary-subtle' : 'bg-body-tertiary'">
< div class = "card border border-body-tertiary shadow-sm rounded-3 h-100 mb-0 overflow-hidden transition-all" >
<!-- Card Header -->
< div class = "card-header border-bottom border-body-tertiary bg-body-tertiary p-3 d-flex align-items-center justify-content-between gap-2" >
< div class = "d-flex align-items-center gap-2 overflow-hidden" >
< span class = "badge rounded-circle p-2 d-flex align-items-center justify-content-center flex-shrink-0 transition-all"
:class="$wire.api_code === '{{ $key }}' ? 'bg-primary text-white' : 'bg-primary-subtle text-primary'">
< span class = "badge rounded-circle p-2 d-flex align-items-center justify-content-center flex-shrink-0 bg-primary-subtle text-primary" >
< x-tabler-api-app width = "16" height = "16" / >
< / span >
< span class = "fw-bold text-body text-truncate small text-uppercase tracking-wider" title = "{{ $endpoint['label'] }}" >
@ -20,6 +16,7 @@
< / span >
< / div >
<!-- Actions -->
< div class = "d-flex align-items-center gap-2 flex-shrink-0" >
< x-button
type="button"
@ -27,11 +24,16 @@
size="sm"
class="btn-icon rounded-circle"
icon="tabler-pencil"
x-on:click="$js.edit('{{ $key }}') "
x-on:click="$js.editEndpoint "
icon-only
data-key="{{ $key }}"
data-label="{{ $endpoint['label'] }}"
data-value="{{ $endpoint['value'] }}"
data-client="{{ $endpoint['client_id'] }}"
:title="__('ui/button.edit')"
/>
@isset($endpoint['client_id'])
< x-button
type="button"
theme="danger"
@ -42,31 +44,30 @@
icon-only
:title="__('ui/button.run-sync')"
/>
@endif
< / div >
< / div >
< div class = "card-body p-3" >
< div class = "row g-3" >
< div class = "col-12" >
< x-form.select
name="{{ $key }}_client"
wire:model="field.{{ $key }}.client_id"
:options="$this->clients->mapWithKeys(fn ($item) => [$item->ulid => $item->name])"
::disabled="$wire.api_code !== '{{ $key }}'"
:label="__('domains/channel/field.client.name')"
:placeholder="__('ui/placeholder.select', ['attribute' => __('domains/channel/field.client.name')])"
/>
<!-- Card Body (Read - Only Detail View) -->
< div class = "card-body p-3 d-flex flex-column gap-3" >
<!-- Client Name -->
< div class = "p-3 bg-body-tertiary border border-body-tertiary rounded-3" >
< small class = "text-body-secondary fw-semibold text-uppercase d-block mb-1 fs-7" >
{{ __('domains/channel/field.client.name') }}
< / small >
< span class = "fw-medium text-body text-break small" >
{{ $this->clients->firstWhere('ulid', $endpoint['client_id'] ?? null)?->name ?? '-' }}
< / span >
< / div >
< div class = "col-12" >
< x-form.input
name="{{ $key }}_url"
wire:model="field.{{ $key }}.value"
::disabled="$wire.api_code !== '{{ $key }}'"
:label="__('domains/channel/field.client.endpoint_url')"
placeholder="/v1/endpoint"
/>
< / div >
<!-- Endpoint URL -->
< div class = "p-3 bg-body-tertiary border border-body-tertiary rounded-3" >
< small class = "text-body-secondary fw-semibold text-uppercase d-block mb-1 fs-7" >
{{ __('domains/channel/field.client.endpoint_url') }}
< / small >
< code class = "fw-medium text-primary text-break small font-monospace" >
{{ $endpoint['value'] ?? '-' }}
< / code >
< / div >
< / div >
@ -81,9 +82,60 @@
@script
< script >
$js.edit = (key) => {
$wire.api_code = key;
console.log($wire.api_code, key);
$js.editEndpoint = (e) => {
const data = e.target.dataset;
Swal.fire({
title: data.label,
html: `
< div class = "text-start d-flex flex-column gap-3 py-2" >
< div >
< label class = "form-label small fw-semibold text-body mb-1" >
${'{{ __("domains/channel/field.client.name") }}'}
< / label >
< select id = "swal-client-id" class = "form-select form-select-sm" >
@foreach($this->clients as $client)
< option value = "{{ $client->ulid }}" > {{ $client->name }}< / option >
@endforeach
< / select >
< / div >
< div >
< label class = "form-label small fw-semibold text-body mb-1" >
${'{{ __("domains/channel/field.client.endpoint_url") }}'}
< / label >
< input id = "swal-endpoint-url" class = "form-control form-control-sm font-monospace" placeholder = "/v1/endpoint" value = "${data.value || ''}" >
< / div >
< / div >
`,
showCancelButton: true,
confirmButtonText: '{{ __("ui/button.save") }}',
cancelButtonText: '{{ __("ui/button.cancel") }}',
customClass: {
confirmButton: 'btn btn-primary me-2',
cancelButton: 'btn btn-secondary'
},
buttonsStyling: false,
didOpen: () => {
if (data.client) {
document.getElementById('swal-client-id').value = data.client;
}
},
preConfirm: async () => {
return new Promise((resolve, reject) => {
try {
const clientId = document.getElementById('swal-client-id').value;
const endpointUrl = document.getElementById('swal-endpoint-url').value;
$wire.set('field.type', data.key);
$wire.set('field.client_id', clientId);
$wire.set('field.value', endpointUrl);
$wire.save();
return resolve();
}catch (e) {
return reject(e.message);
}
})
}
})
};
< / script >
@endscript
Syarif Ubaidillah
1 month ago