@odoo/o-spreadsheet 17.3.0-alpha.6 → 17.3.0-alpha.9

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 17.3.0-alpha.6
- @date 2024-04-26T07:40:36.934Z
- @hash f58a0d5
+ @version 17.3.0-alpha.9
+ @date 2024-05-24T11:32:57.581Z
+ @hash aac246d
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -4170,18 +4170,6 @@
     </div>
   </t>
 
-  <div t-name="o-spreadsheet-AllPivotsSidePanel" class="o_spreadsheet_pivot_side_panel">
-    <t t-foreach="env.model.getters.getPivotIds()" t-as="pivotId" t-key="pivotId">
-      <PivotPreview pivotId="pivotId"/>
-    </t>
-  </div>
-
-  <t t-name="o-spreadsheet-PivotPreview">
-    <div class="o_side_panel_select" t-ref="pivotPreview" t-on-click="this.selectPivot">
-      <span t-esc="env.model.getters.getPivotDisplayName(props.pivotId)"/>
-    </div>
-  </t>
-
   <t t-name="o-spreadsheet-EditableName">
     <t t-if="state.isEditing">
       <div>
@@ -4205,32 +4193,31 @@
       Add
     </span>
     <Popover t-if="popover.isOpen" t-props="popoverProps">
-      <div class="p-2 bg-white border-bottom d-flex align-items-baseline pivot-dimension-search">
+      <div
+        class="p-2 bg-white border-bottom d-flex sticky-top align-items-baseline pivot-dimension-search">
         <i class="pe-1 pivot-dimension-search-field-icon">
           <t t-call="o-spreadsheet-Icon.SEARCH"/>
         </i>
         <input
-          t-model="search.input"
+          t-on-input="(ev) => this.updateSearch(ev.target.value)"
           t-on-keydown="onKeyDown"
           class="border-0 w-100 pivot-dimension-search-field"
-          autofocus="1"
+          t-ref="autofocus"
         />
       </div>
-      <div
-        t-foreach="filteredFields"
-        t-as="field"
-        t-key="field.name"
-        t-esc="field.string"
-        t-att-title="field.help"
-        t-on-click="() => this.pickField(field)"
-        class="p-1 px-2 pivot-dimension-field"
-        role="button"
+      <TextValueProvider
+        proposals="autoComplete.provider.proposals"
+        selectedIndex="autoComplete.selectedIndex"
+        onValueSelected="autoComplete.provider.selectProposal"
+        onValueHovered="() => {}"
       />
     </Popover>
   </t>
 
   <t t-name="o-spreadsheet-PivotDimension">
-    <div class="border py-1 px-2 d-flex flex-column shadow-sm pivot-dimension">
+    <div
+      class="border py-1 px-2 d-flex flex-column shadow-sm pivot-dimension"
+      t-att-class="{'bg-danger': !props.dimension.isValid}">
       <div class="d-flex flex-row justify-content-between align-items-center">
         <span class="fw-bold" t-esc="props.dimension.displayName"/>
         <i
@@ -4252,7 +4239,7 @@
           class="o_input flex-basis-50"
           t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
           <option
-            t-foreach="allGranularities"
+            t-foreach="props.allGranularities"
             t-as="granularity"
             t-key="granularity"
             t-if="props.availableGranularities.has(granularity) || granularity === props.dimension.granularity"
@@ -4272,17 +4259,23 @@
         <select
           class="o_input flex-basis-50"
           t-on-change="(ev) => props.onUpdated(props.dimension, ev.target.value)">
-          <option value="" t-att-selected="props.dimension.order === undefined">Automatic</option>
           <option value="asc" t-att-selected="props.dimension.order === 'asc'">Ascending</option>
           <option value="desc" t-att-selected="props.dimension.order === 'desc'">Descending</option>
