BLUE

Navigation

Breadcrumbs

/ / var / www / uibuilder.cmshelp.dk / httpdocs / src / app / _components / mappers

Create

Upload

Tip: You can also drag & drop files anywhere on this page to upload.

Edit File Size: 8.06 KB

/var/www/uibuilder.cmshelp.dk/httpdocs/src/app/_components/mappers/umbracoMapper.ts

Text Base64

import { v4 as uuidv4 } from 'uuid';
import { GridLayout, DroppedItem,GRID_TYPES } from '../context/CanvasContext';

const GRID_AREA_KEYS = {
  DEFAULT: '2f543aae-1acf-4aa6-983f-22a29df53b4d',
  ONE_COLUMN: '3afbeadf-fb1d-4aba-89d6-e735682cdf63',
  TWO_COLUMN: {
    LEFT: '376ef45c-111e-4b65-8ff1-84248cf9c4c2',
    RIGHT: 'e1fabf62-2432-4134-aeac-4346c998d44b'
  },
  THREE_COLUMN: {
    LEFT: 'ca4daabc-539a-4fb7-bd74-032fb3db745e',
    MIDDLE: 'c132bf0a-9593-4aa9-a05a-3b264bb6b1d1',
    RIGHT: '207d48ec-972a-4182-bcef-cf5d3bfa23a2'
  }
};

interface UmbracoContentData {
  contentTypeKey: string;
  udi: null;
  key: string;
  values: Array<{
    editorAlias: string;
    culture: null;
    segment: null;
    alias: string;
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    value: any;
  }>;
}

interface UmbracoLayoutItem {
  $type: "BlockGridLayoutItem";
  columnSpan: number;
  rowSpan: number;
  areas: Array<{
    key: string;
    items: UmbracoLayoutItem[];
  }>;
  contentUdi: null;
  settingsUdi: null;
  contentKey: string;
  settingsKey: null;
}

