This commit is contained in:
Timothy J. Baek 2024-06-10 19:19:53 -07:00
parent ec516e95fa
commit adea3af8d7
3 changed files with 44 additions and 12 deletions

View File

@ -40,9 +40,9 @@
toast.success('Code formatted successfully'); toast.success('Code formatted successfully');
return true; return true;
} }
return false; return false;
} }
return false;
}; };
let extensions = [ let extensions = [

View File

@ -8,15 +8,29 @@
let loading = false; let loading = false;
let name = ''; let name = '';
let id = '';
$: if (name) {
id = name.replace(/\s+/g, '_').toLowerCase();
}
let codeEditor; let codeEditor;
const submitHandler = async () => { const saveHandler = async () => {
loading = true; loading = true;
// Call the API to submit the code // Call the API to save the toolkit
console.log('saveHandler');
};
const submitHandler = async () => {
if (codeEditor) { if (codeEditor) {
codeEditor.submitHandler(); const res = await codeEditor.formatHandler();
if (res) {
console.log('Code formatted successfully');
saveHandler();
}
} }
}; };
</script> </script>
@ -33,18 +47,27 @@
<hr class=" dark:border-gray-850 my-2" /> <hr class=" dark:border-gray-850 my-2" />
<div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg"> <div class="flex flex-col flex-1 overflow-auto h-0 rounded-lg">
<div class="w-full mb-2"> <div class="w-full flex gap-2 mb-2">
<!-- Toolkit Name Input --> <!-- Toolkit Name Input -->
<input <input
class="w-full px-3 py-2 text-sm font-medium bg-gray-100 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none" class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
type="text" type="text"
placeholder="Toolkit Name (e.g. my_toolkit)" placeholder="Toolkit Name (e.g. My ToolKit)"
bind:value={name} bind:value={name}
required
/>
<input
class="w-full px-3 py-2 text-sm font-medium bg-gray-50 dark:bg-gray-850 dark:text-gray-200 rounded-lg outline-none"
type="text"
placeholder="Toolkit ID (e.g. my_toolkit)"
bind:value={id}
required
/> />
</div> </div>
<div class="mb-2 flex-1 overflow-auto h-0 rounded-lg"> <div class="mb-2 flex-1 overflow-auto h-0 rounded-lg">
<CodeEditor bind:this={codeEditor} /> <CodeEditor bind:this={codeEditor} {saveHandler} />
</div> </div>
<div class="pb-3 flex justify-end"> <div class="pb-3 flex justify-end">

View File

@ -1,6 +1,7 @@
<script> <script lang="ts">
import CodeEditor from '$lib/components/common/CodeEditor.svelte'; import CodeEditor from '$lib/components/common/CodeEditor.svelte';
export let saveHandler: Function;
export let value = ''; export let value = '';
let codeEditor; let codeEditor;
@ -46,11 +47,19 @@ class Tools:
`; `;
export const submitHandler = async () => { export const formatHandler = async () => {
if (codeEditor) { if (codeEditor) {
codeEditor.formatPythonCodeHandler(); return await codeEditor.formatPythonCodeHandler();
} }
return false;
}; };
</script> </script>
<CodeEditor bind:value {boilerplate} bind:this={codeEditor} /> <CodeEditor
bind:value
{boilerplate}
bind:this={codeEditor}
on:save={() => {
saveHandler();
}}
/>