dtable-ui-component 4.4.0 → 4.4.1

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -0,0 +1,321 @@
+.filters-list {
+  min-height: 120px;
+  max-height: 100%;
+  padding: 15px;
+}
+
+.filters-list.empty-filters-container {
+  min-height: 80px;
+  padding: 16px;
+}
+
+.filters-list.empty-filters-container .empty-filters-list {
+  padding-left: 0;
+}
+
+.filters-list .empty-filters-list {
+  padding: 0.25rem;
+  font-size: 14px;
+  opacity: 0.5;
+}
+
+.filters-list .filter-item {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0;
+}
+
+.filters-list .filter-item .condition {
+  display: flex;
+  flex: 1;
+}
+
+.filters-list .filter-item .condition > div {
+  height: 38px;
+  line-height: 38px;
+  margin-left: 0.5rem;
+}
+
+.filters-list .filter-item .condition > div:first-child {
+  margin-left: 0;
+}
+
+.filters-list .filter-item .filter-term {
+  max-width: 300px;
+}
+
+.filters-list .filter-item .filter-term .option-group-content .option.option-active .dtable-font {
+  color: #798d99;
+}
+
+.filters-list .filter-conjunction {
+  width: 72px;
+}
+
+.filters-list .filter-conjunction-readonly {
+  width: 52px;
+}
+
+.filters-list .filter-container {
+  width: calc(100% - 72px);
+  display: flex;
+}
+
+.filters-list .dtable-select .selected-option-show {
+  width: calc(100% - 20px);
+  height: 20px;
+}
+
+.filters-list .dtable-select .selected-option {
+  width: auto;
+  overflow-x: auto;
+}
+
+.filters-list .dtable-select .dtable-icon-drop-down {
+  margin-left: 0.5rem;
+}
+
+.filters-list .selected-conjunction-show {
+  padding: 0 10px;
+  color: #999;
+}
+
+.filters-list .filter-column {
+  max-width: 150px;
+}
+
+.filter-term .selector-multiple-select .option,
+.filter-term .selector-single-select .option {
+  height: 30px;
+  padding: 0 10px;
+}
+
+.filter-term .selector-multiple-select .select-option-name,
+.filter-term .selector-single-select .select-option-name {
+  margin-top: 5px;
+}
+
+.filter-term .selector-single-select .option:hover {
+  color: #212529;
+  background-color: #f7f7f7;
+}
+
+.filter-term .selector-single-select .option:hover .select-option-name,
+.filter-term .selector-multiple-select .option:hover .select-option-name,
+.filter-term .selector-collaborator .option:hover .select-option-name {
+  color: unset;
+}
+
+.filter-term .selector-collaborator .dtable-icon-drop-down {
+  padding-left: 5px;
+}
+
+.filters-list .selector-collaborator .selected-option-show {
+  text-overflow: unset;
+}
+
+.filters-list .selector-multiple-select .option:hover,
+.filters-list .selector-multiple-select .option.option-active,
+.filters-list .selector-collaborator .option:hover,
+.filters-list .selector-collaborator .option.option-active {
+  color: #212529;
+  background-color: #f7f7f7;
+}
+
+.filters-list .selector-multiple-select .option.option-active .select-option-name,
+.filters-list .selector-collaborator .option.option-active .select-option-name {
+  color: #212529;
+}
+
+.filters-list .selected-option .multiple-select-option,
+.filters-list .selected-option .single-select-option {
+  margin: 0;
+  display: inline-block;
+}
+
+.filters-list .filter-term input {
+  display: flex;
+  width: 100%;
+  height: 38px;
+  background-color: #ffffff;
+  padding-left: 8px;
+  padding-right: 8px;
+  outline: none;
+  border-radius: 3px;
+  font-size: 0.875rem;
+}
+
+.filters-list .filter-term input:hover {
+  border-color: rgb(179, 179, 179);
+}
+
+.filters-list .filter-term input.disabled:hover {
+  border-color: rgba(0, 40, 100, 0.12);
+}
+
+.filters-list .filter-term input:hover:focus {
+  border-color: #1991eb;
+}
+
+.filters-list .filter-term input:focus {
+  color: #495057;
+  background-color: #fff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.filters-list .filter-term .date-picker-container input:focus {
+  color: #495057;
+  background-color: #fff;
+  border: 1px solid #fff;
+  outline: 0;
+}
+
+.filters-list .filter-term .date-picker-container table tr {
+  height: 30px;
+}
+
+.filters-list .filter-term input[type='checkbox'] {
+  width: inherit;
+}
+
+.filters-list .filter-term input[type='checkbox']:focus {
+  border: 0;
+  box-shadow: none;
+}
+
+.filter-term .filter-rate-list {
+  display: flex;
+  padding: 0 5px;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+}
+
+.filters-list .delete-filter {
+  width: 12px;
+  height: 20px;
+  margin-right: 14px;
+  text-align: center;
+}
+
+.filters-list .delete-filter:hover {
+  cursor: pointer;
+}
+
+.filters-list .delete-filter .dtable-icon-fork-number {
+  display: inline-block;
+  font-size: 12px;
+  color: #949494;
+}
+
+.filters-list .multiple-option-name {
+  display: flex;
+  align-items: center;
+}
+
+.filters-list .multiple-check-icon,
+.filters-list .collaborator-check-icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  text-align: center;
+}
+
+.filters-list .multiple-check-icon .dtable-icon-check-mark,
+.filters-list .collaborator-check-icon .dtable-icon-check-mark {
+  font-size: 12px;
+  color: #798d99;
+}
+
+.user-select-item,
+.collaborator {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  margin-right: 10px;
+  padding: 0 8px 0 2px;
+  font-size: 13px;
+  border-radius: 10px;
+  background: #eaeaea;
+}
+
+.filters-list .collaborator-show {
+  flex: 1;
+}
+
+.filters-list .collaborator-avatar-container {
+  width: 16px;
+}
+
+.filters-list .collaborator-avatar {
+  width: 16px;
+  height: 16px;
+  transform: translateY(-1px);
+  border-radius: 50%;
+}
+
+.filters-list .option .collaborator-avatar {
+  transform: translateY(-2px);
+}
+
+.filters-list .collaborator-name {
+  margin-left: 5px;
+  max-width: 200px;
+}
+
+.filters-list .option-collaborator {
+  display: flex;
+}
+
+.filters-list .collaborator-container {
+  flex: 1;
+}
+
+.filters-list .popover-add-tool {
+  border-top: none;
+  color: #555555;
+}
+
+.filters-list .popover-add-tool .popover-add-icon {
+  margin-right: 14px;
+}
+
+.filters-list .option-group {
+  max-height: 360px;
+  overflow: auto;
+}
+
+.filters-list .filter-item .dtable-icon-fork-number:hover {
+  color: #5a5a5a;
+}
+
+.filters-list .filter-container-readonly .dtable-select .selected-option-show,
+.filters-list .filter-conjunction-readonly .dtable-select .selected-option-show {
+  width: 100%;
+}
+
+.filters-list .filter-checkbox-predicate .dtable-select .selected-option-show {
+  width: 100%;
+}
+
+.dropdown-item .collaborator,
+.filters-list .option-group .option-group-content .collaborator {
+  background-color: unset;
+}
+
+.filters-list .dtable-select .selected-option-show .remove-container {
+  display: none;
+}
+
+.filter-header-icon {
+  display: inline-block;
+  padding: 0 0.3125rem;
+  margin-left: -0.3125rem;
+}
+
+.filter-header-icon .dtable-font {
+  font-size: 14px;
+  color: #aaa;
+  cursor: default;
+}

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import classnames from 'classnames';
+import { CellType, FILTER_COLUMN_OPTIONS, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, ValidateFilter } from 'dtable-utils';
+import FilterItem from '../filter-item';
+import { getColumnByKey, FilterItemUtils } from '../../utils';
+import './index.css';
+class FiltersList extends Component {
+  constructor(props) {
+    super(props);
+    this.updateFilter = (filterIndex, updatedFilter) => {
+      if (!updatedFilter) return;
+      this.props.updateFilter(filterIndex, updatedFilter);
+    };
+    this.deleteFilter = index => {
+      const {
+        scheduleUpdate
+      } = this.props;
+      this.props.deleteFilter(index, scheduleUpdate);
+    };
+    this.updateConjunction = filterConjunction => {
+      this.props.updateFilterConjunction(filterConjunction);
+    };
+    this.getConjunctionOptions = () => {
+      if (!this.conjunctionOptions) {
+        this.conjunctionOptions = FilterItemUtils.generatorConjunctionOptions();
+      }
+      return this.conjunctionOptions;
+    };
+    this.getFilterColumns = () => {
+      const {
+        columns
+      } = this.props;
+      return columns.filter(column => {
+        const {
+          data
+        } = column;
+        let {
+          type
+        } = column;
+        if (data && (type === CellType.LINK || FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === FORMULA_RESULT_TYPE.ARRAY)) {
+          type = data.array_type;
+        }
+        return Object.prototype.hasOwnProperty.call(FILTER_COLUMN_OPTIONS, type);
+      });
+    };
+    this.getColumnOptions = () => {
+      if (!this.columnOptions) {
+        const filterColumns = this.getFilterColumns();
+        this.columnOptions = filterColumns.map(column => {
+          return FilterItemUtils.generatorColumnOption(column);
+        });
+      }
+      return this.columnOptions;
+    };
+    this.renderFilterItem = (filter, index, errMsg, filterColumn) => {
+      const {
+        filterConjunction,
+        value,
+        roleId,
+        isLocked,
+        collaborators,
+        userDepartmentIdsMap,
+        departments,
+        lang
+      } = this.props;
+      const conjunctionOptions = this.getConjunctionOptions();
+      const columnOptions = this.getColumnOptions();
+      return /*#__PURE__*/React.createElement(FilterItem, {
+        key: index,
+        isLocked: isLocked,
+        roleId: roleId,
+        index: index,
+        filter: filter,
+        errMsg: errMsg,
+        filterColumn: filterColumn,
+        filterConjunction: filterConjunction,
+        conjunctionOptions: conjunctionOptions,
+        filterColumnOptions: columnOptions,
+        value: value,
+        collaborators: collaborators,
+        userDepartmentIdsMap: userDepartmentIdsMap,
+        departments: departments,
+        lang: lang,
+        deleteFilter: this.deleteFilter,
+        updateFilter: this.updateFilter,
+        updateConjunction: this.updateConjunction
+      });
+    };
+    this.conjunctionOptions = null;
+    this.columnOptions = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.columns !== this.props.columns) {
+      this.columnOptions = null;
+    }
+  }
+  render() {
+    let {
+      filters,
+      className,
+      emptyPlaceholder,
+      columns
+    } = this.props;
+    const isEmpty = filters.length === 0;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('filters-list', {
+        'empty-filters-container': isEmpty
+      }, {
+        [className]: className
+      })
+    }, isEmpty && /*#__PURE__*/React.createElement("div", {
+      className: "empty-filters-list"
+    }, emptyPlaceholder), !isEmpty && filters.map((filter, index) => {
+      const {
+        column_key
+      } = filter;
+      const {
+        error_message
+      } = ValidateFilter.validateColumn(column_key, columns);
+      const filterColumn = getColumnByKey(columns, column_key) || {};
+      return this.renderFilterItem(filter, index, error_message, filterColumn);
+    }));
+  }
+}
+export default FiltersList;

