46 lines
1.3 KiB
Svelte
46 lines
1.3 KiB
Svelte
<script>
|
|
export let data;
|
|
let filter = '';
|
|
|
|
$: filter = filter.toUpperCase();
|
|
$: selection = data.clinics.filter(row => row.active);
|
|
$: {
|
|
fetch('/api/config/user/clinics', { method: 'PUT', headers: { 'Content-type': 'application/json' }, body: JSON.stringify(selection.map(row => row.name)) });
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Clinics</title>
|
|
</svelte:head>
|
|
|
|
<h1>Clinics</h1>
|
|
<div class="card">
|
|
<div class="input-group">
|
|
<span class="input-group-text">🔎</span>
|
|
<input type="text" class="form-control" placeholder="Clinic" bind:value={filter} />
|
|
</div>
|
|
{#if filter.length > 0}
|
|
<ul class="list-group list-group-flush">
|
|
{#each data.clinics as row}{#if (row.name.charAt(0) != 'Z') && (row.name != 'DELETED CLINIC') && (row.name != 'CLINIC DELETED') && (row.name.startsWith(filter))}<li class="list-group-item" class:active={row.active} on:click={evt => row.active = !row.active}>{row.name}</li>{/if}{/each}
|
|
</ul>
|
|
{/if}
|
|
{#if selection.length > 0}
|
|
<div class="card-footer">
|
|
{#each selection as row}<span class="badge text-bg-primary">{row.name} <span on:click={evt => data.clinics[row.name].active = false}>❌</span></span>{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.list-group {
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
}
|
|
.list-group-item {
|
|
cursor: default;
|
|
}
|
|
.card-footer .badge:not(:last-child) {
|
|
margin-right: 0.25em;
|
|
}
|
|
</style>
|