fix(tile-manager): apply saved props to tiles already in DOM

Author: mtsvyatkova

src/components/tile-manager/tile-manager.spec.ts

@@ -673,28 +673,30 @@ describe('Tile Manager component', () => {
       const serializedData = JSON.parse(tileManager.saveLayout());
       const expectedData = [
         {
-          tileId: 'custom-id1',
+          // colSpan: 3,
           colStart: null,
-          colSpan: 3,
           disableDrag: false,
           disableResize: false,
-          rowStart: null,
-          rowSpan: 3,
-          gridColumn: 'span 3',
-          gridRow: 'span 3',
+          gridColumn: 'auto',
+          gridRow: 'auto',
           maximized: false,
+          position: 0,
+          // rowSpan: 3,
+          rowStart: null,
+          tileId: 'custom-id1',
         },
         {
-          tileId: 'custom-id2',
-          colStart: 8,
           colSpan: 10,
+          colStart: 8,
           disableDrag: true,
           disableResize: true,
-          rowStart: 7,
-          rowSpan: 7,
-          gridColumn: '8 / span 10',
-          gridRow: '7 / span 7',
+          gridColumn: 'auto',
+          gridRow: 'auto',
           maximized: false,
+          position: 1,
+          rowSpan: 7,
+          rowStart: 7,
+          tileId: 'custom-id2',
         },
       ];
 
@@ -704,28 +706,43 @@ describe('Tile Manager component', () => {
     it('should deserialize tiles with proper properties values', async () => {
       const tilesData = [
         {
-          tileId: 'id1',
-          colStart: 1,
           colSpan: 5,
+          colStart: 1,
           disableDrag: true,
           disableResize: true,
           gridColumn: '1 / span 5',
           gridRow: '1 / span 5',
           maximized: false,
-          rowStart: 1,
+          position: 0,
           rowSpan: 5,
+          rowStart: 1,
+          tileId: 'custom-id1',
         },
         {
-          tileId: 'id2',
-          colStart: null,
           colSpan: 3,
+          colStart: null,
           disableDrag: false,
           disableResize: false,
           gridColumn: 'span 3',
           gridRow: 'span 3',
           maximized: false,
+          position: 1,
+          rowSpan: 3,
           rowStart: null,
+          tileId: 'custom-id2',
+        },
+        {
+          colSpan: 3,
+          colStart: null,
+          disableDrag: false,
+          disableResize: false,
+          gridColumn: 'span 3',
+          gridRow: 'span 3',
+          maximized: false,
+          position: 2,
           rowSpan: 3,
+          rowStart: null,
+          tileId: 'no-match-id',
         },
       ];
 
@@ -735,23 +752,25 @@ describe('Tile Manager component', () => {
       const tiles = tileManager.tiles;
       expect(tiles.length).to.equal(2);
 
-      expect(tiles[0].tileId).to.equal('id1');
-      expect(tiles[0].colStart).to.equal(1);
       expect(tiles[0].colSpan).to.equal(5);
+      expect(tiles[0].colStart).to.equal(1);
       expect(tiles[0].disableDrag).to.equal(true);
       expect(tiles[0].disableResize).to.equal(true);
       expect(tiles[0].maximized).to.be.false;
-      expect(tiles[0].rowStart).to.equal(1);
+      expect(tiles[0].position).to.equal(0);
       expect(tiles[0].rowSpan).to.equal(5);
+      expect(tiles[0].rowStart).to.equal(1);
+      expect(tiles[0].tileId).to.equal('custom-id1');
 
-      expect(tiles[1].tileId).to.equal('id2');
-      expect(tiles[1].colStart).to.be.null;
       expect(tiles[1].colSpan).to.equal(3);
+      expect(tiles[1].colStart).to.be.null;
       expect(tiles[1].disableDrag).to.be.false;
       expect(tiles[1].disableResize).to.be.false;
       expect(tiles[1].maximized).to.be.false;
-      expect(tiles[1].rowStart).to.be.null;
+      expect(tiles[1].position).to.equal(1);
       expect(tiles[1].rowSpan).to.equal(3);
+      expect(tiles[1].rowStart).to.be.null;
+      expect(tiles[1].tileId).to.equal('custom-id2');
 
       const firstTileStyles = window.getComputedStyle(tiles[0]);
       const secondTileStyles = window.getComputedStyle(tiles[1]);
@@ -789,7 +808,11 @@ describe('Tile Manager component', () => {
       tileManager.appendChild(tile);
       await elementUpdated(tileManager);
 
-      expect(tileManager.tiles[5].tileId).to.equal('custom-id');
+      const matchingTiles = tileManager.tiles.filter(
+        (tile) => tile.tileId === 'custom-id'
+      );
+
+      expect(matchingTiles.length).to.equal(1);
     });
   });
 

src/components/tile-manager/tile-manager.ts

@@ -208,49 +208,46 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
       const tileStyles = window.getComputedStyle(tile);
 
       return {
-        tileId: tile.tileId,
         colSpan: tile.colSpan,
         colStart: tile.colStart,
-        rowSpan: tile.rowSpan,
-        rowStart: tile.rowStart,
-        maximized: tile.maximized,
         disableDrag: tile.disableDrag,
         disableResize: tile.disableResize,
-        position: tile.position,
-
         // TODO: Review. We are saving gridColumn and gridRow as they keep the size of the resized tiles.
         gridColumn: tileStyles.gridColumn,
         gridRow: tileStyles.gridRow,
+        maximized: tile.maximized,
+        position: tile.position,
+        rowSpan: tile.rowSpan,
+        rowStart: tile.rowStart,
+        tileId: tile.tileId,
       };
     });
 
-    // console.log("tileData: " + JSON.stringify(tilesData, null, 2));
     return JSON.stringify(tilesData);
   }
 
   public loadLayout(data: string) {
     const tilesData = JSON.parse(data);
 
-    this.tiles.forEach((tile) => tile.remove());
-
     tilesData.forEach((tileInfo: any) => {
-      const tile = document.createElement('igc-tile') as IgcTileComponent;
-
-      tile.tileId = tileInfo.tileId;
-      tile.colSpan = tileInfo.colSpan;
-      tile.colStart = tileInfo.colStart;
-      tile.rowSpan = tileInfo.rowSpan;
-      tile.rowStart = tileInfo.rowStart;
-      tile.maximized = tileInfo.maximized;
-      tile.disableDrag = tileInfo.disableDrag;
-      tile.disableResize = tileInfo.disableResize;
-      tile.position = tileInfo.position;
-
-      // TODO: Review. We are saving gridColumn and gridRow as they keep the size of the resized tiles.
-      tile.style.gridColumn = tileInfo.gridColumn;
-      tile.style.gridRow = tileInfo.gridRow;
-
-      this.appendChild(tile);
+      const existingTile = this._tiles.find(
+        (tile) => tile.tileId === tileInfo.tileId
+      );
+
+      if (existingTile) {
+        existingTile.colSpan = tileInfo.colSpan;
+        existingTile.colStart = tileInfo.colStart;
+        existingTile.disableDrag = tileInfo.disableDrag;
+        existingTile.disableResize = tileInfo.disableResize;
+        existingTile.maximized = tileInfo.maximized;
+        existingTile.position = tileInfo.position;
+        existingTile.rowSpan = tileInfo.rowSpan;
+        existingTile.rowStart = tileInfo.rowStart;
+
+        // TODO: Review. We are saving gridColumn and gridRow as they keep the size of the resized tiles.
+        existingTile.style.gridColumn = tileInfo.gridColumn;
+        existingTile.style.gridRow = tileInfo.gridRow;
+      }
     });
   }