feat: first prototype for updated storage concept including page temp…

…lates

chore: clean-up code + files (remove unnecessary functions and types)

package.json

@@ -45,7 +45,7 @@
     "ngx-colors": "^3.5.3",
     "ngx-edu-sharing-api": "9999.0.1",
     "ngx-edu-sharing-ui": "9999.0.2",
-    "ngx-edu-sharing-wlo-pages": "^0.1.8",
+    "ngx-edu-sharing-wlo-pages": "^0.1.9",
     "ngx-edu-sharing-z-api": "^0.0.3",
     "ngx-slick-carousel": "^17.0.0",
     "rxjs": "^7.0.0",

src/app/wlo-search/template/custom-definitions.ts

@@ -1,38 +1,11 @@
-import { WidgetConfig } from './swimlane/grid-widget/widget-config';
 import { SelectOption } from './swimlane/swimlane-settings-dialog/select-option';
-import { Swimlane } from './swimlane/swimlane';
-import { v4 as uuidv4 } from 'uuid';
-
-export const collectionPrefix: string = 'COLLECTION_';
-
-export const configHints: Map<string, string> = new Map<string, string>([
-    ['headline', 'The headline of the content teaser, which is later extended by the topic name.'],
-    ['layout', 'The layout of the content teaser, e.g., carousel.'],
-    ['description', 'The description used by the content teaser.'],
-    ['searchMode', 'The search mode used by the content teaser, e.g, collection or ngsearchword.'],
-    [
-        'searchText',
-        'The search text used by the content teaser, which is later extended by the topic name.',
-    ],
-    [
-        'chosenColor',
-        'Optional background color used by the content teaser, which defaults to the swimlane background.',
-    ],
-    [
-        'collectionId',
-        'Optional collectionId used by the content teaser, which defaults to the collectionID of the page.',
-    ],
-]);
-
-export const currentlySupportedWidgetTypes: string[] = [
-    'wlo-ai-text-widget',
-    'wlo-collection-chips',
-    'wlo-user-configurable',
-];
 
-export const currentlySupportedWidgetTypesWithConfig: string[] = ['wlo-user-configurable'];
+export const defaultMds: string = 'mds_oeh';
 
