fix(data): fix template and other consistency issues

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

@@ -32,7 +32,7 @@ import {AddressDetailComponent} from './elements/address-detail.component';
 import {LongInlineText} from './elements/long-inline-text.component';
 import {OriginDetailComponent} from './elements/origin-detail.component';
 import {OriginInListComponent} from './elements/origin-in-list.component';
-import {CardOfArrayComponent} from './elements/simple-card.component';
+import {SimpleCardComponent} from './elements/simple-card.component';
 import {DataListItem} from './list/data-list-item.component';
 import {DataListComponent} from './list/data-list.component';
 import {StAppsWebHttpClient} from './stapps-web-http-client.provider';
@@ -68,7 +68,7 @@ import {VideoListItem} from './types/video/video-list-item.component';
     AddressDetailComponent,
     ArticleDetailContentComponent,
     ArticleListItem,
-    CardOfArrayComponent,
+    SimpleCardComponent,
     CatalogDetailContentComponent,
     CatalogListItem,
     DataDetailComponent,

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

@@ -1,27 +1,19 @@
 <stapps-simple-card *ngIf="item.description" [title]="'Description'" [content]="item.description"></stapps-simple-card>
-<div [ngSwitch]="true" lines="full">
+<div [ngSwitch]="true">
-  <stapps-dish-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'dish'">
+  <stapps-article-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'article'"></stapps-article-detail-content>
-  </stapps-dish-detail-content>
+  <stapps-catalog-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'catalog'"></stapps-catalog-detail-content>
-  <stapps-place-detail-content [item]="item" [language]="language"
+  <stapps-date-series-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'date series'"></stapps-date-series-detail-content>
-    *ngSwitchCase="item.type === 'building' || item.type === 'point of interest' || item.type === 'room' || item.type === 'floor'">
+  <stapps-dish-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'dish'"></stapps-dish-detail-content>
-  </stapps-place-detail-content>
+  <stapps-event-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'academic event'"></stapps-event-detail-content>
-  <stapps-event-detail-content [item]="item" [language]="language"
+  <stapps-event-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'sport course'"></stapps-event-detail-content>
-    *ngSwitchCase="item.type === 'academic event' || item.type === 'sport course'"></stapps-event-detail-content>
+  <stapps-favorite-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'favorite'"></stapps-favorite-detail-content>
-  <stapps-person-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'person'">
+  <stapps-message-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'message'"></stapps-message-detail-content>
-  </stapps-person-detail-content>
+  <stapps-person-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'person'"></stapps-person-detail-content>
-  <stapps-favorite-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'favorite'">
+  <stapps-place-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'building'"></stapps-place-detail-content>
-  </stapps-favorite-detail-content>
+  <stapps-place-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'floor'"></stapps-place-detail-content>
-  <stapps-catalog-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'catalog'">
+  <stapps-place-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'point of interest'"></stapps-place-detail-content>
-  </stapps-catalog-detail-content>
+  <stapps-place-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'room'"></stapps-place-detail-content>
-  <stapps-message-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'message'">
+  <stapps-semester-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'semester'"></stapps-semester-detail-content>
-  </stapps-message-detail-content>
+  <stapps-video-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'video'"></stapps-video-detail-content>
-  <stapps-date-series-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'date series'">
-  </stapps-date-series-detail-content>
-  <stapps-article-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'article'">
-  </stapps-article-detail-content>
-  <stapps-video-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'video'">
-  </stapps-video-detail-content>
-  <stapps-semester-detail-content [item]="item" [language]="language" *ngSwitchCase="item.type === 'semester'">
-  </stapps-semester-detail-content>
   <stapps-origin-detail [origin]="item.origin" ></stapps-origin-detail>
 </div>

src/app/modules/data/elements/long-inline-text.html

@@ -1 +1 @@
-<span>{{text | slice:0:size}}<span *ngIf="text.length > size">...</span>
+<span>{{text | slice:0:size}}<span *ngIf="text.length > size">...</span></span>

