113 lines
4.4 KiB
Svelte
113 lines
4.4 KiB
Svelte
<!-- [DEF:MissingMappingModal:Component] -->
|
|
<!--
|
|
@SEMANTICS: modal, mapping, prompt, migration
|
|
@PURPOSE: Prompts the user to provide a database mapping when one is missing during migration.
|
|
@LAYER: Feature
|
|
@RELATION: DISPATCHES -> resolve
|
|
|
|
@INVARIANT: Modal blocks migration progress until resolved or cancelled.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
// [SECTION: IMPORTS]
|
|
import { createEventDispatcher } from 'svelte';
|
|
// [/SECTION]
|
|
|
|
// [SECTION: PROPS]
|
|
export let show: boolean = false;
|
|
export let sourceDbName: string = "";
|
|
export let sourceDbUuid: string = "";
|
|
export let targetDatabases: Array<{uuid: string, database_name: string}> = [];
|
|
// [/SECTION]
|
|
|
|
let selectedTargetUuid = "";
|
|
const dispatch = createEventDispatcher();
|
|
|
|
// [DEF:resolve:Function]
|
|
function resolve() {
|
|
if (!selectedTargetUuid) return;
|
|
dispatch('resolve', {
|
|
sourceDbUuid,
|
|
targetDbUuid: selectedTargetUuid,
|
|
targetDbName: targetDatabases.find(d => d.uuid === selectedTargetUuid)?.database_name
|
|
});
|
|
show = false;
|
|
}
|
|
// [/DEF:resolve]
|
|
|
|
// [DEF:cancel:Function]
|
|
function cancel() {
|
|
dispatch('cancel');
|
|
show = false;
|
|
}
|
|
// [/DEF:cancel]
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
{#if show}
|
|
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
|
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
|
|
<div>
|
|
<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100">
|
|
<svg class="h-6 w-6 text-yellow-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div class="mt-3 text-center sm:mt-5">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
|
Missing Database Mapping
|
|
</h3>
|
|
<div class="mt-2">
|
|
<p class="text-sm text-gray-500">
|
|
The database <strong>{sourceDbName}</strong> is used in the assets being migrated but has no mapping to the target environment. Please select a target database.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 sm:mt-6">
|
|
<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"
|
|
bind:value={selectedTargetUuid}
|
|
>
|
|
<option value="" disabled>-- Select Target Database --</option>
|
|
{#each targetDatabases as tDb}
|
|
<option value={tDb.uuid}>{tDb.database_name}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
|
|
<button
|
|
type="button"
|
|
on:click={resolve}
|
|
disabled={!selectedTargetUuid}
|
|
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:col-start-2 sm:text-sm disabled:bg-gray-400"
|
|
>
|
|
Apply & Continue
|
|
</button>
|
|
<button
|
|
type="button"
|
|
on:click={cancel}
|
|
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm"
|
|
>
|
|
Cancel Migration
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<!-- [/SECTION] -->
|
|
|
|
<style>
|
|
/* Modal specific styles */
|
|
</style>
|
|
|
|
<!-- [/DEF:MissingMappingModal] -->
|