toggleable column title

Altinn · Dec 13, 2024 · 528dd12 · 528dd12
1 parent 3fc0448
commit 528dd12
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 14 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1777,6 +1777,8 @@
   "ux_editor.properties_panel.subform_table_columns.choose_component": "Velg komponenten fra underskjemaet som skal vises her",
   "ux_editor.properties_panel.subform_table_columns.choose_component_description": "Listen viser bare de komponentene der det er lagt til ledetekster",
   "ux_editor.properties_panel.subform_table_columns.column_header": "Kolonne {{columnNumber}}",
+  "ux_editor.properties_panel.subform_table_columns.column_title_edit": "Kolonnetittel",
+  "ux_editor.properties_panel.subform_table_columns.column_title_unedit": "Kolonnetittel:",
   "ux_editor.properties_panel.subform_table_columns.delete_column": "Slett kolonne {{columnNumber}}",
   "ux_editor.properties_panel.subform_table_columns.header_content_label": "Header Content",
   "ux_editor.properties_panel.subform_table_columns.heading": "Valg for tabell",

diff --git a/.../Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx b/.../Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx
@@ -1,23 +1,23 @@
 import React, { useState, type ReactElement } from 'react';
 import classes from './EditColumnElement.module.css';
 import { type TableColumn } from '../../types/TableColumn';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import {
   StudioActionCloseButton,
   StudioCard,
   StudioCombobox,
   StudioDeleteButton,
   StudioDivider,
   StudioParagraph,
-  StudioTextfield,
+  StudioToggleableTextfield,
 } from '@studio/components';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useFormLayoutsQuery } from '../../../../../hooks/queries/useFormLayoutsQuery';
 import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils';
 import type { FormItem } from '../../../../../types/FormItem';
-import { PadlockLockedFillIcon } from '@studio/icons';
 import { useTextResourcesQuery } from 'app-shared/hooks/queries';
 import { textResourceByLanguageAndIdSelector } from '../../../../../selectors/textResourceSelectors';
+import { KeyVerticalIcon } from '@studio/icons';
 
 export type ColumnElementProps = {
   sourceColumn: TableColumn;
@@ -75,17 +75,7 @@ export const EditColumnElement = ({
           components={componentsWithLabelAndDataModel}
           onSelectComponent={selectComponent}
         />
-        <StudioTextfield
-          label={
-            <>
-              <PadlockLockedFillIcon />
-              {t('ux_editor.modal_properties_textResourceBindings_title')}
-            </>
-          }
-          disabled={true}
-          size='sm'
-          value={textKeyValue}
-        />
+        {tableColumn.headerContent && <EditColumnElementTitle textKeyValue={textKeyValue} />}
         <div className={classes.buttons}>
           <StudioActionCloseButton
             variant='secondary'
@@ -147,3 +137,31 @@ export const EditColumnElementComponentSelect = ({
     </StudioCombobox>
   );
 };
+
+type EditColumnElementTitleProps = {
+  textKeyValue: string;
+};
+
+const EditColumnElementTitle = ({ textKeyValue }: EditColumnElementTitleProps) => {
+  const { t } = useTranslation();
+  return (
+    <StudioToggleableTextfield
+      inputProps={{
+        icon: <KeyVerticalIcon />,
+        label: t('ux_editor.properties_panel.subform_table_columns.column_title_edit'),
+        value: textKeyValue,
+        size: 'sm',
+      }}
+      viewProps={{
+        children: (
+          <Trans
+            i18nKey={'ux_editor.properties_panel.subform_table_columns.column_title_unedit'}
+            values={{ item: textKeyValue }}
+          />
+        ),
+        title: textKeyValue,
+        variant: 'tertiary',
+      }}
+    />
+  );
+};