@zeedhi/teknisa-components-common 1.45.0 → 1.48.0

package/tests/unit/components/tek-user-info/tek-user-info.spec.ts

@@ -0,0 +1,395 @@
+import {
+  Button, Modal, ModalService,
+} from '@zeedhi/common';
+import { Metadata, Http } from '@zeedhi/core';
+import { ITekUserInfo, TekUserInfo } from '../../../../src';
+import { mockCreated } from '../../../__helpers__/mock-created-helper';
+
+function instantiateAndCreate(props: ITekUserInfo) {
+  const instance = new TekUserInfo(props);
+  mockCreated(instance);
+  instance.onCreated();
+  return instance;
+}
+
+describe('TekUserInfo', () => {
+  afterEach(() => jest.clearAllMocks());
+
+  describe('constructor()', () => {
+    it('when called, should assign the default values', () => {
+      const instance = new TekUserInfo({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      expect(instance.bottomSlot).toMatchObject([]);
+      expect(instance.aboutImage).toBe('');
+      expect(instance.defaultEmail).toBe('');
+      expect(instance.versionInfo).toBeNull();
+      expect(instance.versionUrl).toBe('');
+    });
+
+    it('when called with props, should assign the defined values', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        bottomSlot: [
+          { name: 'test', component: 'ZdText' },
+        ],
+        aboutImage: 'path',
+        defaultEmail: 'zeedhi@zd.com',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+        versionUrl: '/version',
+      });
+
+      expect(instance.bottomSlot).toEqual([
+        { name: 'test', component: 'ZdText' },
+      ]);
+      expect(instance.aboutImage).toBe('path');
+      expect(instance.defaultEmail).toBe('zeedhi@zd.com');
+      expect(instance.versionInfo).toEqual({
+        name: 'Zeedhi',
+        version: '1.0.0',
+        frontend: [{ name: 'package 1', version: '1.0.0' }],
+        backend: [{ name: 'package 2', version: '2.0.0' }],
+        modules: [{ name: 'package 3', version: '3.0.0' }],
+      });
+      expect(instance.versionUrl).toBe('/version');
+    });
+  });
+
+  describe('About Modal', () => {
+    it('when about item is clicked, should open about modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        aboutImage: 'path',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      instance.onAboutClick();
+
+      expect(instance.aboutModal).toMatchObject({
+        children: [
+          {
+            component: 'ZdHeader',
+            rightSlot: [{ component: 'ZdModalCloseButton' }],
+          },
+          {
+            component: 'ZdTag',
+            children: [{ component: 'ZdImage', src: 'path' }],
+          },
+          {
+            component: 'ZdTabs',
+            tabs: [
+              {
+                tabTitle: 'Frontend',
+                children: [
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.frontendItems}}' },
+                ],
+              },
+              {
+                tabTitle: 'Backend',
+                children: [
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.backendItems}}' },
+                ],
+              },
+              {
+                tabTitle: 'Modules',
+                children: [
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.modulesItems}}' },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+    });
+
+    it('when about item is clicked twice, should create the modal only once', () => {
+      const spy = jest.spyOn(ModalService, 'create');
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      instance.onAboutClick();
+      instance.onAboutClick();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('when versionInfo is undefined, should create empty tabs inside the modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      instance.onAboutClick();
+
+      expect(instance.aboutModal).toMatchObject({
+        children: [
+          {
+            component: 'ZdHeader',
+            rightSlot: [{ component: 'ZdModalCloseButton' }],
+          },
+          {
+            component: 'ZdTag',
+            children: [{ component: 'ZdImage', src: '' }],
+          },
+          {
+            component: 'ZdTabs',
+            tabs: [
+              { tabTitle: 'Frontend', children: [] },
+              { tabTitle: 'Backend', children: [] },
+              { tabTitle: 'Modules', children: [] },
+            ],
+          },
+        ],
+      });
+    });
+  });
+
+  describe('Report Modal', () => {
+    it('when onReportClick is called, should open report modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+      instance.onReportClick();
+
+      expect(instance.reportModal).toMatchObject({
+        children: [
+          {
+            component: 'ZdHeader',
+            leftSlot: [{ component: 'ZdText', text: 'TEKUSERINFO_REPORT_ERROR' }],
+            rightSlot: [{ component: 'ZdModalCloseButton' }],
+          },
+          {
+            component: 'ZdForm',
+            children: [
+              {
+                name: 'report_email',
+                component: 'ZdTextInput',
+                label: 'E-mail',
+                value: '{{TekUserInfoController_1.defaultEmail}}',
+              },
+              {
+                name: 'report_cc',
+                component: 'ZdTextInput',
+                label: 'CC',
+                placeholder: 'TEKUSERINFO_EMAIL_PLACEHOLDER',
+              },
+              {
+                name: 'report_type',
+                component: 'ZdSelect',
+                label: 'TEKUSERINFO_TYPE',
+                datasource: {
+                  uniqueKey: 'value',
+                  translate: true,
+                  data: [
+                    { value: '0', text: 'TEKUSERINFO_ERROR' },
+                    { value: '1', text: 'TEKUSERINFO_IMPROVEMENT' },
+                  ],
+                },
+              },
+              {
+                name: 'report_description',
+                component: 'ZdTextarea',
+                label: 'TEKUSERINFO_DESCRIPTION',
+              },
+            ],
+          },
+          {
+            component: 'ZdFooter',
+            rightSlot: [
+              { component: 'ZdButton', label: 'TEKUSERINFO_CANCEL' },
+              { component: 'ZdButton', label: 'TEKUSERINFO_SEND' },
+            ],
+          },
+        ],
+      });
+    });
+
+    it('when onReportClick is called twice, should create the modal only once', () => {
+      const spy = jest.spyOn(ModalService, 'create');
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+
+      instance.onReportClick();
+      instance.onReportClick();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      spy.mockClear();
+    });
+
+    it('when send button is clicked, should call onSendReport event', () => {
+      const onSendReport = jest.fn();
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        validate: () => true,
+      }));
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        events: {
+          onSendReport,
+        },
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[1];
+      const buttonInstance = new Button(button);
+
+      buttonInstance.click();
+
+      expect(onSendReport).toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when send button is clicked and form is invalid, should not call onSendReport event', () => {
+      const onSendReport = jest.fn();
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        validate: () => false,
+      }));
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        events: {
+          onSendReport,
+        },
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[1];
+      const buttonInstance = new Button(button);
+
+      buttonInstance.click();
+
+      expect(onSendReport).not.toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when reportModal is undefined, should not call onSendReport event', () => {
+      const onSendReport = jest.fn();
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        validate: () => false,
+      }));
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        events: {
+          onSendReport,
+        },
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[1];
+      const buttonInstance = new Button(button);
+
+      instance.reportModal = undefined;
+      buttonInstance.click();
+
+      expect(onSendReport).not.toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when cancel button is clicked, should close the modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      instance.onReportClick();
+      const spy = jest.spyOn(instance.reportModal as Modal, 'hide');
+      const button = instance.reportModal?.children[2].rightSlot[0];
+      const buttonInstance = new Button(button);
+
+      buttonInstance.click();
+
+      expect(spy).toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when cancel button is clicked, should not throw if reportModal is undefined', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[0];
+      const buttonInstance = new Button(button);
+
+      instance.reportModal = undefined;
+
+      expect(() => buttonInstance.click()).not.toThrow();
+    });
+  });
+
+  describe('onMounted', () => {
+    it('when onMounted is called and versionUrl is defined, should make a GET request to versionUrl', async () => {
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          versionInfo: {
+            name: 'Zeedhi',
+            version: '1.0.0',
+            frontend: [{ name: 'package 1', version: '1.0.0' }],
+            backend: [{ name: 'package 2', version: '2.0.0' }],
+            modules: [{ name: 'package 3', version: '3.0.0' }],
+          },
+        },
+      }));
+      const instance = new TekUserInfo({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        versionUrl: '/version',
+      });
+
+      await instance.onMounted({});
+
+      expect(instance.versionInfo).toEqual({
+        name: 'Zeedhi',
+        version: '1.0.0',
+        frontend: [{ name: 'package 1', version: '1.0.0' }],
+        backend: [{ name: 'package 2', version: '2.0.0' }],
+        modules: [{ name: 'package 3', version: '3.0.0' }],
+      });
+      spy.mockClear();
+    });
+  });
+
+  describe('onCreated', () => {
+    it('when onCreated is called and bottomSlot is empty, should assign default value to the latter', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+
+      expect(instance.bottomSlot).toMatchObject([
+        {
+          name: 'TekUserInfo_bottom_list',
+          component: 'TekUserInfoList',
+          parentName: 'TekUserInfo',
+        },
+      ]);
+    });
+  });
+});

