goblin-desktop 4.2.0 → 4.2.2

package/widgets/facet-filter-list-dialog/styles.js

@@ -1,59 +1,59 @@
-/******************************************************************************/
-
-export default function styles(theme) {
-  const facetFilterDialog = {
-    position: 'absolute',
-    top: '0px',
-    bottom: '0px',
-    left: '0px',
-    right: '0px',
-    display: 'flex',
-    flexDirection: 'column',
-  };
-
-  const header = {
-    height: '50px',
-    minHeight: '50px',
-    padding: '0px 10px 0px 30px',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderRadius: '0px 0px 3px 3px',
-    backgroundColor: theme.palette.paneNavigatorBackground,
-  };
-
-  const buttons = {
-    padding: '20px 30px 0px 30px',
-    flexGrow: 1,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-  };
-
-  const scrollable = {
-    flexGrow: 1,
-    overflowY: 'auto',
-  };
-
-  const letter = {
-    margin: '20px 0px 5px 0px',
-    borderBottom: `1px solid ${theme.palette.textColor}`,
-  };
-
-  const closeButton = {
-    position: 'absolute',
-    top: '10px',
-    right: '10px',
-  };
-
-  return {
-    facetFilterDialog,
-    header,
-    buttons,
-    scrollable,
-    letter,
-    closeButton,
-  };
-}
-
-/******************************************************************************/
+/******************************************************************************/
+
+export default function styles(theme) {
+  const facetFilterDialog = {
+    position: 'absolute',
+    top: '0px',
+    bottom: '0px',
+    left: '0px',
+    right: '0px',
+    display: 'flex',
+    flexDirection: 'column',
+  };
+
+  const header = {
+    height: '50px',
+    minHeight: '50px',
+    padding: '0px 10px 0px 30px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: '0px 0px 3px 3px',
+    backgroundColor: theme.palette.paneNavigatorBackground,
+  };
+
+  const buttons = {
+    padding: '20px 30px 0px 30px',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  };
+
+  const scrollable = {
+    flexGrow: 1,
+    overflowY: 'auto',
+  };
+
+  const letter = {
+    margin: '20px 0px 5px 0px',
+    borderBottom: `1px solid ${theme.palette.textColor}`,
+  };
+
+  const closeButton = {
+    position: 'absolute',
+    top: '10px',
+    right: '10px',
+  };
+
+  return {
+    facetFilterDialog,
+    header,
+    buttons,
+    scrollable,
+    letter,
+    closeButton,
+  };
+}
+
+/******************************************************************************/

package/widgets/facet-filter-list-dialog/widget.js

