comments show visibility

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

@@ -45,21 +45,28 @@
                           data-action="edit" (click)="openModalEditPosting(post)"></span>
                 </div>
             </div>
-            <div class="card ms-5" *ngFor="let comment of post.comments">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
-                        <p>{{ comment.ownerName }}</p>
-                    </div>
-                    <div>
-                        <p>{{ comment.message }}</p>
+            <div *ngIf="post.id && commentsVisibility.get(post.id)">
+                <div class="card ms-5" *ngFor="let comment of post.comments">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
+                            <p>{{ comment.ownerName }}</p>
+                        </div>
+                        <div>
+                            <p>{{ comment.message }}</p>
+                        </div>
+                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
+                              data-action="edit" (click)="openModalEditComment(comment)"></span>
                     </div>
-                    <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2" data-type="user-tool"
-                          data-action="edit" (click)="openModalEditComment(comment)"></span>
                 </div>
             </div>
 
             <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>
+                </span>
                 <span role="button" class="badge bg-secondary p-2" (click)="openModalNewComment(post)">{{'basic.comment-it' | translate}}</span>
             </div>
         </div>

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

@@ -35,6 +35,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
     protected postsPageEvent: PageEvent;
     protected postsPageSize: number;
     protected postsPageIndex: number;
+    protected commentsVisibility: Map<string, boolean>;
 
     protected modalOptions: NgbModalOptions = {
         centered: true
@@ -62,6 +63,7 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
         this.postsPageEvent = new PageEvent();
         this.postsPageSize = 10;
         this.postsPageIndex = 0;
+        this.commentsVisibility = new Map<string, boolean>();
     }
 
     ngOnInit() {
@@ -98,6 +100,11 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
             data => {
                 this.posts = data["hydra:member"];
                 this.postsLength = Number(data["hydra:totalItems"]);
+                this.posts.forEach(posts => {
+                    if (posts.id) {
+                        this.commentsVisibility.set(posts.id, false);
+                    }
+                });
             }
         );
     }
@@ -169,4 +176,11 @@ export class ContactsDetailComponent implements OnInit, AfterViewInit {
             }
         });
     }
+
+    showComments(post: PostJsonld) {
+        if (post.id) {
+            const currentVisibility = this.commentsVisibility.get(post.id);
+            this.commentsVisibility.set(post.id, !currentVisibility);
+        }
+    }
 }

matsen-tool/src/app/home/home.component.html

@@ -104,11 +104,11 @@
                 </ng-container>
 
                 <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>
-                </span>
+                    <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>
+                    </span>
                     <span role="button" class="badge bg-secondary p-2" (click)="openModalNewTaskNote(task)">{{'basic.comment-it' | translate}}</span>
                 </div>
             </div>

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

@@ -193,21 +193,28 @@
                           data-action="edit" (click)="openModalEditPosting(post)"></span>
                 </div>
             </div>
-            <div class="card ms-5" *ngFor="let comment of post.comments">
-                <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center">
-                        <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
-                        <p>{{ comment.ownerName }}</p>
-                    </div>
-                    <div>
-                        <p>{{ comment.message }}</p>
+            <div *ngIf="post.id && commentsVisibility.get(post.id)">
+                <div class="card ms-5" *ngFor="let comment of post.comments">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <p>{{ comment.createdAt | date:'dd.MM.YYYY HH:mm' }}</p>
+                            <p>{{ comment.ownerName }}</p>
+                        </div>
+                        <div>
+                            <p>{{ comment.message }}</p>
+                        </div>
+                        <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
+                              data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                     </div>
-                    <span *ngIf="comment.owner === user?.id" class="position-absolute bi bi-pencil p-2"
-                          data-type="user-tool" data-action="edit" (click)="openModalEditComment(comment)"></span>
                 </div>
             </div>
 
             <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>
+                </span>
                 <span role="button" class="badge bg-secondary p-2"
                       (click)="openModalNewComment(post)">{{ 'basic.comment-it' | translate }}</span>
             </div>

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

@@ -64,6 +64,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     protected tasksPageIndex: number;
 
     protected taskNotesVisibility: Map<string, boolean>;
+    protected commentsVisibility: Map<string, boolean>;
 
     protected postsSub: Subscription;
     protected posts: Array<PostJsonld>;
@@ -124,6 +125,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         this.postsPageEvent = new PageEvent();
         this.postsPageSize = 10;
         this.postsPageIndex = 0;
+        this.commentsVisibility = new Map<string, boolean>();
     }
 
     ngOnInit() {
@@ -178,6 +180,11 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
             data => {
                 this.posts = data["hydra:member"];
                 this.postsLength = Number(data["hydra:totalItems"]);
+                this.posts.forEach(posts => {
+                    if (posts.id) {
+                        this.commentsVisibility.set(posts.id, false);
+                    }
+                });
             }
         );
     }
@@ -360,6 +367,13 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         }
     }
 
+    showComments(post: PostJsonld) {
+        if (post.id) {
+            const currentVisibility = this.commentsVisibility.get(post.id);
+            this.commentsVisibility.set(post.id, !currentVisibility);
+        }
+    }
+
     getPartnerFollowedStatus() {
         this.partnerFollowSub = this.partnerFollowService.partnerFollowsGetCollection(
             1,

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

@@ -16,13 +16,13 @@
     }
   }
   .sales-summary-turnover {
-    background: rgb(179,208,47);
-    background: linear-gradient(109deg, rgba(179,208,47,1) 0%, rgba(64,208,70,1) 36%, rgba(44,181,91,1) 100%);
-  }
-  .sales-summary-profit {
     background: rgb(45,209,159);
     background: linear-gradient(109deg, rgba(45,209,159,1) 0%, rgba(64,208,203,1) 36%, rgba(44,138,181,1) 100%);
   }
+  .sales-summary-profit {
+    background: rgb(179,208,47);
+    background: linear-gradient(109deg, rgba(179,208,47,1) 0%, rgba(64,208,70,1) 36%, rgba(44,181,91,1) 100%);
+  }
 }
 
 @keyframes expand {