refactor: adjust HeBIS templates in list

Closes #318

src/app/modules/data/data.module.ts

@@ -44,7 +44,6 @@ import {DataListComponent} from './list/data-list.component';
 import {FoodDataListComponent} from './list/food-data-list.component';
 import {SearchPageComponent} from './list/search-page.component';
 import {StAppsWebHttpClient} from './stapps-web-http-client.provider';
-import {ArticleDetailContentComponent} from './types/article/article-detail-content.component';
 import {CatalogDetailContentComponent} from './types/catalog/catalog-detail-content.component';
 import {DateSeriesDetailContentComponent} from './types/date-series/date-series-detail-content.component';
 import {DishDetailContentComponent} from './types/dish/dish-detail-content.component';
@@ -60,7 +59,6 @@ import {PlaceMensaDetailComponent} from './types/place/special/mensa/place-mensa
 import {SemesterDetailContentComponent} from './types/semester/semester-detail-content.component';
 import {MapWidgetComponent} from '../map/widget/map-widget.component';
 import {LeafletModule} from '@asymmetrik/ngx-leaflet';
-import {ArticleListItemComponent} from './types/article/article-list-item.component';
 import {SkeletonSimpleCardComponent} from './elements/skeleton-simple-card.component';
 import {CatalogListItemComponent} from './types/catalog/catalog-list-item.component';
 import {DataListItemComponent} from './list/data-list-item.component';
@@ -91,6 +89,12 @@ import {TreeListFragmentComponent} from './list/tree-list-fragment.component';
 import {SettingsProvider} from '../settings/settings.provider';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
 import {ExternalLinkComponent} from './elements/external-link.component';
+import {ArticleListItemComponent} from './types/article/article-item.component';
+import {ArticleContentComponent} from './types/article/article-content.component';
+import {BookDetailContentComponent} from './types/book/book-detail-content.component';
+import {BookListItemComponent} from './types/book/book-list-item.component';
+import {PeriodicalListItemComponent} from './types/periodical/periodical-list-item.component';
+import {PeriodicalDetailContentComponent} from './types/periodical/periodical-detail-content.component';
 
 /**
  * Module for handling data
@@ -101,8 +105,6 @@ import {ExternalLinkComponent} from './elements/external-link.component';
     AddEventActionChipComponent,
     EditEventSelectionComponent,
     AddressDetailComponent,
-    ArticleDetailContentComponent,
-    ArticleListItemComponent,
     CatalogDetailContentComponent,
     CatalogListItemComponent,
     DataDetailComponent,
@@ -152,6 +154,12 @@ import {ExternalLinkComponent} from './elements/external-link.component';
     SimpleDataListComponent,
     TitleCardComponent,
     ExternalLinkComponent,
+    ArticleListItemComponent,
+    ArticleContentComponent,
+    BookListItemComponent,
+    BookDetailContentComponent,
+    PeriodicalListItemComponent,
+    PeriodicalDetailContentComponent,
   ],
   entryComponents: [DataListComponent, SimpleDataListComponent],
   imports: [
@@ -199,11 +207,13 @@ import {ExternalLinkComponent} from './elements/external-link.component';
     SkeletonSimpleCardComponent,
     SearchPageComponent,
     SimpleDataListComponent,
-    ArticleDetailContentComponent,
     OriginDetailComponent,
     FavoriteButtonComponent,
     TreeListComponent,
     ExternalLinkComponent,
+    ArticleContentComponent,
+    BookDetailContentComponent,
+    PeriodicalDetailContentComponent,
   ],
 })
 export class DataModule {}

src/app/modules/data/list/data-list-item.html

@@ -103,6 +103,18 @@
         [item]="$any(item)"
         *ngSwitchCase="item.type === 'video'"
       ></stapps-video-list-item>
+      <stapps-book-list-item
+        [item]="$any(item)"
+        *ngSwitchCase="item.type === 'book'"
+      ></stapps-book-list-item>
+      <stapps-periodical-list-item
+        [item]="$any(item)"
+        *ngSwitchCase="item.type === 'periodical'"
+      ></stapps-periodical-list-item>
+      <stapps-article-item
+        [item]="$any(item)"
+        *ngSwitchCase="item.type === 'article'"
+      ></stapps-article-item>
       <div *ngSwitchDefault>
         <h2>
           {{ 'name' | thingTranslate: item }}

src/app/modules/data/types/article/article-content.component.ts

@@ -19,10 +19,10 @@ import {SCArticle} from '@openstapps/core';
  * TODO
  */
 @Component({
-  selector: 'stapps-article-detail-content',
-  templateUrl: 'article-detail-content.html',
+  selector: 'stapps-article-content',
+  templateUrl: 'article-content.html',
 })