@@ -1,273 +1,273 @@
-import React from 'react';
-import Shredder from 'xcraft-core-shredder';
-import Widget from 'goblin-laboratory/widgets/widget';
-import DialogModal from 'goblin-gadgets/widgets/dialog-modal/widget';
-import Label from 'goblin-gadgets/widgets/label/widget';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import TextFieldNC from 'goblin-gadgets/widgets/text-field-nc/widget';
-import FacetCheckbox from '../facet-checkbox/widget.js';
-import FacetFilterListDialogFooter from '../facet-filter-list-dialog-footer/widget.js';
-import FacetHelpers from '../helpers/facet-helpers';
-import {Unit} from 'goblin-theme';
-import T from 't';
-const px = Unit.toPx;
-
-function getTextOrNabuId(text) {
-  if (Shredder.isImmutable(text)) {
-    const nabuId = text.get('nabuId');
-    if (nabuId) {
-      return nabuId;
-    }
-  } else if (typeof text === 'object') {
-    const nabuId = text.nabuId;
-    if (nabuId) {
-      return nabuId;
-    }
-  }
-  return text;
-}
-
-class FacetFilterListDialog extends Widget {
-  constructor() {
-    super(...arguments);
-
-    this.state = {
-      filter: null,
-    };
-
-    this.changeFacet = this.changeFacet.bind(this);
-    this.filterChange = this.filterChange.bind(this);
-    this.onClose = this.onClose.bind(this);
-  }
-
-  //#region get/set
-  get filter() {
-    return this.state.filter;
-  }
-  set filter(value) {
-    this.setState({
-      filter: value,
-    });
-  }
-  //#endregion
-
-  getFilteredKeys(filter) {
-    const keys = this.getState()
-      .backend.get(this.props.id)
-      .get('checkboxes')
-      .get(this.props.name)
-      .keySeq();
-    const type = FacetHelpers.getType(keys);
-    filter = FacetHelpers.preprocessFilter(filter);
-
-    return keys.reduce((acc, key) => {
-      let text = FacetHelpers.format(key, type, this.props.propInfos);
-      //TODO: search should be done on translation of status, not nabuId
-      text = getTextOrNabuId(text);
-      if (FacetHelpers.match(text, filter)) {
-        acc = acc.push(key);
-      }
-      return acc;
-    }, Shredder.fromJS([]));
-  }
-
-  onClose() {
-    this.props.onClose();
-  }
-
-  changeFacet(facet) {
-    return () => {
-      this.doAs('list', 'toggle-facet-filter', {
-        filterName: this.props.name,
-        facet: facet,
-      });
-    };
-  }
-
-  initAllFacets(keys) {
-    this.doAs('list', 'init-all-facets', {
-      filterName: this.props.name,
-      keys,
-    });
-  }
-
-  filterChange(text) {
-    this.filter = text;
-
-    const keys = this.getFilteredKeys(text);
-    this.initAllFacets(keys);
-  }
-
-  /******************************************************************************/
-
-  renderClose() {
-    return (
-      <div className={this.styles.classNames.closeButton}>
-        <Button
-          border="none"
-          glyph="solid/times"
-          glyphSize="120%"
-          tooltip={T('Fermer')}
-          height="32px"
-          width="32px"
-          onClick={this.onClose}
-        />
-      </div>
-    );
-  }
-
-  renderHeader(keys) {
-    if (this.props.numberOfCheckboxes <= 5) {
-      return <div className={this.styles.classNames.header}></div>;
-    } else {
-      return (
-        <div className={this.styles.classNames.header}>
-          <Label text={T('Filtre')} />
-          <TextFieldNC
-            width="300px"
-            shape={this.filter ? 'left-rounded' : 'rounded'}
-            value={this.filter}
-            changeMode="throttled"
-            throttleDelay={200}
-            onChange={this.filterChange}
-          />
-          <Button
-            kind="combo"
-            shape="right-rounded"
-            leftSpacing="overlap"
-            glyph="solid/eraser"
-            tooltip={T('Tout montrer')}
-            show={!!this.filter}
-            onClick={() => this.filterChange(null)}
-          />
-        </div>
-      );
-    }
-  }
-
-  renderFooter(keys) {
-    return (
-      <FacetFilterListDialogFooter
-        id={this.props.id}
-        name={this.props.name}
-        keys={keys}
-      />
-    );
-  }
-
-  renderButtons(keys) {
-    const result = [];
-    const type = FacetHelpers.getType(keys);
-
-    if (this.props.numberOfCheckboxes < 20) {
-      for (const key of keys) {
-        result.push(
-          <FacetCheckbox
-            id={this.props.id}
-            key={`${key}-val`}
-            name={this.props.name}
-            text={FacetHelpers.format(key, type, this.props.propInfos)}
-            value={key}
-            onChange={this.changeFacet(key)}
-          />
-        );
-      }
-    } else {
-      let lastTab = null;
-      for (const key of keys) {
-        const tab = FacetHelpers.extractTab(key, type);
-        if (lastTab !== tab.internal) {
-          lastTab = tab.internal;
-          result.push(
-            <div
-              key={`${key}-${tab.internal}`}
-              className={this.styles.classNames.letter}
-            >
-              <Label
-                fontSize="300%"
-                textColor={this.context.theme.palette.mainTabBackground}
-                text={tab.displayed}
-              />
-            </div>
-          );
-        }
-        result.push(
-          <FacetCheckbox
-            id={this.props.id}
-            key={`${key}-val`}
-            name={this.props.name}
-            text={FacetHelpers.format(key, type, this.props.propInfos)}
-            value={key}
-            onChange={this.changeFacet(key)}
-          />
-        );
-      }
-    }
-    return result;
-  }
-
-  renderList() {
-    const keys = this.getFilteredKeys(this.filter);
-    return (
-      <div className={this.styles.classNames.facetFilterDialog}>
-        {this.renderHeader(keys)}
-        <div className={this.styles.classNames.buttons}>
-          <div className={this.styles.classNames.scrollable}>
-            {this.renderButtons(keys)}
-          </div>
-        </div>
-        {this.renderFooter(keys)}
-        {this.renderClose()}
-      </div>
-    );
-  }
-
-  render() {
-    if (this.props.loading) {
-      return null;
-    }
-    const windowHeight = window.innerHeight;
-    const r = this.props.parentButtonRect;
-    let centerY = r.top + r.height / 2;
-    let shiftY = 0;
-    const width = 520;
-    const count = this.props.numberOfCheckboxes;
-    const height = Math.min(Math.max(count * 20 + 100, 200), windowHeight - 20);
-
-    if (centerY - height / 2 < 10) {
-      const offset = height / 2 - centerY + 10;
-      centerY += offset;
-      shiftY = -offset;
-    }
-    if (centerY + height / 2 > windowHeight - 10) {
-      const offset = centerY + height / 2 - (windowHeight - 10);
-      centerY -= offset;
-      shiftY = offset;
-    }
-
-    return (
-      <DialogModal
-        width={px(width)}
-        height={px(height)}
-        left={px(r.right + 40)}
-        center={px(centerY)}
-        triangleShift={px(shiftY)}
-        backgroundClose={true}
-        close={this.onClose}
-      >
-        {this.renderList()}
-      </DialogModal>
-    );
-  }
-}
-
-/******************************************************************************/
-
-export default Widget.connect((state, props) => {
-  const flags = state.get(`backend.${props.id}.checkboxes.${props.name}`);
-  if (flags) {
-    return {numberOfCheckboxes: flags.size};
-  } else {
-    return {loading: true};
-  }
-})(FacetFilterListDialog);
+import React from 'react';
+import Shredder from 'xcraft-core-shredder';
+import Widget from 'goblin-laboratory/widgets/widget';
+import DialogModal from 'goblin-gadgets/widgets/dialog-modal/widget';
+import Label from 'goblin-gadgets/widgets/label/widget';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import TextFieldNC from 'goblin-gadgets/widgets/text-field-nc/widget';
+import FacetCheckbox from '../facet-checkbox/widget.js';
+import FacetFilterListDialogFooter from '../facet-filter-list-dialog-footer/widget.js';
+import FacetHelpers from '../helpers/facet-helpers';
+import {Unit} from 'goblin-theme';
+import T from 't';
+const px = Unit.toPx;
+
+function getTextOrNabuId(text) {
+  if (Shredder.isImmutable(text)) {
+    const nabuId = text.get('nabuId');
+    if (nabuId) {
+      return nabuId;
+    }
+  } else if (typeof text === 'object') {
+    const nabuId = text.nabuId;
+    if (nabuId) {
+      return nabuId;
+    }
+  }
+  return text;
+}
+
+class FacetFilterListDialog extends Widget {
+  constructor() {
+    super(...arguments);
+
+    this.state = {
+      filter: null,
+    };
+
+    this.changeFacet = this.changeFacet.bind(this);
+    this.filterChange = this.filterChange.bind(this);
+    this.onClose = this.onClose.bind(this);
+  }
+
+  //#region get/set
+  get filter() {
+    return this.state.filter;
+  }
+  set filter(value) {
+    this.setState({
+      filter: value,
+    });
+  }
+  //#endregion
+
+  getFilteredKeys(filter) {
+    const keys = this.getState()
+      .backend.get(this.props.id)
+      .get('checkboxes')
+      .get(this.props.name)
+      .keySeq();
+    const type = FacetHelpers.getType(keys);
+    filter = FacetHelpers.preprocessFilter(filter);
+
+    return keys.reduce((acc, key) => {
+      let text = FacetHelpers.format(key, type, this.props.propInfos);
+      //TODO: search should be done on translation of status, not nabuId
+      text = getTextOrNabuId(text);
+      if (FacetHelpers.match(text, filter)) {
+        acc = acc.push(key);
+      }
+      return acc;
+    }, Shredder.fromJS([]));
+  }
+
+  onClose() {
+    this.props.onClose();
+  }
+
+  changeFacet(facet) {
+    return () => {
+      this.doAs('list', 'toggle-facet-filter', {
+        filterName: this.props.name,
+        facet: facet,
+      });
+    };
+  }
+
+  initAllFacets(keys) {
+    this.doAs('list', 'init-all-facets', {
+      filterName: this.props.name,
+      keys,
+    });
+  }
+
+  filterChange(text) {
+    this.filter = text;
+
+    const keys = this.getFilteredKeys(text);
+    this.initAllFacets(keys);
+  }
+
+  /******************************************************************************/
+
+  renderClose() {
+    return (
+      <div className={this.styles.classNames.closeButton}>
+        <Button
+          border="none"
+          glyph="solid/times"
+          glyphSize="120%"
+          tooltip={T('Fermer')}
+          height="32px"
+          width="32px"
+          onClick={this.onClose}
+        />
+      </div>
+    );
+  }
+
+  renderHeader(keys) {
+    if (this.props.numberOfCheckboxes <= 5) {
+      return <div className={this.styles.classNames.header}></div>;
+    } else {
+      return (
+        <div className={this.styles.classNames.header}>
+          <Label text={T('Filtre')} />
+          <TextFieldNC
+            width="300px"
+            shape={this.filter ? 'left-rounded' : 'rounded'}
+            value={this.filter}
+            changeMode="throttled"
+            throttleDelay={200}
+            onChange={this.filterChange}
+          />
+          <Button
+            kind="combo"
+            shape="right-rounded"
+            leftSpacing="overlap"
+            glyph="solid/eraser"
+            tooltip={T('Tout montrer')}
+            show={!!this.filter}
+            onClick={() => this.filterChange(null)}
+          />
+        </div>
+      );
+    }
+  }
+
+  renderFooter(keys) {
+    return (
+      <FacetFilterListDialogFooter
+        id={this.props.id}
+        name={this.props.name}
+        keys={keys}
+      />
+    );
+  }
+
+  renderButtons(keys) {
+    const result = [];
+    const type = FacetHelpers.getType(keys);
+
+    if (this.props.numberOfCheckboxes < 20) {
+      for (const key of keys) {
+        result.push(
+          <FacetCheckbox
+            id={this.props.id}
+            key={`${key}-val`}
+            name={this.props.name}
+            text={FacetHelpers.format(key, type, this.props.propInfos)}
+            value={key}
+            onChange={this.changeFacet(key)}
+          />
+        );
+      }
+    } else {
+      let lastTab = null;
+      for (const key of keys) {
+        const tab = FacetHelpers.extractTab(key, type);
+        if (lastTab !== tab.internal) {
+          lastTab = tab.internal;
+          result.push(
+            <div
+              key={`${key}-${tab.internal}`}
+              className={this.styles.classNames.letter}
+            >
+              <Label
+                fontSize="300%"
+                textColor={this.context.theme.palette.mainTabBackground}
+                text={tab.displayed}
+              />
+            </div>
+          );
+        }
+        result.push(
+          <FacetCheckbox
+            id={this.props.id}
+            key={`${key}-val`}
+            name={this.props.name}
+            text={FacetHelpers.format(key, type, this.props.propInfos)}
+            value={key}
+            onChange={this.changeFacet(key)}
+          />
+        );
+      }
+    }
+    return result;
+  }
+
+  renderList() {
+    const keys = this.getFilteredKeys(this.filter);
+    return (
+      <div className={this.styles.classNames.facetFilterDialog}>
+        {this.renderHeader(keys)}
+        <div className={this.styles.classNames.buttons}>
+          <div className={this.styles.classNames.scrollable}>
+            {this.renderButtons(keys)}
+          </div>
+        </div>
+        {this.renderFooter(keys)}
+        {this.renderClose()}
+      </div>
+    );
+  }
+
+  render() {
+    if (this.props.loading) {
+      return null;
+    }
+    const windowHeight = window.innerHeight;
+    const r = this.props.parentButtonRect;
+    let centerY = r.top + r.height / 2;
+    let shiftY = 0;
+    const width = 520;
+    const count = this.props.numberOfCheckboxes;
+    const height = Math.min(Math.max(count * 20 + 100, 200), windowHeight - 20);
+
+    if (centerY - height / 2 < 10) {
+      const offset = height / 2 - centerY + 10;
+      centerY += offset;
+      shiftY = -offset;
+    }
+    if (centerY + height / 2 > windowHeight - 10) {
+      const offset = centerY + height / 2 - (windowHeight - 10);
+      centerY -= offset;
+      shiftY = offset;
+    }
+
+    return (
+      <DialogModal
+        width={px(width)}
+        height={px(height)}
+        left={px(r.right + 40)}
+        center={px(centerY)}
+        triangleShift={px(shiftY)}
+        backgroundClose={true}
+        close={this.onClose}
+      >
+        {this.renderList()}
+      </DialogModal>
+    );
+  }
+}
+
+/******************************************************************************/
+
+export default Widget.connect((state, props) => {
+  const flags = state.get(`backend.${props.id}.checkboxes.${props.name}`);
+  if (flags) {
+    return {numberOfCheckboxes: flags.size};
+  } else {
+    return {loading: true};
+  }
+})(FacetFilterListDialog);