feat: move buttons to add a swimlane between the swimlanes in order t…

…o determine the position more easy
openeduhub · Nov 6, 2024 · 812f4e0 · 812f4e0
1 parent 4e4b025
commit 812f4e0
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 33 deletions.
diff --git a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.html b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.html
@@ -0,0 +1,17 @@
+<div class="add-swimlane-container" [class.position-bottom]="position === 'bottom'">
+  <div class="container-border"></div>
+  <button class="add-swimlane-btn" [matMenuTriggerFor]="addComponentMenu">
+    <i esIcon="add"></i>
+  </button>
+  <div class="container-border"></div>
+  <mat-menu #addComponentMenu="matMenu">
+    <button
+      mat-menu-item
+      *ngFor="let option of swimlaneTypeOptions"
+      [disabled]="requestInProgress"
+      (click)="addSwimlane(option.value)"
+    >
+      {{ option.viewValue }}
+    </button>
+  </mat-menu>
+</div>
diff --git a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.scss b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.scss
@@ -0,0 +1,45 @@
+:host {
+    --position-left: 24px;
+}
+
+.add-swimlane-container {
+    position: absolute;
+    top: calc(-30px / 2);
+    left: var(--position-left);
+    width: calc(100% - 2 * var(--position-left));
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+
+    &.position-bottom {
+        top: unset;
+        bottom: calc(-30px / 2);
+    }
+
+    .container-border {
+        border-bottom: 2px solid rgba(0, 0, 0, 0.7);
+        border-radius: 1px;
+        width: calc(50% - var(--position-left));
+    }
+
+    .add-swimlane-btn {
+        margin-left: 8px;
+        margin-right: 8px;
+        padding: 0;
+        width: 30px;
+        height: 30px;
+        border: 2px solid rgba(0, 0, 0, 0.7);
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: rgba(0, 0, 0, 0.7);
+
+        i.mat-icon,
+        i.mat-mdc-icon {
+            font-size: 22px;
+            width: 22px;
+            height: 22px;
+        }
+    }
+}
diff --git a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.ts b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.ts
@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { EduSharingUiCommonModule } from 'ngx-edu-sharing-ui';
+import { SharedModule } from '../../shared/shared.module';
+import { swimlaneTypeOptions } from '../custom-definitions';
+import { SelectOption } from '../swimlane/swimlane-settings-dialog/select-option';
+
+@Component({
+    selector: 'app-add-swimlane-border-button',
+    standalone: true,
+    imports: [EduSharingUiCommonModule, SharedModule],
+    templateUrl: './add-swimlane-border-button.component.html',
+    styleUrl: './add-swimlane-border-button.component.scss',
+})
+export class AddSwimlaneBorderButtonComponent {
+    @Input() position: string = 'top';
+    @Input() requestInProgress: boolean = false;
+    @Output() addSwimlaneTriggered: EventEmitter<string> = new EventEmitter<string>();
+
+    protected readonly swimlaneTypeOptions: SelectOption[] = swimlaneTypeOptions.concat([
+        { value: 'spacer', viewValue: 'Trennlinie' },
+    ]);
+
+    addSwimlane(type: string): void {
+        this.addSwimlaneTriggered.emit(type);
+    }
+}
diff --git a/src/app/wlo-search/template/template.component.html b/src/app/wlo-search/template/template.component.html
@@ -41,27 +41,6 @@
           >
             <mat-icon>edit</mat-icon>
           </button>
-          <button
-            *ngIf="editMode"
-            mat-stroked-button
-            class="add-button"
-            color="primary"
-            [matMenuTriggerFor]="addComponentMenu"
-            [disabled]="requestInProgress"
-            aria-label="Add a new swimlane"
-          >
-            <mat-icon>add</mat-icon>
-          </button>
-          <mat-menu #addComponentMenu="matMenu">
-            <button
-              mat-menu-item
-              *ngFor="let option of swimlaneTypeOptions"
-              [disabled]="requestInProgress"
-              (click)="addSwimlane(option.value)"
-            >
-              {{ option.viewValue }}
-            </button>
-          </mat-menu>
         </ng-container>
       </div>
     </div>
@@ -156,7 +135,22 @@ <h2 class="side-menu-header">Inhalte von {{ topic() }}</h2>
                 swimlane.backgroundColor ? swimlane.backgroundColor : '#f4f4f4'
               "
             >
+              <!-- edit privileges -->
               <ng-container *ngIf="userHasEditRights()">
