@odoo/o-spreadsheet 1.0.1

package/src/components/side_panel/cell_is_rule_editor.ts

@@ -0,0 +1,169 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,145 @@
+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");
+  }
+}