hy-content-list-item.tsx

export interface TagValue {
  name: string;
}

import {Component, Element, h, Listen, Prop, Watch} from '@stencil/core';
import {CourseVariants} from '../../../utils/utils';

let keys = {
  enter: 'Enter',
};

@Component({
  tag: 'hy-content-list-item',
  styleUrl: 'hy-content-list-item.scss',
  shadow: true,
})
export class HyContentLstItem {
  @Prop() variant: CourseVariants = CourseVariants.default;
  @Prop() courseCode?: string;
  @Prop() courseName?: string;
  @Prop() courseCredits?: string;
  private _courseTags: TagValue[];
  @Prop() courseTags: TagValue[] | string;
  @Prop() courseStartDate?: string;
  @Prop() courseEndDate?: string;
  @Prop() courseStudyFormat?: string;
  @Prop() courseOrganisation?: string;
  @Prop() courseEnrollmentLink?: string;
  @Prop() courseTeachingLanguage?: string;
  @Prop() courseLinkLabel?: string;
  private _dateValue: string = '';
  @Element() el: HTMLElement;

  @Watch('courseTags')
  arrayDataWatcher(newValue: TagValue[] | string) {
    if (typeof newValue === 'string') {
      this._courseTags = JSON.parse(newValue);
    } else {
      this._courseTags = newValue;
    }
  }

  componentWillLoad() {
    this.arrayDataWatcher(this.courseTags);

    // Convert to date format: 25.05. - 30.07.2020. Incoming date is in format YYYY-MM-DD
    let startDate = this.courseStartDate ? this.courseStartDate.split(/\-|\s/) : '';
    let endDate = this.courseEndDate ? this.courseEndDate.split(/\-|\s/) : '';

    if (!startDate && endDate) {
      this._dateValue = ` - ${endDate[2]}.${endDate[1]}.${endDate[0]}`;
    } else if (startDate && !endDate) {
      this._dateValue = `${startDate[2]}.${startDate[1]}. - `;
    } else if (startDate && endDate) {
      this._dateValue = `${startDate[2]}.${startDate[1]}. - ${endDate[2]}.${endDate[1]}.${endDate[0]}`;
    }
  }

  @Listen('keydown')
  handleKeyDown(event) {
    const key = (event as KeyboardEvent).code;
    if (key == keys.enter) {
      let card = this.el;
      window.open(card.dataset.location, '_blank');
    }
  }

  render() {
    const classAttributes = [this.variant, 'hy-content-list-item'].join(' ');

    const target = '_blank';
    const ariaLabel = 'Link points outside the current website.';

    return [
      <div class={classAttributes} tabindex="0">
        <div class="hy-content-list-item--item-name">{this.courseName}</div>
        <div class="hy-content-list-item--metadata">
          <div class="hy-content-list-item--metadata--item hy-content-list-item--metadata--item--first">
            <span>{this._dateValue}</span>
          </div>
          {this.courseOrganisation
            ? [
                <div class="hy-content-list-item--metadata--item">
                  <span>{this.courseStudyFormat}</span>
                </div>,
                <div class="hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last">
                  <span>{this.courseOrganisation}</span>
                </div>,
              ]
            : [
                <div class="hy-content-list-item--metadata--item hy-content-list-item--metadata--item--last">
                  <span>{this.courseStudyFormat}</span>
                </div>,
              ]}
        </div>
        {this._courseTags.length > 0 && (
          <div class="hy-content-list-item--tags">
            {this._courseTags.map((x) => {
              return <hy-tag>{x.name}</hy-tag>;
            })}
          </div>
        )}
        <div class="hy-content-list-item--link">
          <a
            href={this.courseEnrollmentLink}
            target={target}
            aria-label={ariaLabel}
            class="hy-content-list-item--link--link"
            tabindex="-1"
          >
            <span class="label">{this.courseLinkLabel}</span>
            <span class="icon-wrapper">
              <div class="icon">
                <hy-icon icon={'hy-icon-arrow-to-right'} size={40} />
              </div>
            </span>
          </a>
        </div>
      </div>,
    ];
  }
}