@zeedhi/teknisa-components-common 3.0.0 → 3.0.1

package/src/components/tek-user-info/TekUserInfoController.ts

@@ -0,0 +1,87 @@
+import { TekUserInfo } from './tek-user-info';
+
+class TekUserInfoController {
+  component: TekUserInfo;
+
+  get versionInfo() {
+    return this.component.versionInfo;
+  }
+
+  constructor(component: TekUserInfo) {
+    this.component = component;
+  }
+
+  get name() {
+    return this.versionInfo?.name || '';
+  }
+
+  set name(value: string) {
+    if (!this.versionInfo) return;
+    this.versionInfo.name = value;
+  }
+
+  get version() {
+    return this.versionInfo?.version || '';
+  }
+
+  set version(value: string) {
+    if (!this.versionInfo) return;
+    this.versionInfo.version = value;
+  }
+
+  get hasDefaultEmail() {
+    return !!this.component.defaultEmail;
+  }
+
+  get hasAboutImage() {
+    return !!this.component.aboutImage;
+  }
+
+  mergeText(name: string, version: string) {
+    return `<li>${name} - <b>${version}</b></li>`;
+  }
+
+  get mainVersion() {
+    if (!this.versionInfo?.name || !this.versionInfo.version) return '';
+
+    return `${this.versionInfo.name} - <b>${this.versionInfo.version}</b>`;
+  }
+
+  protected getItems(tab: 'frontend' | 'backend' | 'modules') {
+    if (!this.versionInfo) return [];
+
+    const tabInfo = this.versionInfo[tab];
+
+    return `<ul>${tabInfo.map((item) => this.mergeText(item.name, item.version)).join('')}</ul>`;
+  }
+
+  get frontendItems() {
+    return this.getItems('frontend');
+  }
+
+  get backendItems() {
+    return this.getItems('backend');
+  }
+
+  get modulesItems() {
+    return this.getItems('modules');
+  }
+
+  get showReportError() {
+    const { reportError } = this.component.visibleItems;
+    return reportError || reportError === undefined;
+  }
+
+  get showVersionInfo() {
+    const { versionInfo } = this.component.visibleItems;
+    return versionInfo || versionInfo === undefined;
+  }
+
+  get showAbout() {
+    const { about } = this.component.visibleItems;
+    return about || about === undefined;
+  }
+}
+
+export { TekUserInfoController };
+

package/src/components/tek-user-info/interfaces.ts

@@ -0,0 +1,21 @@
+import { IList } from '@zeedhi/common';
+import { IUserInfo } from '@zeedhi/zd-user-info-common';
+
+export interface IVersionInfo {
+  name: string,
+  version: string,
+  frontend: { name: string, version: string }[],
+  backend: { name: string, version: string }[],
+  modules: { name: string, version: string }[],
+}
+
+export interface ITekUserInfo extends IUserInfo {
+  aboutImage?: string;
+  defaultEmail?: string;
+  versionInfo?: IVersionInfo | null;
+  versionUrl?: string;
+}
+
+export interface ITekUserInfoList extends IList {
+  parentName?: string;
+}

package/src/components/tek-user-info/tek-user-info-list.ts

@@ -0,0 +1,64 @@
+import { List } from '@zeedhi/common';
+import { Metadata } from '@zeedhi/core';
+import { ITekUserInfoList } from './interfaces';
+import { TekUserInfo } from './tek-user-info';
+
+export class TekUserInfoList extends List implements ITekUserInfoList {
+  /**
+   * Name of the user info component
+   */
+  public parentName = '';
+
+  public dense = true;
+
+  constructor(props: ITekUserInfoList) {
+    super(props);
+    this.parentName = props.parentName || '';
+  }
+
+  onCreated(): void {
+    super.onCreated();
+    this.items = this.getItems();
+  }
+
+  protected getItems() {
+    const parent = this.parentName ? Metadata.getInstance<TekUserInfo>(this.parentName) : this.parent;
+
+    if (!(parent instanceof TekUserInfo)) {
+      throw Error(`Could not find the TekUserInfo component associated with ${this.name} TekUserInfoList`);
+    }
+
+    return [
+      {
+        name: `${parent.name}_version`,
+        component: 'ZdListItem',
+        title: `{{TekUserInfoController_${parent.componentId}.name}}`,
+        subtitle: `{{TekUserInfoController_${parent.componentId}.version}}`,
+        isVisible: `{{TekUserInfoController_${parent.componentId}.showVersionInfo}}`,
+        cssClass: 'zd-px-2',
+      },
+      {
+        name: `${parent.name}_about`,
+        component: 'ZdListItem',
+        title: 'TEKUSERINFO_ABOUT',
+        prependIcon: 'infoOutline',
+        cssClass: 'zd-px-2',
+        isVisible: `{{TekUserInfoController_${parent.componentId}.showAbout}}`,
+        events: {
+          click: () => parent.onAboutClick(),
+        },
+      },
+      {
+        name: `${parent.name}_report`,
+        component: 'ZdListItem',
+        title: 'TEKUSERINFO_REPORT_ERROR',
+        prependIcon: 'mdi-ladybug',
+        cssClass: 'zd-px-2',
+        isVisible: `{{TekUserInfoController_${parent.componentId}.showReportError}}`,
+        events: {
+          click: () => parent.onReportClick(),
+        },
+      },
+    ];
+  }
+}

