feat(#77): change section options in visual editor

Author: MindFreeze

src/editor/entity.ts

@@ -55,7 +55,7 @@ const computeSchema = (entityConf: EntityConfig, icon: string) => [
 ];
 
 @customElement('sankey-chart-entity-editor')
-export class SankeyChartEntityEditor extends LitElement {
+class SankeyChartEntityEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
   @property({ attribute: false }) public entity!: EntityConfigOrStr;
   @property({ attribute: false }) public onClose!: () => void;
@@ -69,7 +69,14 @@ export class SankeyChartEntityEditor extends LitElement {
     return localize('editor.fields.' + schema.name);
   };
 
-  private _editChild(ev) {
+  private _editChild(
+    ev: CustomEvent & {
+      target: {
+        value: string;
+        index: number;
+      };
+    },
+  ) {
     const {
       detail: { value },
       target,
@@ -104,7 +111,7 @@ export class SankeyChartEntityEditor extends LitElement {
     return html`
       <div class="header">
         <ha-icon-button .label=${this.hass!.localize('ui.common.back')} @click=${this.onClose}>
-          <ha-icon .icon=${'mdi:arrow-left'} />
+          <ha-icon .icon=${'mdi:arrow-left'}></ha-icon>
         </ha-icon-button>
         <h2>${localize('editor.entity_editor')}</h2>
       </div>
@@ -164,3 +171,5 @@ export class SankeyChartEntityEditor extends LitElement {
     `;
   }
 }
+
+export default SankeyChartEntityEditor;

src/editor/index.ts

@@ -7,7 +7,8 @@ import { customElement, property, state } from 'lit/decorators';
 import { repeat } from 'lit/directives/repeat';
 import { SankeyChartConfig, SectionConfig } from '../types';
 import { localize } from '../localize/localize';
-import { getEntityId, normalizeConfig } from '../utils';
+import { normalizeConfig } from '../utils';
+import './section';
 import './entity';
 import { EntityConfigOrStr } from '../types';
 import { UNIT_PREFIXES } from '../const';
@@ -132,14 +133,22 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
     this._entityConfig = { sectionIndex, entityIndex, entity: sections[sectionIndex].entities[entityIndex] };
   }
 
-  private _handleEntityConfig = (entityConf: EntityConfigOrStr): void => {
+  private _handleEntityChange = (entityConf: EntityConfigOrStr): void => {
     this._editEntity({
       detail: { value: entityConf },
       target: { section: this._entityConfig?.sectionIndex, index: this._entityConfig?.entityIndex },
     });
     this._entityConfig = { ...this._entityConfig!, entity: entityConf };
   };
 
+  private _handleSectionChange = (index: number, sectionConf: SectionConfig): void => {
+    this._config = {
+      ...this._config!,
+      sections: this._config?.sections?.map((section, i) => (i === index ? sectionConf : section)),
+    };
+    this._updateConfig();
+  };
+
   private _updateConfig(): void {
     fireEvent(this, 'config-changed', { config: this._config });
   }
@@ -209,11 +218,11 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
         <sankey-chart-entity-editor
           .hass=${this.hass}
           .entity=${this._entityConfig.entity}
-          .onChange=${this._handleEntityConfig}
+          .onChange=${this._handleEntityChange}
           .onClose=${() => {
             this._entityConfig = undefined;
           }}
-        />
+        ></sankey-chart-entity-editor>
       `;
     }
 
@@ -268,46 +277,20 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
     return html`
       <div class="sections">
         <h3>${localize('editor.sections')}</h3>
-        ${sections.map(
+        ${repeat(
+          sections,
+          (s, i) => i,
           (section, sectionIndex) =>
             html`
-              <ha-card .header=${localize('editor.section') + ` ${sectionIndex + 1}`} class="section">
-                <div class="entities">
-                  ${repeat(
-                    section.entities,
-                    entityConf => sectionIndex + getEntityId(entityConf),
-                    (entityConf, i) => html`
-                      <div class="entity">
-                        <div class="handle">
-                          <ha-icon .icon=${'mdi:drag'} />
-                        </div>
-                        <ha-entity-picker
-                          allow-custom-entity
-                          .hass=${this.hass}
-                          .value=${getEntityId(entityConf)}
-                          .section=${sectionIndex}
-                          .index=${i}
-                          @value-changed=${this._editEntity}
-                        ></ha-entity-picker>
-                        <ha-icon-button
-                          .label=${this.hass!.localize('ui.components.entity.entity-picker.edit')}
-                          class="edit-icon"
-                          @click=${() => this._configEntity(sectionIndex, i)}
-                        >
-                          <ha-icon .icon=${'mdi:pencil'} />
-                        </ha-icon-button>
-                      </div>
-                    `,
-                  )}
-                </div>
-                <ha-entity-picker
-                  allow-custom-entity
-                  class="add-entity"
-                  .hass=${this.hass}
-                  .section=${sectionIndex}
-                  @value-changed=${this._addEntity}
-                ></ha-entity-picker>
-              </ha-card>
+              <sankey-chart-section-editor
+                .hass=${this.hass}
+                .section=${section}
+                .index=${sectionIndex}
+                .onConfigEntity=${this._configEntity.bind(this, sectionIndex)}
+                .onChange=${this._handleSectionChange.bind(this, sectionIndex)}
+                .onChangeEntity=${this._editEntity.bind(this)}
+                .onAddEntity=${this._addEntity.bind(this)}
+              ></sankey-chart-section-editor>
             `,
         )}
         <ha-actions>
@@ -342,46 +325,8 @@ export class SankeyChartEditor extends LitElement implements LovelaceCardEditor
         flex-direction: column;
         margin-bottom: 20px;
       }
-      .section {
-        margin-bottom: 16px;
-        padding: 0 10px 10px;
-      }
       ha-formfield {
-        padding-bottom: 8px;
-      }
-      .add-entity {
-        display: block;
-        margin-left: 31px;
-        margin-right: 36px;
-        margin-inline-start: 31px;
-        margin-inline-end: 36px;
-        direction: var(--direction);
-      }
-      .entity {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-      }
-
-      .entity .handle {
-        visibility: hidden;
-        padding-right: 8px;
-        cursor: move;
-        padding-inline-end: 8px;
-        padding-inline-start: initial;
-        direction: var(--direction);
-      }
-      .entity .handle > * {
-        pointer-events: none;
-      }
-
-      .entity ha-entity-picker {
-        flex-grow: 1;
-      }
-
-      .edit-icon {
-        --mdc-icon-button-size: 36px;
-        /* color: var(--secondary-text-color); */
+          padding-bottom: 8px;
       }
     `;
   }

src/editor/section.ts

@@ -0,0 +1,166 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { customElement, property } from 'lit/decorators';
+import { SectionConfig } from '../types';
+import { localize } from '../localize/localize';
+import { repeat } from 'lit/directives/repeat';
+import { getEntityId } from '../utils';
+
+@customElement('sankey-chart-section-editor')
+class SankeyChartSectionEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public section!: SectionConfig;
+  @property({ attribute: false }) public index!: number;
+  @property({ attribute: false }) public onChange!: (sectionConf: SectionConfig) => void;
+  @property({ attribute: false }) public onConfigEntity!: (entityIndex: number) => void;
+  @property({ attribute: false }) public onChangeEntity!: (ev: CustomEvent) => void;
+  @property({ attribute: false }) public onAddEntity!: (ev: CustomEvent) => void;
+
+  private _valueChanged(ev: CustomEvent): void {
+    const { value } = ev.detail;
+    this.onChange({ ...value, sort_by: value.sort_by || undefined, sort_dir: value.sort_dir || undefined });
+  }
+
+  private _computeSchema = () => {
+    return [
+      { name: 'min_width', selector: { text: {} } },
+      {
+        type: 'grid',
+        name: '',
+        schema: [
+          {
+            name: 'sort_by',
+            selector: {
+              select: {
+                mode: 'dropdown',
+                options: [{ value: '' }, { value: 'state', label: localize('editor.sort_by.state') }],
+              },
+            },
+          },
+          {
+            name: 'sort_dir',
+            selector: {
+              select: {
+                mode: 'dropdown',
+                options: [
+                  { value: '' },
+                  { value: 'desc', label: localize('editor.sort_dir.desc') },
+                  { value: 'asc', label: localize('editor.sort_dir.asc') },
+                ],
+              },
+            },
+          },
+          { name: 'sort_group_by_parent', selector: { boolean: {} } },
+        ],
+      },
+    ];
+  };
+
+  private _computeLabel = (schema: { name: string }) => {
+    return localize('editor.fields.section.' + schema.name);
+  };
+
+  protected render(): TemplateResult | void {
+    return html`
+      <ha-card class="section">
+        <ha-expansion-panel
+          .header=${localize('editor.section') + ` ${this.index + 1}`}
+          .secondary=${localize('editor.section_options')}
+          .leftChevron=${true}
+        >
+          <br />
+          <ha-form
+            .hass=${this.hass}
+            .data=${this.section}
+            .schema=${this._computeSchema()}
+            .computeLabel=${this._computeLabel}
+            @value-changed=${this._valueChanged}
+          ></ha-form>
+          <br />
+        </ha-expansion-panel>
+
+        <div class="entities">
+          ${repeat(
+            this.section.entities,
+            entityConf => this.index + getEntityId(entityConf),
+            (entityConf, i) => html`
+              <div class="entity">
+                <div class="handle">
+                  <ha-icon .icon=${'mdi:drag'}></ha-icon>
+                </div>
+                <ha-entity-picker
+                  allow-custom-entity
+                  .hass=${this.hass}
+                  .value=${getEntityId(entityConf)}
+                  .section=${this.index}
+                  .index=${i}
+                  @value-changed=${this.onChangeEntity}
+                ></ha-entity-picker>
+                <ha-icon-button
+                  .label=${this.hass!.localize('ui.components.entity.entity-picker.edit')}
+                  class="edit-icon"
+                  @click=${() => this.onConfigEntity(i)}
+                >
+                  <ha-icon .icon=${'mdi:pencil'}></ha-icon>
+                </ha-icon-button>
+              </div>
+            `,
+          )}
+        </div>
+        <ha-entity-picker
+          allow-custom-entity
+          class="add-entity"
+          .hass=${this.hass}
+          .section=${this.index}
+          @value-changed=${this.onAddEntity}
+        ></ha-entity-picker>
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .section {
+        margin-bottom: 16px;
+        padding: 0 10px 10px;
+      }
+      .add-entity {
+        display: block;
+        margin-left: 31px;
+        margin-right: 36px;
+        margin-inline-start: 31px;
+        margin-inline-end: 36px;
+        direction: var(--direction);
+      }
+      .entity {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+      }
+
+      .entity .handle {
+        visibility: hidden;
+        padding-right: 8px;
+        cursor: move;
+        padding-inline-end: 8px;
+        padding-inline-start: initial;
+        direction: var(--direction);
+      }
+      .entity .handle > * {
+        pointer-events: none;
+      }
+
+      .entity ha-entity-picker {
+        flex-grow: 1;
+      }
+
+      .edit-icon {
+        --mdc-icon-button-size: 36px;
+        /* color: var(--secondary-text-color); */
+      }
+    `;
+  }
+}
+
+export default SankeyChartSectionEditor;

src/localize/languages/en.json

@@ -16,6 +16,7 @@
     "add_entity": "+ Add entity",
     "entity_editor": "Entity editor",
     "decimals": "decimals",
+    "section_options": "Options",
     "fields": {
       "autoconfig": "Autoconfig",
       "print_yaml": "Print auto generated config yaml",
@@ -43,13 +44,26 @@
       "color_on_state": "Change color based on state",
       "color_limit": "State limit for color change",
       "color_above": "Color above limit",
-      "color_below": "Color below limit"
+      "color_below": "Color below limit",
+      "section": {
+        "min_width": "Min width",
+        "sort_by": "Sort by",
+        "sort_dir": "Sort direction",
+        "sort_group_by_parent": "Group by parent"
+      }
     },
     "entity_types": {
       "entity": "Entity",
       "remaining_parent_state": "Remaining parent state",
       "remaining_child_state": "Remaining child state",
       "passthrough": "Passthrough"
+    },
+    "sort_by": {
+      "state": "State"
+    },
+    "sort_dir": {
+      "desc": "Descending",
+      "asc": "Ascending"
     }
   }
 }