You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
7.1 KiB
142 lines
7.1 KiB
<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-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 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'] }}">
|
|
{{ $endpoint['label'] }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="d-flex align-items-center gap-2 flex-shrink-0">
|
|
<x-button
|
|
type="button"
|
|
theme="warning"
|
|
size="sm"
|
|
class="btn-icon rounded-circle"
|
|
icon="tabler-pencil"
|
|
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"
|
|
size="sm"
|
|
wire:click="runSynchronization('{{ $key }}')"
|
|
icon="tabler-player-play"
|
|
class="btn-icon rounded-circle"
|
|
icon-only
|
|
:title="__('ui/button.run-sync')"
|
|
/>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<x-slot:footer>
|
|
<x-button type="button" theme="secondary" :label="__('ui/button.close')" data-coreui-dismiss="modal" />
|
|
</x-slot:footer>
|
|
|
|
@script
|
|
<script>
|
|
$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
|
|
</x-modal>
|
|
|