partner follow WIP

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

@@ -30,6 +30,12 @@
                      width="247"
                      height="94" alt="{{partner.name}}" title="{{partner.name}}"/>
             </div>
+            <span class="position-absolute bi p-2"
+                  [class.bi-heart]="!userFollows"
+                  [class.bi-heart-fill]="userFollows"
+                  [class.user-follows]="userFollows"
+                  data-type="user-tool" data-action="follow"
+                  (click)="followPartner($event)"></span>
             <span class="position-absolute bi bi-pencil p-2" data-type="user-tool" data-action="edit"
                   (click)="openModalEditPartner()"></span>
         </div>

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

@@ -1,12 +1,11 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-import {ModalComponent} from "@app/_components/modal/modal.component";
 import {NewContactComponent} from "@app/contacts/new-contact/new-contact.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {
     CommentJsonld,
     ContactJsonld,
-    ContactService,
+    ContactService, PartnerFollowJsonld, PartnerFollowService,
     PartnerJsonld,
     PartnerService,
     PostJsonld,
@@ -37,6 +36,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     @ViewChild(MatPaginator) postsPaginator: MatPaginator;
 
     protected user: User | null;
+    protected userFollows: boolean;
     protected readonly ApiConverter = ApiConverter;
 
     protected readonly environment = environment;
@@ -45,6 +45,9 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     protected partnerDetailSub: Subscription;
     protected partner: PartnerJsonld;
 
+    protected partnerFollowSub: Subscription;
+    protected partnerFollow: PartnerFollowJsonld
+
     protected contactsSub: Subscription;
     protected contacts: Array<ContactJsonld>;
     protected contactsDataSource;
@@ -71,8 +74,6 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
     protected postsPageSize: number;
     protected postsPageIndex: number;
 
-    protected readonly ModalComponent = ModalComponent;
-
     protected modalOptions: NgbModalOptions = {
         centered: true
     };
@@ -83,14 +84,19 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         private modalService: NgbModal,
         private route: ActivatedRoute,
         private partnerService: PartnerService,
+        private partnerFollowService: PartnerFollowService,
         private contactService: ContactService,
         private postService: PostService,
         private taskService: TaskService
     ) {
         this.id = "";
+        this.userFollows = false;
         this.partnerDetailSub = new Subscription();
         this.partner = {} as PartnerJsonld;
 
+        this.partnerFollowSub = new Subscription();
+        this.partnerFollow = {} as PartnerFollowJsonld;
+
         this.user = this.accountService.userValue;
 
         this.contactsSub = new Subscription();
@@ -130,6 +136,7 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
         this.getContactsData();
         this.getPostsData();
         this.getTasksData();
+        this.getPartnerFollowedStatus();
     }
 
     ngAfterViewInit() {
@@ -354,4 +361,50 @@ export class PartnersDetailComponent implements OnInit, AfterViewInit {
             this.taskNotesVisibility.set(task.id, !currentVisibility);
         }
     }
+
+    getPartnerFollowedStatus() {
+        this.partnerFollowSub = this.partnerFollowService.partnerFollowsGetCollection(
+            1,
+            50,
+            this.id
+            // TODO: Follow für Partner auf User holen
+        ).subscribe(
+            data => {
+                // this.partnerFollow = data;
+                // TODO: Einblenden!
+                if (this.partnerFollow === null) {
+                    this.userFollows == false;
+                } else {
+                    this.userFollows == true;
+                }
+            }
+        );
+    }
+
+    followPartner(event: any) {
+        if (!this.userFollows) {
+            this.partnerFollowSub = this.partnerFollowService.partnerFollowsPost(
+                {
+                    partner: this.partner.id
+                } as PartnerFollowJsonld
+            ).subscribe(
+                data => {
+                    console.log(data);
+                    this.userFollows = !this.userFollows;
+                }
+            );
+        } else {
+            if (this.partnerFollow.id !== null && this.partnerFollow.id !== undefined) {
+                this.partnerFollowSub = this.partnerFollowService.partnerFollowsIdDelete(
+                    ApiConverter.extractId(this.partnerFollow.id)
+                ).subscribe(
+                    data => {
+                        console.log(data);
+                        this.userFollows = !this.userFollows;
+                    }
+                );
+            }
+        }
+        console.log(this.userFollows);
+    }
 }

matsen-tool/src/app/tasks/tasks.component.ts

@@ -1,7 +1,6 @@
 import {AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
 import {NewTaskComponent} from "@app/tasks/new-task/new-task.component";
 import {NgbModal, NgbModalOptions} from "@ng-bootstrap/ng-bootstrap";
-import {ModalComponent} from "@app/_components/modal/modal.component";
 import {ApiConverter} from "@app/_helpers/api.converter";
 import {Subscription} from "rxjs";
 import {TaskJsonld, TaskNoteJsonld, TaskService} from "@app/core/api/v1";

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

@@ -10,7 +10,7 @@
   @include transition();
 
   &:hover {
-    color: green;
+    color: $color-matsen;
   }
 }
 
@@ -19,3 +19,19 @@
   bottom: 0;
   width: auto;
 }
+
+[data-action="follow"] {
+  right: 0;
+  top: 0;
+  width: auto;
+
+  &:hover:before {
+    content: "\f415";
+  }
+
+  &.user-follows {
+    &:hover:before {
+      content: "\f417";
+    }
+  }
+}