src/app/modules/data/elements/simple-card.component.ts

@@ -19,7 +19,7 @@ import {isThing, SCThing} from '@openstapps/core';
   selector: 'stapps-simple-card',
   templateUrl: 'simple-card.html',
 })
-export class CardOfArrayComponent {
+export class SimpleCardComponent {
   areThings: boolean = false;
   @Input() content: string | string[] | SCThing[];
   @Input() isMarkdown: boolean = false;

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

@@ -2,27 +2,30 @@
   <ion-thumbnail slot="start">
     <img class="stapps-{{item.type}}-thumbnail" src="{{item.image}}" onError="this.src='../../assets/imgs/logo.png';" alt="{{item.name}}" />
   </ion-thumbnail>
-  <ion-label [ngSwitch]="true" lines="full">
+  <ion-label [ngSwitch]="true">
     <div>
-      <stapps-dish-list-item [item]="item" *ngSwitchCase="item.type === 'dish'"></stapps-dish-list-item>
-      <stapps-place-list-item [item]="item"
-        *ngSwitchCase="item.type === 'building' || item.type === 'point of interest' || item.type === 'room' || item.type === 'floor'">
-      </stapps-place-list-item>
-      <stapps-event-list-item [item]="item" *ngSwitchCase="item.type === 'academic event' || item.type === 'sport course'"></stapps-event-list-item>
-      <stapps-person-list-item [item]="item" *ngSwitchCase="item.type === 'person'"></stapps-person-list-item>
-      <stapps-favorite-list-item [item]="item" *ngSwitchCase="item.type === 'favorite'"></stapps-favorite-list-item>
-      <stapps-catalog-list-item [item]="item" *ngSwitchCase="item.type === 'catalog'"></stapps-catalog-list-item>
-      <stapps-message-list-item [item]="item" *ngSwitchCase="item.type === 'message'"></stapps-message-list-item>
-      <stapps-date-series-list-item [item]="item" *ngSwitchCase="item.type === 'date series'"></stapps-date-series-list-item>
       <stapps-article-list-item [item]="item" *ngSwitchCase="item.type === 'article'"></stapps-article-list-item>
-      <stapps-video-list-item [item]="item" *ngSwitchCase="item.type === 'video'"></stapps-video-list-item>
+      <stapps-catalog-list-item [item]="item" *ngSwitchCase="item.type === 'catalog'"></stapps-catalog-list-item>
+      <stapps-date-series-list-item [item]="item" *ngSwitchCase="item.type === 'date series'"></stapps-date-series-list-item>
+      <stapps-dish-list-item [item]="item" *ngSwitchCase="item.type === 'dish'"></stapps-dish-list-item>
+      <stapps-event-list-item [item]="item" *ngSwitchCase="item.type === 'academic event'"></stapps-event-list-item>
+      <stapps-event-list-item [item]="item" *ngSwitchCase="item.type === 'sport course'"></stapps-event-list-item>
+      <stapps-favorite-list-item [item]="item" *ngSwitchCase="item.type === 'favorite'"></stapps-favorite-list-item>
+      <stapps-message-list-item [item]="item" *ngSwitchCase="item.type === 'message'"></stapps-message-list-item>
+      <stapps-organization-list-item [item]="item" *ngSwitchCase="item.type === 'organization'"></stapps-organization-list-item>
+      <stapps-person-list-item [item]="item" *ngSwitchCase="item.type === 'person'"></stapps-person-list-item>
+      <stapps-place-list-item [item]="item" *ngSwitchCase="item.type === 'building'"></stapps-place-list-item>
+      <stapps-place-list-item [item]="item" *ngSwitchCase="item.type === 'floor'"></stapps-place-list-item>
+      <stapps-place-list-item [item]="item" *ngSwitchCase="item.type === 'point of interest'"></stapps-place-list-item>
+      <stapps-place-list-item [item]="item" *ngSwitchCase="item.type === 'room'"></stapps-place-list-item>
       <stapps-semester-list-item [item]="item" *ngSwitchCase="item.type === 'semester'"></stapps-semester-list-item>
+      <stapps-video-list-item [item]="item" *ngSwitchCase="item.type === 'video'"></stapps-video-list-item>
       <ion-grid *ngSwitchDefault>
         <ion-row>
           <ion-col>
             <h2 class="name">{{item.name}}</h2>
             <p *ngIf="item.description">
-              <stapps-long-inline-text [text]="item.description" [size]="50"></stapps-long-inline-text>
+              <stapps-long-inline-text [text]="item.description" [size]="80"></stapps-long-inline-text>
             </p>
             <ion-note>{{item.type}}</ion-note>
           </ion-col>

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

@@ -3,13 +3,11 @@
     <ion-col>
       <h2 class="name">{{item.name}}</h2>
       <p *ngIf="item.keywords">
-        <stapps-long-inline-text [text]="item.keywords.join(', ')" [size]="30"></stapps-long-inline-text>
+        <stapps-long-inline-text [text]="item.keywords.join(', ')" [size]="80"></stapps-long-inline-text>
       </p>
       <ion-note>
         {{item.type}}
       </ion-note>
     </ion-col>
-    <ion-col width-20 text-right>
-    </ion-col>
   </ion-row>
 </ion-grid>

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

@@ -3,11 +3,9 @@
     <ion-col>
       <h2 class="name">{{item.name}}</h2>
       <p *ngIf="item.description">
-        <stapps-long-inline-text [text]="item.description" [size]="50"></stapps-long-inline-text>
+        <stapps-long-inline-text [text]="item.description" [size]="80"></stapps-long-inline-text>
       </p>
       <p *ngIf="item.academicTerm">{{item.academicTerm.name}}</p>
     </ion-col>
-    <ion-col width-20 text-right>
-    </ion-col>
   </ion-row>
 </ion-grid>

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

@@ -1,6 +1,14 @@
-<stapps-simple-card *ngIf="item.type === 'academic event' && item.categories" [title]="'Categories'" [content]="translator.translate(item).categories()">
+<ng-container *ngIf="item.type === 'academic event'">
-</stapps-simple-card>
+<stapps-simple-card *ngIf="item.categories" [title]="'Categories'" [content]="translator.translate(item).categories()">
+  </stapps-simple-card>
 <stapps-simple-card *ngIf="item.catalogs" [title]="'Catalogs'" [content]="item.catalogs"></stapps-simple-card>
 <stapps-simple-card *ngIf="item.performers" [title]="'Performers'" [content]="item.performers"></stapps-simple-card>
 <stapps-simple-card *ngIf="item.organizers" [title]="'Organizers'" [content]="item.organizers"></stapps-simple-card>
-<stapps-simple-card *ngIf="item.type === 'academic event' && item.majors" [title]="'Majors'" [content]="item.majors"></stapps-simple-card>
+<stapps-simple-card *ngIf="item.majors" [title]="'Majors'" [content]="item.majors"></stapps-simple-card>
+</ng-container>
+
+<ng-container *ngIf="item.type === 'sport course'">
+  <stapps-simple-card *ngIf="item.catalogs" [title]="'Catalogs'" [content]="item.catalogs"></stapps-simple-card>
+  <stapps-simple-card *ngIf="item.performers" [title]="'Performers'" [content]="item.performers"></stapps-simple-card>
+  <stapps-simple-card *ngIf="item.organizers" [title]="'Organizers'" [content]="item.organizers"></stapps-simple-card>
+</ng-container>

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

@@ -1,12 +1,18 @@
 <ion-grid>
-  <ion-row>
+  <ion-row *ngIf="item.type === 'academic event'">
     <ion-col>
       <h2 class="name">{{item.name}}</h2>
       <p *ngIf="item.description">{{item.description}}</p>
       <p *ngIf="item.academicTerms">{{item.academicTerms[0].name}}</p>
-      <ion-note *ngIf="item.type === 'academic event'">{{item.categories.join(', ')}}</ion-note>
+      <ion-note>{{item.type}} ({{item.categories.join(', ')}})</ion-note>
     </ion-col>
-    <ion-col width-20 text-right>
+  </ion-row>
+  <ion-row *ngIf="item.type === 'sport course'">
+    <ion-col>
+      <h2 class="name">{{item.name}}</h2>
+      <p *ngIf="item.description">{{item.description}}</p>
+      <p *ngIf="item.academicTerms">{{item.academicTerms[0].name}}</p>
+      <ion-note>{{item.type}}</ion-note>
     </ion-col>
   </ion-row>
 </ion-grid>

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

@@ -3,7 +3,7 @@
     <ion-col>
       <h2 class="name">{{item.name}}: {{item.data.name}}</h2>
       <p *ngIf="item.data.description">
-        <stapps-long-inline-text [text]="item.data.description" [size]="50"></stapps-long-inline-text>
+        <stapps-long-inline-text [text]="item.data.description" [size]="80"></stapps-long-inline-text>
       </p>
       <ion-note>{{item.type}} ({{item.data.type}})</ion-note>
     </ion-col>

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

@@ -0,0 +1,14 @@
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <h2 class="name">{{item.name}}</h2>
+      <p *ngIf="item.description">{{item.description}}</p>
+      <ion-note>{{item.type}}</ion-note>
+    </ion-col>
+    <ion-col width-20 text-right *ngIf="item.inPlace">
+      <span *ngIf="item.inPlace">
+        <ion-icon name="pin"></ion-icon> {{item.inPlace.name}}
+      </span>
+    </ion-col>
+  </ion-row>
+</ion-grid>

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

@@ -1,15 +1,15 @@
 <ng-container *ngIf="item.type !== 'floor'">
-<stapps-simple-card *ngIf="item.type !== 'floor' && item.categories" [title]="'Categories'" [content]="translator.translate(item).categories()"></stapps-simple-card>
+  <stapps-simple-card *ngIf="item.type !== 'floor' && item.categories" [title]="'Categories'" [content]="translator.translate(item).categories()"></stapps-simple-card>
-<stapps-address-detail *ngIf="item.type !== 'floor' && item.address" [address]="item.address"></stapps-address-detail>
+  <stapps-address-detail *ngIf="item.type !== 'floor' && item.address" [address]="item.address"></stapps-address-detail>
 </ng-container>
 <ng-container  *ngIf="item.type !== 'building'">
   <ion-card *ngIf="item.inPlace">
-  <ion-card-header>
+    <ion-card-header>
-    Building:
+      Building:
-  </ion-card-header>
+    </ion-card-header>
-  <ion-card-content>
+    <ion-card-content>
-    <ion-icon name="pin"></ion-icon> <a [routerLink]="['/data-detail', item.inPlace.uid]">{{item.inPlace.name}}</a>
+      <ion-icon name="pin"></ion-icon> <a [routerLink]="['/data-detail', item.inPlace.uid]">{{item.inPlace.name}}</a>
-    <stapps-address-detail *ngIf="item.inPlace.address" [address]="item.inPlace.address"></stapps-address-detail>
+      <stapps-address-detail *ngIf="item.inPlace.address" [address]="item.inPlace.address"></stapps-address-detail>
-  </ion-card-content>
+    </ion-card-content>
   </ion-card>
 </ng-container>

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

@@ -2,7 +2,7 @@
   <ion-row>
     <ion-col>
       <h2 class="name">{{item.name}}</h2>
-      <p *ngIf="item.description"><stapps-long-inline-text [text]="item.description" [size]="30"></stapps-long-inline-text></p>
+      <p *ngIf="item.description"><stapps-long-inline-text [text]="item.description" [size]="80"></stapps-long-inline-text></p>
       <p *ngIf="item.duration">Duration: {{item.duration | amDuration:'seconds'}}</p>
       <ion-note>{{item.type}}</ion-note>
     </ion-col>