cleanup and longtext

matsen-tool/src/app/_helpers/api.converter.ts

@@ -1,5 +1,11 @@
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
+import {Injectable} from "@angular/core";
+
+@Injectable({ providedIn: 'root' })
 export class ApiConverter {
 
+    constructor(private sanitizer: DomSanitizer) {}
+
     public static extractId(iri: string | undefined): string {
         if (iri !== undefined) {
             const iriRegex = /\/(\d+)$/;
@@ -20,4 +26,11 @@ export class ApiConverter {
         }
         return "";
     }
+
+    public getSafeLongtext(longtext: any): SafeHtml {
+        if (longtext) {
+            return this.sanitizer.bypassSecurityTrustHtml(longtext.replace(/\n/g, '<br>'));
+        }
+        return false;
+    }
 }

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.html

@@ -1,5 +1,5 @@
 <div class="spt-container">
-    <div class="card">
+    <div class="card contacts-detail">
         <div class="card-body row pb-5">
             <div class="col-8">
                 <h1>{{ contact.firstName }} {{ contact.lastName }}</h1>

matsen-tool/src/app/contacts/contacts-detail/contacts-detail.component.ts

@@ -12,6 +12,7 @@ import {User} from "@app/_models";
 import {AccountService} from "@app/_services";
 import {NewCommentComponent} from "@app/postings/new-comment/new-comment.component";
 import {ApiConverter} from "@app/_helpers/api.converter";
+import {constructorParametersDownlevelTransform} from "@angular/compiler-cli";
 
 @Component({
     selector: 'app-contacts-detail',

matsen-tool/src/app/partners/new-partner/new-partner.component.html

@@ -40,6 +40,11 @@
             <input type="text" class="form-control" id="website" formControlName="website"/>
         </div>
 
+        <div class="mb-3">
+            <label for="description" class="form-label">{{ 'form.description' | translate }}:</label>
+            <textarea class="form-control" id="description" formControlName="description" cols="50" rows="5"></textarea>
+        </div>
+
         <div class="mb-3" *ngIf="partnerForm.get('logoUrl')?.value === null">
             <label for="logo" class="form-label">{{ 'form.upload-image' | translate }}:</label>
             <input type="file" class="form-control" id="logo" (change)="onFileSelected($event)" accept="image/*"/>

matsen-tool/src/app/partners/partners-detail/partners-detail.component.html

@@ -39,6 +39,11 @@
             <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                   (click)="openModalEditPartner()"></span>
         </div>
+        <div class="card-body row" *ngIf="partner.description">
+            <div class="col-12">
+                <p [innerHTML]="apiConverter.getSafeLongtext(partner.description)"></p>
+            </div>
+        </div>
     </div>
 </div>
 <div class="spt-container">
@@ -82,31 +87,6 @@
         </mat-paginator>
     </div>
 </div>
-<div class="spt-container">
-    <div class="posts">
-        <div class="d-flex justify-content-between align-items-start">
-            <h2>Kunden Details</h2>
-        </div>
-        <div class="card mb-3">
-            <div class="card-body">
-                <div>
-                    <h3>Viel Platz für Freitext</h3>
-                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                        ut
-                        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-                        dolores
-                        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                        ut
-                        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-                        dolores
-                        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-                        amet.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 <div class="spt-container">
     <div class="spt-accordion">
         <div class="d-flex justify-content-between align-items-start">
@@ -154,8 +134,10 @@
             <div class="d-flex justify-content-end mt-1">
                 <span *ngIf="task.taskNotes?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
                       (click)="showTaskNotes(task)">
-                    <ng-container *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                    <ng-container *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                    <ng-container
+                            *ngIf="task.id && taskNotesVisibility.get(task.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                    <ng-container
+                            *ngIf="task.id && !taskNotesVisibility.get(task.id)">{{ 'basic.show-comments' | translate }}</ng-container>
                 </span>
                 <span role="button" class="badge bg-secondary p-2"
                       (click)="openModalNewTaskNote(task)">{{ 'basic.comment-it' | translate }}</span>
@@ -212,8 +194,10 @@
             <div class="d-flex justify-content-end mt-1">
                 <span *ngIf="post.comments?.length !== 0" role="button" class="badge bg-secondary p-2 me-2"
                       (click)="showComments(post)">
-                    <ng-container *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
-                    <ng-container *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
+                    <ng-container
+                            *ngIf="post.id && commentsVisibility.get(post.id)">{{ 'basic.hide-comments' | translate }}</ng-container>
+                    <ng-container
+                            *ngIf="post.id && !commentsVisibility.get(post.id)">{{ 'basic.show-comments' | translate }}</ng-container>
                 </span>
                 <span role="button" class="badge bg-secondary p-2"
                       (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>

matsen-tool/src/app/partners/partners-detail/partners-detail.component.ts

@@ -87,7 +87,8 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         private partnerFollowService: PartnerFollowService,
         private contactService: ContactService,
         private postService: PostService,
-        private taskService: TaskService
+        private taskService: TaskService,
+        protected apiConverter: ApiConverter
     ) {
         this.id = "";
         this.partnerDetailSub = new Subscription();
@@ -151,6 +152,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         ).subscribe(
             data => {
                 this.partner = data;
+                console.log(this.partner);
             }
         );
     }

matsen-tool/src/assets/scss/_basics.scss

@@ -34,6 +34,7 @@ img {
 .importance {
   display: block;
   width: 50vw;
+  max-width: 800px;
   height: 5px;
   position: absolute;
   right: 0;
@@ -47,4 +48,12 @@ img {
   &[data-importance="high"] {
     background: #bb1414;
   }
+}
+
+.contacts {
+  img {
+    object-fit: cover;
+    height: 120px;
+    width: 100%;
+  }
 }