Merge pull request #2514 from DenverCoder544/featuredata_compressed_l…

…ayout Featuredata compressed layout
oskariorg · Nov 17, 2023 · c7011e0 · c7011e0
2 parents 46ceb03 + 3421845
commit c7011e0
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 15 deletions.
diff --git a/bundles/framework/featuredata/plugin/FeatureDataPluginHandler.js b/bundles/framework/featuredata/plugin/FeatureDataPluginHandler.js
@@ -33,6 +33,7 @@ class FeatureDataPluginUIHandler extends StateHandler {
             flyoutOpen: false,
             activeLayerFeatures: null,
             showSelectedFirst: false,
+            showCompressed: true,
             loadingStatus: {},
             visibleColumnsSettings: {
                 allColumns: [],
@@ -91,6 +92,11 @@ class FeatureDataPluginUIHandler extends StateHandler {
         this.updateState(newState);
     }
 
+    toggleShowCompressed () {
+        const { showCompressed } = this.getState();
+        this.updateState({ showCompressed: !showCompressed });
+    }
+
     updateStateAfterMapEvent () {
         this.updateState(this.prepareFeaturesAndColumnSettingsForState());
     }
@@ -522,6 +528,7 @@ const wrapped = controllerMixin(FeatureDataPluginUIHandler, [
     'closeFlyout',
     'setActiveTab',
     'toggleShowSelectedFirst',
+    'toggleShowCompressed',
     'updateStateAfterMapEvent',
     'updateSelectedFeatures',
     'updateSorting',

diff --git a/bundles/framework/featuredata/resources/locale/en.js b/bundles/framework/featuredata/resources/locale/en.js
@@ -63,6 +63,7 @@ Oskari.registerLocalization(
                 }
             },
             "showSelectedFirst": "Show selected first",
+            "toggleCompressedView": "Condensed view",
             "selectionTools": {
                 "title": "Select Features",
                 "instructions": " ",

diff --git a/bundles/framework/featuredata/resources/locale/fi.js b/bundles/framework/featuredata/resources/locale/fi.js
@@ -63,6 +63,7 @@ Oskari.registerLocalization(
                 }
             },
             "showSelectedFirst": "Näytä valitut ensin",
+            "toggleCompressedView": "Tiivistetty näkymä",
             "selectionTools": {
                 "title": "Valitse kohteita",
                 "instructions": " ",

diff --git a/bundles/framework/featuredata/resources/locale/sv.js b/bundles/framework/featuredata/resources/locale/sv.js
@@ -63,6 +63,7 @@ Oskari.registerLocalization(
                 }
             },
             "showSelectedFirst": "Visa de valda först",
+            "toggleCompressedView": "Förtätad vy",
             "selectionTools": {
                 "title": "Markera objekt på kartan",
                 "instructions": " ",

diff --git a/bundles/framework/featuredata/view/CompressedView.jsx b/bundles/framework/featuredata/view/CompressedView.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Switch } from 'oskari-ui/components/Switch';
+import { FEATUREDATA_BUNDLE_ID } from './FeatureDataContainer';
+import { Message } from 'oskari-ui';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const CompressedViewContainer = styled('div')`
+`;
+export const CompressedView = (props) => {
+    return <CompressedViewContainer>
+        <Switch
+            size={'small'}
+            label={<Message bundleKey={FEATUREDATA_BUNDLE_ID} messageKey='toggleCompressedView'/>}
+            checked={ props.showCompressed }
+            defaultChecked = { true }
+            onChange={ () => { props.toggleShowCompressed(); } }/>
+    </CompressedViewContainer>;
+};
+CompressedView.propTypes = {
+    showCompressed: PropTypes.bool,
+    toggleShowCompressed: PropTypes.func
+};
diff --git a/bundles/framework/featuredata/view/FeatureDataContainer.jsx b/bundles/framework/featuredata/view/FeatureDataContainer.jsx
@@ -8,6 +8,7 @@ import { ShowSelectedItemsFirst } from './ShowSelectedItemsFirst';
 import { TabTitle } from './TabStatusIndicator';
 import { FilterVisibleColumns } from './FilterVisibleColumns';
 import { ExportButton } from './ExportData';
+import { CompressedView } from './CompressedView';
 
 export const FEATUREDATA_BUNDLE_ID = 'FeatureData';
 export const FEATUREDATA_WFS_STATUS = { loading: 'loading', error: 'error' };
@@ -35,6 +36,35 @@ const StyledTable = styled(Table)`
         display: none;
     }
 
+    td.table-cell-compressed-view {
+        white-space: nowrap;
+        word-break: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 3em;
+        max-width: 8em;
+    }
+
+    th.table-cell-compressed-view {
+        white-space: nowrap;
+        word-break: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 3em;
+        max-width: 8em;
+
+        span.ant-table-column-title {
+            max-width: 75%;
+            white-space: nowrap;
+            word-break: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        span.ant-table-column-sorter {
+            max-width: 25%;
+        }
+    }
+
     overflow-y: auto;
     flex: 1 1 auto;
 `;
@@ -51,11 +81,17 @@ const SelectionRow = styled('div')`
     flex-direction: row;
     padding-bottom: 1em;
 `;
-const createFeaturedataGrid = (features, selectedFeatureIds, showSelectedFirst, sorting, visibleColumnsSettings, showExportButton, controller) => {
+
+const SelectionRowGroup = styled('div')`
+    display: flex;
+    flex-direction: row;
+`;
+
+const createFeaturedataGrid = (features, selectedFeatureIds, showSelectedFirst, showCompressed, sorting, visibleColumnsSettings, showExportButton, controller) => {
     if (!features || !features.length) {
         return <Message bundleKey={FEATUREDATA_BUNDLE_ID} messageKey={'layer.outOfContentArea'}/>;
     };
-    const columnSettings = createColumnSettings(selectedFeatureIds, showSelectedFirst, sorting, visibleColumnsSettings);
+    const columnSettings = createColumnSettings(selectedFeatureIds, showSelectedFirst, showCompressed, sorting, visibleColumnsSettings);
     const dataSource = createDatasourceFromFeatures(features);
     const featureTable = <FeatureDataTable>
         <SelectionsContainer>
@@ -66,19 +102,25 @@ const createFeaturedataGrid = (features, selectedFeatureIds, showSelectedFirst,
                 </SelectionRow>
                 <SelectionRow>
                     <ShowSelectedItemsFirst showSelectedFirst={showSelectedFirst} toggleShowSelectedFirst={controller.toggleShowSelectedFirst}/>
+                    <CompressedView showCompressed={showCompressed} toggleShowCompressed={controller.toggleShowCompressed}/>
                 </SelectionRow>
             </>}
 
-            { !showExportButton &&
+            { !showExportButton && <>
                 <SelectionRow>
-                    <ShowSelectedItemsFirst showSelectedFirst={showSelectedFirst} toggleShowSelectedFirst={controller.toggleShowSelectedFirst}/>
+                    <SelectionRowGroup>
+                        <ShowSelectedItemsFirst showSelectedFirst={showSelectedFirst} toggleShowSelectedFirst={controller.toggleShowSelectedFirst}/>
+                        <CompressedView showCompressed={showCompressed} toggleShowCompressed={controller.toggleShowCompressed}/>
+                    </SelectionRowGroup>
                     <FilterVisibleColumns {...visibleColumnsSettings} updateVisibleColumns={controller.updateVisibleColumns}/>
                 </SelectionRow>
-            }
+                <SelectionRow>
+                </SelectionRow>
+            </>}
         </SelectionsContainer>
         <StyledTable
             columns={ columnSettings }
-            size={ 'large '}
+            size={ 'small'}
             dataSource={ dataSource }
             pagination={{ defaultPageSize: DEFAULT_PAGE_SIZE, hideOnSinglePage: true, simple: true }}
             onChange={(pagination, filters, sorter, extra) => {
@@ -97,13 +139,14 @@ const createFeaturedataGrid = (features, selectedFeatureIds, showSelectedFirst,
     return featureTable;
 };
 
-const createColumnSettings = (selectedFeatureIds, showSelectedFirst, sorting, visibleColumnsSettings) => {
+const createColumnSettings = (selectedFeatureIds, showSelectedFirst, showCompressed, sorting, visibleColumnsSettings) => {
     const { allColumns, visibleColumns, activeLayerPropertyLabels } = visibleColumnsSettings;
     return allColumns
         .filter(key => visibleColumns.includes(key))
         .map(key => {
             return {
                 align: 'left',
+                className: showCompressed ? 'table-cell-compressed-view' : '',
                 title: activeLayerPropertyLabels && activeLayerPropertyLabels[key] ? activeLayerPropertyLabels[key] : key,
                 key,
                 dataIndex: key,
@@ -136,7 +179,7 @@ const createDatasourceFromFeatures = (features) => {
     });
 };
 
-const createLayerTabs = (layerId, layers, features, selectedFeatureIds, showSelectedFirst, sorting, loadingStatus, visibleColumnsSettings, controller) => {
+const createLayerTabs = (layerId, layers, features, selectedFeatureIds, showSelectedFirst, showCompressed, sorting, loadingStatus, visibleColumnsSettings, controller) => {
     const tabs = layers?.map(layer => {
         const status = loadingStatus[layer.getId()];
         const showExportButton = layer.hasPermission('download');
@@ -148,7 +191,7 @@ const createLayerTabs = (layerId, layers, features, selectedFeatureIds, showSele
                 openSelectByPropertiesPopup={controller.openSelectByPropertiesPopup}
             />,
             children: layer.getId() === layerId
-                ? createFeaturedataGrid(features, selectedFeatureIds, showSelectedFirst, sorting, visibleColumnsSettings, showExportButton, controller)
+                ? createFeaturedataGrid(features, selectedFeatureIds, showSelectedFirst, showCompressed, sorting, visibleColumnsSettings, showExportButton, controller)
                 : null
         };
     }) || [];
@@ -164,8 +207,26 @@ const ContainerDiv = styled('div')`
     }
 `;
 export const FeatureDataContainer = ({ state, controller }) => {
-    const { layers, activeLayerId, activeLayerFeatures, selectedFeatureIds, showSelectedFirst, loadingStatus, visibleColumnsSettings, sorting } = state;
-    const tabs = createLayerTabs(activeLayerId, layers, activeLayerFeatures, selectedFeatureIds, showSelectedFirst, sorting, loadingStatus, visibleColumnsSettings, controller);
+    const { layers,
+        activeLayerId,
+        activeLayerFeatures,
+        selectedFeatureIds,
+        showSelectedFirst,
+        showCompressed,
+        loadingStatus,
+        visibleColumnsSettings,
+        sorting } = state;
+    const tabs = createLayerTabs(
+        activeLayerId,
+        layers,
+        activeLayerFeatures,
+        selectedFeatureIds,
+        showSelectedFirst,
+        showCompressed,
+        sorting,
+        loadingStatus,
+        visibleColumnsSettings,
+        controller);
     return (
         <ContainerDiv isMobile={Oskari.util.isMobile()}>
             <Tabs

diff --git a/bundles/framework/featuredata/view/ShowSelectedItemsFirst.jsx b/bundles/framework/featuredata/view/ShowSelectedItemsFirst.jsx
@@ -1,17 +1,21 @@
 import React from 'react';
-import { Checkbox } from 'oskari-ui/components/Checkbox';
+import { Switch } from 'oskari-ui/components/Switch';
 import { Message } from 'oskari-ui';
 import { FEATUREDATA_BUNDLE_ID } from './FeatureDataContainer';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const SelectedItemsFirstContainer = styled('div')`
+    padding: 0 1em 0 0;
 `;
 export const ShowSelectedItemsFirst = (props) => {
     return <SelectedItemsFirstContainer>
-        <Checkbox checked={ props.showSelectedFirst } onChange={ () => { props.toggleShowSelectedFirst(); } }>
-            <Message bundleKey={FEATUREDATA_BUNDLE_ID} messageKey='showSelectedFirst'/>
-        </Checkbox>
+        <Switch
+            size={'small'}
+            label={<Message bundleKey={FEATUREDATA_BUNDLE_ID} messageKey='showSelectedFirst'/>}
+            checked={ props.showSelectedFirst }
+            defaultChecked = { false }
+            onChange={ () => { props.toggleShowSelectedFirst(); } }/>
     </SelectedItemsFirstContainer>;
 };
 ShowSelectedItemsFirst.propTypes = {