@sankhyalabs/sankhyablocks 0.0.0-feat-dev-kb-4158.0

package/dist/collection/components/snk-crud/subcomponents/snk-detail-view/snk-detail-view.js

@@ -0,0 +1,548 @@
+import { Host, forceUpdate, h } from '@stencil/core';
+import { SnkFormConfigManager } from '../../../snk-form/SnkFormConfigManager';
+import { buildFormMetadata } from "@sankhyalabs/ezui/dist/collection/utils/form";
+import { PresentationMode } from '../../../../lib';
+import { TaskbarElement } from '../../../snk-taskbar/elements/taskbar-elements';
+import { VIEW_MODE } from '../../../../lib/utils/constants';
+import { SnkGuidesViewer } from '../snk-guides-viewer';
+import { SnkMessageBuilder } from '../../../../lib/message/SnkMessageBuilder';
+import { GuideBuilder } from '../GuideBuilder';
+export class SnkDetailView {
+  constructor() {
+    this._disabledButtons = undefined;
+    this._currentView = undefined;
+    this.attachmentRegisterKey = undefined;
+    this.formConfigManager = undefined;
+    this.dataUnitName = undefined;
+    this.guideItemPath = undefined;
+    this.entityName = undefined;
+    this.label = undefined;
+    this.dataUnit = undefined;
+    this.selectedForm = undefined;
+    this.dataState = undefined;
+    this.messagesBuilder = undefined;
+    this.branchGuide = undefined;
+    this.canEdit = true;
+  }
+  observerDataState(newValue, oldValue) {
+    const openInsertion = !(oldValue === null || oldValue === void 0 ? void 0 : oldValue.insertionMode) && (newValue === null || newValue === void 0 ? void 0 : newValue.insertionMode);
+    const closeInsertion = (oldValue === null || oldValue === void 0 ? void 0 : oldValue.insertionMode) && !(newValue === null || newValue === void 0 ? void 0 : newValue.insertionMode);
+    if (openInsertion || closeInsertion) {
+      this.loadMetadata();
+    }
+    if (this._formMetadata == undefined) {
+      return;
+    }
+    const newRecord = newValue === null || newValue === void 0 ? void 0 : newValue.selectedRecord;
+    const oldRecord = oldValue === null || oldValue === void 0 ? void 0 : oldValue.selectedRecord;
+    if ((newRecord === null || newRecord === void 0 ? void 0 : newRecord.__record__id__) !== (oldRecord === null || oldRecord === void 0 ? void 0 : oldRecord.__record__id__)) {
+      this.snkDetailGuidesChange.emit(new GuideBuilder(this.branchGuide, this._formMetadata, this.dataUnit));
+    }
+    if (openInsertion) {
+      setTimeout(() => {
+        //FIXME: A necessidade de usar esse timeout é por causa da renderização
+        //do guide navigator... se esse evento subir antes do guidenavigator ter
+        //um item com esse id, ele fica sem seleção. Acredito que poderíamos
+        //ajustar o componente para manter o item selecionado e então remover
+        //esse timeout.
+        this.changeViewMode(VIEW_MODE.FORM);
+      }, 0);
+    }
+    if (closeInsertion) {
+      this.changeViewMode(VIEW_MODE.GRID);
+    }
+    const disabledButtons = [];
+    if (!this.dataState.hasPrevious) {
+      disabledButtons.push(TaskbarElement.PREVIOUS);
+    }
+    if (!this.dataState.hasNext) {
+      disabledButtons.push(TaskbarElement.NEXT);
+    }
+    this._disabledButtons = disabledButtons;
+  }
+  /**
+  * Muda o modo de visualização do componente entre VIEW_MODE.GRID e VIEW_MODE.FORM
+  * @param mode - Novo modo que o componente deve ser apresentado.
+  */
+  async changeViewMode(mode) {
+    this.emitSwitchEvent(mode);
+  }
+  /**
+   * Abre o configurador de grid.
+   */
+  async configGrid() {
+    if (this._snkGrid) {
+      this._snkGrid.showConfig();
+    }
+  }
+  async showUp() {
+    if (this._snkFormView) {
+      this._snkFormView.showUp();
+    }
+    if (this._snkGrid) {
+      this._snkGrid.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
+  onContentCardChanged(evt) {
+    SnkGuidesViewer.updateContentCard(evt.detail.formName, evt.detail.cardConfig, evt.detail.propertyChanged, this.formConfigManager).then(() => forceUpdate(this));
+    evt.stopPropagation();
+  }
+  updateLabel() {
+    const guideItemPathSize = this.guideItemPath ? this.guideItemPath.length : 0;
+    if (guideItemPathSize > 0) {
+      const labels = guideItemPathSize > 0 ? this.guideItemPath.map(item => item.label) : undefined;
+      this.label = labels.pop();
+      this._levelPath = labels.length > 0 ? labels.join(" / ") : undefined;
+    }
+    else {
+      this.label = "";
+      this._levelPath = undefined;
+    }
+  }
+  getFormGuideId(formName) {
+    var _a;
+    if (!formName) {
+      const currentRecord = (_a = this.dataState) === null || _a === void 0 ? void 0 : _a.selectedRecord;
+      if (currentRecord == undefined) {
+        return;
+      }
+      const forms = Array.from(this._formMetadata.getAllSheets().keys());
+      if (!forms || forms.length == 0) {
+        return;
+      }
+      formName = forms[0];
+    }
+    return `${this.stripFormPattern(this.branchGuide.id)}__FORM:${formName}`;
+  }
+  stripFormPattern(guideId) {
+    return guideId.replace(SnkDetailView.REGEX_FORM_ID, "");
+  }
+  loadMetadata() {
+    var _a;
+    if (!this.dataUnit) {
+      return;
+    }
+    if (!this.formConfigManager.isLoaded) {
+      return;
+    }
+    const formConfig = this.formConfigManager.getConfig((_a = this.dataState) === null || _a === void 0 ? void 0 : _a.insertionMode, this.dataUnit);
+    //this._cardsState = formConfig?.cardsState;
+    this._formMetadata = buildFormMetadata(formConfig == undefined || formConfig.fields.length === 0 ? undefined : formConfig, this.dataUnit, true);
+  }
+  dataUnitReadyHandler(evt) {
+    this.dataUnit = evt.detail;
+    this.loadMetadata();
+  }
+  updateViewStack(viewStack) {
+    var _a, _b;
+    this._viewStack = viewStack;
+    this._currentView = this.selectedForm ? 1 : 0;
+    (_b = (_a = this._viewStack) === null || _a === void 0 ? void 0 : _a.show) === null || _b === void 0 ? void 0 : _b.call(_a, this._currentView);
+  }
+  getFormFields() {
+    if (this.selectedForm && this._formMetadata) {
+      return this._formMetadata.getSheet(this.selectedForm).fields;
+    }
+    return [];
+  }
+  emitSwitchEvent(mode) {
+    const guideId = mode === VIEW_MODE.GRID ? this.stripFormPattern(this.branchGuide.id) : this.getFormGuideId();
+    if (guideId) {
+      this.snkSwitchGuide.emit(guideId);
+    }
+  }
+  handleAttachBack() {
+    this._viewStack.show(VIEW_MODE.GRID);
+  }
+  executeActionHandler(evt) {
+    if (evt.detail === TaskbarElement.GRID_MODE) {
+      this.emitSwitchEvent(VIEW_MODE.GRID);
+      evt.stopPropagation();
+    }
+    if (evt.detail === TaskbarElement.FORM_MODE) {
+      this.emitSwitchEvent(VIEW_MODE.FORM);
+      evt.stopPropagation();
+    }
+    if (evt.detail === TaskbarElement.ATTACH) {
+      this._viewStack.show(VIEW_MODE.ATTACHMENT);
+      evt.stopPropagation();
+    }
+  }
+  async getAttachmentRegisterKey() {
+    if (!this._snkDataUnit)
+      return;
+    const recordCriteria = await this._snkDataUnit.getSelectedRecordsIDsInfo();
+    const joinedPrimaryKeys = recordCriteria.map(({ value }) => value).join('_');
+    return joinedPrimaryKeys;
+  }
+  async handleDataStateChange({ detail: dataState }) {
+    this.dataState = dataState;
+    if (dataState.selectedRecord !== undefined && this._snkDataUnit) {
+      this.attachmentRegisterKey = await this.getAttachmentRegisterKey();
+    }
+  }
+  componentWillLoad() {
+    this._configName = `dynaform.${this.entityName}`;
+    this.formConfigManager = new SnkFormConfigManager(this._configName, () => this.loadMetadata());
+    this.formConfigManager.loadConfig();
+    if (this.messagesBuilder == undefined) {
+      this.messagesBuilder = new SnkMessageBuilder(this.entityName);
+    }
+  }
+  render() {
+    this.updateLabel();
+    //const cardConfig: IFormCardConfig = this._cardsState?.get(this.selectedForm);
+    return (h(Host, null, h("snk-data-unit", { ref: (el) => this._snkDataUnit = el, dataUnitName: `${this.dataUnitName}`, onDataUnitReady: evt => this.dataUnitReadyHandler(evt), entityName: this.entityName, onDataStateChange: this.handleDataStateChange.bind(this), ignoreSaveMessage: this._currentView === VIEW_MODE.GRID, messagesBuilder: this.messagesBuilder, configName: this._configName }, h("ez-view-stack", { ref: (ref) => this.updateViewStack(ref) }, h("stack-item", null, h("div", { class: "ez-box ez-box--shadow grid-container" }, h("div", { class: "ez-flex ez-title--primary ez-size-width--full ez-padding--large detail-header" }, h("div", { class: "ez-flex ez-text ez-text--bold ez-flex--justify-start ez-flex--align-items-center" }, this._levelPath ? h("span", { class: "level-path" }, this._levelPath + " /") : undefined, this.label)), h("snk-grid", { class: "ez-size-width--full ez-size-height--full", ref: (ref) => this._snkGrid = ref, configName: this._configName, messagesBuilder: this.messagesBuilder, onGridDoubleClick: () => this.emitSwitchEvent(VIEW_MODE.FORM), onActionClick: (evt) => this.executeActionHandler(evt), presentationMode: PresentationMode.SECONDARY, canEdit: this.canEdit, isDetail: true }))), h("stack-item", null, h("snk-form-view", { ref: (ref) => this._snkFormView = ref, canExpand: false, canFix: false, name: this.selectedForm, formMetadata: this._formMetadata, dataUnit: this.dataUnit, fields: this.getFormFields(), label: this.label, levelPath: this._levelPath }, h("snk-taskbar", { key: "guideViewerTaskbar", class: "form-taskbar", "data-element-id": "guideViewer", configName: this._configName, messagesBuilder: this.messagesBuilder, disabledButtons: this._disabledButtons, buttons: "INSERT,PREVIOUS,NEXT,DIVIDER,CLONE,REMOVE,MORE_OPTIONS,DIVIDER,GRID_MODE,CONFIGURATOR", primaryButton: "INSERT", presentationMode: PresentationMode.SECONDARY, onActionClick: evt => this.executeActionHandler(evt), dataUnit: this.dataUnit }))), h("stack-item", null, h("snk-attach", { registerKey: this.attachmentRegisterKey, messagesBuilder: this.messagesBuilder, entityName: this.entityName, onBack: this.handleAttachBack.bind(this) }))))));
+  }
+  static get is() { return "snk-detail-view"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-detail-view.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-detail-view.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "formConfigManager": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkFormConfigManager",
+          "resolved": "SnkFormConfigManager",
+          "references": {
+            "SnkFormConfigManager": {
+              "location": "import",
+              "path": "../../../snk-form/SnkFormConfigManager"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Gerenciador de configura\u00E7\u00E3o do formul\u00E1rio."
+        }
+      },
+      "dataUnitName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determina todo o caminho desde o pai at\u00E9 chegar neste n\u00EDvel"
+        },
+        "attribute": "data-unit-name",
+        "reflect": false
+      },
+      "guideItemPath": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<IGuideItem>",
+          "resolved": "IGuideItem[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "IGuideItem": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-guide-navigator/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caminho do identificador da guia vinculada."
+        }
+      },
+      "entityName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Nome da entidade detail."
+        },
+        "attribute": "entity-name",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Descri\u00E7\u00E3o amig\u00E1vel do cadastro detalhe."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Inst\u00E2ncia do DataUnit detail."
+        }
+      },
+      "selectedForm": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Representa o formul\u00E1rio selecionado."
+        },
+        "attribute": "selected-form",
+        "reflect": false
+      },
+      "dataState": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "DataState",
+          "resolved": "DataState",
+          "references": {
+            "DataState": {
+              "location": "import",
+              "path": "../../../snk-data-unit/snk-data-unit"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Representa o estado do dataUnit detail."
+        }
+      },
+      "messagesBuilder": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "SnkMessageBuilder",
+          "resolved": "SnkMessageBuilder",
+          "references": {
+            "SnkMessageBuilder": {
+              "location": "import",
+              "path": "../../../../lib/message/SnkMessageBuilder"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "branchGuide": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IGuideItem",
+          "resolved": "IGuideItem",
+          "references": {
+            "IGuideItem": {
+              "location": "import",
+              "path": "@sankhyalabs/ezui/dist/types/components/ez-guide-navigator/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "canEdit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a edi\u00E7\u00E3o est\u00E1 habilitada na grid."
+        },
+        "attribute": "can-edit",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_disabledButtons": {},
+      "_currentView": {},
+      "attachmentRegisterKey": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "snkDetailGuidesChange",
+        "name": "snkDetailGuidesChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando h\u00E1 necessidade de atualizar a estrutura de guias."
+        },
+        "complexType": {
+          "original": "GuideBuilder",
+          "resolved": "GuideBuilder",
+          "references": {
+            "GuideBuilder": {
+              "location": "import",
+              "path": "../GuideBuilder"
+            }
+          }
+        }
+      }, {
+        "method": "snkSwitchGuide",
+        "name": "snkSwitchGuide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando h\u00E1 necessidade de comutar entre grid e form."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "changeViewMode": {
+        "complexType": {
+          "signature": "(mode: VIEW_MODE) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "mode - Novo modo que o componente deve ser apresentado."
+                }],
+              "text": "- Novo modo que o componente deve ser apresentado."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "VIEW_MODE": {
+              "location": "import",
+              "path": "../../../../lib/utils/constants"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Muda o modo de visualiza\u00E7\u00E3o do componente entre VIEW_MODE.GRID e VIEW_MODE.FORM",
+          "tags": [{
+              "name": "param",
+              "text": "mode - Novo modo que o componente deve ser apresentado."
+            }]
+        }
+      },
+      "configGrid": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Abre o configurador de grid.",
+          "tags": []
+        }
+      },
+      "showUp": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "dataState",
+        "methodName": "observerDataState"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "snkContentCardChanged",
+        "method": "onContentCardChanged",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+SnkDetailView.REGEX_FORM_ID = /__FORM:[^:]+/g;