export const mapGridStateToUmbraco = (gridState: { layouts: GridLayout[], components: { [key: string]: DroppedItem[] } }) => {
  if (!gridState || !gridState.layouts) {
    return {
      template: null,
      values: [],
      variants: []
    };
  }

const contentData: UmbracoContentData[] = [];
  const expose: Array<{ contentKey: string; culture: null; segment: null }> = [];

const processGridLayout = (grid: GridLayout, isRoot: boolean = true): UmbracoLayoutItem => {
    const contentKey = uuidv4();
    
    // Extract the base grid type ID
    const baseGridId = grid.documentId || grid.id.split('-')[0];
    
    // Add grid to contentData
    contentData.push({
      contentTypeKey: baseGridId,
      udi: null,
      key: contentKey,
      values: []
    });

expose.push({
      contentKey,
      culture: null,
      segment: null
    });

// Get area key based on the grid type and column index
    const getAreaKey = (gridType: string, columnIndex: number): string => {
      switch(gridType) {
        case GRID_TYPES.DEFAULT.id:
          return GRID_AREA_KEYS.DEFAULT;
        case GRID_TYPES.ONE_COLUMN.id:
          return GRID_AREA_KEYS.ONE_COLUMN;
        case GRID_TYPES.TWO_COLUMN.id:
          return columnIndex === 0 ? GRID_AREA_KEYS.TWO_COLUMN.LEFT : GRID_AREA_KEYS.TWO_COLUMN.RIGHT;
        case GRID_TYPES.THREE_COLUMN.id:
          if (columnIndex === 0) return GRID_AREA_KEYS.THREE_COLUMN.LEFT;
          if (columnIndex === 1) return GRID_AREA_KEYS.THREE_COLUMN.MIDDLE;
          return GRID_AREA_KEYS.THREE_COLUMN.RIGHT;
        default:
          return uuidv4();
      }
    };

const layoutItem: UmbracoLayoutItem = {
      $type: "BlockGridLayoutItem",
      columnSpan: isRoot ? 12 : Math.floor(12 / (grid.columns?.length || 1)),
      rowSpan: 1,
      areas: grid.columns.map((column, columnIndex) => ({
        key: getAreaKey(baseGridId, columnIndex),
        items: column.map(item => {
          if ('columns' in item) {
            // This is a nested grid
            return processGridLayout(item as GridLayout, false);
          } else {
            // This is a component
            const componentKey = uuidv4();
            const component = item as DroppedItem;
            
            contentData.push({
              contentTypeKey: getContentTypeKeyFromId(component.id),
              udi: null,
              key: componentKey,
              values: mapComponentToValues(component)
            });

expose.push({
              contentKey: componentKey,
              culture: null,
              segment: null
            });

return {
              $type: "BlockGridLayoutItem",
              columnSpan: 12,
              rowSpan: 1,
              areas: [],
              contentUdi: null,
              settingsUdi: null,
              contentKey: componentKey,
              settingsKey: null
            };
          }
        })
      })),
      contentUdi: null,
      settingsUdi: null,
      contentKey: contentKey,
      settingsKey: null
    };

return layoutItem;
  };

// Process root level layouts
  const layouts = gridState.layouts.map(grid => processGridLayout(grid, true));

const result = {
    urls: [{
      culture: "en-US",
      url: "/homegrid"
    }],
    template: {
      id: "b586c583-7e85-461d-8865-0c0c4485fcb5"
    },
    isTrashed: false,
    documentType: {
      id: "1a13df71-2d4a-49c5-a8bf-52602e2acc08",
      icon: "icon-document",
      collection: null
    },
    id: "64c0ac7a-78f3-40f7-8b4e-5e1319cb8723",
    values: [
      {
        editorAlias: "Umbraco.BlockGrid",
        culture: null,
        segment: null,
        alias: "mainContent",
        value: {
          layout: {
            "Umbraco.BlockGrid": layouts.map(item => ({
              ...item,
              $type: "BlockGridLayoutItem",
              columnSpan: 12,
              rowSpan: 1,
              areas: item.areas?.map(area => ({
                ...area,
                items: area.items.map(subItem => ({
                  ...subItem,
                  $type: "BlockGridLayoutItem",
                }))
              }))
            }))
          },
          contentData,
          settingsData: [],
          expose: contentData.map(item => ({
            contentKey: item.key,
            culture: null,
            segment: null
          }))
        }
      }
    ],
    variants: [
      {
        culture: null,
        segment: null,
        state: "Published",
        name: "HomeGrid",
        publishDate: new Date().toISOString(),
        createDate: new Date().toISOString(),
        updateDate: new Date().toISOString()
      }
    ]
  };

// Filter out items with empty values from contentData
  // result.values[0].value.contentData = result.values[0].value.contentData.filter(
  //   item => item.values.length > 0 || [
  //     '99740655-b76b-4d34-aaac-aace495a39b6', // DEFAULT
  //     'c996b4ec-1a0d-4a7c-b99d-466c2b153da4', // ONE_COLUMN
  //     'd6dbc5f5-510a-4020-be64-ef32b741be22', // TWO_COLUMN
  //     'bfe13a0c-ab38-4f4f-8720-dcf34f8475d1'  // THREE_COLUMN
  //   ].includes(item.contentTypeKey)
  // );

return result;
};

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Directory Contents

Dirs: 0 × Files: 5

Sort:

Enable drag-to-move

Name	Size	Perms	Modified	Actions
componentMapper.ts	4.37 KB	lrw-r--r--	2025-03-28 11:03:48	Edit Download recursive recursive
footerMapper.ts	727 B	lrw-r--r--	2025-03-28 11:03:48	Edit Download recursive recursive
headerMapper.ts	738 B	lrw-r--r--	2025-03-28 11:03:48	Edit Download recursive recursive
pageMapper.ts	3.78 KB	lrw-r--r--	2025-03-28 11:03:48	Edit Download recursive recursive
umbracoMapper.ts	8.06 KB	lrw-r--r--	2025-03-28 11:03:48	Edit Download recursive recursive