119 lines
4.1 KiB
TypeScript
119 lines
4.1 KiB
TypeScript
import { useState } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { Modal } from '../components/reusable';
|
|
import { StoresView } from '../components/rv';
|
|
import { StoreDetail } from '../components/dv';
|
|
|
|
import { Store } from 'lucide-react';
|
|
import { DynamicForm } from '../components/forms/DynamicForm';
|
|
import { STORE } from '../api/config';
|
|
import { storeClient } from '../api/clients';
|
|
|
|
export function StoresPage() {
|
|
const params = useParams();
|
|
const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
|
|
const navigate = useNavigate();
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [createTitle, setCreateTitle] = useState("Create Store");
|
|
const [editingInstanceId, setEditingInstanceId] = useState<number | string | null>(null);
|
|
const [editTitle, setEditTitle] = useState("Edit Store");
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|
|
|
if (instanceId != null && !isCreating) {
|
|
return (
|
|
<div className="flex flex-col h-full bg-transparent w-full relative">
|
|
<div className="flex-1 pb-24 w-full overflow-y-auto">
|
|
<StoreDetail instanceId={instanceId} onBack={() => navigate(`/stores`)} />
|
|
</div>
|
|
|
|
{/* Edit store modal can still open over the detail view if needed */}
|
|
<Modal
|
|
open={editingInstanceId != null}
|
|
onClose={() => setEditingInstanceId(null)}
|
|
title={editTitle}
|
|
width="md"
|
|
>
|
|
{editingInstanceId != null && (
|
|
<DynamicForm
|
|
client={storeClient}
|
|
activityId={STORE.activities.EDIT_STORE.uid}
|
|
instanceId={editingInstanceId}
|
|
onSuccess={() => {
|
|
setEditingInstanceId(null);
|
|
setRefreshKey(k => k + 1);
|
|
}}
|
|
onCancel={() => setEditingInstanceId(null)}
|
|
onActivityChange={(name) => setEditTitle(name)}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-transparent w-full relative">
|
|
<div className="flex-1 overflow-y-auto pb-24">
|
|
<StoresView
|
|
refreshKey={refreshKey}
|
|
onRowClick={(row) => {
|
|
const id = row.instance_id as number | string | undefined;
|
|
if (id != null) navigate(`/stores/${id}`);
|
|
}}
|
|
onEditRow={(row) => {
|
|
setEditingInstanceId(row.instance_id as string | number);
|
|
setEditTitle("Edit Store");
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Global Floating Action Button for Create Store */}
|
|
<button
|
|
onClick={() => { setIsCreating(true); setCreateTitle("Create Store"); }}
|
|
className="fixed bottom-24 right-6 w-[60px] h-[60px] bg-primary rounded-3xl flex items-center justify-center shadow-lg text-white z-40 hover:opacity-90 transition-transform hover:scale-105 active:scale-95 cursor-pointer"
|
|
>
|
|
<Store size={24} className="text-white" />
|
|
</button>
|
|
|
|
<Modal
|
|
open={isCreating}
|
|
onClose={() => setIsCreating(false)}
|
|
title={createTitle}
|
|
width="md"
|
|
>
|
|
<DynamicForm
|
|
client={storeClient}
|
|
activityId={STORE.activities.INIT.uid}
|
|
onSuccess={() => {
|
|
setIsCreating(false);
|
|
setRefreshKey(k => k + 1);
|
|
}}
|
|
onCancel={() => setIsCreating(false)}
|
|
onActivityChange={(name) => setCreateTitle(name)}
|
|
/>
|
|
</Modal>
|
|
|
|
<Modal
|
|
open={editingInstanceId != null}
|
|
onClose={() => setEditingInstanceId(null)}
|
|
title={editTitle}
|
|
width="md"
|
|
>
|
|
{editingInstanceId != null && (
|
|
<DynamicForm
|
|
client={storeClient}
|
|
activityId={STORE.activities.EDIT_STORE.uid}
|
|
instanceId={editingInstanceId}
|
|
onSuccess={() => {
|
|
setEditingInstanceId(null);
|
|
setRefreshKey(k => k + 1);
|
|
}}
|
|
onCancel={() => setEditingInstanceId(null)}
|
|
onActivityChange={(name) => setEditTitle(name)}
|
|
/>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|