+                <!-- border with button to add a swimlane -->
+                <app-add-swimlane-border-button
+                  [requestInProgress]="requestInProgress"
+                  (addSwimlaneTriggered)="addSwimlane($event, i)"
+                  *ngIf="editMode"
+                ></app-add-swimlane-border-button>
+                <!-- special case for last element -->
+                <app-add-swimlane-border-button
+                  position="bottom"
+                  [requestInProgress]="requestInProgress"
+                  (addSwimlaneTriggered)="addSwimlane($event, i + 1)"
+                  *ngIf="editMode && i === swimlanes.length - 1"
+                ></app-add-swimlane-border-button>
+
                 <!-- action buttons for moving -->
                 <div class="wlo-move-buttons" *ngIf="editMode">
                   <button

diff --git a/src/app/wlo-search/template/template.component.scss b/src/app/wlo-search/template/template.component.scss
@@ -127,7 +127,7 @@
 .portal-outer-wrapper {
     display: block;
     margin-top: -20px;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
     z-index: 10;
     border-radius: var(--border-radius);
 
@@ -157,8 +157,9 @@
                     border-bottom-right-radius: var(--border-radius);
                 }
 
+                padding-top: 8px;
                 /* Simple hack for overflowing containers as it was done in Wordpress */
-                padding-bottom: 30px;
+                padding-bottom: 38px;
 
                 &:not(:first-child) {
                     margin-top: -25px;
@@ -299,7 +300,7 @@
                 /* overwrites for edit mode */
                 &.swimlane-edit-mode {
                     h2 {
-                        margin: 0 7.5% 0 7.5%;
+                        margin: 0 7.5% 16px 7.5%;
                     }
 
                     .wlo-accordion-item-description {

diff --git a/src/app/wlo-search/template/template.component.ts b/src/app/wlo-search/template/template.component.ts
@@ -21,7 +21,7 @@ import { Facet } from 'ngx-edu-sharing-api/lib/api/models/facet';
 import { ParentEntries } from 'ngx-edu-sharing-api/lib/api/models/parent-entries';
 import { SearchResultNode } from 'ngx-edu-sharing-api/lib/api/models/search-result-node';
 import { Value } from 'ngx-edu-sharing-api/lib/api/models/value';
-import { SpinnerComponent } from 'ngx-edu-sharing-ui';
+import { EduSharingUiCommonModule, SpinnerComponent } from 'ngx-edu-sharing-ui';
 import {
     CollapsibleMenuItemComponent,
     FilterBarComponent,
@@ -38,6 +38,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { ViewService } from '../core/view.service';
 import { SearchModule } from '../search/search.module';
 import { SharedModule } from '../shared/shared.module';
+import { AddSwimlaneBorderButtonComponent } from './add-swimlane-button/add-swimlane-border-button.component';
 import {
     defaultLrt,
     defaultMds,
@@ -59,7 +60,6 @@ import {
     pageConfigType,
     providedSelectDimensionKeys,
     retrieveCustomUrl,
-    swimlaneTypeOptions,
     pageVariantConfigType,
     parentPageConfigNodeId,
     pageConfigPrefix,
@@ -80,8 +80,10 @@ import { Swimlane } from './swimlane/swimlane';
 @Component({
     standalone: true,
     imports: [
+        AddSwimlaneBorderButtonComponent,
         CdkDragHandle,
         CollapsibleMenuItemComponent,
+        EduSharingUiCommonModule,
         FilterBarComponent,
         SearchModule,
         SharedModule,
@@ -143,10 +145,6 @@ export class TemplateComponent implements OnInit {
     selectedDimensionValues: MdsValue[] = [];
     selectDimensionsLoaded: boolean = false;
 
-    swimlaneTypeOptions = swimlaneTypeOptions.concat([
-        { value: 'spacer', viewValue: 'Trennlinie' },
-    ]);
-
     selectedMenuItem: string = '';
     menuItems = {
         feedback: 'Feedback',
@@ -854,7 +852,7 @@ export class TemplateComponent implements OnInit {
     /**
      * Add a new swimlane to the page and persist it in the config.
      */
-    async addSwimlane(type: string): Promise<void> {
+    async addSwimlane(type: string, positionToAdd: number): Promise<void> {
         this.requestInProgress = true;
         await this.checkForCustomPageNodeExistence();
         const pageVariant: PageVariantConfig = this.retrievePageVariant();
@@ -869,15 +867,15 @@ export class TemplateComponent implements OnInit {
             newSwimlane.grid = [];
         }
         const swimlanesCopy = JSON.parse(JSON.stringify(this.swimlanes ?? []));
-        swimlanesCopy.push(newSwimlane);
+        swimlanesCopy.splice(positionToAdd, 0, newSwimlane);
         pageVariant.structure.swimlanes = swimlanesCopy;
         await this.setProperty(
             this.pageVariantNode.ref.id,
             pageVariantConfigType,
             JSON.stringify(pageVariant),
         );
         // add swimlane visually as soon as the requests are done
-        this.swimlanes.push(newSwimlane);
+        this.swimlanes.splice(positionToAdd, 0, newSwimlane);
         this.requestInProgress = false;
     }