feat(app): route selected documents into workspace views
This commit is contained in:
+25
-10
@@ -24,12 +24,18 @@ const appDocuments: TDocumentRow[] = [
|
||||
|
||||
const isWorkspaceView = (view: string): view is TWorkspaceView => workspaceViews.includes(view as TWorkspaceView);
|
||||
|
||||
const viewFromLocation = (): TWorkspaceView => {
|
||||
const view = globalThis.location.hash.replace(/^#/, '');
|
||||
return isWorkspaceView(view) ? view : 'inbox';
|
||||
const routeFromLocation = (): { view: TWorkspaceView; documentId: string } => {
|
||||
const [view = '', documentId = ''] = globalThis.location.hash.replace(/^#/, '').split(':');
|
||||
return { view: isWorkspaceView(view) ? view : 'inbox', documentId };
|
||||
};
|
||||
|
||||
let currentView = viewFromLocation();
|
||||
const hashForRoute = (view: TWorkspaceView, documentId = ''): string => {
|
||||
return documentId && (view === 'sign' || view === 'audit') ? `#${view}:${documentId}` : `#${view}`;
|
||||
};
|
||||
|
||||
let currentRoute = routeFromLocation();
|
||||
let currentView = currentRoute.view;
|
||||
let activeDocumentId = currentRoute.documentId;
|
||||
let appRoot: HTMLElement | null = null;
|
||||
let routeChangeFrame: number | null = null;
|
||||
|
||||
@@ -44,19 +50,25 @@ const handleViewChange = (event: Event) => {
|
||||
const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
|
||||
if (!view || !isWorkspaceView(view)) return;
|
||||
currentView = view;
|
||||
const nextHash = `#${view}`;
|
||||
const nextHash = hashForRoute(view, activeDocumentId);
|
||||
if (globalThis.location.hash !== nextHash) {
|
||||
globalThis.location.hash = view;
|
||||
globalThis.location.hash = nextHash.slice(1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDocumentOpen = (event: Event) => {
|
||||
const document = (event as CustomEvent<{ document?: TDocumentRow }>).detail?.document;
|
||||
if (!document) return;
|
||||
activeDocumentId = document.id;
|
||||
};
|
||||
|
||||
const handleWorkspaceViewRequest = (event: Event) => {
|
||||
const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
|
||||
if (!view || !isWorkspaceView(view)) return;
|
||||
currentView = view;
|
||||
const nextHash = `#${view}`;
|
||||
const nextHash = hashForRoute(view, activeDocumentId);
|
||||
if (globalThis.location.hash !== nextHash) {
|
||||
globalThis.location.hash = view;
|
||||
globalThis.location.hash = nextHash.slice(1);
|
||||
} else {
|
||||
renderApp();
|
||||
}
|
||||
@@ -68,7 +80,9 @@ const handleRouteChange = () => {
|
||||
}
|
||||
routeChangeFrame = globalThis.requestAnimationFrame(() => {
|
||||
routeChangeFrame = null;
|
||||
currentView = viewFromLocation();
|
||||
currentRoute = routeFromLocation();
|
||||
currentView = currentRoute.view;
|
||||
activeDocumentId = currentRoute.documentId;
|
||||
renderApp();
|
||||
});
|
||||
};
|
||||
@@ -96,7 +110,7 @@ const renderApp = () => {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark" initialView=${currentView} .initialView=${currentView} view=${currentView} .view=${currentView} .documents=${appDocuments}></sdig-workspace>
|
||||
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark" initialView=${currentView} .initialView=${currentView} view=${currentView} .view=${currentView} activeDocumentId=${activeDocumentId} .activeDocumentId=${activeDocumentId} .documents=${appDocuments}></sdig-workspace>
|
||||
`,
|
||||
appRoot!
|
||||
);
|
||||
@@ -105,6 +119,7 @@ const renderApp = () => {
|
||||
const run = async () => {
|
||||
createAppRoot();
|
||||
document.body.addEventListener('view-change', handleViewChange);
|
||||
document.body.addEventListener('document-open', handleDocumentOpen);
|
||||
document.body.addEventListener('workspace-view-request', handleWorkspaceViewRequest);
|
||||
globalThis.addEventListener('popstate', handleRouteChange);
|
||||
globalThis.addEventListener('hashchange', handleRouteChange);
|
||||
|
||||
Reference in New Issue
Block a user