package/src/components/tek-user-info/tek-user-info.ts

@@ -0,0 +1,337 @@
+import { Button, Form, IComponentRender, Modal, ModalService } from '@zeedhi/common';
+import {
+  Http, IEventParam, Loader, Messages, Metadata,
+} from '@zeedhi/core';
+import { ITekUserInfo, IVersionInfo } from './interfaces';
+import { TekUserInfoController } from './TekUserInfoController';
+import { UserInfo } from '@zeedhi/zd-user-info-common';
+
+export class TekUserInfo extends UserInfo implements ITekUserInfo {
+  public aboutModal?: Modal;
+
+  public reportModal?: Modal;
+
+  /**
+  * Data about the application version
+  */
+  public versionInfo: IVersionInfo | null = null;
+
+  /**
+  * Default email address to be defined in the Report Bug form
+  */
+  public defaultEmail = '';
+
+  /**
+  * Url from which the version info will be retrieved
+  */
+  public versionUrl = '';
+
+  /**
+  * Path to the image to be shown on about modal
+  */
+  public aboutImage = '';
+
+  protected propBottomSlot?: IComponentRender[];
+
+  constructor(props: ITekUserInfo) {
+    super(props);
+    this.versionInfo = this.getInitValue('versionInfo', props.versionInfo, this.versionInfo);
+    this.defaultEmail = this.getInitValue('defaultEmail', props.defaultEmail, this.defaultEmail);
+    this.versionUrl = this.getInitValue('versionUrl', props.versionUrl, this.versionUrl);
+    this.aboutImage = this.getInitValue('aboutImage', props.aboutImage, this.aboutImage);
+
+    this.createAccessors();
+    this.propBottomSlot = props.bottomSlot;
+  }
+
+  protected getBottomSlot(): IComponentRender[] {
+    return [
+      {
+        name: `${this.name}_bottom_list`,
+        component: 'TekUserInfoList',
+        parentName: this.name,
+      },
+    ];
+  }
+
+  public onAboutClick() {
+    if (!this.aboutModal) {
+      this.aboutModal = ModalService.create({
+        name: `${this.name}_about_modal`,
+        cssClass: 'about-modal',
+        grid: { cols: 8, sm: 4, lg: 5 },
+        children: [
+          {
+            name: `${this.name}_about_header`,
+            component: 'ZdHeader',
+            color: 'transparent',
+            padless: true,
+            elevation: 0,
+            rightSlot: [
+              {
+                name: `${this.name}_about_close_button`,
+                component: 'ZdModalCloseButton',
+                small: true,
+                modalName: `${this.name}_about_modal`,
+              },
+            ],
+          },
+          {
+            name: `${this.name}_about_row`,
+            component: 'ZdTag',
+            tag: 'div',
+            cssClass: 'zd-justify-center zd-px-6',
+            isVisible: `{{TekUserInfoController_${this.componentId}.hasAboutImage}}`,
+            children: [
+              {
+                name: `${this.name}_about_image`,
+                component: 'ZdImage',
+                width: '100%',
+                src: this.aboutImage,
+              },
+            ],
+          },
+          {
+            name: `${this.name}_version_tabs`,
+            cssClass: 'zd-pt-3 zd-tekUserInfo-tab',
+            component: 'ZdTabs',
+            tabs: [
+              {
+                name: `${this.name}_version_frontend_tab`,
+                tabTitle: 'Frontend',
+                children: this.getVersionTree('frontend'),
+              },
+              {
+                name: `${this.name}_version_backend_tab`,
+                tabTitle: 'Backend',
+                children: this.getVersionTree('backend'),
+              },
+              {
+                name: `${this.name}_version_modules_tab`,
+                tabTitle: 'Modules',
+                children: this.getVersionTree('modules'),
+              },
+            ],
+          },
+        ],
+      });
+    }
+
+    this.aboutModal.show();
+  }
+
+  protected getVersionTree(tab: 'frontend' | 'backend' | 'modules') {
+    if (!this.versionInfo) return [];
+
+    const main = {
+      name: `${this.name}_version_${tab}_main`,
+      component: 'ZdText',
+      text: `{{TekUserInfoController_${this.componentId}.mainVersion}}`,
+    };
+
+    const itemsComponent = {
+      name: `${this.name}_version_${tab}`,
+      component: 'ZdText',
+      cssClass: 'zd-pl-4',
+      text: `{{TekUserInfoController_${this.componentId}.${tab}Items}}`,
+    };
+
+    return [main, itemsComponent];
+  }
+
+  public onReportClick() {
+    if (!this.reportModal) {
+      this.reportModal = ModalService.create({
+        name: `${this.name}_report_modal`,
+        children: [
+          {
+            name: `${this.name}_report_header`,
+            component: 'ZdHeader',
+            color: 'transparent',
+            padless: true,
+            elevation: 0,
+            leftSlot: [
+              {
+                name: `${this.name}_report_title`,
+                component: 'ZdText',
+                text: 'TEKUSERINFO_REPORT_ERROR',
+                cssClass: 'zd-theme-font-title',
+              },
+            ],
+            rightSlot: [
+              {
+                name: `${this.name}_report_close_button`,
+                component: 'ZdModalCloseButton',
+                small: true,
+                modalName: `${this.name}_report_modal`,
+              },
+            ],
+          },
+          {
+            name: `${this.name}_report_form`,
+            component: 'ZdForm',
+            cssClass: 'zd-pt-4',
+            children: [
+              {
+                name: 'report_email',
+                component: 'ZdTextInput',
+                label: 'E-mail',
+                grid: {
+                  cols: '12',
+                },
+                value: this.defaultEmail,
+                readonly: `{{TekUserInfoController_${this.componentId}.hasDefaultEmail}}`,
+                validations: {
+                  required: {},
+                  email: {},
+                },
+              },
+              {
+                name: 'report_cc',
+                component: 'ZdTextInput',
+                label: 'CC',
+                placeholder: 'TEKUSERINFO_EMAIL_PLACEHOLDER',
+                grid: {
+                  cols: '12',
+                },
+              },
+              {
+                name: 'report_type',
+                component: 'ZdSelect',
+                label: 'TEKUSERINFO_TYPE',
+                dataValue: 'value',
+                dataText: 'text',
+                datasource: {
+                  uniqueKey: 'value',
+                  translate: true,
+                  data: [
+                    { value: '0', text: 'TEKUSERINFO_ERROR' },
+                    { value: '1', text: 'TEKUSERINFO_IMPROVEMENT' },
+                  ],
+                },
+                grid: {
+                  cols: '12',
+                },
+                validations: {
+                  required: {},
+                },
+              },
+              {
+                name: 'report_description',
+                component: 'ZdTextarea',
+                label: 'TEKUSERINFO_DESCRIPTION',
+                grid: {
+                  cols: '12',
+                },
+                validations: {
+                  required: {},
+                },
+              },
+            ],
+          },
+          {
+            name: `${this.name}_report_footer`,
+            component: 'ZdFooter',
+            color: 'transparent',
+            padless: true,
+            rightSlot: [
+              {
+                name: `${this.name}_report_cancel`,
+                component: 'ZdButton',
+                label: 'TEKUSERINFO_CANCEL',
+                outline: true,
+                events: {
+                  click: () => { this.reportModal?.hide(); },
+                },
+              },
+              {
+                name: `${this.name}_report_send`,
+                component: 'ZdButton',
+                label: 'TEKUSERINFO_SEND',
+                events: {
+                  click: (args: IEventParam<Button>) => this.onSendReport(args),
+                },
+              },
+            ],
+          },
+        ],
+      });
+    }
+
+    this.reportModal.show();
+  }
+
+  public async onSendReport({ event, element }: IEventParam<Button>) {
+    if (!this.reportModal) return;
+
+    const form = Metadata.getInstance<Form>(`${this.name}_report_form`);
+
+    const validation = await form.validate();
+
+    if (!validation.valid) return;
+
+    this.callEvent('onSendReport', {
+      event, element, component: this, form,
+    });
+    this.reportModal.hide();
+  }
+
+  public onCreated() {
+    super.onCreated();
+    Loader.addController(`TekUserInfoController_${this.componentId}`, TekUserInfoController, [this]);
+
+    this.bottomSlot = this.propBottomSlot ? this.propBottomSlot : this.getBottomSlot();
+  }
+
+  public async onMounted(element: any) {
+    super.onMounted(element);
+
+    if (this.versionUrl) {
+      const res = await Http.get(this.versionUrl);
+
+      this.versionInfo = res.data.versionInfo;
+    }
+  }
+}
+
+Messages.add({
+  'pt-BR': {
+    translation: {
+      TEKUSERINFO_ABOUT: 'Sobre',
+      TEKUSERINFO_REPORT_ERROR: 'Reportar Erro',
+      TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separe e-mails usando ";"',
+      TEKUSERINFO_TYPE: 'Tipo',
+      TEKUSERINFO_ERROR: 'Erro',
+      TEKUSERINFO_IMPROVEMENT: 'Melhoria',
+      TEKUSERINFO_DESCRIPTION: 'Descrição',
+      TEKUSERINFO_CANCEL: 'Cancelar',
+      TEKUSERINFO_SEND: 'Enviar',
+    },
+  },
+  'en-US': {
+    translation: {
+      TEKUSERINFO_ABOUT: 'About',
+      TEKUSERINFO_REPORT_ERROR: 'Report Bug',
+      TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separate e-mails using ";"',
+      TEKUSERINFO_TYPE: 'Type',
+      TEKUSERINFO_ERROR: 'Bug',
+      TEKUSERINFO_IMPROVEMENT: 'Improvement',
+      TEKUSERINFO_DESCRIPTION: 'Description',
+      TEKUSERINFO_CANCEL: 'Cancel',
+      TEKUSERINFO_SEND: 'Send',
+    },
+  },
+  'es-CL': {
+    translation: {
+      TEKUSERINFO_ABOUT: 'Sobre',
+      TEKUSERINFO_REPORT_ERROR: 'Reportar Error',
+      TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separar e-mails usando ";"',
+      TEKUSERINFO_TYPE: 'Tipo',
+      TEKUSERINFO_ERROR: 'Error',
+      TEKUSERINFO_IMPROVEMENT: 'Mejora',
+      TEKUSERINFO_DESCRIPTION: 'Descripción',
+      TEKUSERINFO_CANCEL: 'Cancelar',
+      TEKUSERINFO_SEND: 'Enviar',
+    },
+  },
+});