+          <option
+            t-if="props.dimension.type !== 'date'"
+            value=""
+            t-att-selected="props.dimension.order === undefined">
+            Unsorted
+          </option>
         </select>
       </div>
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-PivotDimensions">
-    <div class="o_side_panel_section pivot-dimensions" t-ref="pivot-dimensions">
-      <div class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center">
+  <t t-name="o-spreadsheet-PivotLayoutConfigurator">
+    <div class="o_side_panel_section pivot-dimensions o-section" t-ref="pivot-dimensions">
+      <div
+        class="fw-bold py-1 d-flex flex-row justify-content-between align-items-center o-section-title">
         Columns
         <AddDimensionButton
           onFieldPicked.bind="addColumnDimension"
@@ -4300,13 +4293,14 @@
               dimension="col"
               onUpdated.bind="this.updateGranularity"
               availableGranularities="props.unusedDateTimeGranularities[col.name]"
+              allGranularities="props.allGranularities"
             />
             <PivotDimensionOrder dimension="col" onUpdated.bind="this.updateOrder"/>
           </PivotDimension>
         </div>
       </t>
       <div
-        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center"
+        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title"
         t-att-style="dragAndDrop.itemsStyle['__rows_title__']">
         Rows
         <AddDimensionButton
@@ -4325,12 +4319,14 @@
               dimension="row"
               onUpdated.bind="this.updateGranularity"
               availableGranularities="props.unusedDateTimeGranularities[row.name]"
+              allGranularities="props.allGranularities"
             />
             <PivotDimensionOrder dimension="row" onUpdated.bind="this.updateOrder"/>
           </PivotDimension>
         </div>
       </t>
-      <div class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center">
+      <div
+        class="fw-bold pt-4 pb-1 d-flex flex-row justify-content-between align-items-center o-section-title">
         Measures
         <AddDimensionButton
           onFieldPicked.bind="addMeasureDimension"
@@ -4366,6 +4362,93 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotListItem">
+    <div
+      class="o_pivot_list_item p-4 border-bottom"
+      t-ref="pivotListItem"
+      t-on-click="this.selectPivot">
+      <span t-esc="env.model.getters.getPivotDisplayName(props.pivotId)"/>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotSidePanel">
+    <t t-if="props.pivotId" t-component="sidePanelEditor" t-props="props"/>
+    <t t-else="">
+      <t t-foreach="env.model.getters.getPivotIds()" t-as="pivotId" t-key="pivotId">
+        <PivotListItem pivotId="pivotId"/>
+      </t>
+    </t>
+  </t>
+
+  <t t-name="o-spreadsheet-PivotSpreadsheetSidePanel">
+    <div class="d-flex flex-column h-100 justify-content-between overflow-hidden">
+      <div class="h-100 overflow-auto">
+        <Section>
+          <t t-set-slot="title">Name</t>
+          <EditableName name="name" displayName="displayName" onChanged.bind="onNameChanged"/>
+          <div class="btn btn-link o_duplicate_pivot" t-on-click="duplicatePivot">
+            <i class="fa fa-solid fa-copy me-1"/>
+            Duplicate Pivot
+          </div>
+        </Section>
+        <Section>
+          <t t-set-slot="title">Range</t>
+          <SelectionInput
+            ranges="ranges"
+            required="true"
+            isInvalid="shouldDisplayInvalidRangeError"
+            hasSingleRange="true"
+            onSelectionChanged="(ranges) => this.onSelectionChanged(ranges)"
+            onSelectionConfirmed="() => this.onSelectionConfirmed()"
+          />
+          <span
+            class="text-danger sp_range_error_message"
+            t-if="shouldDisplayInvalidRangeError"
+            t-esc="pivot.invalidRangeMessage"
+          />
+        </Section>
+
+        <PivotLayoutConfigurator
+          t-if="!pivot.isInvalidRange"
+          unusedGroupableFields="store.unusedGroupableFields"
+          unusedMeasureFields="store.unusedMeasureFields"
+          unusedDateTimeGranularities="store.unusedDateTimeGranularities"
+          allGranularities="store.allGranularities"
+          definition="definition"
+          onDimensionsUpdated.bind="onDimensionsUpdated"
+        />
+        <Section>
+          <button class="btn btn-link sp_back" t-on-click="back">Back</button>
+          <button class="btn btn-link sp_delete" t-on-click="delete">Delete</button>
+        </Section>
+      </div>
+      <Section
+        class="'align-items-center border-top d-flex flex-row justify-content-between py-1 pivot-defer-update'">
+        <Checkbox
+          label="deferUpdatesLabel"
+          title="deferUpdatesTooltip"
+          value="store.updatesAreDeferred"
+          onChange="(value) => store.deferUpdates(value)"
+        />
+        <div>
+          <i
+            t-if="store.isDirty"
+            class="btn btn-sm pe-0 fa fa-undo"
+            title="Discard all changes"
+            t-on-click="() => store.discardPendingUpdate()"
+          />
+          <span
+            t-if="store.isDirty"
+            class="btn btm-sm btn-link sp_apply_update"
+            title="Apply all changes"
+            t-on-click="() => store.applyUpdate()">
+            Update
+          </span>
+        </div>
+      </Section>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-RemoveDuplicatesPanel">
     <div class="o-remove-duplicates">
       <Section>
