fixes

alchemy-fr · Apr 10, 2024 · 2798f7c · 2798f7c
1 parent 5bd44d4
commit 2798f7c
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 76 deletions.
diff --git a/databox/client/src/components/AssetList/Layouts/Grid/GridPage.tsx b/databox/client/src/components/AssetList/Layouts/Grid/GridPage.tsx
@@ -28,7 +28,7 @@ function GridPage<Item extends AssetOrAssetContainer>({
             {page > 1 && (
                 <SectionDivider
                     top={toolbarHeight}
-                    textStyle={() => ({
+                    textSx={() => ({
                         fontWeight: 700,
                         fontSize: 15,
                     })}

diff --git a/databox/client/src/components/AssetList/Layouts/GroupDivider.tsx b/databox/client/src/components/AssetList/Layouts/GroupDivider.tsx
@@ -13,16 +13,22 @@ import {getAttributeType} from '../../Media/Asset/Attribute/types';
 type Props = PropsWithChildren<{
     groupValue: GroupValue;
     top?: number | undefined;
+    page?: number | undefined;
 }>;
 
-export default function GroupDivider({groupValue, top}: Props) {
+export default function GroupDivider({
+    groupValue,
+    top,
+    page,
+}: Props) {
     const formatContext = React.useContext(AttributeFormatContext);
 
     const {values, type, name} = groupValue;
 
     return (
         <SectionDivider
             dividerSx={{
+                pointerEvents: 'auto',
                 [`.${assetClasses.toggleFormat}`]: {
                     display: 'none',
                     position: 'absolute',
@@ -44,6 +50,9 @@ export default function GroupDivider({groupValue, top}: Props) {
             }}
             top={top}
         >
+            {page ? <>
+                # {page}{' - '}
+            </> : ''}
             {formatContext.hasFormats(type) && (
                 <IconButton
                     className={assetClasses.toggleFormat}

diff --git a/databox/client/src/components/AssetList/Layouts/List/ListLayout.tsx b/databox/client/src/components/AssetList/Layouts/List/ListLayout.tsx
@@ -22,10 +22,10 @@ import {menuHeight} from '../../../Layout/MainAppBar.tsx';
 import {useWindowSize} from '@alchemy/react-hooks/src/useWindowSize.ts';
 import {CellMeasurerCache} from 'react-virtualized/dist/es/CellMeasurer';
 import LoadMoreButton from '../../LoadMoreButton.tsx';
-import SectionDivider from '../../SectionDivider.tsx';
 import {thumbSx} from '../../../Media/Asset/AssetThumb.tsx';
 import {ScrollParams} from 'react-virtualized/dist/es/Grid';
 import VirtualizedGroups from '../VirtualizedGroups.tsx';
+import PageDivider from "../../PageDivider.tsx";
 
 export default function ListLayout<Item extends AssetOrAssetContainer>({
     toolbarHeight,
@@ -142,6 +142,14 @@ export default function ListLayout<Item extends AssetOrAssetContainer>({
                         // @ts-expect-error Element | undefined
                         ref={registerChild}
                     >
+                        {page > 0 && pageIndex === 0 ? (
+                            <PageDivider
+                                top={toolbarHeight}
+                                page={page + 1}
+                            />
+                        ) : (
+                            ''
+                        )}
                         <GroupRow asset={asset} top={0}>
                             <div
                                 onDoubleClick={
@@ -156,19 +164,6 @@ export default function ListLayout<Item extends AssetOrAssetContainer>({
                                         : undefined
                                 }
                             >
-                                {page > 0 && pageIndex === 0 ? (
-                                    <SectionDivider
-                                        top={toolbarHeight}
-                                        textStyle={() => ({
-                                            fontWeight: 700,
-                                            fontSize: 15,
-                                        })}
-                                    >
-                                        # {page + 1}
-                                    </SectionDivider>
-                                ) : (
-                                    ''
-                                )}
                                 <AssetItem
                                     asset={asset}
                                     itemComponent={itemComponent}
@@ -233,8 +228,9 @@ export default function ListLayout<Item extends AssetOrAssetContainer>({
                             onScroll={onScroll}
                         />
 
-                        {hasGroups ? (
+                        {pages.length > 1 || hasGroups ? (
                             <VirtualizedGroups
+                                hasGroups={hasGroups}
                                 ref={headersRef}
                                 height={height}
                                 cellMeasurer={cellMeasurer}

diff --git a/databox/client/src/components/AssetList/Layouts/List/ListPage.tsx b/databox/client/src/components/AssetList/Layouts/List/ListPage.tsx
@@ -29,7 +29,7 @@ function ListPage<Item extends AssetOrAssetContainer>({
             {page > 1 && (
                 <SectionDivider
                     top={toolbarHeight}
-                    textStyle={() => ({
+                    textSx={() => ({
                         fontWeight: 700,
                         fontSize: 15,
                     })}

diff --git a/databox/client/src/components/AssetList/Layouts/VirtualizedGroups.tsx b/databox/client/src/components/AssetList/Layouts/VirtualizedGroups.tsx
@@ -1,50 +1,61 @@
-import React, {ForwardedRef, ReactNode, RefObject} from 'react';
+import React, {ForwardedRef, RefObject} from 'react';
 import {Asset, AssetOrAssetContainer, GroupValue} from '../../../types';
 import {ItemToAssetFunc} from '../types.ts';
 import GroupDivider from './GroupDivider.tsx';
 import {CellMeasurerCache} from 'react-virtualized';
+import PageDivider from "../PageDivider.tsx";
 
 type GroupSet = {
     index: number;
     value: GroupValue;
     key: string | null;
 };
 
+type Position = {
+    page?: number;
+    group?: GroupValue;
+    height?: number;
+}
+
 type Props<Item extends AssetOrAssetContainer> = {
     pages: Item[][];
     itemToAsset: ItemToAssetFunc<Item> | undefined;
     cellMeasurer: CellMeasurerCache;
     height: number;
+    hasGroups: boolean;
 };
 
 export default React.forwardRef<HTMLDivElement, Props<any>>(
     function VirtualizedGroups<Item extends AssetOrAssetContainer>(
-        {pages, height, itemToAsset, cellMeasurer}: Props<Item>,
+        {pages, height, itemToAsset, cellMeasurer, hasGroups}: Props<Item>,
         ref: ForwardedRef<HTMLDivElement>
     ) {
         const [_inc, setInc] = React.useState(0);
-        const {groups, rowCount} = React.useMemo(() => {
+        const {groups, rowCount, perPage} = React.useMemo(() => {
             const groups: GroupSet[] = [];
-
+            const perPage = pages[0]?.length ?? 0;
             const all = pages.flat();
             const rowCount = all.length;
-            all.map((item, index) => {
-                const asset: Asset = itemToAsset
-                    ? itemToAsset(item)
-                    : (item as unknown as Asset);
-
-                const {groupValue} = asset;
-
-                if (groupValue) {
-                    groups.push({
-                        value: groupValue,
-                        key: groupValue.key,
-                        index,
-                    });
-                }
-            });
 
-            return {groups, rowCount};
+            if (hasGroups) {
+                all.map((item, index) => {
+                    const asset: Asset = itemToAsset
+                        ? itemToAsset(item)
+                        : (item as unknown as Asset);
+
+                    const {groupValue} = asset;
+
+                    if (groupValue) {
+                        groups.push({
+                            value: groupValue,
+                            key: groupValue.key,
+                            index,
+                        });
+                    }
+                });
+            }
+
+            return {groups, rowCount, perPage};
         }, [pages, cellMeasurer]);
 
         React.useEffect(() => {
@@ -65,35 +76,40 @@ export default React.forwardRef<HTMLDivElement, Props<any>>(
             };
         }, [ref]);
 
-        const divs: ReactNode[] = [];
-        let groupIndex = 0;
-        let i = 0;
-        while (groups[groupIndex] && i < rowCount) {
-            let nextHeight: number | undefined = undefined;
-
-            const g = groups[groupIndex];
-            const nextGroup = groups[groupIndex + 1];
-            if (nextGroup) {
-                while (i < nextGroup.index) {
-                    nextHeight =
-                        (nextHeight ?? 0) + cellMeasurer.rowHeight({index: i});
-                    i++;
+        const positions: Position[] = [{}];
+        let groupCursor = 0;
+        let currentGroup: GroupSet | undefined = groups[groupCursor];
+        let currPos: Position = positions[0];
+
+        const flush = () => {
+            currPos.height ??= 0;
+            positions.push({...currPos});
+            currPos = {};
+        }
+
+        let currentPage : number | undefined;
+        for (let i = 0; i < rowCount; i++) {
+            const isNewGroup = currentGroup && i === currentGroup.index;
+            if (isNewGroup) {
+                flush();
+                currPos.group = currentGroup.value;
+                if (currentPage) {
+                    currPos.page = currentPage;
                 }
+                ++groupCursor;
+                currentGroup = groups[groupCursor];
             }
 
-            divs.push(
-                <div
-                    key={g.value.key || '__null'}
-                    style={{height: nextHeight ?? '100vh'}}
-                >
-                    <GroupDivider groupValue={g.value} top={0} />
-                </div>
-            );
+            if (i > 0 && (i % perPage) === 0) {
+                if (!isNewGroup) {
+                    flush();
+                }
 
-            if (groupIndex === groups.length - 1) {
-                break;
+                currentPage = Math.floor(i / perPage) + 1;
+                currPos.page = currentPage;
             }
-            groupIndex++;
+
+            currPos.height = (currPos.height ?? 0) + cellMeasurer.rowHeight({index: i});
         }
 
         return (
@@ -102,7 +118,7 @@ export default React.forwardRef<HTMLDivElement, Props<any>>(
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    right: 0,
+                    right: 10,
                     pointerEvents: 'none',
                 }}
             >
@@ -114,7 +130,22 @@ export default React.forwardRef<HTMLDivElement, Props<any>>(
                     }}
                     ref={ref}
                 >
-                    {divs}
+                    {positions.map((p, index) => <div
+                        key={index}
+                        style={{
+                            height: p.height ?? '100vh',
+                        }}
+                    >
+                        {p.page && !p.group ? <PageDivider
+                            page={p.page}
+                            top={0}
+                        /> : ''}
+                        {p.group ? <GroupDivider
+                            groupValue={p.group}
+                            top={0}
+                            page={p.page}
+                        /> : ''}
+                    </div>)}
                 </div>
             </div>
         );

diff --git a/databox/client/src/components/AssetList/PageDivider.tsx b/databox/client/src/components/AssetList/PageDivider.tsx
@@ -0,0 +1,22 @@
+import SectionDivider from "./SectionDivider.tsx";
+
+type Props = {
+    page: number;
+    top?: number;
+};
+
+export default function PageDivider({
+    page,
+    top,
+}: Props) {
+
+    return <SectionDivider
+        top={top}
+        textSx={() => ({
+            fontWeight: 700,
+            fontSize: 15,
+        })}
+    >
+        # {page}
+    </SectionDivider>
+}
diff --git a/databox/client/src/components/AssetList/SectionDivider.tsx b/databox/client/src/components/AssetList/SectionDivider.tsx
@@ -20,17 +20,17 @@ function applyStyle(
 export const sectionDividerClassname = 'section-divider';
 
 type Props = PropsWithChildren<{
-    textStyle?: (theme: Theme) => CSSProperties;
-    rootStyle?: (theme: Theme) => CSSProperties;
+    textSx?: (theme: Theme) => CSSProperties;
+    rootSx?: (theme: Theme) => CSSProperties;
     dividerSx?: SxProps;
     top: number | undefined;
 }>;
 
 export default function SectionDivider({
     top,
     children,
-    rootStyle,
-    textStyle,
+    rootSx,
+    textSx,
     dividerSx,
 }: Props) {
     const theme = useTheme();
@@ -45,11 +45,14 @@ export default function SectionDivider({
                     top,
                     backgroundColor: theme.palette.common.white,
                 },
-                rootStyle
+                rootSx
             )}
             className={sectionDividerClassname}
         >
-            <Divider textAlign={'left'} sx={dividerSx}>
+            <Divider
+                textAlign={'left'}
+                sx={dividerSx}
+            >
                 <div
                     style={applyStyle(
                         theme,
@@ -58,7 +61,7 @@ export default function SectionDivider({
                             paddingTop: theme.spacing(1),
                             paddingBottom: theme.spacing(1),
                         },
-                        textStyle
+                        textSx
                     )}
                 >
                     {children}

diff --git a/databox/client/src/components/Basket/BasketMenuItem.tsx b/databox/client/src/components/Basket/BasketMenuItem.tsx
@@ -79,8 +79,8 @@ export default function BasketMenuItem({
                         primary={
                             data.titleHighlight
                                 ? replaceHighlight(data.titleHighlight)
-                                : data.title ||
-                                  t('basket.default.title', 'My Basket')
+                                : (data.title ||
+                                  t('basket.default.title', 'My Basket'))
                         }
                         secondary={
                             data.descriptionHighlight

diff --git a/databox/client/src/components/Basket/BasketsPanel.tsx b/databox/client/src/components/Basket/BasketsPanel.tsx
@@ -106,9 +106,7 @@ function BasketsPanel({selected}: Props) {
     const hasLOadMore = loadedSearchQuery ? !!searchResult.next : hasMore();
 
     const results = loadedSearchQuery
-        ? searchResult?.pages.flat().map(b => {
-              return baskets.find(_b => _b.id === b.id) || b;
-          })
+        ? searchResult?.pages.flat()
         : baskets;
 
     return (

diff --git a/databox/client/src/components/Form/BasketForm.tsx b/databox/client/src/components/Form/BasketForm.tsx
@@ -33,6 +33,7 @@ export const BasketForm: FC<FormProps<Basket>> = function ({
             <FormRow>
                 <TextField
                     rows={5}
+                    fullWidth={true}
                     multiline={true}
                     label={t('form.basket.description.label', 'Description')}
                     disabled={submitting}