-export const default_mds: string = 'mds_oeh';
+export const defaultTopicTextNodeId: string = '2340e5cf-4e9d-4b42-b6df-e64087be7961';
+export const defaultAiTextWidgetNodeId: string = '10d5ec39-907a-43f6-a024-344300e6a4c8';
+export const defaultUserConfigurableNodeId: string = '89653b20-516c-43a2-9042-382aef5ae087';
+export const defaultCollectionChipsNodeId: string = 'd43cfd0e-ce5a-4428-a3bb-2c37a155bf32';
 
 export const gridTypeOptions: SelectOption[] = [
     {
@@ -55,75 +28,32 @@ export const gridTypeOptions: SelectOption[] = [
 
 export const initialLocaleString: string = 'de_DE';
 
-export const initialSwimlanes: Swimlane[] = [
-    {
-        uuid: uuidv4(),
-        type: 'collapse',
-        heading: 'Durchstöbere hier unsere Lehrplanthemen',
-        description: 'Example text?',
-        grid: [
-            {
-                uuid: uuidv4(),
-                item: 'wlo-collection-chips',
-                cols: 3,
-                rows: 1,
-            },
-        ],
-    },
-    {
-        uuid: uuidv4(),
-        type: 'spacer',
-    },
-    {
-        uuid: uuidv4(),
-        type: 'jumbotron',
-        grid: [
-            {
-                uuid: uuidv4(),
-                item: 'wlo-user-configurable',
-                classNames: 'job-widget',
-                cols: 3,
-                rows: 1,
-                config: {
-                    headline: 'Berufsprofile',
-                    layout: 'carousel',
-                    searchMode: 'collection',
-                },
-            },
-        ],
-        backgroundColor: '#FFF9EB',
-    },
-    {
-        uuid: uuidv4(),
-        type: 'spacer',
-    },
-    {
-        uuid: uuidv4(),
-        type: 'jumbotron',
-        grid: [
-            {
-                uuid: uuidv4(),
-                item: 'wlo-ai-text-widget',
-                cols: 3,
-                rows: 1,
-            },
-        ],
-        backgroundColor: '#BEDADE',
-    },
-];
-
 export const initialTopicColor: string = '#182e5c';
 
 export const ioType: string = 'ccm:io';
 
 export const mapType: string = 'ccm:map';
 
+export const pageConfigAspect: string = 'ccm:page';
+
+export const pageConfigPrefix: string = 'PAGE_';
+
 export const pageConfigPropagateType: string = 'ccm:page_config_propagate';
 
 export const pageConfigRefType: string = 'ccm:page_config_ref';
 
 export const pageConfigType: string = 'ccm:page_config';
 
+export const pageVariantConfigAspect: string = 'ccm:page_variant';
+
+export const pageVariantConfigPrefix: string = 'PAGE_VARIANT_';
+
+export const pageVariantConfigType: string = 'ccm:page_variant_config';
+
+export const pageVariantIsTemplateType: string = 'ccm:page_variant_is_template';
+
+export const parentPageConfigNodeId: string = '25e341e1-7058-4210-b0d3-838255884682';
+
 export const parentWidgetConfigNodeId: string = '80bb0eab-d64f-466b-94c6-2eccc4045c6b';
 
 export const providedSelectDimensionKeys: string[] = [
@@ -150,26 +80,10 @@ export const swimlaneTypeOptions: SelectOption[] = [
     },
 ];
 
-export const topicPrompt: string = 'Gib eine kurze Einleitung in das Thema $THEMA$.';
-
-export const topicTemplateWidgetId: string = 'headerPrompt';
-
 export const widgetConfigAspect: string = 'ccm:widget';
 
 export const widgetConfigType: string = 'ccm:widget_config';
 
-export const widgetConfigTypes: Array<keyof WidgetConfig> = [
-    'headline',
-    'layout',
-    'description',
-    'searchMode',
-    'searchText',
-    'chosenColor',
-    'collectionId',
-];
-
-export const widgetPrefix: string = 'WIDGET_';
-
 export const widgetTypeOptions: SelectOption[] = [
     {
         value: 'wlo-user-configurable',
@@ -196,3 +110,5 @@ export const widgetTypeOptions: SelectOption[] = [
         viewValue: 'Text',
     },
 ];
+
+export const workspaceSpacesStorePrefix: string = 'workspace://SpacesStore/';

src/app/wlo-search/template/page-config.ts

@@ -0,0 +1,4 @@
+export interface PageConfig {
+    default?: string;
+    variants?: string[];
+}

src/app/wlo-search/template/page-structure.ts

@@ -0,0 +1,5 @@
+import { Swimlane } from './swimlane/swimlane';
+
+export interface PageStructure {
+    swimlanes: Swimlane[];
+}

src/app/wlo-search/template/page-variant-config.ts

@@ -0,0 +1,10 @@
+import { PageStructure } from './page-structure';
+
+export interface PageVariantConfig {
+    variables?: { [key: string]: string };
+    template: {
+        id: string;
+        version: string;
+    };
+    structure: PageStructure;
+}

src/app/wlo-search/template/swimlane/grid-tile.ts

@@ -1,10 +1,7 @@
-import { WidgetConfig } from './grid-widget/widget-config';
-
 export interface GridTile {
-    uuid: string;
     item: string;
     classNames?: string;
     cols?: number;
     rows?: number;
-    config?: WidgetConfig;
+    nodeId?: string;
 }

src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.html

@@ -3,10 +3,15 @@
     *ngIf="filterBarReady"
     [class]="widgetClasses ? widgetClasses : ''"
     [contextNodeId]="topicCollectionID"
+    [defaultNodeId]="defaultAiTextWidgetNodeId"
     [editMode]="editMode"
+    [gridIndex]="gridIndex"
     [nodeId]="widgetNodeId"
+    [pageVariantNode]="pageVariantNode"
+    [parentWidgetConfigNodeId]="parentWidgetConfigNodeId"
     [selectDimensions]="selectDimensions"
     [selectedDimensionValues]="selectedDimensionValues"
+    [swimlaneIndex]="swimlaneIndex"
   ></wlo-ai-text-widget>
 </ng-container>
 <ng-container *ngIf="widgetType === 'wlo-collection-chips'">
@@ -15,14 +20,20 @@
     [class]="widgetClasses ? widgetClasses : ''"
     [customUrl]="retrieveCustomUrl"
     [collection]="topicCollectionID"
+    [defaultNodeId]="defaultCollectionChipsNodeId"
   ></wlo-collection-chips>
 </ng-container>
 <ng-container *ngIf="widgetType === 'wlo-user-configurable'">
   <wlo-user-configurable
-    *ngIf="jobsWidgetReady"
     [class]="widgetClasses ? widgetClasses : ''"
-    [configOverwrite]="contentConfigAsString()"
+    [contextNodeId]="topicCollectionID"
+    [defaultNodeId]="defaultUserConfigurableNodeId"
+    [gridIndex]="gridIndex"
     [nodeId]="widgetNodeId"
+    [pageVariantNode]="pageVariantNode"
+    [parentWidgetConfigNodeId]="parentWidgetConfigNodeId"
+    [searchText]="topic"
+    [swimlaneIndex]="swimlaneIndex"
   >
   </wlo-user-configurable>
 </ng-container>

src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.ts

@@ -1,7 +1,11 @@
-import { Component, computed, Input, signal, Signal, WritableSignal } from '@angular/core';
-import { widgetConfigType } from '../../custom-definitions';
+import { Component, Input } from '@angular/core';
+import {
+    defaultAiTextWidgetNodeId,
+    defaultCollectionChipsNodeId,
+    defaultUserConfigurableNodeId,
+    parentWidgetConfigNodeId,
+} from '../../custom-definitions';
 import { SharedModule } from '../../../shared/shared.module';
-import { WidgetConfig } from './widget-config';
 import { MdsValue, MdsWidget, Node } from 'ngx-edu-sharing-api';
 import {
     AiTextWidgetComponent,
@@ -25,46 +29,21 @@ export class GridWidgetComponent {
     @Input() backgroundColor: string;
     @Input() editMode: boolean;
     @Input() filterBarReady: boolean;
-    @Input() generatedJobText: string;
-    @Input() jobsWidgetReady: boolean;
+    @Input() gridIndex: number;
+    @Input() pageVariantNode: Node;
     @Input() selectDimensions: Map<string, MdsWidget> = new Map<string, MdsWidget>();
     @Input() selectedDimensionValues: MdsValue[] = [];
+    @Input() swimlaneIndex: number;
     @Input() topic: string;
     @Input() topicCollectionID: string;
     @Input() widgetClasses: string;
-    // https://stackoverflow.com/a/56006046
-    private _widgetNode: Node;
-    @Input() get widgetNode(): Node {
-        return this._widgetNode;
-    }
-
-    set widgetNode(value: Node) {
-        this._widgetNode = value;
-        this.setContentConfig(value);
-    }
-
     @Input() widgetNodeId: string;
     @Input() widgetType: string;
 
-    contentConfig: WritableSignal<WidgetConfig> = signal({});
-    contentConfigAsString: Signal<string> = computed(() => {
-        return JSON.stringify(this.contentConfig());
-    });
-
-    setContentConfig(widgetNode: Node) {
-        const widgetConfig = widgetNode?.properties?.[widgetConfigType]?.[0];
-        if (widgetConfig && JSON.parse(widgetConfig)?.config) {
-            const contentConfig: WidgetConfig = JSON.parse(widgetConfig).config;
-            // extend config by default values
-            if (!contentConfig.chosenColor || contentConfig.chosenColor === '') {
-                contentConfig.chosenColor = this.backgroundColor;
-            }
-            if (!contentConfig.collectionId || contentConfig.collectionId === '') {
-                contentConfig.collectionId = this.topicCollectionID;
-            }
-            this.contentConfig.set(contentConfig);
-        }
-    }
+    defaultAiTextWidgetNodeId: string = defaultAiTextWidgetNodeId;
+    defaultCollectionChipsNodeId: string = defaultCollectionChipsNodeId;
+    defaultUserConfigurableNodeId: string = defaultUserConfigurableNodeId;
+    parentWidgetConfigNodeId: string = parentWidgetConfigNodeId;
 
     retrieveCustomUrl(node: Node) {
         const collectionId = node.properties?.['sys:node-uuid']?.[0];