@@ -4644,42 +4727,34 @@
       <Section class="'pt-1'">
         <t t-set-slot="title">Style color</t>
         <div class="d-flex align-items-center">
-          <div
-            class="o-color-preview"
-            t-att-style="colorPreviewStyle"
-            t-on-click.stop="togglePicker"
-          />
-          <span class="pe-1">Primary table style color</span>
-          <ColorPickerWidget
-            currentColor="state.primaryColor"
-            showColorPicker="state.pickerOpened"
-            toggleColorPicker.bind="togglePicker"
-            onColorPicked.bind="onColorPicked"
-            icon="'o-spreadsheet-Icon.FILL_COLOR'"
-          />
+          <span class="pe-2">Primary table style color</span>
+          <RoundColorPicker currentColor="state.primaryColor" onColorPicked.bind="onColorPicked"/>
         </div>
       </Section>
       <Section class="'pt-1'">
         <t t-set-slot="title">Style template</t>
         <div class="d-flex flex-wrap">
-          <div
-            class="o-table-style-list-item"
-            t-foreach="tableTemplates"
-            t-as="templateName"
-            t-key="templateName"
-            t-att-class="{ 'selected': templateName === state.selectedTemplateName }"
-            t-on-click="() => this.onTemplatePicked(templateName)">
-            <div class="o-table-style-edit-template-preview">
-              <TableStylePreview
-                tableConfig="previewTableConfig"
-                tableStyle="computeTableStyle(templateName)"
-              />
-            </div>
-          </div>
+          <t t-foreach="tableTemplates" t-as="templateName" t-key="templateName">
+            <TableStylePreview
+              class="'o-table-style-edit-template-preview'"
+              selected="templateName === state.selectedTemplateName"
+              tableConfig="previewTableConfig"
+              tableStyle="computeTableStyle(templateName)"
+              onClick="() => this.onTemplatePicked(templateName)"
+            />
+          </t>
         </div>
         <div class="o-sidePanelButtons">
-          <button t-on-click="onCancel" class="o-cancel o-button">Cancel</button>
-          <button t-on-click="onConfirm" class="o-confirm o-button">Confirm</button>
+          <button
+            t-if="props.styleId"
+            t-on-click="onDelete"
+            class="o-delete o-button o-button-grey danger">
+            Delete
+          </button>
+          <button t-on-click="onCancel" class="o-cancel o-button o-button-grey">Cancel</button>
+          <button t-on-click="onConfirm" class="o-confirm o-button o-button-grey primary">
+            Confirm
+          </button>
         </div>
       </Section>
     </div>
@@ -4746,23 +4821,16 @@
   <t t-name="o-spreadsheet-TableStylePicker">
     <div class="o-table-style-picker d-flex flew-row justify-content-between ps-1">
       <div class="d-flex flex-row overflow-hidden">
