improve ux

This commit is contained in:
Egor Aristov 2025-02-22 21:39:46 +03:00
parent 2952907618
commit dc92fdd613
2 changed files with 11 additions and 3 deletions

View File

@ -6,9 +6,9 @@ import Copyable from "@/components/Copyable.vue";
import EditUrlModal from "@/components/EditUrlModal.vue"; import EditUrlModal from "@/components/EditUrlModal.vue";
import {decodeUrl, encodeUrl, getScreenshotUrl} from "@/urlmaker"; import {decodeUrl, encodeUrl, getScreenshotUrl} from "@/urlmaker";
import {useWizardStore} from "@/stores/wizard.ts"; import {useWizardStore} from "@/stores/wizard.ts";
import {debounce} from "es-toolkit";
const store = useWizardStore(); const store = useWizardStore();
const existingLink = ref(""); const existingLink = ref("");
const link = ref(""); const link = ref("");
const editModalVisible = ref(false); const editModalVisible = ref(false);
@ -25,6 +25,14 @@ watch(existingLink, async (value) => {
} }
}); });
watch(store.specs, debounce(() => {
if(store.formValid) {
generateLink();
} else {
link.value = "";
}
}, 100));
async function generateLink() { async function generateLink() {
try { try {
link.value = await encodeUrl(store.specs); link.value = await encodeUrl(store.specs);
@ -43,7 +51,7 @@ function screenshot() {
<template> <template>
<div class="wrapper"> <div class="wrapper">
<SpecsForm class="specs-form"></SpecsForm> <SpecsForm class="specs-form"></SpecsForm>
<Btn :active="store.formValid" @click="generateLink">Generate link</Btn> <!-- <Btn :active="store.formValid" @click="generateLink">Generate link</Btn>-->
<Btn :active="store.formValid" @click="screenshot">Screenshot</Btn> <Btn :active="store.formValid" @click="screenshot">Screenshot</Btn>
<Btn @click="editModalVisible = true">Edit existing task</Btn> <Btn @click="editModalVisible = true">Edit existing task</Btn>
<Btn @click="store.reset">Reset Form</Btn> <Btn @click="store.reset">Reset Form</Btn>

View File

@ -20,7 +20,7 @@ export const useWizardStore = defineStore('wizard', () => {
const updateLocalStorage = debounce(() => { const updateLocalStorage = debounce(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(specs)); localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(specs));
}, 500); }, 250);
function updateSpec(fieldName: FieldNames, newValue: string) { function updateSpec(fieldName: FieldNames, newValue: string) {
specs[fieldName] = newValue; specs[fieldName] = newValue;