package/src/error/tek-grid-delete-rows-error.ts

@@ -0,0 +1,15 @@
+import { TeknisaCommonError } from './teknisa-common-error';
+
+/**
+ * TekGridDelete rows error
+ */
+export class TekGridDeleteRowsError extends TeknisaCommonError {
+	constructor() {
+		super(
+			"TekGrid can't automatically delete rows when selectAllPages property is true." +
+				' You should delete them manually using the beforeDelete event and preventing' +
+				' the default execution',
+		);
+		this.name = 'TekGridDeleteRowsError';
+	}
+}

package/src/error/teknisa-common-error.ts

@@ -0,0 +1,8 @@
+/**
+ * Base Teknisa error
+ */
+export class TeknisaCommonError extends Error {
+	constructor(message: string) {
+		super(`[Teknisa Common err]: ${message}`);
+	}
+}

package/src/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './utils';

package/src/utils/config/config.ts

@@ -0,0 +1,8 @@
+import { IConfig } from '@zeedhi/core';
+
+export interface ITekConfig extends IConfig {
+	saveGridLayoutsEndPoint?: string;
+	loadGridLayoutsEndPoint?: string;
+	selectAllCompatibilityMode?: boolean;
+	gridShowCheckboxAllFilter?: boolean;
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './config/config';
+export * from './is-filled-object/is-filled-object';
+export * from './is-nil';

package/src/utils/is-filled-object/is-filled-object.ts

@@ -0,0 +1,5 @@
+const isFilledObject = (obj: unknown): obj is object => {
+	return !!obj && typeof obj === 'object' && !Array.isArray(obj) && !!Object.keys(obj).length;
+};
+
+export { isFilledObject };

package/src/utils/is-nil.ts

@@ -0,0 +1,3 @@
+export function isNil(value: unknown): value is null | undefined {
+	return value === null || value === undefined;
+}

package/tests/unit/components/tek-grid/button-option.spec.ts

@@ -0,0 +1,49 @@
+import { Button } from '@zeedhi/common';
+import { TekGrid, ButtonOption } from '../../../../src';
+import { Loader, SimpleControllerBuilder } from '@zeedhi/core';
+
+describe('ButtonOption', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('buildComponent()', () => {
+    it('when called, should build a simple button component', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+      };
+      const option = new ButtonOption(config);
+
+      const component = option.buildComponent(grid);
+
+      expect(component).toEqual(expect.objectContaining({
+        label: config.label,
+        name: 'Grid_export_pdf_portrait',
+        component: 'ZdButton',
+        iconName: undefined,
+        flat: true,
+      }));
+    });
+
+    it('the generated button component should call grid.getReport on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const spy = jest.fn();
+      grid.getReport = spy;
+      const config = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        portrait: false,
+      };
+      const option = new ButtonOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Button(component);
+      instance.click();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+});