fix: disabled paginator and implemented own logic

dasch-swiss · Nov 13, 2023 · a20a9f8 · a20a9f8
1 parent 3f59922
commit a20a9f8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/apps/dsp-app/src/app/workspace/resource/properties/properties.component.html b/apps/dsp-app/src/app/workspace/resource/properties/properties.component.html
@@ -165,10 +165,15 @@ <h3 class="label mat-headline-6">
                             <!-- the value(s) of the incoming links -->
                             <a class="link link-value" *ngFor="let inRes of displayedIncomingLinkResources"
                                 (click)="openResource(inRes.id)">{{inRes.resourceClassLabel}}: <strong>{{inRes.label}}</strong></a>
-                            <mat-paginator *ngIf="numberOffAllIncomingLinkRes > amount_resources" [length]=numberOffAllIncomingLinkRes
+                            <!-- <mat-paginator *ngIf="numberOffAllIncomingLinkRes > amount_resources" [length]=numberOffAllIncomingLinkRes
                                            [pageSize]="amount_resources" [hidePageSize]="true" [pageIndex]="pageEvent.pageIndex"
                                            (page)="goToPage($event)">
-                            </mat-paginator>
+                            </mat-paginator> -->
+                            <div class="pagination" *ngIf="numberOffAllIncomingLinkRes > amount_resources">
+                                <p>Show more</p>
+                                <button [disabled]="pageEvent.pageIndex < 1" (click)="handleIncomingLinkBackward()"><mat-icon>chevron_left</mat-icon></button>
+                                <button [disabled]="numberOffAllIncomingLinkRes / amount_resources <= pageEvent.pageIndex + 1" (click)="handleIncomingLinkForward()"><mat-icon>chevron_right</mat-icon></button>
+                            </div>
                         </div>
                     </div>
                 </div>

diff --git a/apps/dsp-app/src/app/workspace/resource/properties/properties.component.scss b/apps/dsp-app/src/app/workspace/resource/properties/properties.component.scss
@@ -169,6 +169,41 @@
   margin: 0;
 }
 
+.pagination {
+  display: flex;
+  align-items: center;
+  button {
+    margin: 0 15px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    border-radius: 100%;
+    height: fit-content;
+    padding: 10px;
+    display: flex; //centers the icon
+
+    mat-icon {
+      color: $primary;
+    }
+
+  }
+
+  button:hover {
+    background-color: $cool_gray_300;
+  }
+
+  button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  button:disabled:hover {
+    background-color: transparent;
+  }
+
+}
+
 @media screen and (max-width: 768px) {
   .properties,
   .incoming {

diff --git a/apps/dsp-app/src/app/workspace/resource/properties/properties.component.ts b/apps/dsp-app/src/app/workspace/resource/properties/properties.component.ts
@@ -325,6 +325,23 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
         this._getDisplayedIncomingLinkRes();
     }
 
+    handleIncomingLinkForward(){
+        if(this.numberOffAllIncomingLinkRes / this.amount_resources > this.pageEvent.pageIndex + 1){
+            const newPage = new PageEvent();
+            newPage.pageIndex = this.pageEvent.pageIndex + 1;
+            this.goToPage(newPage);
+        }
+    }
+
+    handleIncomingLinkBackward(){
+        if (this.pageEvent.pageIndex > 0){
+            const newPage = new PageEvent();
+            newPage.pageIndex = this.pageEvent.pageIndex - 1;
+            this.goToPage(newPage);
+        }
+
+    }
+
     /**
      * opens resource
      * @param linkValue