estel/play
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework file page

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-09 12:35:53 +01:00
parent 19712a41d5
commit cd348f81a7
2 changed files with 57 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/pages/commands.vue
View File

@@ -16,7 +16,7 @@
<UForm :state="outputState" class="flex flex-col gap-y-4 items-end"> <UForm :state="outputState" class="flex flex-col gap-y-4 items-end">
<UFormField label="Command output" name="command-output"> <UFormField label="Command output" name="command-output">
<UTextarea v-model="outputState.output" variant="subtle" size="lg" :rows="8" :resize="false" readonly /> <UTextarea v-model="outputState.output" variant="subtle" size="lg" :rows="8" readonly />
</UFormField> </UFormField>
</UForm> </UForm>
</div> </div>

105
app/pages/file.vue
View File

@@ -3,40 +3,19 @@
title="File System" title="File System"
description="Access the file system. For this demo the only allowed permission is read/write to the Documents folder (no sub directories)." description="Access the file system. For this demo the only allowed permission is read/write to the Documents folder (no sub directories)."
> >
<form @submit.prevent="createDummyFile()"> <UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="createFile">
<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg"> <UFormField label="Text file name (with extension)" name="fileName">
<div class="grid grid-cols-1 gap-x-8 gap-y-6"> <UInput v-model="inputState.fileName" variant="subtle" size="lg" />
<div> </UFormField>
<label for="filename-input" class="block text-sm text-white font-semibold leading-6">
Text file name <UFormField label="File content" name="fileContent">
<span class="text-neutral-400 font-light">(with extension)</span> <UTextarea v-model="inputState.fileContent" variant="subtle" size="lg" :rows="10" />
</label> </UFormField>
<div class="mt-2.5">
<input id="filename-input" v-model="fileName" type="text" name="filename-input" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset" sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset"> <UButton type="submit" size="lg">
</div> Create file
</div> </UButton>
<div class="mt-8"> </UForm>
<label for="filecontent-input" class="block text-sm text-white font-semibold leading-6">File content</label>
<div mt="2.5">
<textarea id="filecontent-input" v-model="fileContent" name="filecontent-input" rows="10" class="block w-full border-0 rounded-md bg-white/5 px-3.5 py-2 text-white shadow-sm ring-1 ring-white/10 ring-inset" sm="text-sm leading-6" focus="ring-2 ring-emerald-500 ring-inset" />
</div>
</div>
<div class="flex justify-end gap-3">
<div v-if="done" class="h-full flex-center text-emerald-400 space-x-1">
<p>Done</p>
<Icon name="heroicons-solid:check" class="size-4" />
</div>
<div v-if="error" class="h-full flex-center text-red-400 space-x-1">
<p>Error</p>
<Icon name="heroicons-solid:exclamation-triangle" class="size-4" />
</div>
<Btn type="submit" :disabled="fileName === ''">
Create file
</Btn>
</div>
</div>
</div>
</form>
</LayoutTile> </LayoutTile>
</template> </template>
@@ -46,29 +25,57 @@
icon: "lucide:file" icon: "lucide:file"
}); });
const fileName = ref(""); const schema = z.object({
const fileContent = ref(""); fileName: z.string({
const done = ref(false); required_error: "File name is required"
const error = ref(false); }).nonempty().regex(/^[\w,\s-]+\.[A-Z0-9]+$/i, {
message: "Invalid filename format"
}),
fileContent: z.string({
required_error: "File content is required"
}).nonempty()
});
const createDummyFile = async () => { type Schema = zInfer<typeof schema>;
const inputState = ref<Partial<Schema>>({
fileName: undefined,
fileContent: undefined
});
const toast = useToast();
const createFile = async () => {
try { try {
const fileExists = await useTauriFsExists(fileName.value, { const fileExists = await useTauriFsExists(inputState.value.fileName!, {
baseDir: useTauriFsBaseDirectory.Document baseDir: useTauriFsBaseDirectory.Document
}); });
if (!fileExists) { if (fileExists) {
await useTauriFsWriteTextFile(fileName.value, fileContent.value, { toast.add({
baseDir: useTauriFsBaseDirectory.Document title: "Error",
description: "The file already exists",
color: "error"
}); });
done.value = true;
fileName.value = fileContent.value = ""; return;
setTimeout(() => done.value = false, 3000);
} }
await useTauriFsWriteTextFile(inputState.value.fileName!, inputState.value.fileContent!, {
baseDir: useTauriFsBaseDirectory.Document
});
toast.add({
title: "Success",
description: "The file has been created",
color: "success"
});
inputState.value.fileName = inputState.value.fileContent = undefined;
} catch (err) { } catch (err) {
console.error("Error creating file:", err); toast.add({
error.value = true; title: "Error",
setTimeout(() => error.value = false, 3000); description: String(err),
color: "error"
});
} }
}; };
</script> </script>