improve ux
This commit is contained in:
parent
2952907618
commit
dc92fdd613
@ -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>
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user