package/lib/DTableFiltersPopover/widgets/rate-item.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+class RateItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onMouseEnterRateItem = () => {
+      const {
+        rateItemIndex
+      } = this.props;
+      this.props.onMouseEnterRateItem(rateItemIndex);
+    };
+    this.onMouseLeaveRateItem = () => {
+      this.props.onMouseLeaveRateItem();
+    };
+    this.onChangeRateNumber = () => {
+      const {
+        onChangeRateNumber,
+        rateItemIndex,
+        editable
+      } = this.props;
+      if (onChangeRateNumber && editable) {
+        onChangeRateNumber(rateItemIndex);
+      }
+    };
+    this.tooltipRef = React.createRef();
+    this.state = {
+      isOpen: false
+    };
+  }
+  render() {
+    const {
+      enterRateItemIndex,
+      rateItemIndex,
+      value,
+      column,
+      isShowRateItem,
+      editable
+    } = this.props;
+    const {
+      rate_style_color,
+      rate_style_type
+    } = column.data || {};
+    const rateShowType = rate_style_type ? rate_style_type : 'dtable-icon-rate';
+    if (!isShowRateItem && rateItemIndex > value) return null;
+    let itemStyle = {
+      cursor: editable ? 'pointer' : 'default',
+      color: value >= rateItemIndex ? rate_style_color : '#e5e5e5'
+    };
+    let style = itemStyle;
+    if (enterRateItemIndex >= rateItemIndex) {
+      style = {
+        ...itemStyle,
+        color: rate_style_color,
+        opacity: 0.4
+      };
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: this.onMouseEnterRateItem,
+      onMouseLeave: this.onMouseLeaveRateItem,
+      style: style,
+      onClick: this.onChangeRateNumber,
+      className: "rate-item ".concat(value >= rateItemIndex ? 'rate-item-active' : '')
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "dtable-font ".concat(rateShowType),
+      ref: this.tooltipRef
+    }), editable && /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+      placement: "bottom",
+      target: this.tooltipRef
+    }, rateItemIndex));
+  }
+}
+export default RateItem;

