@testgorilla/tgo-ui 2.10.0 → 2.10.1

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

@@ -0,0 +1,620 @@
+import { formatDate } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { DynamicComponentDirective } from './directives/dynamic-component.directive';
+import { DataPropertyGetterPipe } from '../../pipes/data-property-getter';
+import { DeprecatedTableComponent } from './deprecated-table.component';
+import {
+  ColumnAlignmentEnum,
+  ColumnTypeEnum,
+  IComponentRenderer,
+  IDetailRowDataParams,
+  ITableColumn,
+  ITableDetailColumn,
+} from './deprecated-table.model';
+
+interface AssessmentSimplified {
+  /**
+   * Uuid
+   * @format uuid
+   */
+  uuid?: string;
+
+  /** Name */
+  name: string;
+
+  /** Status */
+  status: string;
+
+  /**
+   * Company name
+   * The name of the company that created this assessment
+   */
+  company_name?: string | null;
+
+  /**
+   * Job role name
+   * The name of the job role this assessment is for
+   */
+  job_role_name?: string | null;
+
+  /**
+   * Date of expiry
+   * Due date in which the assessment expiry and can't be started by new candidates
+   * @format date-time
+   */
+  date_of_expiry?: string | null;
+}
+
+interface CandidatureSimplified {
+  /**
+   * Uuid
+   * @format uuid
+   */
+  uuid?: string;
+
+  /**
+   * Status
+   * Candidature original status
+   */
+  status: string;
+
+  /**
+   * Integral status
+   * Integral status depending of the assessment/candidature statuses
+   */
+  integral_status?: string;
+
+  /**
+   * Average score
+   * The average value from the candidature once is completed. Range from 0 to 100
+   */
+  average_score?: number | null;
+
+  /**
+   * Duration
+   * Duration assigned to complete the candidature. Value is indicated in seconds
+   * @min 0
+   * @max 4294967295
+   */
+  duration?: number | null;
+
+  /**
+   * Original created
+   * The created date of the original entity in the TestGorilla application
+   * @format date-time
+   */
+  original_created: string;
+
+  /**
+   * Original modified
+   * The modified date of the original entity in the TestGorilla application
+   * @format date-time
+   */
+  original_modified: string;
+  assessment: AssessmentSimplified;
+}
+
+interface AnswerResource {
+  /**
+   * File url
+   * @format uri
+   */
+  file_url: string;
+
+  /**
+   * Type
+   * For example, video, audio, etc.
+   */
+  type: string;
+}
+
+interface Answer {
+  /**
+   * Text
+   * Text value used to answer a question
+   */
+  text: string;
+
+  /**
+   * Score
+   * Range from 0 to 100
+   * @min -2147483648
+   * @max 2147483647
+   */
+  score?: number | null;
+}
+
+interface Question {
+  /** Description */
+  description: string;
+
+  /**
+   * Type
+   * For example, text, radio, checkbox, etc.
+   */
+  type: string;
+
+  /**
+   * Order
+   * The order in which the questions are displayed.
+   * @min 0
+   * @max 4294967295
+   */
+  order: number;
+
+  /**
+   * Is completed
+   * If the question was completed by the candidate
+   */
+  is_completed?: boolean;
+
+  /**
+   * Is answered
+   * If the question was answered by the candidate
+   */
+  is_answered?: boolean;
+
+  /**
+   * Duration
+   * Duration assigned to complete the question. Value is indicated in seconds
+   * @min 0
+   * @max 4294967295
+   */
+  duration?: number | null;
+
+  /**
+   * Response time
+   * Time used to complete the question. Value is indicated in seconds
+   * @min 0
+   * @max 4294967295
+   */
+  response_time?: number | null;
+  answers: Answer[];
+  resources: AnswerResource[];
+}
+
+interface SkillArea {
+  /** Description */
+  description: string;
+
+  /**
+   * Order
+   * The order in which the skill area are displayed.
+   * @min 0
+   * @max 4294967295
+   */
+  order: number;
+
+  /**
+   * Score
+   * Range from 0 to 100
+   * @min -2147483648
+   * @max 2147483647
+   */
+  score?: number | null;
+
+  /** Total questions */
+  total_questions?: number;
+
+  /** Total answers */
+  total_answers?: number;
+
+  /**
+   * In the current version, just is necessary return the questions of the Custom Question and Personality Tests
+   *
+   */
+  questions?: Question[];
+}
+
+interface TestResult {
+  /**
+   * Uuid
+   * @format uuid
+   */
+  uuid?: string;
+
+  /**
+   * Name
+   * Name of the test
+   */
+  name: string;
+
+  /**
+   * Summary
+   * A summarized description of the test
+   */
+  summary?: string | null;
+
+  /**
+   * Duration
+   * Limit of time that takes to complete the test. Value is indicated in seconds
+   * @min 0
+   * @max 4294967295
+   */
+  duration?: number | null;
+
+  /**
+   * Response time
+   * Time used to complete the test. Value is indicated in seconds
+   * @min 0
+   * @max 4294967295
+   */
+  response_time?: number | null;
+
+  /**
+   * Order
+   * The order in which the test results are displayed.
+   * @min 0
+   * @max 4294967295
+   */
+  order: number;
+
+  /**
+   * Is custom
+   * If the test is a custom question's test.
+   */
+  is_custom?: boolean;
+
+  /**
+   * Is personality type
+   * If the test contain the type: Personality & culture
+   */
+  is_personality_type?: boolean;
+
+  /**
+   * Is private
+   * If the test is only visible for the company (customer) that created this
+   */
+  is_private?: boolean;
+
+  /**
+   * Is completed
+   * If the test was completed by the candidate
+   */
+  is_completed?: boolean;
+
+  /**
+   * Test algorithm
+   * Test algorithm name. This is related to how is the score formatted
+   */
+  test_algorithm?: string | null;
+
+  /**
+   * Score
+   * The result value from the test once is completed. Range from 0 to 100
+   * @min -2147483648
+   * @max 2147483647
+   */
+  score?: number | null;
+
+  /**
+   * Score display
+   * A representation value to display as a score different of a number
+   */
+  score_display?: string | null;
+
+  /**
+   * Score description
+   * The result score description in json format
+   */
+  score_description?: object | null;
+  skill_areas: SkillArea[];
+}
+
+const DATA: CandidatureSimplified[] = [
+  {
+    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 EXPANDABLE_DATA: TestResult[] = [
+  {
+    uuid: '34fabc67-d04c-4eb3-8eb7-323d29cec1f9',
+    name: 'Company Custom Multi',
+    summary: 'Multi choice test',
+    duration: 300,
+    response_time: 19,
+    order: 1,
+    is_custom: false,
+    is_personality_type: false,
+    is_private: true,
+    is_completed: true,
+    test_algorithm: 'basic',
+    score: null,
+    score_display: null,
+    score_description: null,
+    skill_areas: [
+      {
+        description: 'First Area',
+        order: 1,
+        score: 0,
+        total_questions: 2,
+        total_answers: 2,
+        questions: undefined,
+      },
+      {
+        description: 'Second Area',
+        order: 2,
+        score: 0,
+        total_questions: 2,
+        total_answers: 2,
+        questions: undefined,
+      },
+    ],
+  },
+];
+
+function getInvitedOnDate(candidature: CandidatureSimplified) {
+  return candidature.original_created ? `${formatDate(candidature.original_created, 'mediumDate', 'en-US')}` : '';
+}
+
+function getLastActivityDate(candidature: CandidatureSimplified) {
+  return candidature.original_modified ? `${formatDate(candidature.original_modified, 'mediumDate', 'en-US')}` : '';
+}
+
+function getScore(candidature: CandidatureSimplified) {
+  return `${candidature.average_score ?? 0}%`;
+}
+
+function getScoreTestResult(testResult: TestResult): string {
+  return `${testResult.score ?? 0}%`;
+}
+
+const memoize = <T = any>(fn: any) => {
+  const cache = new Map();
+  const cached = function (this: any, val: T) {
+    return cache.has(val) ? cache.get(val) : cache.set(val, fn.call(this, val)) && cache.get(val);
+  };
+  cached.cache = cache;
+  return cached;
+};
+
+
+const getAnsweredCount = memoize(
+  (skillArea: SkillArea): string => `answered ${skillArea.total_answers}/${skillArea.total_questions}`
+);
+
+const getTimeTaken = memoize((testResult: TestResult | Question): string => {
+  if (testResult.duration) {
+    // output: "mm:ss out of mm:ss"
+    return `${testResult.response_time ?? 0} out of ${testResult.duration}`;
+  } else {
+    // output: "mm:ss"
+    const minuteSeconds = (value: number): string => {
+      const minutes: number = Math.floor(value / 60);
+      return minutes.toString().padStart(2, '0') + ':' + (value - minutes * 60).toString().padStart(2, '0');
+    };
+    return minuteSeconds(testResult.response_time ?? 0);
+  }
+});
+
+const COLUMNS: ITableColumn<CandidatureSimplified>[] = [
+  {
+    headerName: 'COMPANY NAME',
+    field: 'assessment.company_name',
+    sortable: true,
+    styles: {
+      width: '60%',
+    },
+  },
+  {
+    headerName: 'SCORE',
+    type: ColumnTypeEnum.FUNCTION,
+    [ColumnTypeEnum.FUNCTION]: getScore,
+  },
+  {
+    headerName: 'INVITED ON',
+    type: ColumnTypeEnum.FUNCTION,
+    [ColumnTypeEnum.FUNCTION]: getInvitedOnDate,
+    styles: {
+      'min-width': '120px',
+    },
+  },
+  {
+    headerName: 'LAST ACTIVITY',
+    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',
+    },
+  },
+];
+
+const EXPANDABLE_COLUMS: ITableColumn<TestResult>[] = [
+  {
+    headerName: 'NAME',
+    type: ColumnTypeEnum.FIELD,
+    [ColumnTypeEnum.FIELD]: 'name',
+    sortable: true,
+    styles: {
+      width: '45%',
+    },
+  },
+  {
+    headerName: 'TIME TAKEN',
+    type: ColumnTypeEnum.FUNCTION,
+    [ColumnTypeEnum.FUNCTION]: getTimeTaken.bind(this),
+  },
+  {
+    headerName: 'SCORE',
+    type: ColumnTypeEnum.FUNCTION,
+    [ColumnTypeEnum.FUNCTION]: getScoreTestResult,
+    sortable: false,
+    styles: {
+      alignment: ColumnAlignmentEnum.RIGHT,
+    },
+  },
+];
+
+const EXPANDABLE_DETAIL_COLUMNS: ITableDetailColumn<TestResult, SkillArea> = {
+  columnDefs: [
+    {
+      headerName: 'description',
+      type: ColumnTypeEnum.FIELD,
+      [ColumnTypeEnum.FIELD]: 'description',
+      styles: {
+        width: '45%',
+      },
+    },
+    {
+      headerName: 'getAnsweredCount',
+      type: ColumnTypeEnum.FUNCTION,
+      [ColumnTypeEnum.FUNCTION]: getAnsweredCount.bind(this),
+    },
+  ],
+  setDetailRowData: (params: IDetailRowDataParams<TestResult, SkillArea>) => {
+    params.setDetailDataSource(params.data.skill_areas);
+  },
+};
+
+export default {
+  title: 'Deprecated/Table',
+  component: DeprecatedTableComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [DeprecatedTableComponent],
+      imports: [
+        BrowserAnimationsModule,
+        MatTableModule,
+        MatSortModule,
+        MatIconModule,
+        MatTooltipModule,
+        DataPropertyGetterPipe,
+        DynamicComponentDirective,
+      ],
+      providers: [DataPropertyGetterPipe]
+    }),
+  ],
+} as Meta;
+
+const Template: Story = args => ({
+  props: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  tableData: DATA,
+  tableColumns: COLUMNS,
+};
+
+export const Expandable = Template.bind({});
+Expandable.args = {
+  tableDetails: true,
+  tableData: EXPANDABLE_DATA,
+  tableColumns: EXPANDABLE_COLUMS,
+  tableDetailColumns: EXPANDABLE_DETAIL_COLUMNS,
+};
+
+Default.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: '',
+  },
+};