Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add tableColumns config #13655

Closed
Tracked by #13476
standeren opened this issue Sep 27, 2024 · 1 comment
Closed
Tracked by #13476

Add tableColumns config #13655

standeren opened this issue Sep 27, 2024 · 1 comment

Comments

@standeren
Copy link
Contributor

standeren commented Sep 27, 2024

Description

For this issue the scope is to make it possible to add and remove tableColumn-objetcs from the array of tableColumns on the subform component.

A tableColumnObject should look like this:

type TableColumn = {
        headerContent: string;
        cellContent: {
            query: string;
            default?: string;
        }
    }

Whereas the tableColumns should look like this:

type TableColumns = TableColumn[];

The component rendering this config can be called something like EditTableColumns and can be rendered from Text.tsx component with the condition that the component is a subform. Similar as what have been done with the EditImage component:

{form.type === 'Image' && (
        <>
          <Heading level={2} size='2xs' className={classes.heading}>
            {t('ux_editor.properties_panel.texts.sub_title_images')}
          </Heading>
          <EditImage
            component={form}
            handleComponentChange={async (updatedComponent) => {
              handleUpdate(updatedComponent);
              debounceSave(formId, updatedComponent);
            }}
          />
        </>
      )}

Inside the EditTableColumns we should render a Card-ish design of each tableColumn object where each one should allow editing the headerContent and the cellContent, as well as deleting the tableColumn object. In addition the component should have a button to add a new empty tableColumn object to the array of tableColumns on the component.

When it comes to editing a single tableColumn we need three fields;

  1. For editing the headerContent. We can use the StudioTogglableTexfield for this
  2. For editing the cellContent.query. We can use the StudioTogglableTexfield for this
  3. For editing the cellContent.default. We can use the StudioTogglableTexfield for this

cellContent.default is optional to set, whereas the others are required.

In the first iteration all these fields should be entered with freetext.

Next iteration - OUT OF SCOPE FOR THIS ISSUE

The fields need more configuration possibilities:

  1. For editing the headerContent which should use the TextResource component in order to reference a textResource, either one created inline or by using search.
  2. For editing the cellContent.query which will be a reference to a datamodel-field. The name of the datamodel should not be included in the reference, since the component will implicitly understand that the fileds should be looked up from the data model that is connected to the layoutset for the subform.
  3. For editing the cellContent.default, which is optionally to set, we should also use the TextResource component.

Also we should consider using a modal for editing each tableColumn in order to force the app-developers to only edit one tablecolumn at a time

Figma sketches

Skjermbilde 2024-10-02 kl  14 50 06
https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=13174-38395&node-type=canvas&m=dev

@lassopicasso
Copy link
Contributor

Tested in dev - works as expected :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ✅ Done
Development

No branches or pull requests

3 participants