feat: add classNames input for all widgets and take them into account…

… when loading them chore: renaming configuration headings
openeduhub · Jul 24, 2024 · 883e93c · 883e93c
1 parent dde2018
commit 883e93c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 11 deletions.
diff --git a/src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.html b/src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.html
@@ -1,6 +1,7 @@
 <ng-container *ngIf="widgetType === 'wlo-ai-text-widget'">
   <wlo-ai-text-widget
     *ngIf="filterBarReady"
+    [class]="widgetClasses ? widgetClasses : ''"
     [contextNodeId]="topicCollectionID"
     [editMode]="editMode"
     [nodeId]="widgetNodeId"
@@ -11,6 +12,7 @@
 <ng-container *ngIf="widgetType === 'wlo-collection-chips'">
   <wlo-collection-chips
     *ngIf="topicCollectionID"
+    [class]="widgetClasses ? widgetClasses : ''"
     [customUrl]="retrieveCustomUrl"
     [collection]="topicCollectionID"
   ></wlo-collection-chips>
@@ -24,7 +26,7 @@
   </wlo-user-configurable>
 </ng-container>
 <ng-container *ngIf="widgetType === 'wlo-card'">
-  <mat-card appearance="outlined" class="example-card">
+  <mat-card appearance="outlined" class="example-card" [class]="widgetClasses ? widgetClasses : ''">
     <mat-card-header>
       <div mat-card-avatar class="example-header-image"></div>
       <mat-card-title>Shiba Inu</mat-card-title>
@@ -49,9 +51,17 @@
   </mat-card>
 </ng-container>
 <ng-container *ngIf="widgetType === 'wlo-image'">
-  <img src="https://placehold.co/800x600" alt="Examplary WLO-Image" />
+  <img
+    src="https://placehold.co/800x600"
+    alt="Examplary WLO-Image"
+    [class]="widgetClasses ? widgetClasses : ''"
+  />
 </ng-container>
-<div class="text-widget" *ngIf="widgetType === 'wlo-text'">
+<div
+  class="text-widget"
+  [class]="widgetClasses ? widgetClasses : ''"
+  *ngIf="widgetType === 'wlo-text'"
+>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
   labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit

diff --git a/...search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.html b/...search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.html
@@ -73,7 +73,7 @@ <h1 mat-dialog-title>
           &times;
         </button>
       </mat-expansion-panel-header>
-      <mat-label i18n>Grid dimensions</mat-label>
+      <mat-label i18n>General settings</mat-label>
       <div class="dimensions">
         <ng-container *ngFor="let dim of tileDimensions">
           <!-- TODO: currently, no suitable solution for including different button types exist -->
@@ -106,13 +106,22 @@ <h1 mat-dialog-title>
           <div *ngIf="dim.numberOfCols === 3" class="line-break"></div>
         </ng-container>
       </div>
-      <!-- TODO: Classes input -->
-
+      <mat-form-field appearance="outline">
+        <mat-label i18n>CSS class names</mat-label>
+        <input
+          matInput
+          type="text"
+          placeholder="CSS classes set to the widget (use spaces between multiple class names)"
+          [ngModel]="gridTile.classNames"
+          (ngModelChange)="gridTile.classNames = $event; syncGridItemsWithFormData()"
+          [ngModelOptions]="{ standalone: true }"
+        />
+      </mat-form-field>
       <div
         class="grid-config"
         *ngIf="supportedWidgetTypesWithConfig.includes(gridTile.item) && gridTile.config"
       >
-        <mat-label class="config-label" i18n>Configuration</mat-label>
+        <mat-label class="config-label" i18n>Widget configuration</mat-label>
         <mat-form-field
           [class.extended-margin-bottom]="configHints.get(configItem)"
           appearance="outline"

diff --git a/...search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.scss b/...search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.scss
@@ -62,6 +62,7 @@
 
         .dimensions {
             margin-top: 5px;
+            margin-bottom: 15px;
 
             .tile-dimension {
                 button {
@@ -78,7 +79,7 @@
         }
 
         .grid-config {
-            margin-top: 25px;
+            margin-top: 5px;
 
             .extended-margin-bottom {
                 margin-bottom: 10px;

diff --git a/...o-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.ts b/...o-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.ts
@@ -170,9 +170,9 @@ export class SwimlaneSettingsDialogComponent implements OnInit {
         }
     }
 
-    setConfigValue(index: number, configItem: keyof WidgetConfig, configValue: any) {
+    // keyof -> https://stackoverflow.com/a/69198602
+    setConfigValue(index: number, configItem: keyof WidgetConfig, configValue: string) {
         if (this.gridItems[index].config && this.availableWidgetConfigTypes.includes(configItem)) {
-            // https://stackoverflow.com/a/69198602
             this.gridItems[index].config[configItem] = configValue;
             this.syncGridItemsWithFormData();
         }
@@ -191,7 +191,7 @@ export class SwimlaneSettingsDialogComponent implements OnInit {
         this.syncGridItemsWithFormData();
     }
 
-    private syncGridItemsWithFormData() {
+    syncGridItemsWithFormData() {
         this.form.get('grid').setValue(JSON.stringify(this.gridItems));
     }
 }