<template>
<RequestStatusMessage
v-if="!loadAssetReqStatus || loadAssetReqStatus.isPending"
:requestStatus="loadAssetReqStatus"
/>
<div v-else-if="loadAssetReqStatus.isError" class="p-2 text-center text-neutral-400 dark:text-neutral-300">
<template v-if="schemaVariantId"> Asset "{{ schemaVariantId }}" Function does not exist! </template>
<template v-else>Select an asset to view it.</template>
</div>
<ScrollArea
v-else-if="selectedAsset && editingAsset"
class="flex flex-col h-full border border-t-0 border-neutral-300 dark:border-neutral-600"
>
<template #top>
<AssetEditorHeader :selectedAsset="selectedAsset" />
</template>
<CodeEditor
:id="
changeSetsStore.headChangeSetId === changeSetsStore.selectedChangeSetId ? undefined : `asset-${schemaVariantId}`
"
v-model="editingAsset"
:disabled="selectedAsset.isLocked"
:recordId="selectedAsset.schemaVariantId"
:typescript="editorTs || ''"
@change="onChange"
/>
</ScrollArea>
<LoadingMessage v-else />
</template>
<script lang="ts" setup>
import { ref, watch, computed, onMounted, ComputedRef } from "vue";
import { ApiRequestStatus } from "@si/vue-lib/pinia";
import * as _ from "lodash-es";
import { RequestStatusMessage, ScrollArea, LoadingMessage } from "@si/vue-lib/design-system";
import { useAssetStore } from "@/store/asset.store";
import { useFuncStore } from "@/store/func/funcs.store";
import { useChangeSetsStore } from "@/store/change_sets.store";
import { editor_ts, loadEditorTs } from "@/utils/load_editor_ts";
import { SchemaVariantId } from "@/api/sdf/dal/schema";
import CodeEditor from "./CodeEditor.vue";
import AssetEditorHeader from "./AssetEditorHeader.vue";
const changeSetsStore = useChangeSetsStore();
const editorTs = ref<string | null>(null);
const props = defineProps<{
schemaVariantId?: SchemaVariantId;
}>();
const assetStore = useAssetStore();
const funcStore = useFuncStore();
const selectedAsset = computed(() =>
props.schemaVariantId ? assetStore.variantFromListById[props.schemaVariantId] : undefined,
);
const selectedAssetFuncCode = computed(() => {
const fId = selectedAsset.value?.assetFuncId;
if (!fId) return null;
return funcStore.funcCodeById[fId]?.code;
});
const editingAsset = ref<string>(selectedAssetFuncCode.value ?? "");
let loadAssetReqStatus: ComputedRef<ApiRequestStatus>;
watch(
() => selectedAsset.value,
() => {
loadAssetReqStatus = funcStore.getRequestStatus("FETCH_CODE", selectedAsset.value?.assetFuncId);
},
{ immediate: true },
);
watch(
[() => editingAsset.value, () => selectedAssetFuncCode.value],
async () => {
if (editingAsset.value !== selectedAssetFuncCode.value) {
editingAsset.value = selectedAssetFuncCode.value ?? "";
}
},
{ immediate: true },
);
const updatedHead = ref(false);
watch(
() => changeSetsStore.selectedChangeSetId,
() => {
updatedHead.value = false;
},
);
const onChange = (_schemaVariantId: string, code: string, debounce: boolean) => {
if (
!selectedAsset.value ||
selectedAsset.value.isLocked ||
selectedAssetFuncCode.value === editingAsset.value ||
updatedHead.value
) {
return;
}
updatedHead.value = changeSetsStore.selectedChangeSetId === changeSetsStore.headChangeSetId;
if (!updatedHead.value) {
const asset = _.cloneDeep(selectedAsset.value);
assetStore.enqueueVariantSave(
{
...asset,
},
code,
debounce,
);
}
};
onMounted(async () => {
if (!editor_ts) {
editorTs.value = await loadEditorTs();
} else {
editorTs.value = editor_ts;
}
});
</script>
