feat: mobile edit-as-default with sticky save/delete actions
- Update MobileEditView to render Save and optional Delete in a sticky bottom action bar; header now shows Cancel + title only. - Make ConfigProfilesMobileView open edit view on profile tap. - Make ToolWorkshopMobileView open edit view on tool type tap. - Wire delete into MobileEditView for existing profiles and tool types. - Stay on edit view after saving an existing item; create flow returns to list as before. - Update ToolWorkshopPage cancel to return to list. - Add mobile-edit-actions and mobile-edit-delete CSS. Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed) Refs: openspec/changes/mobile-edit-default-bottom-actions
This commit is contained in:
@@ -16,6 +16,8 @@ interface MobileEditViewProps {
|
||||
fields?: FormField[];
|
||||
onSave: (data: Record<string, string | number | boolean>) => void;
|
||||
onCancel: () => void;
|
||||
onDelete?: () => void;
|
||||
deleteLabel?: string;
|
||||
isSaving?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
@@ -25,6 +27,8 @@ export const MobileEditView: React.FC<MobileEditViewProps> = ({
|
||||
fields,
|
||||
onSave,
|
||||
onCancel,
|
||||
onDelete,
|
||||
deleteLabel = "Delete",
|
||||
isSaving = false,
|
||||
children,
|
||||
}) => {
|
||||
@@ -59,14 +63,7 @@ export const MobileEditView: React.FC<MobileEditViewProps> = ({
|
||||
Cancel
|
||||
</button>
|
||||
<h1 className="mobile-edit-title">{title}</h1>
|
||||
<button
|
||||
className="mobile-edit-save"
|
||||
onClick={() => onSave(formData)}
|
||||
type="button"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<div style={{ width: "4rem" }} />
|
||||
</header>
|
||||
|
||||
<form className="mobile-edit-form" onSubmit={handleSubmit}>
|
||||
@@ -156,6 +153,27 @@ export const MobileEditView: React.FC<MobileEditViewProps> = ({
|
||||
</div>
|
||||
))}
|
||||
</form>
|
||||
|
||||
<div className="mobile-edit-actions">
|
||||
<button
|
||||
className="mobile-edit-save"
|
||||
onClick={() => onSave(formData)}
|
||||
type="button"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? "Saving..." : "Save"}
|
||||
</button>
|
||||
{onDelete && (
|
||||
<button
|
||||
className="mobile-edit-delete"
|
||||
onClick={onDelete}
|
||||
type="button"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{deleteLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user