-        <div
-          class="o-table-style-list-item"
-          t-att-class="{ 'selected': styleId === props.table.config.styleId }"
-          t-foreach="getDisplayedTableStyles()"
-          t-as="styleId"
-          t-key="styleId"
-          t-att-title="getStyleName(styleId)"
-          t-att-data-id="styleId"
-          t-on-click="() => this.onStylePicked(styleId)"
-          t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev, styleId)">
-          <div class="o-table-style-picker-preview">
-            <TableStylePreview
-              tableConfig="props.table.config"
-              tableStyle="env.model.getters.getTableStyle(styleId)"
-            />
-          </div>
-        </div>
+        <t t-foreach="getDisplayedTableStyles()" t-as="styleId" t-key="styleId">
+          <TableStylePreview
+            class="'o-table-style-picker-preview'"
+            selected="styleId === props.table.config.styleId"
+            tableConfig="props.table.config"
+            tableStyle="env.model.getters.getTableStyle(styleId)"
+            styleId="styleId"
+            onClick="() => this.onStylePicked(styleId)"
+          />
+        </t>
       </div>
       <div
         class="o-table-style-picker-arrow d-flex align-items-center px-1"
@@ -4777,6 +4845,27 @@
       popoverProps="state.popoverProps"
       closePopover.bind="closePopover"
     />
+  </t>
+
+  <t t-name="o-spreadsheet-TableStylePreview">
+    <div
+      class="o-table-style-list-item position-relative"
+      t-att-class="{ 'selected': props.selected }"
+      t-att-data-id="props.styleId"
+      t-att-title="styleName"
+      t-on-click="props.onClick"
+      t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev)">
+      <div t-att-class="props.class">
+        <canvas t-ref="canvas" class="w-100 h-100"/>
+      </div>
+      <div
+        class="o-table-style-edit-button position-absolute d-none"
+        t-if="isStyleEditable"
+        t-on-click="this.editTableStyle"
+        title="Edit custom table style">
+        <t t-call="o-spreadsheet-Icon.EDIT"/>
+      </div>
+    </div>
     <Menu
       t-if="menu.isOpen"
       menuItems="menu.menuItems"
@@ -4785,10 +4874,6 @@
     />
   </t>
 
-  <t t-name="o-spreadsheet-TableStylePreview">
-    <canvas t-ref="canvas" class="w-100 h-100"/>
-  </t>
-
   <t t-name="o-spreadsheet-TableStylesPopover">
     <Popover t-if="props.popoverProps" t-props="props.popoverProps">
       <div
@@ -4818,22 +4903,16 @@
         </div>
         <hr class="hr my-2"/>
         <div class="d-flex flex-wrap">
-          <div
-            class="o-table-style-list-item"
-            t-att-class="{ 'selected': styleId === props.selectedStyleId }"
-            t-foreach="displayedStyles"
-            t-as="styleId"
-            t-key="styleId"
-            t-att-title="getStyleName(styleId)"
-            t-on-click="() => this.props.onStylePicked(styleId)"
-            t-on-contextmenu.prevent="(ev) => this.onContextMenu(ev, styleId)">
-            <div class="o-table-style-popover-preview">
-              <TableStylePreview
-                tableConfig="props.tableConfig"
-                tableStyle="env.model.getters.getTableStyle(styleId)"
-              />
-            </div>
-          </div>
+          <t t-foreach="displayedStyles" t-as="styleId" t-key="styleId">
+            <TableStylePreview
+              class="'o-table-style-popover-preview'"
+              styleId="styleId"
+              selected="styleId === props.selectedStyleId"
+              tableConfig="props.tableConfig"
+              tableStyle="env.model.getters.getTableStyle(styleId)"
+              onClick="() => this.props.onStylePicked(styleId)"
+            />
+          </t>
           <div
             t-if="state.selectedCategory === 'custom'"
             class="o-new-table-style o-table-style-list-item o-table-style-popover-preview d-flex justify-content-center align-items-center"
@@ -4842,12 +4921,6 @@
           </div>
         </div>
       </div>
-      <Menu
-        t-if="menu.isOpen"
-        menuItems="menu.menuItems"
-        position="menu.position"
-        onClose.bind="this.closeMenu"
-      />
     </Popover>
   </t>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.3.0-alpha.6",
+  "version": "17.3.0-alpha.9",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -101,7 +101,7 @@
   },
   "dependencies": {
     "@odoo/owl": "2.2.10",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.3.3",
     "font-awesome": "^4.7.0",
     "rbush": "^3.0.1"
   },