@eeacms/volto-bise-policy 1.2.10 → 1.2.11

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/styles.less

@@ -0,0 +1,126 @@
+.simple-data-table {
+  padding: 1em;
+  overflow-x: auto;
+
+  table {
+    > thead {
+      > tr > th {
+        background: none !important;
+        color: #000 !important;
+        text-transform: inherit !important;
+        vertical-align: bottom !important;
+
+        &::after {
+          display: block;
+          width: 100%;
+          padding-top: 0.7rem;
+          border-bottom: 0.1rem solid #000;
+          content: '';
+        }
+
+        &::before {
+          display: none !important;
+        }
+
+        &.left::after {
+          /* Nothing here for now. */
+        }
+
+        &.center::after {
+          margin-right: auto;
+          margin-left: auto;
+        }
+
+        &.right::after {
+          margin-left: auto;
+        }
+
+        &.justify::after {
+          width: 100%;
+        }
+
+        &.left {
+          text-align: left !important;
+        }
+
+        &.right {
+          text-align: right !important;
+        }
+
+        &.center {
+          text-align: center !important;
+        }
+
+        &.justify {
+          text-align: justify !important;
+        }
+      }
+    }
+
+    td {
+      p {
+        margin-bottom: 0;
+      }
+    }
+
+    > tfoot {
+      .ui.menu.pagination {
+        .item {
+          &.fitted {
+            min-width: auto;
+            padding: 0 !important;
+
+            .loader {
+              padding: 0 !important;
+            }
+          }
+        }
+
+        .ui.loader {
+          &.disabled {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+  }
+
+  .table-title {
+    font-size: 15px;
+  }
+
+  .title-border {
+    display: table;
+    border-bottom: 2px solid #000;
+
+    > *:first-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  table.no-borders {
+    border: none !important;
+
+    tr > th:first-child,
+    tr > td:first-child {
+      padding-left: 0;
+    }
+
+    tr > th:last-child,
+    tr > td:last-child {
+      padding-right: 0;
+    }
+
+    th,
+    td {
+      border: none !important;
+    }
+  }
+
+  table.compact-table {
+    tr td {
+      padding-top: 0.3em !important;
+      padding-bottom: 0.3em !important;
+    }
+  }
+}

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/colored/View.jsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { Table, Menu, Loader } from 'semantic-ui-react';
+import RenderComponent from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/components';
+import cx from 'classnames';
+
+import leftSVG from '@plone/volto/icons/left-key.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+
+import './style.less';
+
+const View = (props) => {
+  const {
+    data = {},
+    getAlignmentOfColumn,
+    getNameOfColumn,
+    getTitleOfColumn,
+    has_pagination,
+    pagination = {},
+    placeholder,
+    provider_data,
+    row_size,
+    selectedColumns,
+    show_header,
+    tableData,
+    updatePagination = () => {},
+  } = props;
+
+  const { th_color, td_color } = data;
+
+  const getColorOfTableCell = (i) => {
+    return selectedColumns
+      .map((col) => {
+        const column = col.column;
+        const cell = td_color?.find(
+          (c) => c.label === provider_data[column][i],
+        );
+        return cell?.color;
+      })
+      .filter((v) => v);
+  };
+
+  return (
+    <div
+      className={cx('colored-table', {
+        'with-pagination': data.has_pagination,
+      })}
+    >
+      {row_size ? (
+        <Table
+          textAlign="left"
+          striped={data.striped}
+          className={`unstackable ${data.bordered ? 'no-borders' : ''}
+          ${data.compact_table ? 'compact-table' : ''}`}
+        >
+          {show_header ? (
+            <Table.Header style={{ backgroundColor: th_color }}>
+              <Table.Row>
+                {td_color && td_color.length > 0 && <Table.HeaderCell />}
+                {selectedColumns.map((colDef, j) => (
+                  <Table.HeaderCell
+                    key={getNameOfColumn(colDef)}
+                    className={getAlignmentOfColumn(colDef, j)}
+                  >
+                    {getTitleOfColumn(colDef)}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : null}
+          <Table.Body>
+            {Array(Math.max(0, row_size))
+              .fill()
+              .map((_, i) => (
+                <Table.Row key={i}>
+                  {td_color && td_color.length > 0 && (
+                    <Table.Cell className="colored-cell">
+                      <span
+                        style={{
+                          backgroundColor: td_color
+                            ? getColorOfTableCell(i)
+                            : '',
+                        }}
+                      />
+                    </Table.Cell>
+                  )}
+                  {selectedColumns.map((colDef, j) => (
+                    <Table.Cell
+                      key={`${i}-${getNameOfColumn(colDef)}`}
+                      textAlign={getAlignmentOfColumn(colDef, j)}
+                    >
+                      {typeof colDef !== 'string' ? (
+                        <RenderComponent
+                          tableData={tableData}
+                          colDef={colDef}
+                          row={i}
+                          {...props}
+                        />
+                      ) : (
+                        tableData[colDef][i]
+                      )}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+          </Table.Body>
+          {has_pagination ? (
+            <Table.Footer>
+              <Table.Row>
+                <Table.HeaderCell
+                  colSpan={selectedColumns.length}
+                  style={{ textAlign: 'center' }}
+                >
+                  <Menu pagination>
+                    <Menu.Item
+                      as="a"
+                      icon
+                      disabled={
+                        props.loadingProviderData || pagination.activePage === 1
+                      }
+                      onClick={() => {
+                        if (pagination.activePage > 1) {
+                          updatePagination({
+                            activePage: pagination.activePage - 1,
+                          });
+                        }
+                      }}
+                    >
+                      <Icon name={leftSVG} size="24px" />
+                    </Menu.Item>
+                    <Menu.Item fitted>
+                      <Loader
+                        disabled={!props.loadingProviderData}
+                        active
+                        inline
+                        size="tiny"
+                      />
+                    </Menu.Item>
+                    <Menu.Item
+                      as="a"
+                      icon
+                      disabled={
+                        props.loadingProviderData ||
+                        pagination.activePage === pagination.lastPage
+                      }
+                      onClick={() => {
+                        if (row_size === pagination.itemsPerPage) {
+                          updatePagination({
+                            activePage: pagination.activePage + 1,
+                          });
+                        }
+                      }}
+                    >
+                      <Icon name={rightSVG} size="24px" />
+                    </Menu.Item>
+                  </Menu>
+                </Table.HeaderCell>
+              </Table.Row>
+            </Table.Footer>
+          ) : null}
+        </Table>
+      ) : (
+        // TODO: find a better solution to keep headers
+        <Table
+          textAlign="left"
+          striped={data.striped}
+          className={`unstackable ${data.bordered ? 'no-borders' : ''}
+          ${data.compact_table ? 'compact-table' : ''}`}
+        >
+          {show_header ? (
+            <Table.Header style={{ backgroundColor: th_color }}>
+              <Table.Row>
+                <Table.HeaderCell />
+                {data?.columns?.map((header) => (
+                  <Table.HeaderCell
+                    key={header.column}
+                    className={header.textAlign || 'left'}
+                  >
+                    <p>{header.title}</p>
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          ) : null}
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell className="colored-cell">
+                <span />
+              </Table.Cell>
+              <Table.Cell colSpan={data?.columns?.length || 1}>
+                <p>{placeholder}</p>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default View;

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/colored/index.js

@@ -0,0 +1,4 @@
+import ColoredTableView from './View';
+import coloredTableSchema from './schema';
+
+export { ColoredTableView, coloredTableSchema };

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/colored/schema.js

@@ -0,0 +1,62 @@
+import config from '@plone/volto/registry';
+
+const colorSchema = (props) => {
+  return {
+    title: 'Color',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['label', 'color'],
+      },
+    ],
+
+    properties: {
+      label: {
+        title: 'Label',
+        type: 'string',
+      },
+      color: {
+        title: 'Color',
+        widget: 'simple_color',
+        available_colors:
+          config.blocks.blocksConfig.simpleDataConnectedTable.available_colors,
+      },
+    },
+
+    required: [],
+  };
+};
+
+const coloredTableSchema = (props) => {
+  return {
+    title: 'Colored datatable',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['th_color', 'td_color'],
+      },
+    ],
+
+    properties: {
+      th_color: {
+        title: 'Table header color',
+        widget: 'simple_color',
+        available_colors:
+          config.blocks.blocksConfig.simpleDataConnectedTable.available_colors,
+      },
+      td_color: {
+        title: 'Table rows color',
+        widget: 'object_list',
+        schema: colorSchema(props),
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default coloredTableSchema;

package/src/customizations/@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/templates/colored/style.less

@@ -0,0 +1,69 @@
+.simple-data-table {
+  .colored-table {
+    table {
+      overflow: hidden;
+      border: 1px solid #e8e8e8 !important;
+      background: #fff !important;
+      border-collapse: separate !important;
+      border-radius: 12px !important;
+
+      thead,
+      td {
+        background-color: #fff;
+      }
+
+      th {
+        font-weight: bold !important;
+
+        &:after {
+          padding: 0;
+          border: none;
+        }
+      }
+
+      th,
+      td {
+        border-bottom: 1px solid #e8e8e8 !important;
+      }
+
+      tbody {
+        td {
+          height: 46px;
+        }
+
+        &:after {
+          display: block;
+          height: 10px;
+          content: '';
+        }
+      }
+
+      .colored-cell {
+        padding: 0 !important;
+
+        span {
+          display: block;
+          width: 4px;
+          height: 100%;
+          background-color: transparent;
+        }
+      }
+    }
+
+    &.with-pagination {
+      table {
+        tbody {
+          &:after {
+            display: none;
+          }
+        }
+
+        tfoot {
+          th {
+            border-color: #e8e8e8;
+          }
+        }
+      }
+    }
+  }
+}