-export class ArticleDetailContentComponent {
+export class ArticleContentComponent {
   /**
    * TODO
    */

src/app/modules/data/types/article/article-content.html

@@ -0,0 +1,106 @@
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~  This program is free software: you can redistribute it and/or modify it
+  ~  under the terms of the GNU General Public License as published by the Free
+  ~  Software Foundation, version 3.
+  ~
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  more details.
+  ~
+  ~  You should have received a copy of the GNU General Public License along with
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ion-card *ngIf="item.sameAs">
+  <ion-card-header>{{
+    'hebisSearch.detail.title' | translate | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <stapps-external-link
+      [text]="'name' | thingTranslate: item"
+      [link]="item.sameAs"
+    ></stapps-external-link>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="!item.sameAs"
+  [title]="'name' | propertyNameTranslate: item | sentencecase"
+  [content]="'name' | thingTranslate: item"
+>
+</stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.description"
+  [title]="'hebisSearch.detail.description' | translate | sentencecase"
+  [content]="item.description"
+></stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.sourceOrganization"
+  [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+  [content]="item.sourceOrganization"
+></stapps-simple-card>
+
+<ion-card *ngIf="item.authors && item.authors.length > 0">
+  <ion-card-header>{{
+    'authors' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <ion-label *ngFor="let author of item.authors">{{
+      'name' | thingTranslate: author
+    }}</ion-label>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="item.firstPublished && !item.lastPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [content]="item.firstPublished"
+>
+</stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.firstPublished && item.lastPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+>
+</stapps-simple-card>
+
+<ion-card *ngIf="item.publications">
+  <ion-card-header>{{
+    'publications' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <p *ngFor="let publication of item.publications">
+      {{ publication.locations | join: ', ' }}
+      {{ publication.locations && publication.publisher ? ':' : '' }}
+      {{ publication.publisher }}
+    </p>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="item.reference"
+  [title]="'reference' | propertyNameTranslate: item | sentencecase"
+  [content]="item.reference"
+></stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.isPartOf"
+  [title]="'isPartOf' | propertyNameTranslate: item | sentencecase"
+  [content]="item.isPartOf.name"
+></stapps-simple-card>
+<ion-card *ngIf="item.categories">
+  <ion-card-header>{{
+    'categories' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <ion-chip [color]="'primary'">
+      <ion-icon [name]="item.type | dataIcon"></ion-icon>
+      <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
+    </ion-chip>
+  </ion-card-content>
+</ion-card>

src/app/modules/data/types/article/article-detail-content.html

@@ -1,16 +0,0 @@
-<stapps-simple-card
-  [title]="'categories' | propertyNameTranslate: item | titlecase"
-  [content]="'categories' | thingTranslate: item"
->
-</stapps-simple-card>
-<stapps-simple-card
-  *ngIf="item.datePublished"
-  [title]="'datePublished' | propertyNameTranslate: item | titlecase"
-  [content]="item.datePublished | amDateFormat: 'll'"
-></stapps-simple-card>
-<stapps-simple-card
-  [title]="'articleBody' | propertyNameTranslate: item | titlecase"
-  [content]="'articleBody' | thingTranslate: item"
-  [isMarkdown]="true"
->
-</stapps-simple-card>

src/app/modules/data/types/article/article-item.component.ts

@@ -20,7 +20,7 @@ import {DataListItemComponent} from '../../list/data-list-item.component';
  * TODO
  */
 @Component({
-  selector: 'stapps-article-list-item',
+  selector: 'stapps-article-item',
   templateUrl: 'article-list-item.html',
 })
 export class ArticleListItemComponent extends DataListItemComponent {

src/app/modules/data/types/article/article-list-item.html

@@ -1,15 +1,27 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <ion-label class="title">{{ 'name' | thingTranslate: item }}</ion-label>
-      <p *ngIf="item.keywords">
-        <stapps-long-inline-text
-          [text]="item.keywords.join(', ')"
-          [size]="110"
-        ></stapps-long-inline-text>
+      <h2 class="name">
+        {{ 'name' | thingTranslate: item }}
+      </h2>
+      <p>
+        <ng-container *ngFor="let author of item.authors">
+          {{ 'name' | thingTranslate: author }}</ng-container
+        ><ng-container
+          *ngIf="item.authors && item.authors && item.firstPublished"
+          >,&nbsp;</ng-container
+        >
+        <ng-container
+          *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
+          >{{ item.firstPublished }}</ng-container
+        ><ng-template #dateRange
+          ><ng-container *ngIf="item.firstPublished && item.lastPublished">{{
+            [item.firstPublished, item.lastPublished] | join: ' - '
+          }}</ng-container></ng-template
+        >
       </p>
       <ion-note>
-        {{ 'type' | thingTranslate: item }}
+        {{ 'categories' | thingTranslate: item }}
       </ion-note>
     </ion-col>
   </ion-row>

src/app/modules/data/types/book/book-detail-content.component.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCBook} from '@openstapps/core';
+
+/**
+ * TODO
+ */
+@Component({
+  selector: 'stapps-book-detail-content',
+  templateUrl: 'book-detail-content.html',
+})
+export class BookDetailContentComponent {
+  /**
+   * TODO
+   */
+  @Input() item: SCBook;
+}

src/app/modules/data/types/book/book-detail-content.html

@@ -0,0 +1,105 @@
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~  This program is free software: you can redistribute it and/or modify it
+  ~  under the terms of the GNU General Public License as published by the Free
+  ~  Software Foundation, version 3.
+  ~
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  more details.
+  ~
+  ~  You should have received a copy of the GNU General Public License along with
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ion-card *ngIf="item.sameAs">
+  <ion-card-header>{{
+    'hebisSearch.detail.title' | translate | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <stapps-external-link
+      [text]="'name' | thingTranslate: item"
+      [link]="item.sameAs"
+    ></stapps-external-link>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="!item.sameAs"
+  [title]="'name' | propertyNameTranslate: item | sentencecase"
+  [content]="'name' | thingTranslate: item"
+>
+</stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.edition"
+  [title]="'edition' | propertyNameTranslate: item | sentencecase"
+  [content]="'edition' | thingTranslate: item"
+>
+</stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.description"
+  [title]="'hebisSearch.detail.description' | translate | sentencecase"
+  [content]="item.description"
+></stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.sourceOrganization"
+  [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+  [content]="item.sourceOrganization"
+></stapps-simple-card>
+
+<ion-card *ngIf="item.authors && item.authors.length > 0">
+  <ion-card-header>{{
+    'authors' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <ion-label *ngFor="let author of item.authors">{{
+      'name' | thingTranslate: author
+    }}</ion-label>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="item.ISBNs"
+  [title]="'ISBNs' | propertyNameTranslate: item | sentencecase"
+  [content]="item.ISBNs"
+>
+</stapps-simple-card>
+<stapps-simple-card
+  *ngIf="item.firstPublished && !item.lastPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [content]="item.firstPublished"
+>
+</stapps-simple-card>
+<stapps-simple-card
+  *ngIf="item.firstPublished && item.lastPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+>
+</stapps-simple-card>
+<ion-card *ngIf="item.publications">
+  <ion-card-header>{{
+    'publications' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <p *ngFor="let publication of item.publications">
+      {{ publication.locations | join: ', ' }}
+      {{ publication.locations && publication.publisher ? ':' : '' }}
+      {{ publication.publisher }}
+    </p>
+  </ion-card-content>
+</ion-card>
+<ion-card *ngIf="item.categories">
+  <ion-card-header>{{
+    'categories' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <ion-chip [color]="'primary'">
+      <ion-icon [name]="item.type | dataIcon"></ion-icon>
+      <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
+    </ion-chip>
+  </ion-card-content>
+</ion-card>

src/app/modules/data/types/book/book-list-item.component.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCBook} from '@openstapps/core';
+import {DataListItemComponent} from '../../list/data-list-item.component';
+
+/**
+ * TODO
+ */
+@Component({
+  selector: 'stapps-book-list-item',
+  templateUrl: 'book-list-item.html',
+})
+export class BookListItemComponent extends DataListItemComponent {
+  /**
+   * TODO
+   */
+  @Input() item: SCBook;
+}

src/app/modules/data/types/book/book-list-item.html

@@ -0,0 +1,28 @@
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <h2 class="name">
+        {{ 'name' | thingTranslate: item }}
+      </h2>
+      <p>
+        <ng-container *ngFor="let author of item.authors">
+          {{ 'name' | thingTranslate: author }}</ng-container
+        ><ng-container
+          *ngIf="item.authors && item.authors && item.firstPublished"
+          >,&nbsp;</ng-container
+        >
+        <ng-container
+          *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
+          >{{ item.firstPublished }}</ng-container
+        ><ng-template #dateRange
+          ><ng-container *ngIf="item.firstPublished && item.lastPublished">{{
+            [item.firstPublished, item.lastPublished] | join: ' - '
+          }}</ng-container></ng-template
+        >
+      </p>
+      <ion-note>
+        {{ 'categories' | thingTranslate: item }}
+      </ion-note>
+    </ion-col>
+  </ion-row>
+</ion-grid>

src/app/modules/data/types/periodical/periodical-detail-content.component.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCPeriodical} from '@openstapps/core';
+
+/**
+ * TODO
+ */
+@Component({
+  selector: 'stapps-periodical-detail-content',
+  templateUrl: 'periodical-detail-content.html',
+})
+export class PeriodicalDetailContentComponent {
+  /**
+   * TODO
+   */
+  @Input() item: SCPeriodical;
+}

src/app/modules/data/types/periodical/periodical-detail-content.html

@@ -0,0 +1,98 @@
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~  This program is free software: you can redistribute it and/or modify it
+  ~  under the terms of the GNU General Public License as published by the Free
+  ~  Software Foundation, version 3.
+  ~
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  more details.
+  ~
+  ~  You should have received a copy of the GNU General Public License along with
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ion-card *ngIf="item.sameAs">
+  <ion-card-header>{{
+    'hebisSearch.detail.title' | translate | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <stapps-external-link
+      [text]="'name' | thingTranslate: item"
+      [link]="item.sameAs"
+    ></stapps-external-link>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="!item.sameAs"
+  [title]="'name' | propertyNameTranslate: item | sentencecase"
+  [content]="'name' | thingTranslate: item"
+>
+</stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.description"
+  [title]="'hebisSearch.detail.description' | translate | sentencecase"
+  [content]="item.description"
+></stapps-simple-card>
+
+<stapps-simple-card
+  *ngIf="item.sourceOrganization"
+  [title]="'sourceOrganization' | propertyNameTranslate: item | sentencecase"
+  [content]="item.sourceOrganization"
+></stapps-simple-card>
+
+<ion-card *ngIf="item.authors && item.authors.length > 0">
+  <ion-card-header>{{
+    'authors' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <ion-label *ngFor="let author of item.authors">{{
+      'name' | thingTranslate: author
+    }}</ion-label>
+  </ion-card-content>
+</ion-card>
+
+<stapps-simple-card
+  *ngIf="item.firstPublished && !item.lastPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [content]="item.firstPublished + '-'"
+>
+</stapps-simple-card>
+<stapps-simple-card
+  *ngIf="item.firstPublished && item.lastPublished"
+  [title]="'hebisSearch.detail.firstPublished' | translate | sentencecase"
+  [content]="[item.firstPublished, item.lastPublished] | join: ' - '"
+>
+</stapps-simple-card>
+<ion-card *ngIf="item.publications">
+  <ion-card-header>{{
+    'publications' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <p *ngFor="let publication of item.publications">
+      {{ publication.locations | join: ', ' }}
+      {{ publication.locations && publication.publisher ? ':' : '' }}
+      {{ publication.publisher }}
+    </p>
+  </ion-card-content>
+</ion-card>
+<ion-card *ngIf="item.categories">
+  <ion-card-header>{{
+    'categories' | propertyNameTranslate: item | sentencecase
+  }}</ion-card-header>
+  <ion-card-content>
+    <ion-chip [color]="'primary'">
+      <ion-icon [name]="item.type | dataIcon"></ion-icon>
+      <ion-label>{{ 'categories' | thingTranslate: item }}</ion-label>
+    </ion-chip>
+  </ion-card-content>
+</ion-card>
+<stapps-simple-card
+  *ngIf="item.ISSNs"
+  [title]="'ISSNs' | propertyNameTranslate: item | sentencecase"
+  [content]="item.ISSNs | join: ', '"
+>
+</stapps-simple-card>

src/app/modules/data/types/periodical/periodical-list-item.component.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2019 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+import {Component, Input} from '@angular/core';
+import {SCPeriodical} from '@openstapps/core';
+import {DataListItemComponent} from '../../list/data-list-item.component';
+
+/**
+ * TODO
+ */
+@Component({
+  selector: 'stapps-periodical-list-item',
+  templateUrl: 'periodical-list-item.html',
+})
+export class PeriodicalListItemComponent extends DataListItemComponent {
+  /**
+   * TODO
+   */
+  @Input() item: SCPeriodical;
+}

src/app/modules/data/types/periodical/periodical-list-item.html

@@ -0,0 +1,28 @@
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <h2 class="name">
+        {{ 'name' | thingTranslate: item }}
+      </h2>
+      <p>
+        <ng-container *ngFor="let author of item.authors">
+          {{ 'name' | thingTranslate: author }}</ng-container
+        ><ng-container
+          *ngIf="item.authors && item.authors && item.firstPublished"
+          >,&nbsp;</ng-container
+        >
+        <ng-container
+          *ngIf="item.firstPublished && !item.lastPublished; else dateRange"
+          >{{ item.firstPublished }}</ng-container
+        ><ng-template #dateRange
+          ><ng-container *ngIf="item.firstPublished && item.lastPublished">{{
+            [item.firstPublished, item.lastPublished] | join: ' - '
+          }}</ng-container></ng-template
+        >
+      </p>
+      <ion-note>
+        {{ 'categories' | thingTranslate: item }}
+      </ion-note>
+    </ion-col>
+  </ion-row>
+</ion-grid>