System Initiative

<template> <Modal ref="modalRef" title="Delete Component" @keydown.enter="onConfirm"> <div class="max-h-[70vh] overflow-hidden flex flex-col"> <div class="pb-xs"> Are you sure you want to delete {{ components.length > 1 ? `${components.length} components` : "this component" }}? </div> <div class="scrollable"> <ComponentCard v-for="component in components" :key="component.id" :component="component" /> </div> <div class="px-2xs py-xs"> <VormInput v-model="mode" noLabel type="radio"> <VormInputOption :value="DeleteMode.Delete"> <div class="text-xs my-xs"> <span class="flex flex-col"> <strong>Delete</strong> </span> <span class="flex flex-col"> If this component has a corresponding resource, and/or its outgoing dependencies do, it will be marked for deletion and removed when this change set is applied. Otherwise, the component will be deleted immediately. </span> </div> </VormInputOption> <VormInputOption :value="DeleteMode.Remove"> <div class="text-xs my-xs"> <span class="flex flex-col"> <strong>Remove</strong> </span> <span class="flex flex-col"> If this component exists in at least two views, it will be removed from the current view and will remain in other view(s). Otherwise, the remove request will "no-op" and the component will remain in the current view. </span> </div> </VormInputOption> </VormInput> </div> <div class="flex gap-sm"> <NewButton label="Cancel" @click="close" /> <NewButton class="flex-grow" icon="trash" label="Confirm" tone="destructive" @click="onConfirm" /> </div> </div> </Modal> </template> <script lang="ts" setup> import * as _ from "lodash-es"; import { Modal, NewButton, useModal, VormInput, VormInputOption, } from "@si/vue-lib/design-system"; import { onBeforeUnmount, onMounted, ref } from "vue"; import { ComponentInList } from "@/workers/types/entity_kind_types"; import ComponentCard from "./ComponentCard.vue"; import { KeyDetails, keyEmitter } from "./logic_composables/emitters"; const components = ref<ComponentInList[]>([]); const modalRef = ref<InstanceType<typeof Modal>>(); const { open: openModal, close: closeModal } = useModal(modalRef); function open(selectedComponents: ComponentInList[]) { components.value = selectedComponents; openModal(); } function close() { components.value = []; closeModal(); } const mode = ref(DeleteMode.Delete); async function onConfirm() { close(); emit("delete", mode.value); } onMounted(() => { keyEmitter.on("Enter", onKeyDown); }); onBeforeUnmount(() => { keyEmitter.off("Enter", onKeyDown); }); const onKeyDown = async (e: KeyDetails["Enter"]) => { if (modalRef.value?.isOpen) { onConfirm(); } }; const emit = defineEmits<{ (e: "delete", value: DeleteMode): void; }>(); defineExpose({ open, close }); </script> <script lang="ts"> export enum DeleteMode { Delete, Remove, } </script>