package/types/components/index.d.ts

@@ -32,3 +32,6 @@ export * from './tek-datasource/rest-datasource';
 export * from './tek-datasource/memory-datasource';
 export * from './tek-tree-grid/interfaces';
 export * from './tek-tree-grid/tree-grid';
+export * from './tek-user-info/interfaces';
+export * from './tek-user-info/tek-user-info';
+export * from './tek-user-info/tek-user-info-list';

package/types/components/tek-grid/filter-helper.d.ts

@@ -1,7 +1,5 @@
 import { TekGridColumn } from '..';
 export declare class TekFilterHelper {
-    private static values;
-    private static formatDate;
     static getLabel(name: string): string;
     static getValue(name: string, column: TekGridColumn): string | string[];
     static register(name: string, label: string, fn: () => Date | [Date, Date]): void;

package/types/components/tek-grid/interfaces.d.ts

@@ -1,5 +1,5 @@
 import { IComponent, IComponentEvents, IComponentRender, IGridColumnEditable, IGridEditable, IIterableColumnsButton } from '@zeedhi/common';
-import { IDictionary, IEvent, IEventParam } from '@zeedhi/core';
+import { IDictionary, IEvent, IEventParam, IDateHelperValue, IDateHelperValues } from '@zeedhi/core';
 import { IDynamicFilterItem, TekGridLayoutOptions } from '..';
 export interface ITekGridLayoutEventParams extends IEventParam<ITekGrid> {
     layouts: ITekGridLayoutInfo;
@@ -138,10 +138,7 @@ export interface ITekGridSummary {
     min: any;
     max: any;
 }
-export interface ITekFilterHelperValue {
-    label: string;
-    fn: () => Date | [Date, Date];
+export interface ITekFilterHelperValue extends IDateHelperValue {
 }
-export interface ITekFilterHelperValues {
-    [key: string]: ITekFilterHelperValue;
+export interface ITekFilterHelperValues extends IDateHelperValues {
 }

package/types/components/tek-user-info/TekUserInfoController.d.ts

@@ -0,0 +1,20 @@
+import { TekUserInfo } from './tek-user-info';
+export declare class TekUserInfoController {
+    component: TekUserInfo;
+    get versionInfo(): import("./interfaces").IVersionInfo | null;
+    constructor(component: TekUserInfo);
+    get name(): string;
+    set name(value: string);
+    get version(): string;
+    set version(value: string);
+    get defaultEmail(): string;
+    set defaultEmail(value: string);
+    get hasDefaultEmail(): boolean;
+    get hasAboutImage(): boolean;
+    mergeText(name: string, version: string): string;
+    get mainVersion(): string;
+    protected getItems(tab: 'frontend' | 'backend' | 'modules'): string[];
+    get frontendItems(): string[];
+    get backendItems(): string[];
+    get modulesItems(): string[];
+}

package/types/components/tek-user-info/interfaces.d.ts

@@ -0,0 +1,27 @@
+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/types/components/tek-user-info/tek-user-info-list.d.ts

@@ -0,0 +1,29 @@
+import { List } from '@zeedhi/common';
+import { ITekUserInfo, ITekUserInfoList } from './interfaces';
+export declare class TekUserInfoList extends List implements ITekUserInfoList {
+    /**
+     * Name of the user info component
+     */
+    parentName: string;
+    dense: boolean;
+    constructor(props: ITekUserInfo);
+    protected getItems(): ({
+        name: string;
+        component: string;
+        title: string;
+        subtitle: string;
+        cssClass: string;
+        prependIcon?: undefined;
+        events?: undefined;
+    } | {
+        name: string;
+        component: string;
+        title: string;
+        prependIcon: string;
+        cssClass: string;
+        events: {
+            click: () => void;
+        };
+        subtitle?: undefined;
+    })[];
+}

package/types/components/tek-user-info/tek-user-info.d.ts

@@ -0,0 +1,37 @@
+import { Button, IComponentRender, Modal } from '@zeedhi/common';
+import { IEventParam } from '@zeedhi/core';
+import { UserInfo } from '@zeedhi/zd-user-info-common';
+import { ITekUserInfo, IVersionInfo } from './interfaces';
+export declare class TekUserInfo extends UserInfo implements ITekUserInfo {
+    aboutModal?: Modal;
+    reportModal?: Modal;
+    /**
+    * Data about the application version
+    */
+    versionInfo: IVersionInfo | null;
+    /**
+    * Default email address to be defined in the Report Bug form
+    */
+    defaultEmail: string;
+    /**
+    * Url from which the version info will be retrieved
+    */
+    versionUrl: string;
+    /**
+    * Path to the image to be shown on about modal
+    */
+    aboutImage: string;
+    protected propBottomSlot?: IComponentRender[];
+    constructor(props: ITekUserInfo);
+    protected getBottomSlot(): IComponentRender[];
+    onAboutClick(): void;
+    protected getVersionTree(tab: 'frontend' | 'backend' | 'modules'): {
+        name: string;
+        component: string;
+        text: string;
+    }[];
+    onReportClick(): void;
+    onSendReport({ event, element }: IEventParam<Button>): void;
+    onCreated(): void;
+    onMounted(element: any): Promise<void>;
+}

package/types/utils/grid-base/grid-base.d.ts

@@ -252,12 +252,7 @@ export declare class GridBase {
     hideFilterModal(): void;
     private sortFilterIndex;
     private getFilterModalComponents;
-    private getHelperValueComponent;
-    private createHelperValueOptions;
-    private helperValuesOptionClick;
-    private setFilterPropsHelperValue;
-    private registerFilterComponentToForm;
-    private clearFilterHelperValue;
+    private changeHelperEvent;
     private loadFilterValues;
     private applyFilter;
     private clearFilter;