package/lib/DTablePopover/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popover } from 'reactstrap';
-import { getEventClassName } from './utils';
+import { getEventClassName } from '../utils/utils';
 class DTablePopover extends React.Component {
   constructor() {
     super(...arguments);

package/lib/Department-editor/constants.js

@@ -0,0 +1,10 @@
+export const DEPARTMENT_SELECT_RANGE_OPTIONS = [{
+  name: 'Current_user_department',
+  type: 'current_user_department'
+}, {
+  name: 'Current_user_department_and_sub',
+  type: 'current_user_department_and_sub'
+}, {
+  name: 'Specific_departments',
+  type: 'specific_departments'
+}];

package/lib/Department-editor/department-multiple-select/index.css

@@ -0,0 +1,67 @@
+.departments-container.dtable-ui {
+  top: -4px;
+  left: -3px;
+  width: calc(100% + 8px);
+  z-index: 1100;
+  min-height: 260px;
+  padding-top: 0;
+  cursor: default;
+}
+
+.departments-container.dtable-ui.filter {
+  top: 42px;
+  left: 0px;
+  width: 300px;
+  height: 285px;
+}
+
+.departments-container.dtable-ui .search-departments {
+  padding: 10px 10px 0px;
+}
+
+.departments-container.dtable-ui .search-departments input {
+  height: 30px !important;
+  font-size: 14px;
+  display: initial !important;
+}
+
+.departments-container.dtable-ui .department-item-container {
+  background-color: #fff;
+  max-height: 240px;
+  overflow: auto;
+  cursor: pointer;
+  padding: 10px 0;
+}
+
+.departments-container.dtable-ui .expand {
+  color: #b5b5b5;
+  font-size: 12px;
+  transform: scale(0.8);
+  cursor: pointer;
+  margin-left: 0px !important;
+}
+
+.departments-container.dtable-ui .expand:hover {
+  color: #555;
+}
+
+.departments-container.dtable-ui .department-select-input {
+  width: 15px !important;
+  height: 15px !important;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.departments-container.dtable-ui .dropdown-item {
+  padding-left: 10px;
+  cursor: pointer;
+}
+
+.departments-container.dtable-ui .dropdown-item:hover {
+  background: #f5f5f5;
+  color: #212529;
+}
+
+.departments-container.dtable-ui .selected-option-show {
+  width: 95%;
+}