@odoo/o-spreadsheet 14.0.1 → 14.0.2

package/src/components/side_panel/cell_is_rule_editor.ts

@@ -1,169 +0,0 @@
-import * as owl from "@odoo/owl";
-import { CellIsRule, ConditionalFormat, SpreadsheetEnv, Style } from "../../types";
-import { ColorPicker } from "../color_picker";
-import * as icons from "../icons";
-import { cellIsOperators, terms } from "./translations_terms";
-
-const { Component, useState, hooks } = owl;
-const { useExternalListener } = hooks;
-const { xml, css } = owl.tags;
-
-export const PREVIEW_TEMPLATE = xml/* xml */ `
-    <div class="o-cf-preview-line"
-         t-attf-style="font-weight:{{currentStyle.bold ?'bold':'normal'}};
-                       text-decoration:{{currentStyle.strikethrough ? 'line-through':'none'}};
-                       font-style:{{currentStyle.italic?'italic':'normal'}};
-                       color:{{currentStyle.textColor}};
-                       background-color:{{currentStyle.fillColor}};"
-         t-esc="previewText || env._t('${terms.PREVIEWTEXT}')" />
-`;
-
-const TEMPLATE = xml/* xml */ `
-<div>
-    <div class="o-section-title" t-esc="env._t('${terms.CF_TITLE}')"></div>
-    <div class="o-cf-title-text" t-esc="env._t('${terms.IS_RULE}')"></div>
-    <select t-model="state.condition.operator" class="o-input o-cell-is-operator">
-        <t t-foreach="Object.keys(cellIsOperators)" t-as="op" t-key="op_index">
-            <option t-att-value="op" t-esc="cellIsOperators[op]"/>
-        </t>
-    </select>
-    <input type="text" placeholder="Value" t-model="state.condition.value1" class="o-input o-cell-is-value"/>
-    <t t-if="state.condition.operator === 'Between' || state.condition.operator === 'NotBetween'">
-        <input type="text" placeholder="and value" t-model="state.condition.value2" class="o-input"/>
-    </t>
-    <div class="o-cf-title-text" t-esc="env._t('${terms.FORMATTING_STYLE}')"></div>
-
-    <t t-call="${PREVIEW_TEMPLATE}">
-        <t t-set="currentStyle" t-value="state.style"/>
-    </t>
-    <div class="o-tools">
-        <div class="o-tool" t-att-title="env._t('${terms.BOLD}')" t-att-class="{active:state.style.bold}" t-on-click="toggleTool('bold')">
-            ${icons.BOLD_ICON}
-        </div>
-        <div class="o-tool" t-att-title="env._t('${terms.ITALIC}')" t-att-class="{active:state.style.italic}" t-on-click="toggleTool('italic')">
-            ${icons.ITALIC_ICON}
-        </div>
-        <div class="o-tool" t-att-title="env._t('${terms.STRIKETHROUGH}')" t-att-class="{active:state.style.strikethrough}"
-             t-on-click="toggleTool('strikethrough')">${icons.STRIKE_ICON}
-        </div>
-        <div class="o-tool o-dropdown o-with-color">
-              <span t-att-title="env._t('${terms.TEXTCOLOR}')" t-attf-style="border-color:{{state.style.textColor}}"
-                    t-on-click.stop="toggleMenu('textColorTool')">${icons.TEXT_COLOR_ICON}</span>
-                    <ColorPicker t-if="state.textColorTool" t-on-color-picked="setColor('textColor')" t-key="textColor"/>
-        </div>
-        <div class="o-divider"/>
-        <div class="o-tool  o-dropdown o-with-color">
-              <span t-att-title="env._t('${terms.FILLCOLOR}')" t-attf-style="border-color:{{state.style.fillColor}}"
-                    t-on-click.stop="toggleMenu('fillColorTool')">${icons.FILL_COLOR_ICON}</span>
-                    <ColorPicker t-if="state.fillColorTool" t-on-color-picked="setColor('fillColor')" t-key="fillColor"/>
-        </div>
-    </div>
-    <div class="o-sidePanelButtons">
-      <button t-on-click="onCancel" class="o-sidePanelButton o-cf-cancel" t-esc="env._t('${terms.CANCEL}')"></button>
-      <button t-on-click="onSave" class="o-sidePanelButton o-cf-save" t-esc="env._t('${terms.SAVE}')"></button>
-    </div>
-</div>
-`;
-
-const CSS = css/* scss */ `
-  .o-cf-title-text {
-    font-size: 12px;
-    line-height: 14px;
-    margin-bottom: 6px;
-    margin-top: 18px;
-  }
-  .o-cf-preview-line {
-    border: 1px solid darkgrey;
-    padding: 10px;
-  }
-`;
-
-interface Props {
-  conditionalFormat: ConditionalFormat;
-}
-
-export class CellIsRuleEditor extends Component<Props, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static style = CSS;
-  static components = { ColorPicker };
-
-  // @ts-ignore   used in XML template
-  private cellIsOperators = cellIsOperators;
-
-  cf = this.props.conditionalFormat as ConditionalFormat;
-  rule = this.cf.rule as CellIsRule;
-  state = useState({
-    condition: {
-      operator: this.rule && this.rule.operator ? this.rule.operator : "Equal",
-      value1: this.rule && this.rule.values.length > 0 ? this.rule.values[0] : "",
-      value2: this.cf && this.rule.values.length > 1 ? this.rule.values[1] : "",
-    },
-
-    textColorTool: false,
-    fillColorTool: false,
-    style: {
-      fillColor: this.cf && this.rule.style.fillColor,
-      textColor: this.cf && this.rule.style.textColor,
-      bold: this.cf && this.rule.style.bold,
-      italic: this.cf && this.rule.style.italic,
-      strikethrough: this.cf && this.rule.style.strikethrough,
-    },
-  });
-  constructor() {
-    super(...arguments);
-    useExternalListener(window as any, "click", this.closeMenus);
-  }
-
-  toggleMenu(tool) {
-    const current = this.state[tool];
-    this.closeMenus();
-    this.state[tool] = !current;
-  }
-
-  toggleTool(tool: string) {
-    this.state.style[tool] = !this.state.style[tool];
-    this.closeMenus();
-  }
-  setColor(target: string, ev: CustomEvent) {
-    const color = ev.detail.color;
-    this.state.style[target] = color;
-    this.closeMenus();
-  }
-  closeMenus() {
-    this.state.textColorTool = false;
-    this.state.fillColorTool = false;
-  }
-
-  onSave() {
-    const newStyle: Style = {};
-    const style = this.state.style;
-    if (style.bold !== undefined) {
-      newStyle.bold = style.bold;
-    }
-    if (style.italic !== undefined) {
-      newStyle.italic = style.italic;
-    }
-    if (style.strikethrough !== undefined) {
-      newStyle.strikethrough = style.strikethrough;
-    }
-    if (style.fillColor) {
-      newStyle.fillColor = style.fillColor;
-    }
-    if (style.textColor) {
-      newStyle.textColor = style.textColor;
-    }
-
-    this.trigger("modify-rule", {
-      rule: {
-        type: "CellIsRule",
-        operator: this.state.condition.operator,
-        values: [this.state.condition.value1, this.state.condition.value2],
-        stopIfTrue: false,
-        style: newStyle,
-      },
-    });
-  }
-  onCancel() {
-    this.trigger("cancel-edit");
-  }
-}

