Changes for new storage

[bramkragten]

Requires home-assistant/core#19101

Fixes #2224
Fixes #2223
Fixes #2222
Fixes #2221
Fixes #2219

[balloob]

This won't support stacks editing, however, since it's frontend only, we can change it later.

[bramkragten]

Yeah, we should have a parent_index for stacks or something

[balloob]

Or we just have an array with indices.

[bramkragten]

Yeah that would be even better, then it could work with endless stacks

[balloob]

const [viewIndex, ...cardIndices] = obj_path

[balloob]

We should mutate these functions to be like this:

export const deleteCard = (config: LovelaceCardConfig, viewIndex, cardIndex): LovelaceCardConfig;

[balloob]

And then the caller can route the result to updateCardConfig. Will make it easy to test the functions and reason about it too.

[balloob]

Here is example of how we should get config edit functions:

We should represent the path of an object as [viewIdx, cardIdx, <cardIdx, …>]. That way we can support nested objects in the future easily.

export const addCard = (
  config: LovelaceConfig,
  path: [number],
  cardConfig: LovelaceCardConfig
): LovelaceConfig => {
  const [viewIndex] = path;
  const views: LovelaceViewConfig[] = [];

  config.views.forEach((viewConf, index) => {
    if (index !== viewIndex) {
      views.push(config.views[index]);
      return;
    }

    const cards = viewConf.cards
      ? [...viewConf.cards, cardConfig]
      : [cardConfig];

    views.push({
      ...viewConf,
      cards,
    });
  });

  return {
    ...config,
    views,
  };
};

export const replaceCard = (
  config: LovelaceConfig,
  path: [number, number],
  cardConfig: LovelaceCardConfig
): LovelaceConfig => {
  const [viewIndex, cardIndex] = path;
  const views: LovelaceViewConfig[] = [];

  config.views.forEach((viewConf, index) => {
    if (index !== viewIndex) {
      views.push(config.views[index]);
      return;
    }

    views.push({
      ...viewConf,
      cards: (viewConf.cards || []).map((origConf, ind) =>
        ind === cardIndex ? cardConfig : origConf
      ),
    });
  });

  return {
    ...config,
    views,
  };
};

export const deleteCard = (
  config: LovelaceConfig,
  path: [number, number]
): LovelaceConfig => {
  const [viewIndex, cardIndex] = path;
  const views: LovelaceViewConfig[] = [];

  config.views.forEach((viewConf, index) => {
    if (index !== viewIndex) {
      views.push(config.views[index]);
      return;
    }

    views.push({
      ...viewConf,
      cards: (viewConf.cards || []).filter(
        (_origConf, ind) => ind !== cardIndex
      ),
    });
  });

  return {
    ...config,
    views,
  };
};

export const addView = (
  config: LovelaceConfig,
  viewConfig: LovelaceViewConfig
): LovelaceConfig => ({
  ...config,
  views: config.views.concat(viewConfig),
});

export const replaceView = (
  config: LovelaceConfig,
  viewIndex: number,
  viewConfig: LovelaceViewConfig
): LovelaceConfig => ({
  ...config,
  views: config.views.map((origView, index) =>
    index === viewIndex ? viewConfig : origView
  ),
});

export const deleteView = (
  config: LovelaceConfig,
  viewIndex: number
): LovelaceConfig => ({
  ...config,
  views: config.views.filter((_origView, index) => index !== viewIndex),
});

[balloob]

We might not need this if we can just pass viewIndex and cardIndex to the edit button for cards.

The edit card dialog then gets params (config: LovelaceConfig, [viewId, cardId])