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.
90 lines
4.4 KiB
90 lines
4.4 KiB
<x-modal id="api-form-modal" :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="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'">
|
|
<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>
|
|
|
|
<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.edit('{{ $key }}')"
|
|
icon-only
|
|
:title="__('ui/button.edit')"
|
|
/>
|
|
|
|
<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')"
|
|
/>
|
|
</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')])"
|
|
/>
|
|
</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>
|
|
</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.edit = (key) => {
|
|
$wire.api_code = key;
|
|
console.log($wire.api_code, key);
|
|
};
|
|
</script>
|
|
@endscript
|
|
</x-modal>
|
|
|