@truedat/lm 8.7.4 → 8.7.5

package/src/utils/linksPaneHelpers.js

@@ -0,0 +1,164 @@
+import _ from "lodash/fp";
+import { Icon, Popup } from "semantic-ui-react";
+import { columnDecorator, columnPredicate } from "@truedat/core/services";
+
+export const NOTE_COLUMN = "note.text_input";
+export const ACTION_COLUMN = "_actions";
+export const GROUP_COLUMN = "group";
+
+export const POPUP_EXCLUDED_COLUMNS = [
+  ACTION_COLUMN,
+  GROUP_COLUMN,
+  NOTE_COLUMN,
+];
+
+export const WRAP_COLUMNS = ["name"];
+export const CLIP_COLUMNS = [ACTION_COLUMN];
+
+export const COLUMN_UNIT_WIDTH = 120;
+
+export const DEFAULT_COLUMN_WIDTHS = {
+  _actions: 0.4,
+  deleted_at: 1.15,
+  group: 0.45,
+  name: 2.2,
+  [NOTE_COLUMN]: 0.45,
+  updated_at: 1.35,
+};
+
+export const DEFAULT_SORT_COLUMNS = ["relation.relation_type_name", "type"];
+
+export const getColumnValue = (column, link) => {
+  const { fieldSelector, name } = column || {};
+  return _.isFunction(fieldSelector)
+    ? fieldSelector(link)
+    : _.path(_.defaultTo(name)(fieldSelector))(link);
+};
+
+export const normalizeValue = (value) => {
+  if (_.isNil(value)) return "";
+  if (_.isArray(value)) return value.map(normalizeValue).join(" ");
+  if (_.isObject(value)) {
+    if (_.path("value.type")(value)) return _.path("value.type")(value);
+    if (_.prop("type")(value)) return _.prop("type")(value);
+    if (_.prop("name")(value)) return _.prop("name")(value);
+    if (_.prop("full_name")(value)) return _.prop("full_name")(value);
+    return JSON.stringify(value);
+  }
+  return String(value);
+};
+
+export const normalizeSortValue = (value) =>
+  normalizeValue(value).toLocaleLowerCase();
+
+export const uniqueSorted = (values) =>
+  _.flow(_.filter(Boolean), _.uniq, _.sortBy(_.identity))(values);
+
+export const getDefaultSortColumns = (columns) =>
+  _.compact(
+    _.map((name) => _.find(_.propEq("name", name))(columns))(
+      DEFAULT_SORT_COLUMNS,
+    ),
+  );
+
+export const sortLinks = (links, columns, sort) => {
+  if (!sort.column) {
+    const sortColumns = getDefaultSortColumns(columns);
+
+    if (_.isEmpty(sortColumns)) {
+      return _.orderBy(["name"])(["asc"])(links);
+    }
+
+    return _.orderBy(
+      _.map(
+        (column) => (link) =>
+          normalizeSortValue(getColumnValue(column, link)) || "￿",
+      )(sortColumns),
+    )(sortColumns.map(() => "asc"))(links);
+  }
+
+  const column = _.find(_.propEq("name", sort.column))(columns);
+  const direction = sort.direction === "descending" ? "desc" : "asc";
+
+  return _.orderBy([
+    (link) => normalizeSortValue(getColumnValue(column, link)),
+  ])([direction])(links);
+};
+
+export const isSortableColumn = (column) =>
+  _.prop("name")(column) !== ACTION_COLUMN;
+
+export const normalizeColumn = (column) => ({
+  ...column,
+  textAlign: _.includes(_.prop("name")(column))([NOTE_COLUMN, GROUP_COLUMN])
+    ? "center"
+    : _.prop("textAlign")(column),
+  width: _.isNil(_.prop("width")(column))
+    ? DEFAULT_COLUMN_WIDTHS[_.prop("name")(column)]
+    : _.prop("width")(column),
+});
+
+export const columnUnits = (column) => _.defaultTo(1)(_.prop("width")(column));
+
+export const columnWidth = (column) =>
+  `${columnUnits(column) * COLUMN_UNIT_WIDTH}px`;
+
+export const columnsWidth = (columns) =>
+  `${_.sum(_.map(columnUnits)(columns)) * COLUMN_UNIT_WIDTH}px`;
+
+export const mergeClassNames = (...classNames) =>
+  classNames.filter(Boolean).join(" ");
+
+export const columnClassName = (column, header = false) => {
+  const name = _.prop("name")(column);
+
+  return mergeClassNames(
+    "links-pane__cell",
+    header && "links-pane__cell--header",
+    _.includes(name)(WRAP_COLUMNS) && "links-pane__cell--wrap",
+    _.includes(name)(CLIP_COLUMNS) && "links-pane__cell--clip",
+  );
+};
+
+export const columnWidthStyle = (column) => ({
+  "--links-pane-column-width": columnWidth(column),
+});
+
+export const tableWidthStyle = (columns) => ({
+  "--links-pane-table-min-width": columnsWidth(columns),
+});
+
+export const noteCell = (note) =>
+  _.isEmpty(note) ? null : (
+    <Popup
+      className="links-pane__popup"
+      content={note}
+      on="hover"
+      position="top center"
+      trigger={
+        <span className="links-pane__note-trigger">
+          <Icon
+            className="links-pane__note-icon"
+            name="file alternate outline"
+            title={note}
+          />
+        </span>
+      }
+    />
+  );
+
+export const cellContent = (column, link, rawValue) => {
+  if (_.propEq("name", NOTE_COLUMN)(column)) return noteCell(rawValue);
+  return columnDecorator(column)(link);
+};
+
+export const filterColumns = (columns, links, tag) =>
+  _.flow(
+    _.map(normalizeColumn),
+    _.uniqBy(_.prop("name")),
+    _.filter((c) =>
+      tag === "deleted" && _.propEq("name", NOTE_COLUMN)(c)
+        ? true
+        : _.any(columnPredicate(c))(links),
+    ),
+  )(columns);