package/src/components/side_panel/chart_panel.ts

@@ -1,104 +0,0 @@
-import * as owl from "@odoo/owl";
-import { uuidv4 } from "../../helpers/index";
-import { ChartFigure, ChartTypes, CreateChartDefinition, SpreadsheetEnv } from "../../types/index";
-import { SelectionInput } from "../selection_input";
-import { chartTerms } from "./translations_terms";
-
-const { Component, useState } = owl;
-const { xml } = owl.tags;
-
-const TEMPLATE = xml/* xml */ `
-  <div class="o-chart">
-    <div class="o-section">
-      <div class="o-section-title"><t t-esc="env._t('${chartTerms.ChartType}')"/></div>
-      <select t-model="state.type" class="o-input o-type-selector">
-        <option value="bar" t-esc="env._t('${chartTerms.Bar}')"/>
-        <option value="line" t-esc="env._t('${chartTerms.Line}')"/>
-        <option value="pie" t-esc="env._t('${chartTerms.Pie}')"/>
-      </select>
-    </div>
-    <div class="o-section o-chart-title">
-      <div class="o-section-title" t-esc="env._t('${chartTerms.Title}')"/>
-      <input type="text" t-model="state.title" class="o-input" t-att-placeholder="env._t('${chartTerms.TitlePlaceholder}')"/>
-    </div>
-    <div class="o-section o-data-series">
-      <div class="o-section-title" t-esc="env._t('${chartTerms.DataSeries}')"/>
-      <SelectionInput ranges="state.ranges" t-on-selection-changed="onSeriesChanged"/>
-      <input type="checkbox" t-model="state.seriesHasTitle"/><t t-esc="env._t('${chartTerms.MyDataHasTitle}')"/>
-    </div>
-    <div class="o-section o-data-labels">
-        <div class="o-section-title" t-esc="env._t('${chartTerms.DataCategories}')"/>
-        <SelectionInput ranges="[state.labelRange]" t-on-selection-changed="onLabelRangeChanged" maximumRanges="1"/>
-    </div>
-    <div class="o-sidePanelButtons">
-      <button t-if="props.figure" t-on-click="updateChart(props.figure)" class="o-sidePanelButton" t-esc="env._t('${chartTerms.UpdateChart}')"/>
-      <button t-else="" t-on-click="createChart" class="o-sidePanelButton" t-esc="env._t('${chartTerms.CreateChart}')"/>
-    </div>
-  </div>
-`;
-
-interface Props {
-  figure?: ChartFigure;
-}
-
-interface ChartPanelState {
-  type: ChartTypes;
-  title: string;
-  ranges: string[];
-  labelRange: string;
-  seriesHasTitle: boolean;
-}
-
-export class ChartPanel extends Component<Props, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static components = { SelectionInput };
-  private getters = this.env.getters;
-
-  private state: ChartPanelState = useState(this.initialState());
-
-  onSeriesChanged(ev: CustomEvent) {
-    this.state.ranges = ev.detail.ranges;
-  }
-
-  onLabelRangeChanged(ev: CustomEvent) {
-    this.state.labelRange = ev.detail.ranges[0];
-  }
-
-  createChart() {
-    this.env.dispatch("CREATE_CHART", {
-      sheetId: this.getters.getActiveSheet(),
-      id: uuidv4(),
-      definition: this.getChartDefinition(),
-    });
-    this.trigger("close-side-panel");
-  }
-
-  updateChart(chart: ChartFigure) {
-    this.env.dispatch("UPDATE_CHART", {
-      id: chart.id,
-      definition: this.getChartDefinition(),
-    });
-    this.trigger("close-side-panel");
-  }
-
-  private getChartDefinition(): CreateChartDefinition {
-    return {
-      type: this.state.type,
-      title: this.state.title,
-      labelRange: this.state.labelRange.trim() || "",
-      dataSets: this.state.ranges.slice(),
-      seriesHasTitle: this.state.seriesHasTitle,
-    };
-  }
-
-  private initialState(): ChartPanelState {
-    const data = this.props.figure ? this.props.figure.data : undefined;
-    return {
-      title: data && data.title ? data.title : "",
-      ranges: data ? data.dataSets.map((ds) => ds.dataRange) : [],
-      labelRange: data ? data.labelRange : "",
-      type: data ? data.type : "bar",
-      seriesHasTitle: data ? data.title !== undefined : false,
-    };
-  }
-}

