@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

package/projects/tgo-canopy-ui/components/table/table.component.stories.ts

@@ -1,780 +0,0 @@
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { TableComponent } from './table.component';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { SkeletonComponent } from '../skeleton/skeleton.component';
-import { PaginatorComponentModule } from '../paginator/paginator.component.module';
-import { MatSortModule } from '@angular/material/sort';
-import { ButtonComponentModule } from '../button/button.component.module';
-import { AvatarComponentModule } from '../avatar/avatar.component.module';
-import { BadgeComponentModule } from '../badge/badge.component.module';
-import { EllipseTextDirective } from '../../directives/ellipse-text.directive';
-import { transformTheme } from '../../utils/transform-theme';
-import { FileUploadComponent } from '../file-upload/file-upload.component';
-import { SentenceCasePipe } from './sentence-case.pipe';
-import { DataPropertyGetterPipe } from '../../pipes/data-property-getter';
-import { DynamicComponentDirective } from '../../directives/dynamic-component.directive';
-import { IconComponentModule } from '../icon/icon.component.module';
-import { ColumnType, DetailRowDataParams, TableDetailColumn } from './table.model';
-import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
-import { ColumnAlignmentEnum, ColumnTypeEnum } from './table.model';
-import { formatDate } from '@angular/common';
-
-export default {
-  title: 'Table',
-  component: TableComponent,
-  decorators: [
-    moduleMetadata({
-      declarations: [TableComponent, SentenceCasePipe],
-      imports: [
-        MatTableModule,
-        MatTooltipModule,
-        SkeletonComponent,
-        PaginatorComponentModule,
-        MatSortModule,
-        ButtonComponentModule,
-        AvatarComponentModule,
-        BadgeComponentModule,
-        EllipseTextDirective,
-        IconComponentModule,
-        DataPropertyGetterPipe,
-        DynamicComponentDirective,
-        MemoizeFuncPipe,
-      ],
-    }),
-  ],
-} as Meta;
-
-const EXPANDABLE_DETAIL_COLUMNS: TableDetailColumn<any, any> = {
-  columnDefs: [
-    {
-      title: 'branch',
-      type: ColumnType.FIELD,
-      key: 'branch',
-      styles: { width: '162px' },
-    },
-    {
-      title: 'startWork',
-      type: ColumnType.FIELD,
-      key: 'startWork',
-      styles: { width: '230px' },
-    },
-    {
-      title: 'company',
-      type: ColumnType.FIELD,
-      key: 'company',
-      styles: { width: '170px' },
-    },
-    {
-      title: 'skill',
-      type: ColumnType.FIELD,
-      key: 'skill',
-      styles: { width: '150px' },
-    },
-  ],
-  setDetailRowData: (params: DetailRowDataParams<any, any>) => {
-    params.setDetailDataSource(params.data.details);
-  },
-};
-
-const Template: StoryFn = (args, { globals: { theme } }) => {
-  const _theme = transformTheme(theme);
-  return {
-    props: {
-      applicationTheme: _theme,
-      ...args,
-    },
-  };
-};
-
-const tableData = [
-  {
-    name: 'Jason',
-    email: 'jason@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2020-10-03',
-    details: [{ branch: 'Programmer', startWork: '2020-09-03', company: 'Delta', skill: 'Junior' }],
-  },
-  {
-    name: 'Jack',
-    email: 'jack@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2023-05-03',
-    details: [{ branch: 'Programmer', startWork: '2023-05-03', company: 'Delta', skill: 'Junior' }],
-  },
-  {
-    name: 'Matteo',
-    email: 'matteo@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2023-12-01',
-    details: [{ branch: 'Programmer', startWork: '2021-09-03', company: 'Delta', skill: 'Junior' }],
-  },
-  {
-    name: 'Lee',
-    email: 'lee@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2022-09-05',
-    details: [{ branch: 'Programmer', startWork: '2022-03-09', company: 'Delta', skill: 'Middle' }],
-  },
-  {
-    name: 'Richard',
-    email: 'richard@expamle.com',
-    phoneNumber: '(555) 123-4567',
-    date: '2020-10-03',
-    details: [{ branch: 'Programmer', startWork: '2020-09-03', company: 'Delta', skill: 'Senior' }],
-  },
-];
-
-interface TableDataItem {
-  name: string;
-  email: string;
-  phoneNumber: string;
-  date: string;
-  details: Array<{
-    branch: string;
-    startWork: string;
-    company: string;
-    skill: string;
-  }>;
-}
-
-const generateNewData = (baseArray: TableDataItem[], multiplier: number): TableDataItem[] => {
-  const newArray: TableDataItem[] = [];
-
-  for (let i = 0; i < multiplier; i++) {
-    baseArray.forEach((item, index) => {
-      newArray.push({
-        name: `${item.name}${i + 1}`,
-        email: `${item.name.toLowerCase()}${i + 1}@example.com`,
-        phoneNumber: `(555) 123-45${(index + i) % 10}${(index * i) % 10}`,
-        date: new Date(
-          new Date(item.date).getFullYear() + i,
-          new Date(item.date).getMonth(),
-          new Date(item.date).getDate()
-        )
-          .toISOString()
-          .split('T')[0],
-        details: item.details.map(detail => ({
-          branch: detail.branch,
-          startWork: new Date(
-            new Date(detail.startWork).getFullYear() + i,
-            new Date(detail.startWork).getMonth(),
-            new Date(detail.startWork).getDate()
-          )
-            .toISOString()
-            .split('T')[0],
-          company: detail.company,
-          skill: detail.skill,
-        })),
-      });
-    });
-  }
-
-  return newArray;
-};
-
-const largeData = generateNewData(tableData, 3);
-
-const parameters = {
-  design: {
-    name: 'Figma design',
-    type: 'figma',
-    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=13132-14147&mode=design&t=VGuLMZFB3q1OtVZa-4',
-  },
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-        tooltip: '222',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Default.parameters = parameters;
-
-export const Condensed = Template.bind({});
-Condensed.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  isCondensed: true,
-  data: tableData,
-};
-
-Condensed.parameters = parameters;
-
-export const StickyHeader = Template.bind({});
-StickyHeader.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  stickyHeader: true,
-  data: largeData,
-};
-
-StickyHeader.parameters = parameters;
-
-export const StickyColumn = Template.bind({});
-StickyColumn.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-        isSticky: true,
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-        isSticky: true,
-      },
-    ],
-  },
-  data: tableData,
-};
-
-StickyColumn.parameters = parameters;
-
-export const BoldColumn = Template.bind({});
-BoldColumn.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-        bold: true,
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-BoldColumn.parameters = parameters;
-
-export const SkeletonLoading = Template.bind({});
-SkeletonLoading.args = {
-  loading: true,
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-SkeletonLoading.parameters = parameters;
-
-export const Sortable = Template.bind({});
-Sortable.args = {
-  config: {
-    title: 'Table name',
-    sort: {
-      active: 'email',
-      direction: 'asc',
-    },
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-        allowSort: true,
-      },
-      {
-        title: 'Email',
-        key: 'email',
-        allowSort: true,
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-        allowSort: true,
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Sortable.parameters = parameters;
-
-export const DuplicatedColumnsSortable = Template.bind({});
-DuplicatedColumnsSortable.args = {
-  config: {
-    title: 'Table name',
-    sort: {
-      active: 'email',
-      direction: 'desc',
-    },
-    columns: [
-      {
-        title: 'Email',
-        key: 'email',
-        uniqueId: 'email-1',
-        sortHeader: 'email-1',
-        allowSort: true,
-      },
-      {
-        title: 'Email',
-        key: 'email',
-        uniqueId: 'email-2',
-        sortHeader: 'email-2',
-        allowSort: true,
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-        allowSort: true,
-      },
-    ],
-  },
-  data: tableData,
-};
-DuplicatedColumnsSortable.parameters = parameters;
-
-export const WithCustomContent: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-      <ng-template #rowTpl let-data>
-        <ui-avatar size="medium" applicationTheme="${_theme}" [name]="data.name"></ui-avatar>
-      </ng-template>
-      <ui-table
-        applicationTheme="${_theme}"
-       [config]="
-        {title: 'Table name',
-          columns: [
-            {
-              title: 'Name',
-              key: 'name',
-              rowCellTemplate: rowTpl,
-            },
-            {
-              title: 'Email',
-              key: 'email',
-            },
-            {
-              title: 'Phone Number',
-              key: 'phoneNumber',
-            },
-            {
-              title: 'Date',
-              key: 'date',
-            },
-          ]
-        }"
-        [data]="[
-          { name: 'Jason', email: 'jason@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-          { name: 'Jack', email: 'jack@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-05-03' },
-          { name: 'Matteo', email: 'matteo@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-12-01' },
-          { name: 'Lee', email: 'lee@expamle.com', phoneNumber: '(555) 123-4567', date: '2022-09-05' },
-          { name: 'Richard', email: 'richard@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-        ]"
-      ></ui-table>
-    `,
-    };
-  },
-} as StoryFn;
-
-WithCustomContent.parameters = parameters;
-
-export const WithCustomHeader: StoryFn = {
-  render: (args: FileUploadComponent, { globals: { theme } }) => {
-    const _theme = transformTheme(theme);
-    return {
-      template: `
-    <ng-template #rowTpl let-data>
-      <ui-badge applicationTheme="${_theme}" [label]="data"></ui-badge>
-    </ng-template>
-    <ui-table
-    applicationTheme="${_theme}"
-     [config]="
-      {title: 'Table name',
-        columns: [
-          {
-            title: 'Name',
-            key: 'name',
-            headerCellTemplate: rowTpl,
-          },
-          {
-            title: 'Email',
-            key: 'email',
-          },
-          {
-            title: 'Phone Number',
-            key: 'phoneNumber',
-          },
-          {
-            title: 'Date',
-            key: 'date',
-          },
-        ]
-      }"
-      [data]="[
-        { name: 'Jason', email: 'jason@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-        { name: 'Jack', email: 'jack@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-05-03' },
-        { name: 'Matteo', email: 'matteo@expamle.com', phoneNumber: '(555) 123-4567', date: '2023-12-01' },
-        { name: 'Lee', email: 'lee@expamle.com', phoneNumber: '(555) 123-4567', date: '2022-09-05' },
-        { name: 'Richard', email: 'richard@expamle.com', phoneNumber: '(555) 123-4567', date: '2020-10-03' },
-      ]"
-    ></ui-table>
-  `,
-    };
-  },
-} as StoryFn;
-
-WithCustomHeader.parameters = parameters;
-
-export const Expandable = Template.bind({});
-Expandable.args = {
-  tableDetails: true,
-  tableDetailColumns: EXPANDABLE_DETAIL_COLUMNS,
-  config: {
-    title: 'Table name',
-    sort: {
-      active: 'email',
-      direction: 'desc',
-    },
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Expandable.parameters = parameters;
-
-export const Selected = Template.bind({});
-Selected.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData.map((v, i) => (i === 1 ? { ...v, selected: true } : v)),
-};
-
-Selected.parameters = parameters;
-
-const DATA = [
-  {
-    uuid: '2c372227-0d90-471b-a182-02d256543ca5',
-    status: 'invited',
-    integral_status: 'inactive-invited',
-    average_score: 21,
-    duration: 23853,
-    original_created: '2022-07-22T10:53:28.005117Z',
-    original_modified: '2022-03-04T18:37:21Z',
-    assessment: {
-      uuid: '00940be0-bc67-44ba-951e-37dd600136b2',
-      name: 'fGNnOSJPqLQNJHglXUcTiTlRTUlMLAQPujKgWodqIAxkcTiFtLuYhwgaMvBFEwILjxbDZRXTJseXyLTh',
-      status: 'archived',
-      company_name: 'Kelley-Miller',
-      job_role_name: 'Curator',
-      date_of_expiry: null,
-    },
-  },
-  {
-    uuid: '9b9ffbc8-3d5e-4c01-9445-d861f6c9be16',
-    status: 'invited',
-    integral_status: 'active-invited',
-    average_score: 79,
-    duration: 52195,
-    original_created: '2022-07-22T10:53:28.101931Z',
-    original_modified: '2021-12-06T12:48:06Z',
-    assessment: {
-      uuid: 'ad78bdfe-eb70-40b3-979b-1e0dc15fe67a',
-      name: 'rLwmexcRhKMFnFmJVEtYHWvWXMRgGcfspHJtVyyOKyaFEdFhkCNyshWkAGEKfBbcJqWCGGpvgCLjNlzj',
-      status: 'active',
-      company_name: 'Graham-Johnson',
-      job_role_name: 'Doctor, hospital',
-      date_of_expiry: null,
-    },
-  },
-  {
-    uuid: '8c00b4a4-060d-46b7-9dce-d9747dc29487',
-    status: 'completed',
-    integral_status: 'active-completed',
-    average_score: 51,
-    duration: 73384,
-    original_created: '2022-07-22T10:53:28.197811Z',
-    original_modified: '2022-01-24T15:02:27Z',
-    assessment: {
-      uuid: '52236501-286d-4dfb-9d66-dde270f6ae97',
-      name: 'zyyffNZKVEmSKNrknWWAGDVrclpaxnrAFQMQTxnDFmHsNqxLPYpTrcTbqTfdhaxLabGWmiNILMubasip',
-      status: 'active',
-      company_name: 'Collier, Coleman and Woods',
-      job_role_name: 'Engineer, aeronautical',
-      date_of_expiry: null,
-    },
-  },
-  {
-    uuid: '4aa8cf46-ed19-48b2-b6a7-6e7cc7dadef5',
-    status: 'started',
-    integral_status: 'active-started',
-    average_score: 24,
-    duration: 54909,
-    original_created: '2022-07-22T10:53:28.295590Z',
-    original_modified: '2021-08-18T17:08:51Z',
-    assessment: {
-      uuid: '4ecde6aa-6fb2-439e-b94f-54c4f332c085',
-      name: 'KAyFihKXZPtHMktXcpCoVLDSNfvgmcMkDauBiFoBSGjrZuhTRFqNKMJOSsdpjwFeiXPIGLsBGyeizFcg',
-      status: 'active',
-      company_name: 'Perkins, Farmer and Orozco',
-      job_role_name: 'Research scientist (medical)',
-      date_of_expiry: null,
-    },
-  },
-  {
-    uuid: '5da30d8c-452d-4178-9a6d-afdf4a56cd20',
-    status: 'knocked-out',
-    integral_status: 'inactive-knocked-out',
-    average_score: 26,
-    duration: 97074,
-    original_created: '2022-07-22T10:53:28.394734Z',
-    original_modified: '2021-07-14T16:07:02Z',
-    assessment: {
-      uuid: '2458378c-89d3-40bd-aaff-d041a89f2bd8',
-      name: 'eGBaMyaTiouUsavIJeVOdIWfPFVsUWQREHiVozrytRfiriYAyfzXGrcFKICZnEkuZyhOHiimRKvkoHxr',
-      status: 'archived',
-      company_name: 'Le Inc',
-      job_role_name: 'Sport and exercise psychologist',
-      date_of_expiry: null,
-    },
-  },
-  {
-    uuid: '681150e7-0c16-428d-b1d8-4b378523d3c5',
-    status: 'started',
-    integral_status: 'inactive-started',
-    average_score: 8,
-    duration: 33755,
-    original_created: '2022-07-22T10:53:28.489875Z',
-    original_modified: '2021-06-10T00:24:25Z',
-    assessment: {
-      uuid: '59ed0077-5412-479f-8c38-48ba31ee286f',
-      name: 'tmjzaszzrmgcApYpoVmBRcujcOUVGBUrluRXYZLwOhirqgRcZmPZfgMKzvOUYsnAoNGboVWhhAoDMuFZ',
-      status: 'disabled',
-      company_name: 'Quinn, Carson and Anderson',
-      job_role_name: 'Pension scheme manager',
-      date_of_expiry: null,
-    },
-  },
-];
-
-const COLUMNS = [
-  {
-    title: 'COMPANY NAME',
-    key: 'assessment.company_name',
-    styles: {
-      width: '60%',
-    },
-  },
-  {
-    title: 'SCORE',
-    key: 'average_score',
-    type: ColumnTypeEnum.FUNCTION,
-    [ColumnTypeEnum.FUNCTION]: getScore,
-    styles: {
-      alignment: ColumnAlignmentEnum.RIGHT,
-    },
-  },
-  {
-    title: 'INVITED ON',
-    key: 'original_created',
-    type: ColumnTypeEnum.FUNCTION,
-    [ColumnTypeEnum.FUNCTION]: getInvitedOnDate,
-    styles: {
-      'min-width': '120px',
-    },
-  },
-  {
-    title: 'LAST ACTIVITY',
-    key: 'original_modified',
-    headerTooltip:
-      "Companies will compare your scores with other candidates. So if your score looks low, don't worry and wait for the company to contact you. You may have still done better than the other candidates.",
-    type: ColumnTypeEnum.FUNCTION,
-    [ColumnTypeEnum.FUNCTION]: getLastActivityDate,
-    styles: {
-      'min-width': '140px',
-    },
-  },
-];
-
-function getInvitedOnDate(candidature: any) {
-  return candidature.original_created ? `${formatDate(candidature.original_created, 'mediumDate', 'en-US')}` : '';
-}
-
-function getLastActivityDate(candidature: any) {
-  return candidature.original_modified ? `${formatDate(candidature.original_modified, 'mediumDate', 'en-US')}` : '';
-}
-
-function getScore(candidature: any) {
-  return `${candidature.average_score ?? 0}%`;
-}
-
-export const DeprecatedTable = Template.bind({});
-DeprecatedTable.args = {
-  config: { columns: COLUMNS, sortable: true },
-  data: DATA,
-};
-
-export const Tooltip = Template.bind({});
-Tooltip.args = {
-  config: {
-    title: 'Table name',
-    columns: [
-      {
-        title: 'Name',
-        key: 'name',
-      },
-      {
-        title: 'Email',
-        key: 'email',
-      },
-      {
-        title: 'Phone Number',
-        key: 'phoneNumber',
-        tooltip: 'Phone number is long',
-        showTooltip: true,
-      },
-      {
-        title: 'Date',
-        key: 'date',
-      },
-    ],
-  },
-  data: tableData,
-};
-
-Tooltip.parameters = parameters;