60 lines
1.7 KiB
Svelte
60 lines
1.7 KiB
Svelte
<!-- [DEF:EnvSelector:Component] -->
|
|
<!--
|
|
@SEMANTICS: environment, selector, dropdown, migration
|
|
@PURPOSE: Provides a UI component for selecting source and target environments.
|
|
@LAYER: Feature
|
|
@RELATION: BINDS_TO -> environments store
|
|
|
|
@INVARIANT: Source and target environments must be selectable from the list of configured environments.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
// [SECTION: IMPORTS]
|
|
import { t } from '../lib/i18n';
|
|
// [/SECTION]
|
|
|
|
// [SECTION: PROPS]
|
|
let {
|
|
label = "",
|
|
selectedId = "",
|
|
environments = [],
|
|
onchange = () => {},
|
|
} = $props();
|
|
|
|
// [/SECTION]
|
|
|
|
// [DEF:handleSelect:Function]
|
|
/**
|
|
* @purpose Propagates the selection change through a callback prop.
|
|
* @pre event.target must be an HTMLSelectElement.
|
|
* @post selectedId is updated and parent callback receives the selected environment id.
|
|
* @param {Event} event - The change event from the select element.
|
|
*/
|
|
function handleSelect(event: Event) {
|
|
const target = event.target as HTMLSelectElement;
|
|
selectedId = target.value;
|
|
onchange({ id: selectedId });
|
|
}
|
|
// [/DEF:handleSelect:Function]
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="flex flex-col space-y-1">
|
|
<label for="env-select" class="text-sm font-medium text-gray-700">{label}</label>
|
|
<select
|
|
id="env-select"
|
|
class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
|
|
value={selectedId}
|
|
onchange={handleSelect}
|
|
>
|
|
<option value="" disabled>{$t.common?.choose_environment}</option>
|
|
{#each environments as env}
|
|
<option value={env.id}>{env.name} ({env.url})</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
|
|
|
|
<!-- [/DEF:EnvSelector:Component] -->
|