Merge pull request #793 from HiP-App/iss-hipcms-997-update-change-his…

…tory-overflowing-text-issue

fixed issue with overflowing text on history change

app/mobile-content/mobile-content.module.ts

@@ -57,6 +57,9 @@ import { EditAchievementsComponent } from './achievements/edit-achievements/edit
 import { ViewRouteComponent } from './routes/view-route/view-route.component';
 import { MyExhibitsComponent } from './exhibits/my-exhibits/my-exhibits.component';
 import { MyRoutesComponent } from './routes/my-routes/my-routes.component';
+import { SelectExhibitDialogComponent } from './routes/select-exhibit-dialog/select-exhibit-dialog.component';
+import { ReadMoreComponent } from './readmore/readmore.component';
+import { ChangeHistoryDetailedComponent } from './shared/change-history/change-history-detailed/change-history-detailed.component';
 
 @NgModule({
   imports: [
@@ -113,6 +116,7 @@ import { MyRoutesComponent } from './routes/my-routes/my-routes.component';
     RatingComponent,
     RatingTableComponent,
     RoutesComponent,
+    SelectExhibitDialogComponent,
     SelectMediumDialogComponent,
     SelectPageDialogComponent,
     TagsComponent,
@@ -123,6 +127,8 @@ import { MyRoutesComponent } from './routes/my-routes/my-routes.component';
     EditAchievementsComponent,
     UploadMediumDialogComponent,
     ViewRouteComponent,
+    ReadMoreComponent,
+    ChangeHistoryDetailedComponent
   ],
   entryComponents: [
     ConfirmDeleteDialogComponent,
@@ -133,11 +139,13 @@ import { MyRoutesComponent } from './routes/my-routes/my-routes.component';
     CreateTagDialogComponent,
     EditMediumDialogComponent,
     QuestionDialogComponent,
+    SelectExhibitDialogComponent,
     SelectMediumDialogComponent,
     SelectPageDialogComponent,
     UploadMediumDialogComponent,
     CreateAchievementsDialogComponent,
-    UploadMediumDialogComponent
+    UploadMediumDialogComponent,
+    ChangeHistoryDetailedComponent
   ],
   providers: [
     AchievementApiService,

app/mobile-content/readmore/readmore.component.css

@@ -0,0 +1,6 @@
+a {
+  font-weight: bold;
+  font-style: italic;
+  font-size: 15px;
+  text-decoration: underline;
+}

app/mobile-content/readmore/readmore.component.html

@@ -0,0 +1,5 @@
+<span class='' style='white-space: pre-wrap;' [hidden]='fullText' [innerHTML]='rmTextShort'></span>
+<span class='' style='white-space: pre-wrap' [hidden]='!fullText' [innerHTML]='rmTextFull'></span>
+
+<a href='javascript:;' class='text-primary' (click)='readMore(true)' [hidden]='!showMore'>{{'more'}}</a>
+<a href='javascript:;' (click)='readMore(false)' class='text-primary' [hidden]='!showLess'>{{'less'}}</a>

app/mobile-content/readmore/readmore.component.ts

@@ -0,0 +1,86 @@
+import { Component, Input, OnChanges, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA, MdDialog  } from '@angular/material';
+import { ChangeHistoryDetailedComponent } from '../shared/change-history/change-history-detailed/change-history-detailed.component';
+
+@Component({
+    selector: 'readmore',
+    templateUrl: 'readmore.component.html',
+    styleUrls: ['readmore.component.css']
+})
+export class ReadMoreComponent implements OnChanges {
+    @Input() change: any;
+    text: string;
+    fullText = true;
+    showMore = false;
+    showLess = false;
+    rmTextShort = '';
+    rmTextFull = '';
+    popup = false;
+    minLength = 30;
+    lengthExtraLong = 60;
+
+    private changeHistoryDetailedDialogRef: MdDialogRef<ChangeHistoryDetailedComponent>;
+
+    constructor(@Inject(MD_DIALOG_DATA) public data, private dialog: MdDialog) {
+
+    }
+
+    readMore(flag) {
+      if (flag) {
+        if (this.popup) {
+          this.openHistory();
+        } else {
+          this.showMore = false;
+          this.fullText = true;
+          this.rmTextFull = this.text;
+          this.showLess = true;
+        }
+      } else {
+          this.showLess = false;
+          this.showMore = true;
+          this.fullText = false;
+      }
+    }
+
+    ngOnChanges () {
+
+      if (typeof this.change.value !== 'undefined') {
+        this.text = this.castToString(this.change.value);
+      } else {
+        this.text = '';
+      }
+
+      this.rmTextShort = this.text;
+      this.rmTextFull = this.text;
+
+      if (this.rmTextShort.length > this.minLength) {
+        if (this.rmTextShort.length > this.lengthExtraLong) {
+          this.popup = true;
+        }
+
+        this.fullText = false;
+        this.showMore = true;
+        this.rmTextShort = this.rmTextShort.substr(0, this.minLength) + '...';
+      }
+    }
+
+    private openHistory() {
+      this.changeHistoryDetailedDialogRef = this.dialog.open(ChangeHistoryDetailedComponent, {
+          width: '40%',
+          data: {
+            change: this.change,
+          }
+      });
+    }
+
+    // cast something to string to be displayed. E.g. empty array [] must be displayed as the string "[]"
+    castToString(something: any) {
+      if (something === undefined) {
+        return '//';
+      }
+      if (typeof something === 'object') {
+        return JSON.stringify(something);
+      }
+      return String(something);
+    }
+}

app/mobile-content/shared/change-history/change-history-detailed/change-history-detailed.component.css

@@ -0,0 +1,33 @@
+.title {
+    color: #00205c;
+    font-weight: bold;
+    display: inline;
+}
+.text {
+    display: inline;
+    margin-left: 20px;
+}
+.tableColumn{
+    /* width: 27%; */
+    text-align: left;
+    ord-wrap: break-word;
+    float: left;
+    height: 100%;
+}
+md-list{
+    margin-top: 20px;
+    background-color: rgba(162, 169, 183, 0.3);
+}
+
+.mat-list {
+  display: block;
+  overflow: auto;
+}
+
+.label {
+  width: 25%;
+}
+
+.content {
+  width: 70%
+}

app/mobile-content/shared/change-history/change-history-detailed/change-history-detailed.component.html

@@ -0,0 +1,55 @@
+<h1 md-dialog-title>{{ (data.title ? data.title : ('' | translate) ) + " " +(' Detailed change history' | translate)  }}</h1>
+
+<md-dialog-content>
+  <md-list>
+    <md-list-item>
+      <div class = "tableColumn label">
+        <span class = "title">Description:</span>
+      </div>
+      <div class = "tableColumn content">
+        <span class = "">{{ data.change.description }}</span>
+      </div>
+    </md-list-item>
+    <md-list-item>
+      <div class = "tableColumn label">
+        <span class = "title" >Time Stamp:</span>
+      </div>
+      <div class = "tableColumn content">
+        <span class = "" >{{ data.change.timestamp | date: "dd.MM.yyyy" }}</span>
+      </div>
+    </md-list-item>
+    <md-list-item>
+      <div class = "tableColumn label">
+        <span class = "title">User:</span>
+      </div>
+      <div class = "tableColumn content">
+        <span class = "">{{ data.change.userId }}</span>
+      </div>
+    </md-list-item>
+    <md-list-item>
+      <div class = "tableColumn label">
+        <span class = "title">Property:</span>
+      </div>
+      <div class = "tableColumn content">
+        <span class = "">{{ data.change.property }}</span>
+      </div>
+    </md-list-item>
+
+    <md-list-item>
+      <div class = "tableColumn label">
+        <span class = "title">Value:</span>
+      </div>
+      <div class = "tableColumn content">
+        <span class = "">{{ data.change.value }}</span>
+      </div>
+    </md-list-item>
+
+  </md-list>
+</md-dialog-content>
+
+<md-dialog-actions align="end">
+  <button md-dialog-close md-raised-button>
+    {{ 'close' | translate }}
+    <md-icon>cancel</md-icon>
+  </button>
+</md-dialog-actions>

app/mobile-content/shared/change-history/change-history-detailed/change-history-detailed.component.ts

@@ -0,0 +1,13 @@
+import { Component, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA  } from '@angular/material';
+
+@Component({
+  moduleId: module.id,
+  selector: 'hip-history-changes-detailed-dialog',
+  templateUrl: 'change-history-detailed.component.html',
+  styleUrls: ['change-history-detailed.component.css']
+})
+export class ChangeHistoryDetailedComponent {
+  constructor(@Inject(MD_DIALOG_DATA) public data) {
+  }
+}

app/mobile-content/shared/change-history/change-history.component.html

@@ -41,10 +41,10 @@ <h1 md-dialog-title>{{ (data.title ? data.title : ('no title' | translate) ) + "
         <p class = "text">{{ change.userId }}</p>
       </div>
       <div class = "tableColumn">
-        <p class = "text">{{ castToString(change.property) }}</p>
+        <p class = "text">{{ change.property }}</p>
       </div>
       <div class = "tableColumn">
-        <p class = "text">{{ castToString(change.value) }}</p>
+        <readmore [change]="change"></readmore>
       </div>
     </md-list-item>
   </md-list>

app/mobile-content/shared/change-history/change-history.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { MdDialogRef, MD_DIALOG_DATA  } from '@angular/material';
+import { ReadMoreComponent } from '../../readmore/readmore.component';
 
 @Component({
   moduleId: module.id,
@@ -10,15 +11,4 @@ import { MdDialogRef, MD_DIALOG_DATA  } from '@angular/material';
 export class ChangeHistoryComponent {
   constructor(@Inject(MD_DIALOG_DATA) public data, public dialogRef: MdDialogRef<ChangeHistoryComponent>) {
   }
-
-  // cast something to string to be displayed. E.g. empty array [] must be displayed as the string "[]"
-  castToString(something: any) {
-    if (something === undefined) {
-      return '//';
-    }
-    if (typeof something === 'object') {
-      return JSON.stringify(something);
-    }
-    return String(something);
-  }
 }