package/src/components/side_panel/color_scale_rule_editor.ts

@@ -1,145 +0,0 @@
-import * as owl from "@odoo/owl";
-import { colorNumberString } from "../../helpers/index";
-import { ColorScaleRule, ConditionalFormat, SpreadsheetEnv } from "../../types";
-import { ColorPicker } from "../color_picker";
-import * as icons from "../icons";
-
-const { Component, useState, hooks } = owl;
-const { useExternalListener } = hooks;
-const { xml, css } = owl.tags;
-
-export const PREVIEW_TEMPLATE = xml/* xml */ `
-    <div class="o-cf-preview-gradient" t-attf-style="background-image: linear-gradient(to right, #{{colorNumberString(state.minimum.color)}}, #{{colorNumberString(state.maximum.color)}})">
-      <div t-esc="previewText">Preview text</div>
-    </div>
-`;
-
-const THRESHOLD_TEMPLATE = xml/* xml */ `
-  <div t-attf-class="o-threshold o-threshold-{{thresholdType}}">
-      <div class="o-tools">
-        <div class="o-tool  o-dropdown o-with-color">
-        <span title="Fill Color"  t-attf-style="border-color:#{{colorNumberString(threshold.color)}}"
-              t-on-click.stop="toggleMenu(thresholdType+'ColorTool')">${icons.FILL_COLOR_ICON}</span>
-              <ColorPicker t-if="state[thresholdType+'ColorTool']" t-on-color-picked="setColor(thresholdType)"/>
-          </div>
-      </div>
-      <select name="valueType" t-model="threshold.type" t-on-click="closeMenus">
-          <option value="value">Cell values</option>
-<!--          <option value="number">Fixed number</option>--> <!-- not yet implemented -->
-<!--          <option value="percentage">Percentage</option>-->
-<!--          <option value="percentile">Percentile</option>-->
-<!--          <option value="formula">Formula</option>-->
-      </select>
-
-      <input type="text" t-model="threshold.value" class="o-threshold-value"
-            t-att-disabled="threshold.type !== 'number'"/>
-  </div>`;
-
-const TEMPLATE = xml/* xml */ `
-  <div>
-      <div class="o-section-title">Format rules</div>
-      <div class="o-cf-title-text">Preview</div>
-      <t t-call="${PREVIEW_TEMPLATE}"/>
-      <div class="o-cf-title-text">Minpoint</div>
-      <t t-call="${THRESHOLD_TEMPLATE}">
-          <t t-set="threshold" t-value="state.minimum" ></t>
-          <t t-set="thresholdType" t-value="'minimum'" ></t>
-      </t>
-      <div class="o-cf-title-text">MaxPoint</div>
-      <t t-call="${THRESHOLD_TEMPLATE}">
-          <t t-set="threshold" t-value="state.maximum" ></t>
-          <t t-set="thresholdType" t-value="'maximum'" ></t>
-      </t>
-      <div class="o-sidePanelButtons">
-        <button t-on-click="onCancel" class="o-sidePanelButton o-cf-cancel">Cancel</button>
-        <button t-on-click="onSave" class="o-sidePanelButton o-cf-save">Save</button>
-      </div>
-  </div>`;
-
-const CSS = css/* scss */ `
-  .o-cf-title-text {
-    font-size: 12px;
-    line-height: 14px;
-    margin-bottom: 6px;
-    margin-top: 18px;
-  }
-  .o-threshold {
-    display: flex;
-    flex-direction: horizontal;
-
-    .o-threshold-value {
-      width: 5em;
-      margin-left: 15px;
-      margin-right: 15px;
-    }
-  }
-  .o-cf-preview-gradient {
-    border: 1px solid darkgrey;
-    padding: 10px;
-  }
-`;
-
-interface Props {
-  conditionalFormat: ConditionalFormat;
-}
-
-export class ColorScaleRuleEditor extends Component<Props, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static style = CSS;
-  static components = { ColorPicker };
-
-  cf = this.props.conditionalFormat;
-  colorNumberString = colorNumberString;
-  rule = this.cf ? (this.cf.rule as ColorScaleRule) : null;
-  state = useState({
-    minimum: this.rule
-      ? Object.assign({}, this.rule.minimum)
-      : { color: 0xffffff, type: "value", value: null },
-    maximum: this.rule
-      ? Object.assign({}, this.rule.maximum)
-      : { color: 0x000000, type: "value", value: null },
-    midpoint:
-      this.rule && Object.assign({}, this.rule.midpoint)
-        ? this.rule.midpoint
-        : { color: 0xffffff, type: "value", value: null },
-    maximumColorTool: false,
-    minimumColorTool: false,
-  });
-  constructor() {
-    super(...arguments);
-    useExternalListener(window as any, "click", this.closeMenus);
-  }
-
-  toggleMenu(tool) {
-    const current = this.state[tool];
-    this.closeMenus();
-    this.state[tool] = !current;
-  }
-
-  toggleTool(tool: string) {
-    this.closeMenus();
-  }
-  setColor(target: string, ev: CustomEvent) {
-    const color: string = ev.detail.color;
-    this.state[target].color = Number.parseInt(color.substr(1), 16);
-    this.closeMenus();
-  }
-  closeMenus() {
-    this.state.minimumColorTool = false;
-    this.state.maximumColorTool = false;
-  }
-
-  onSave() {
-    this.trigger("modify-rule", {
-      rule: {
-        type: "ColorScaleRule",
-        minimum: this.state.minimum,
-        maximum: this.state.maximum,
-        midpoint: this.state.midpoint,
-      },
-    });
-  }
-  onCancel() {
-    this.trigger("cancel-edit");
-  }
-}