Merge pull request #52 from agentlab/issue-51-base-table-visibility-s…

…ettings GH-51 Fix column visibility settings
agentlab · Dec 31, 2021 · 917499e · 917499e
2 parents 8104f03 + ce71405
commit 917499e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 150 deletions.
diff --git a/src/BaseTable/hooks/useColumns.tsx b/src/BaseTable/hooks/useColumns.tsx
@@ -41,7 +41,7 @@ export const useColumns = ({
       }),
     [schemaProperties, viewKind, viewKindElement, viewDescr, viewDescrElement],
   );
-  //говно - надо поменять
+
   const setColumnsVisible = useCallback(
     (idxs: any) =>
       setVisibleColumns((prevVisibleColumns: any) => {
@@ -56,8 +56,8 @@ export const useColumns = ({
   );
 
   const menuItems = useMemo(
-    () => getConfigMenuItems({ columns: parsedColumns, setColumnsVisible }),
-    [parsedColumns, setColumnsVisible],
+    () => getConfigMenuItems({ columns: visibleColumns, setColumnsVisible }),
+    [visibleColumns, setColumnsVisible],
   );
   const systemColumn = useMemo(() => getSystemColumn({ menuItems }), [menuItems]);
   const selectionColumn = useMemo(

diff --git a/src/BaseTable/utils/createColumn.tsx b/src/BaseTable/utils/createColumn.tsx
@@ -4,6 +4,7 @@ import { JsObject } from '@agentlab/sparql-jsld-client';
 import { EditableCell } from '../components/cells/EditableTableCell';
 import { createViewKindElement } from './createViewKindElement';
 import { getColumnFilterProps } from './getFilterColumnProps';
+import isEmpty from 'lodash/isEmpty';
 
 type Props = {
   property: string;
@@ -23,11 +24,13 @@ export const createColumn = ({
   viewDescr,
   viewDescrElement,
 }: Props) => {
+  const order = viewKindElement?.options?.order || [];
   const options = viewKindElement?.options?.[property] || {};
+  const disabled = (isEmpty(options) && !order.includes(property)) || !!options?.disabled;
   const newColumn: JsObject = {
     editable: false,
     hidden: false,
-    disabled: false,
+    disabled,
     width: 200,
     resizable: true,
     title: propertySchema.title || property,

diff --git a/stories/TableRemoteMktp.stories.tsx b/stories/TableRemoteMktp.stories.tsx
@@ -114,39 +114,7 @@ const viewKinds = [
               resizeableHeader: true,
               style: { height: '100%' },
               multiSelect: true,
-              order: [
-                'imageUrl',
-                'name',
-                'amountValueMoving30',
-                'commentsCount',
-                'price',
-                /*'saleValue',
-                'categoryPopularity',
-                'starsValue',
-                'questionsCount',
-                'lastMonthSalesAmount',
-                'lastMonthSalesValue',
-                'perMonthSalesAmount',
-                'perMonthSalesValue',
-                'prevMonthSalesAmount',
-                'prevMonthSalesValue',
-                'salesAmountDiff',
-                'totalSales',
-                'totalSalesDiff',
-                'stocks',
-                'stocksDiffOrders',
-                'stocksDiffReturns',
-                'country',
-                'brand',
-                'seller',
-                'identifier',
-                'rootId',
-                'photosCount',
-                'firstParsedAt',
-                'lastMonthParsedAt',
-                'parsedAt',
-                'prevParsedAt',*/
-              ],
+              order: ['imageUrl', 'name', 'amountValueMoving30', 'commentsCount', 'price'],
               imageUrl: {
                 width: 100,
                 formatter: 'image',
@@ -174,124 +142,13 @@ const viewKinds = [
                 sortable: true,
                 editable: false,
               },
-              /*identifier: {
+              identifier: {
                 formatter: 'link',
                 //dataToFormatter: { link: 'identifier' },
                 sortable: true,
                 editable: false,
+                disabled: true,
               },
-              country: {
-                width: 60,
-                sortable: true,
-                editable: false,
-              },
-              brand: {
-                formatter: 'link',
-                sortable: true,
-                editable: false,
-              },
-              saleValue: {
-                width: 60,
-                sortable: true,
-                editable: false,
-              },
-              seller: {
-                formatter: 'link',
-                sortable: true,
-                editable: false,
-              },
-              categoryPopularity: {
-                width: 100,
-                editable: false,
-              },
-              starsValue: {
-                width: 100,
-                sortable: true,
-                editable: false,
-              },
-              questionsCount: {
-                width: 100,
-                sortable: true,
-                editable: false,
-              },
-              lastMonthSalesAmount: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              lastMonthSalesValue: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              perMonthSalesAmount: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              perMonthSalesValue: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              prevMonthSalesAmount: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              prevMonthSalesValue: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              salesAmountDiff: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              totalSales: {
-                width: 100,
-                sortable: true,
-                editable: false,
-              },
-              totalSalesDiff: {
-                width: 150,
-                sortable: true,
-                editable: false,
-              },
-              stocks: {
-                width: 100,
-                sortable: true,
-                editable: false,
-              },
-              stocksDiffOrders: {
-                width: 100,
-                sortable: true,
-                editable: false,
-              },
-              stocksDiffReturns: {
-                width: 100,
-                sortable: true,
-                editable: false,
-              },
-              rootId: {
-                editable: false,
-              },
-              photosCount: {
-                editable: false,
-              },
-              firstParsedAt: {
-                editable: false,
-              },
-              lastMonthParsedAt: {
-                editable: false,
-              },
-              parsedAt: {
-                editable: false,
-              },
-              prevParsedAt: {
-                editable: false,
-              },*/
             },
           },
         ],