package/dist/collection/components/snk-crud/subcomponents/snk-form-summary.css

@@ -0,0 +1,37 @@
+:host {
+  display: flex;
+  width: 100%;
+  --ez-form-card-summary-field-content-weight: 700;
+}
+
+.summary-wrapper{
+  display: flex;
+  overflow: hidden;
+}
+
+.summary-container{
+  display: flex;
+  flex-direction: column;
+  padding-right: calc(var(--space--extra-large) / 1.5);
+}
+
+.summary-field{
+  min-width: 30px;
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.summary-field__title{
+  color: var(--text--primary, #626e82);
+  font-size: var(--title--small);
+  white-space: nowrap;
+  font-weight: var(--text-weight--medium);
+}
+
+.summary-field__content{
+  color: var(--title--primary, #2b3a54);
+  font-size: var(--text--large);
+  font-weight: var(--ez-form-card-summary-field-content-weight);
+}

package/dist/collection/components/snk-crud/subcomponents/snk-form-summary.js

@@ -0,0 +1,91 @@
+import { Host, h } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { cardFormResizeObserver } from "./CardFormResizeObserver";
+export class SnkFormSummary {
+  constructor() {
+    this.fixed = false;
+    this.contracted = false;
+    this.summary = undefined;
+  }
+  componentDidRender() {
+    cardFormResizeObserver.disconnect();
+    if (this._summaryElement) {
+      cardFormResizeObserver.observe(this._summaryElement);
+    }
+  }
+  disconnectedCallback() {
+    cardFormResizeObserver.disconnect();
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'ezFormCard');
+    return (h(Host, null, h("div", { ref: el => this._summaryElement = el, class: "summary-wrapper" }, Object.entries(this.summary).map(([key, value]) => h("div", { class: "summary-container", title: `${key}: ${value}` }, h("label", { class: "ez-text summary-field summary-field__title" }, key), h("label", { class: " ez-text summary-field summary-field__content" }, value))))));
+  }
+  static get is() { return "snk-form-summary"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["snk-form-summary.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["snk-form-summary.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fixed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o card est\u00E1 fixado ou n\u00E3o."
+        },
+        "attribute": "fixed",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "contracted": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o card est\u00E1 contra\u00EDdo ou n\u00E3o."
+        },
+        "attribute": "contracted",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "summary": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [key:string] : any }",
+          "resolved": "{ [key: string]: any; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define quais s\u00E3o as informa\u00E7\u00F5es exibidas no modo contra\u00EDdo.\nCada atributo ser\u00E1 exibido com seu respectivo valor."
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_elem"; }
+}