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

Rework store page

Browse Source
This commit is contained in:
Nicola Spadari
2025-02-09 13:01:02 +01:00
parent ae66af30d9
commit 16a990098e
1 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
app/pages/store.vue
View File

@@ -3,29 +3,23 @@
title="Store" title="Store"
description="Persistent key-value store. Allows you to handle state to a file which can be saved and loaded on demand including between app restarts." description="Persistent key-value store. Allows you to handle state to a file which can be saved and loaded on demand including between app restarts."
> >
<form @submit.prevent="setStoreValue()"> <div class="space-y-6 md:space-y-8">
<div class="mx-auto max-w-xl" lg="mr-0 max-w-lg"> <UForm :state="inputState" :schema="schema" class="flex flex-col gap-y-4 items-end" @submit="setStoreValue">
<div class="grid grid-cols-1 gap-x-8 gap-y-6"> <UFormField label="Store value" name="value">
<div> <UInput v-model="inputState.value" variant="subtle" size="lg" />
<label for="store-value" class="block text-sm text-white font-semibold leading-6">Store value</label> </UFormField>
<div class="mt-2.5">
<input id="store-value" v-model="input" type="text" name="store-value" 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> Set value
</div> </UButton>
<div class="flex justify-end"> </UForm>
<Btn type="submit">
Send command <UForm :state="outputState" class="flex flex-col gap-y-4 items-end">
</Btn> <UFormField label="Store content" name="content">
</div> <UTextarea v-model="outputState.content" variant="subtle" size="lg" :rows="8" readonly />
<div class="mt-8"> </UFormField>
<label for="store-data" class="block text-sm text-white font-semibold leading-6">Current Store data</label> </UForm>
<div class="mt-2.5"> </div>
<textarea id="store-data" v-model="result" name="store-data" 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>
</div>
</form>
</LayoutTile> </LayoutTile>
</template> </template>
@@ -35,8 +29,22 @@
icon: "lucide:database" icon: "lucide:database"
}); });
const input = ref(""); const schema = z.object({
const result = ref(""); value: z.string({
required_error: "Store key is required"
}).nonempty()
});
type Schema = zInfer<typeof schema>;
const inputState = ref<Partial<Schema>>({
value: undefined
});
const outputState = ref({
content: ""
});
const toast = useToast();
const autosave = ref(false); const autosave = ref(false);
const store = await useTauriStoreLoad("store.bin", { const store = await useTauriStoreLoad("store.bin", {
@@ -45,9 +53,14 @@
const getStoreValue = async () => { const getStoreValue = async () => {
try { try {
result.value = await store.get<string>("myData") || ""; outputState.value.content = await store.get<string>("myData") || "";
} catch (error) { } catch (error) {
result.value = JSON.stringify(error, null, 4); toast.add({
title: "Error",
description: String(error),
color: "error"
});
outputState.value.content = JSON.stringify(error, null, 4);
} }
}; };
@@ -55,12 +68,22 @@
const setStoreValue = async () => { const setStoreValue = async () => {
try { try {
await store.set("myData", input.value); await store.set("myData", inputState.value!.value);
await getStoreValue(); await getStoreValue();
toast.add({
title: "Success",
description: "Store value retieved",
color: "success"
});
} catch (error) { } catch (error) {
result.value = JSON.stringify(error, null, 4); toast.add({
title: "Error",
description: String(error),
color: "error"
});
outputState.value.content = JSON.stringify(error, null, 4);
} finally { } finally {
input.value = ""; inputState.value.value = undefined;
} }
}; };
</script> </script>