refactor(former): 🔄 restructure form components and stores
* Remove unused FormLayout and SuperForm stores. * Consolidate form logic into Former component. * Implement new Former layout and types. * Update stories for new Former component. * Clean up unused styles and types across the project.
This commit is contained in:
188
src/Former/Former.store.tsx
Normal file
188
src/Former/Former.store.tsx
Normal file
@@ -0,0 +1,188 @@
|
||||
import { createSyncStore } from '@warkypublic/zustandsyncstore';
|
||||
import { produce } from 'immer';
|
||||
|
||||
import type { FormerProps, FormerState } from './Former.types';
|
||||
|
||||
const { Provider: FormerProvider, useStore: useFormerStore } = createSyncStore<
|
||||
FormerState<any> & Partial<FormerProps<any>>,
|
||||
FormerProps<any>
|
||||
>(
|
||||
(set, get) => ({
|
||||
getState: (key) => {
|
||||
const current = get();
|
||||
return current?.[key];
|
||||
},
|
||||
load: async (reset?: boolean) => {
|
||||
try {
|
||||
set({ loading: true });
|
||||
const keyName = get()?.apiKeyField || 'id';
|
||||
const keyValue = (get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
|
||||
if (get().onAPICall && keyValue !== undefined) {
|
||||
let data = await get().onAPICall!(
|
||||
'read',
|
||||
get().request || 'insert',
|
||||
get().values,
|
||||
keyValue
|
||||
);
|
||||
if (get().afterGet) {
|
||||
data = await get().afterGet!({ ...data });
|
||||
}
|
||||
set({ loading: false, values: data });
|
||||
get().onChange?.(data);
|
||||
}
|
||||
if (reset && get().getFormMethods) {
|
||||
const formMethods = get().getFormMethods!();
|
||||
formMethods.reset();
|
||||
}
|
||||
} catch (e) {
|
||||
set({ error: (e as Error)?.message ?? e, loading: false });
|
||||
}
|
||||
set({ loading: false });
|
||||
},
|
||||
|
||||
onChange: (values) => {
|
||||
set({ values });
|
||||
},
|
||||
request: 'insert',
|
||||
reset: async () => {
|
||||
const state = get();
|
||||
if (state.getFormMethods) {
|
||||
if (state.request !== 'insert') {
|
||||
await state.load(true);
|
||||
}
|
||||
|
||||
const formMethods = state.getFormMethods!();
|
||||
formMethods.reset({ ...state.values, ...state.primeData });
|
||||
}
|
||||
},
|
||||
save: async (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => {
|
||||
try {
|
||||
const keepOpen = get().keepOpen ?? false;
|
||||
set({ loading: true });
|
||||
if (get().getFormMethods) {
|
||||
const formMethods = get().getFormMethods!();
|
||||
|
||||
let data = formMethods.getValues();
|
||||
|
||||
if (get().beforeSave) {
|
||||
const newData = await get().beforeSave!(data);
|
||||
data = newData;
|
||||
}
|
||||
|
||||
let exit = false;
|
||||
const handler = formMethods.handleSubmit(
|
||||
(newdata) => {
|
||||
data = newdata;
|
||||
},
|
||||
(errors) => {
|
||||
set({ error: errors.root?.message || 'Validation errors', loading: false });
|
||||
exit = true;
|
||||
}
|
||||
);
|
||||
|
||||
await handler(e);
|
||||
|
||||
//console.log('Former.store.tsx save called', success, e, data, get().getFormMethods);
|
||||
if (exit) {
|
||||
set({ loading: false });
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (get().request === 'delete' && !get().deleteConfirmed) {
|
||||
const confirmed = (await get().onConfirmDelete?.(data)) ?? false;
|
||||
if (!confirmed) {
|
||||
set({ loading: false });
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
if (get().onAPICall) {
|
||||
const keyName = get()?.apiKeyField || 'id';
|
||||
const keyValue =
|
||||
(get().values as any)?.[keyName] ?? (get().primeData as any)?.[keyName];
|
||||
const savedData = await get().onAPICall!(
|
||||
'mutate',
|
||||
get().request || 'insert',
|
||||
data,
|
||||
keyValue
|
||||
);
|
||||
if (get().afterSave) {
|
||||
await get().afterSave!(savedData);
|
||||
}
|
||||
set({ loading: false, values: savedData });
|
||||
get().onChange?.(savedData);
|
||||
if (!keepOpen) {
|
||||
get().onClose?.(savedData);
|
||||
}
|
||||
return savedData;
|
||||
}
|
||||
|
||||
set({ loading: false, values: data });
|
||||
get().onChange?.(data);
|
||||
if (!keepOpen) {
|
||||
get().onClose?.(data);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
} catch (e) {
|
||||
set({ error: (e as Error)?.message ?? e, loading: false });
|
||||
}
|
||||
|
||||
return undefined;
|
||||
},
|
||||
setRequest: (request) => {
|
||||
set({ request });
|
||||
},
|
||||
setState: (key, value) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
state[key] = value;
|
||||
})
|
||||
);
|
||||
},
|
||||
setStateFN: (key, value) => {
|
||||
const p = new Promise<void>((resolve, reject) => {
|
||||
set(
|
||||
produce((state) => {
|
||||
if (typeof value === 'function') {
|
||||
state[key] = (value as (value: unknown) => unknown)(state[key]);
|
||||
} else {
|
||||
reject(new Error(`Not a function ${value}`));
|
||||
throw Error(`Not a function ${value}`);
|
||||
}
|
||||
})
|
||||
);
|
||||
resolve();
|
||||
});
|
||||
|
||||
return p;
|
||||
},
|
||||
validate: async () => {
|
||||
if (get().getFormMethods) {
|
||||
const formMethods = get().getFormMethods!();
|
||||
const isValid = await formMethods.trigger();
|
||||
return isValid;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
values: undefined,
|
||||
}),
|
||||
({ onConfirmDelete, primeData, request, values }) => {
|
||||
let _onConfirmDelete = onConfirmDelete;
|
||||
if (!onConfirmDelete) {
|
||||
_onConfirmDelete = async () => {
|
||||
return confirm('Are you sure you want to delete this item?');
|
||||
};
|
||||
}
|
||||
return {
|
||||
onConfirmDelete: _onConfirmDelete,
|
||||
primeData,
|
||||
request: request || 'insert',
|
||||
values: { ...primeData, ...values },
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export { FormerProvider };
|
||||
export { useFormerStore };
|
||||
115
src/Former/Former.tsx
Normal file
115
src/Former/Former.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { forwardRef, type PropsWithChildren, useEffect, useImperativeHandle } from 'react';
|
||||
import { type FieldValues, FormProvider, useForm } from 'react-hook-form';
|
||||
|
||||
import type { FormerProps, FormerRef } from './Former.types';
|
||||
|
||||
import { FormerProvider, useFormerStore } from './Former.store';
|
||||
import { FormerLayout } from './FormerLayout';
|
||||
|
||||
const FormerInner = forwardRef<FormerRef<any>, Partial<FormerProps<any>> & PropsWithChildren>(
|
||||
function FormerInner<T extends FieldValues>(
|
||||
props: Partial<FormerProps<T>> & PropsWithChildren<T>,
|
||||
ref: any
|
||||
) {
|
||||
const {
|
||||
getState,
|
||||
onChange,
|
||||
onClose,
|
||||
onOpen,
|
||||
opened,
|
||||
primeData,
|
||||
reset,
|
||||
save,
|
||||
setState,
|
||||
useFormProps,
|
||||
validate,
|
||||
values,
|
||||
wrapper,
|
||||
} = useFormerStore((state) => ({
|
||||
getState: state.getState,
|
||||
onChange: state.onChange,
|
||||
onClose: state.onClose,
|
||||
onOpen: state.onOpen,
|
||||
opened: state.opened,
|
||||
primeData: state.primeData,
|
||||
reset: state.reset,
|
||||
save: state.save,
|
||||
setState: state.setState,
|
||||
useFormProps: state.useFormProps,
|
||||
validate: state.validate,
|
||||
values: state.values,
|
||||
wrapper: state.wrapper,
|
||||
}));
|
||||
|
||||
const formMethods = useForm<T>({
|
||||
defaultValues: primeData,
|
||||
mode: 'all',
|
||||
shouldUseNativeValidation: true,
|
||||
values: values,
|
||||
...useFormProps,
|
||||
});
|
||||
|
||||
useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
close: async () => {
|
||||
//console.log('close called');
|
||||
onClose?.();
|
||||
setState('opened', false);
|
||||
},
|
||||
getValue: () => {
|
||||
return getState('values');
|
||||
},
|
||||
reset: () => {
|
||||
reset();
|
||||
},
|
||||
save: async () => {
|
||||
return await save();
|
||||
},
|
||||
setValue: (value: T) => {
|
||||
onChange?.(value);
|
||||
},
|
||||
show: async () => {
|
||||
//console.log('show called');
|
||||
setState('opened', true);
|
||||
onOpen?.();
|
||||
},
|
||||
validate: async () => {
|
||||
return await validate();
|
||||
},
|
||||
}),
|
||||
[getState, onChange]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setState('getFormMethods', () => formMethods);
|
||||
}, [formMethods]);
|
||||
|
||||
return (
|
||||
<FormProvider {...formMethods}>
|
||||
{typeof wrapper === 'function' ? (
|
||||
wrapper(<FormerLayout>{props.children}</FormerLayout>, opened, onClose, onOpen, getState)
|
||||
) : (
|
||||
<FormerLayout>{props.children || null}</FormerLayout>
|
||||
)}
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export const Former = forwardRef<FormerRef<any>, FormerProps<any> & PropsWithChildren>(
|
||||
function Former<T extends FieldValues = any>(
|
||||
props: FormerProps<T> & PropsWithChildren<T>,
|
||||
ref: any
|
||||
) {
|
||||
//if opened is false and wrapper is defined as function, do not render anything
|
||||
if (!props.opened && typeof props.wrapper === 'function') {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<FormerProvider {...props}>
|
||||
<FormerInner ref={ref}>{props.children}</FormerInner>
|
||||
</FormerProvider>
|
||||
);
|
||||
}
|
||||
);
|
||||
73
src/Former/Former.types.ts
Normal file
73
src/Former/Former.types.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import type { LoadingOverlayProps, ScrollAreaAutosizeProps } from '@mantine/core';
|
||||
import type { FieldValues, UseFormProps, UseFormReturn } from 'react-hook-form';
|
||||
|
||||
export interface FormerProps<T extends FieldValues = any> {
|
||||
afterGet?: (data: T) => Promise<T> | void;
|
||||
afterSave?: (data: T) => Promise<void> | void;
|
||||
apiKeyField?: string;
|
||||
beforeSave?: (data: T) => Promise<T> | T;
|
||||
disableHTMlForm?: boolean;
|
||||
keepOpen?: boolean;
|
||||
onAPICall?: (
|
||||
mode: 'mutate' | 'read',
|
||||
request: RequestType,
|
||||
value?: T,
|
||||
key?: number | string
|
||||
) => Promise<T>;
|
||||
onCancel?: () => void;
|
||||
onChange?: (value: T) => void;
|
||||
onClose?: (data?: T) => void;
|
||||
onConfirmDelete?: (values?: T) => Promise<boolean>;
|
||||
onOpen?: (data?: T) => void;
|
||||
|
||||
opened?: boolean;
|
||||
primeData?: T;
|
||||
request: RequestType;
|
||||
useFormProps?: UseFormProps<T>;
|
||||
values?: T;
|
||||
wrapper?: (
|
||||
children: React.ReactNode,
|
||||
opened: boolean | undefined,
|
||||
onClose: ((data?: T) => void) | undefined,
|
||||
onOpen: ((data?: T) => void) | undefined,
|
||||
getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K]
|
||||
) => React.ReactNode;
|
||||
}
|
||||
|
||||
export interface FormerRef<T extends FieldValues = any> {
|
||||
close: () => Promise<void>;
|
||||
getValue: () => T | undefined;
|
||||
reset: () => void;
|
||||
save: () => Promise<T | undefined>;
|
||||
setValue: (value: T) => void;
|
||||
show: () => Promise<void>;
|
||||
validate: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
export interface FormerState<T extends FieldValues = any> {
|
||||
deleteConfirmed?: boolean;
|
||||
error?: string;
|
||||
getFormMethods?: () => UseFormReturn<any, any>;
|
||||
getState: <K extends keyof FormStateAndProps<T>>(key: K) => FormStateAndProps<T>[K];
|
||||
load: (reset?: boolean) => Promise<void>;
|
||||
loading?: boolean;
|
||||
loadingOverlayProps?: LoadingOverlayProps;
|
||||
reset: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
|
||||
save: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<T | undefined>;
|
||||
scrollAreaProps?: ScrollAreaAutosizeProps;
|
||||
setRequest: (request: RequestType) => void;
|
||||
setState: <K extends keyof FormStateAndProps<T>>(
|
||||
key: K,
|
||||
value: Partial<FormStateAndProps<T>>[K]
|
||||
) => void;
|
||||
setStateFN: <K extends keyof FormStateAndProps<T>>(
|
||||
key: K,
|
||||
value: (current: FormStateAndProps<T>[K]) => Partial<FormStateAndProps<T>[K]>
|
||||
) => Promise<void>;
|
||||
validate: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
export type FormStateAndProps<T extends FieldValues = any> = FormerProps<T> &
|
||||
Partial<FormerState<T>>;
|
||||
|
||||
export type RequestType = 'delete' | 'insert' | 'select' | 'update' | 'view';
|
||||
93
src/Former/FormerLayout.tsx
Normal file
93
src/Former/FormerLayout.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import { LoadingOverlay, ScrollAreaAutosize } from '@mantine/core';
|
||||
import { type PropsWithChildren, useEffect } from 'react';
|
||||
|
||||
import { useFormerStore } from './Former.store';
|
||||
|
||||
export const FormerLayout = (props: PropsWithChildren) => {
|
||||
const {
|
||||
disableHTMlForm,
|
||||
getFormMethods,
|
||||
load,
|
||||
loading,
|
||||
loadingOverlayProps,
|
||||
request,
|
||||
reset,
|
||||
save,
|
||||
scrollAreaProps,
|
||||
} = useFormerStore((state) => ({
|
||||
disableHTMlForm: state.disableHTMlForm,
|
||||
getFormMethods: state.getFormMethods,
|
||||
load: state.load,
|
||||
loading: state.loading,
|
||||
loadingOverlayProps: state.loadingOverlayProps,
|
||||
request: state.request,
|
||||
reset: state.reset,
|
||||
save: state.save,
|
||||
scrollAreaProps: state.scrollAreaProps,
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (getFormMethods) {
|
||||
const formMethods = getFormMethods();
|
||||
if (formMethods && request !== 'insert') {
|
||||
load(true);
|
||||
}
|
||||
}
|
||||
}, [getFormMethods, request]);
|
||||
|
||||
if (disableHTMlForm) {
|
||||
return (
|
||||
<ScrollAreaAutosize
|
||||
offsetScrollbars
|
||||
scrollbarSize={4}
|
||||
type="auto"
|
||||
{...scrollAreaProps}
|
||||
style={{
|
||||
height: '100%',
|
||||
maxHeight: '89vh',
|
||||
padding: '0.25rem',
|
||||
width: '100%',
|
||||
...scrollAreaProps?.style,
|
||||
}}
|
||||
>
|
||||
{props.children}
|
||||
<LoadingOverlay
|
||||
loaderProps={{ type: 'bars' }}
|
||||
overlayProps={{
|
||||
backgroundOpacity: 0.5,
|
||||
}}
|
||||
{...loadingOverlayProps}
|
||||
visible={loading}
|
||||
/>
|
||||
</ScrollAreaAutosize>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollAreaAutosize
|
||||
offsetScrollbars
|
||||
scrollbarSize={4}
|
||||
type="auto"
|
||||
{...scrollAreaProps}
|
||||
style={{
|
||||
height: '100%',
|
||||
maxHeight: '89vh',
|
||||
padding: '0.25rem',
|
||||
width: '100%',
|
||||
...scrollAreaProps?.style,
|
||||
}}
|
||||
>
|
||||
<form onReset={(e) => reset(e)} onSubmit={(e) => save(e)}>
|
||||
{props.children}
|
||||
<LoadingOverlay
|
||||
loaderProps={{ type: 'bars' }}
|
||||
overlayProps={{
|
||||
backgroundOpacity: 0.5,
|
||||
}}
|
||||
{...loadingOverlayProps}
|
||||
visible={loading}
|
||||
/>
|
||||
</form>
|
||||
</ScrollAreaAutosize>
|
||||
);
|
||||
};
|
||||
0
src/Former/index.ts
Normal file
0
src/Former/index.ts
Normal file
42
src/Former/stories/Gridler.goapi.stories.tsx
Normal file
42
src/Former/stories/Gridler.goapi.stories.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
//@ts-nocheck
|
||||
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||
|
||||
import { Box } from '@mantine/core';
|
||||
import { fn } from 'storybook/test';
|
||||
|
||||
import { FormTest } from './example';
|
||||
|
||||
const Renderable = (props: any) => {
|
||||
return (
|
||||
<Box h="100%" mih="400px" miw="400px" w="100%">
|
||||
<FormTest {...props} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const meta = {
|
||||
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
|
||||
args: { onClick: fn() },
|
||||
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
component: Renderable,
|
||||
parameters: {
|
||||
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
||||
//layout: 'centered',
|
||||
},
|
||||
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
||||
tags: ['autodocs'],
|
||||
title: 'Former/Former Basic',
|
||||
} satisfies Meta<typeof Renderable>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
||||
export const BasicExample: Story = {
|
||||
args: {
|
||||
label: 'Test',
|
||||
},
|
||||
};
|
||||
118
src/Former/stories/example.tsx
Normal file
118
src/Former/stories/example.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import { Button, Drawer, Group, Paper, Select, Stack, Switch } from '@mantine/core';
|
||||
import { useRef, useState } from 'react';
|
||||
import { Controller } from 'react-hook-form';
|
||||
|
||||
import type { FormerRef } from '../Former.types';
|
||||
|
||||
import { Former } from '../Former';
|
||||
|
||||
export const FormTest = () => {
|
||||
const [request, setRequest] = useState<null | string>('insert');
|
||||
const [wrapped, setWrapped] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [formData, setFormData] = useState({ a: 99 });
|
||||
console.log('formData', formData);
|
||||
|
||||
const ref = useRef<FormerRef>(null);
|
||||
return (
|
||||
<Stack h="100%" mih="400px" w="90%">
|
||||
<Select
|
||||
data={['insert', 'update', 'delete', 'select', 'view']}
|
||||
onChange={setRequest}
|
||||
value={request}
|
||||
/>
|
||||
<Switch
|
||||
checked={wrapped}
|
||||
label="Wrapped in Drawer"
|
||||
onChange={(event) => setWrapped(event.currentTarget.checked)}
|
||||
/>
|
||||
<Button onClick={() => setOpen(true)}>Open Former Drawer</Button>
|
||||
<Group>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const valid = await ref.current?.validate();
|
||||
console.log('validate -> ', valid, ref.current);
|
||||
}}
|
||||
>
|
||||
Test Ref Values. See console
|
||||
</Button>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
setTimeout(() => {
|
||||
ref.current?.close?.();
|
||||
}, 3000);
|
||||
}}
|
||||
>
|
||||
Test Show/Hide
|
||||
</Button>
|
||||
</Group>
|
||||
<Former
|
||||
//wrapper={(children, getState) => <div>{children}</div>}
|
||||
//opened={true}
|
||||
apiKeyField="a"
|
||||
onAPICall={(mode, request, value) => {
|
||||
console.log('API Call', mode, request, value);
|
||||
if (mode === 'read') {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ a: 'Another Value', test: 'Loaded Value' });
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(value || {});
|
||||
}, 1000);
|
||||
});
|
||||
}}
|
||||
onChange={setFormData}
|
||||
onClose={() => setOpen(false)}
|
||||
opened={open}
|
||||
primeData={{ a: '66', test: 'primed' }}
|
||||
ref={ref}
|
||||
request={request as any}
|
||||
useFormProps={{ criteriaMode: 'all', shouldUseNativeValidation: false }}
|
||||
values={formData}
|
||||
wrapper={
|
||||
wrapped
|
||||
? (children, opened, onClose, onOpen, getState) => {
|
||||
const values = getState('values');
|
||||
return (
|
||||
<Drawer
|
||||
h={'100%'}
|
||||
onClose={() => onClose?.()}
|
||||
opened={opened ?? false}
|
||||
title={`Drawer Former - Current A Value: ${values?.a}`}
|
||||
w={'50%'}
|
||||
>
|
||||
<Paper h="100%" shadow="sm" w="100%" withBorder>
|
||||
{children}
|
||||
<Button>Test Save</Button>
|
||||
</Paper>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Stack h="1200px">
|
||||
<Stack>
|
||||
<Controller
|
||||
name="test"
|
||||
render={({ field }) => <input type="text" {...field} placeholder="A" />}
|
||||
/>
|
||||
<Controller
|
||||
name="a"
|
||||
render={({ field }) => <input type="text" {...field} placeholder="B" />}
|
||||
rules={{ required: 'Field is required' }}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack>
|
||||
<button type="submit">Submit</button>
|
||||
<button type="reset">Reset</button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Former>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
11
src/Former/todo.md
Normal file
11
src/Former/todo.md
Normal file
@@ -0,0 +1,11 @@
|
||||
- [ ] Headerspec API
|
||||
- [ ] Relspec API
|
||||
- [ ] SocketSpec API
|
||||
- [ ] Layout Tool
|
||||
- [ ] Header Section
|
||||
- [ ] Button Section
|
||||
- [ ] Footer Section
|
||||
- [ ] Different Loaded for saving vs loading
|
||||
- [ ] Better Confirm Dialog
|
||||
- [ ] Reset Confirm Dialog
|
||||
- [ ] Request insert and save but keep open (must clear key from API, also add callback)
|
||||
Reference in New Issue
Block a user