hy-content-list.tsx

import {CourseVariants} from '../../../utils/utils';
import {Component, ComponentInterface, Element, h, Host, Prop, State} from '@stencil/core';

@Component({
  tag: 'hy-content-list',
  styleUrl: 'hy-content-list.scss',
  shadow: true,
})
export class HyContentList implements ComponentInterface {
  @Prop() linkLabel: string = 'Go to course page';
  @Prop() creditsLabel: string = 'cr';
  @Prop() dataItems: string;
  private _dataItems: [];
  private variant: CourseVariants = CourseVariants.default;
  @State() courseRealisations: Array<object> = [];
  @Element() el: HTMLElement;

  handleCardClick(id) {
    let card = this.el.shadowRoot.querySelectorAll('#' + id)[0] as HTMLElement;
    window.open(card.dataset.location, '_blank');
  }

  componentDidLoad() {
    this._dataItems = JSON.parse(this.dataItems);
    let courseRealisations = [];
    this._dataItems.forEach((item) => {
      let courseObject = JSON.parse(JSON.stringify(item));
      let courseTags = [];

      const courseListType = courseObject['courseListType'];
      this.variant = courseListType == 'list' ? CourseVariants.row : CourseVariants.grid;

      for (let courseProperty in courseObject) {
        if (courseProperty == 'courseListType') continue;

        let courseItem = courseObject[courseProperty];
        let courseCode = courseItem['code'];
        let courseCredits = courseItem['credits'];
        //let courseUnitName = courseItem['name'] + ', ' + courseCredits + ' ' + this.creditsLabel;

        if (courseItem['tags']) {
          let tags = JSON.parse(JSON.stringify(courseItem['tags']));
          for (let z in tags) {
            let tagItem = {name: tags[z]};
            courseTags.push(tagItem);
          }
        }
        let courseTagsJSON = JSON.stringify(courseTags);

        // Course realisations
        if (courseItem['realisations']) {
          let realisations = JSON.parse(JSON.stringify(courseItem['realisations']));
          for (let realisationProperty in realisations) {
            let realizationItem = realisations[realisationProperty];

            let courseRealisationName = realizationItem['name'];
            let courseRealisationFullName = courseRealisationName + ', ' + courseCredits + ' ' + this.creditsLabel;
            let courseStudyFormat = realizationItem['studyFormat'];
            let courseStartDate = realizationItem['startDate'];
            let courseEndDate = realizationItem['endDate'];
            let courseEnrollmentLink = realizationItem['enrolmentLink'];
            let courseTeachingLanguage = realizationItem['teachingLanguage'];
            let courseOrganisation = realizationItem['organisation'];

            const contentListItemClassAttributes = ['item', this.variant].join(' ');

            courseRealisations.push(
              <hy-content-list-item
                id={realisationProperty}
                class={contentListItemClassAttributes}
                variant={this.variant}
                course-code={courseCode}
                course-name={courseRealisationFullName}
                course-credits={courseCredits}
                course-tags={courseTagsJSON}
                course-start-date={courseStartDate}
                course-end-date={courseEndDate}
                course-study-format={courseStudyFormat}
                course-organisation={courseOrganisation}
                course-enrollment-link={courseEnrollmentLink}
                course-teaching-language={courseTeachingLanguage}
                course-link-label={this.linkLabel}
                data-location={courseEnrollmentLink}
                onClick={() => this.handleCardClick(realisationProperty)}
                //onKeyDown={() => this.handleKeyDown(window.event, realisationProperty)}
              ></hy-content-list-item>
            );
          }
        }
      }
    });

    this.courseRealisations = courseRealisations;
  }

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

    return (
      <Host>
        <div class={classAttributes}>{this.courseRealisations}</div>
      </Host>
    );
  }
}