feat(changeRequest): form page

apps/concept-catalog/components/form-field-container/field-header/field-header.module.css

@@ -0,0 +1,19 @@
+.header {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5em 2em;
+  background: #e6eff8;
+  border-radius: 8px;
+  gap: 0.25em;
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.subtitle {
+  font-size: 1rem;
+  font-weight: 500;
+  gap: 1em;
+}

apps/concept-catalog/components/form-field-container/field-header/index.tsx

@@ -0,0 +1,15 @@
+import styles from './field-header.module.css';
+
+interface Props {
+  title: string;
+  subtitle: string;
+}
+
+export const FieldHeader = ({ title, subtitle }: Props) => {
+  return (
+    <div className={styles.header}>
+      <h2 className={styles.title}>{title}</h2>
+      <p className={styles.subtitle}>{subtitle}</p>
+    </div>
+  );
+};

apps/concept-catalog/components/form-field-container/form-field-container.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  padding: 1em;
+
+  background: #fff;
+
+  border: 1px solid #d5d7d9;
+  border-radius: 8px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  padding: 2em 1em;
+
+  gap: 4em;
+}

apps/concept-catalog/components/form-field-container/index.tsx

@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren } from 'react';
+import { FieldHeader } from './field-header';
+import styles from './form-field-container.module.css';
+
+interface Props extends PropsWithChildren {
+  title?: string;
+  subtitle?: string;
+}
+
+export const ConceptFormField: FC<PropsWithChildren<Props>> = ({ title, subtitle, children }) => {
+  return (
+    <div className={styles.container}>
+      <FieldHeader
+        title={title}
+        subtitle={subtitle}
+      />
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};

apps/concept-catalog/components/form-fields/form-fields.module.css

@@ -0,0 +1,20 @@
+.currentValue {
+  color: #1e2b3c;
+  opacity: 0.7;
+}
+
+.inputContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 2em;
+  padding: 0em 1em;
+}
+
+.containerWithLanguage {
+  display: flex;
+  flex-direction: row;
+}
+
+.noValueText {
+  font-style: italic;
+}

apps/concept-catalog/components/form-fields/relation-to-source/index.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { Select, SingleSelectOption } from '@digdir/design-system-react';
+import { localization as loc } from '@catalog-frontend/utils';
+import { Field } from 'formik';
+import styles from './relation-to-source.module.css';
+
+const relationToSourceOptions: SingleSelectOption[] = [
+  { label: 'Egendefinert', value: 'egendefinert' },
+  { label: 'Basert på kilde', value: 'basertPaaKilde' },
+  { label: 'Sitat fra kilde', value: 'sitatFraKilde' },
+];
+
+interface Props {
+  fieldName: string;
+}
+
+export const RelationToSource: FC<Props> = ({ fieldName }) => {
+  return (
+    <div className={styles.fieldContainer}>
+      <Field
+        name={fieldName}
+        as={Select}
+        label={loc.concept.relationToSource}
+        options={relationToSourceOptions}
+      />
+    </div>
+  );
+};

apps/concept-catalog/components/form-fields/relation-to-source/relation-to-source.module.css

@@ -0,0 +1,3 @@
+.fieldContainer {
+  max-width: 14.5em;
+}

apps/concept-catalog/components/form-fields/source-for-definition/index.tsx

@@ -0,0 +1,49 @@
+import { FC } from 'react';
+import styles from './source-for-definition.module.css';
+import { Field } from 'formik';
+import { Button, Textfield } from '@digdir/design-system-react';
+import { TrashIcon } from '@navikt/aksel-icons';
+import { localization as loc } from '@catalog-frontend/utils';
+
+interface Props {
+  sourceTitleFieldName: string;
+  sourceUriFieldName: string;
+  deleteClickHandler: () => void;
+}
+
+export const SourceForDefinitionField: FC<Props> = ({
+  sourceTitleFieldName,
+  sourceUriFieldName,
+  deleteClickHandler,
+}) => {
+  return (
+    <>
+      <div className={styles.container}>
+        <div className={styles.row}>
+          <Field
+            name={sourceTitleFieldName}
+            as={Textfield}
+            label={'Tittel på kilde'}
+            rows={1}
+            cols={20}
+          />
+          <Field
+            name={sourceUriFieldName}
+            as={Textfield}
+            label={'Lenke til kilde'}
+            rows={1}
+            cols={20}
+          />
+          <Button
+            color='danger'
+            icon={<TrashIcon />}
+            size='small'
+            onClick={deleteClickHandler}
+          >
+            {loc.formatString(loc.button.deleteWithFormat, { text: loc.concept.source.toLowerCase() })}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};

apps/concept-catalog/components/form-fields/source-for-definition/source-for-definition.module.css

@@ -0,0 +1,14 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  align-items: flex-end;
+}
+
+.currentValue {
+  composes: currentValue from '../form-fields.module.css';
+}
+
+.container {
+  composes: containerWithLanguage from '../form-fields.module.css';
+}

apps/concept-catalog/components/form-fields/text-area-field/index.tsx

@@ -0,0 +1,73 @@
+import { FC } from 'react';
+import styles from './text-area-field.module.css';
+import { Field } from 'formik';
+import { localization as loc } from '@catalog-frontend/utils';
+import { Textarea } from '@digdir/design-system-react';
+import { LanguageIndicator } from '@catalog-frontend/ui';
+import { ISOLanguage } from '@catalog-frontend/types';
+
+interface Props {
+  fieldName: string;
+  language?: ISOLanguage;
+  fieldType: string;
+  originalText?: string;
+  showOriginal?: boolean;
+  rows?: number;
+}
+
+interface OriginalTextProps {
+  originalText?: string;
+}
+
+const OriginalText: FC<OriginalTextProps> = ({ originalText }) => {
+  return (
+    <div className={styles.row}>
+      {originalText ? <p>{originalText}</p> : <p className={styles.noValueText}>({loc.changeRequest.noValue})</p>}
+    </div>
+  );
+};
+
+export const TextAreaField: FC<Props> = ({
+  fieldName,
+  originalText,
+  language,
+  fieldType,
+  showOriginal = false,
+  rows = 1,
+}) => {
+  const fieldLabel = showOriginal
+    ? loc
+        .formatString(loc.changeRequest.proposedChange, {
+          fieldType: fieldType,
+          lang: loc.language[language]?.toLowerCase(),
+        })
+        .toString()
+    : loc
+        .formatString(loc.concept.formFieldLabel, {
+          fieldType: fieldType,
+          lang: loc.language[language]?.toLowerCase(),
+        })
+        .toString();
+
+  return (
+    <>
+      <div className={styles.container}>
+        <div>
+          <LanguageIndicator language={language} />
+        </div>
+        <div className={styles.inputContainer}>
+          {showOriginal && originalText && <OriginalText originalText={originalText} />}
+          <div className={styles.row}>
+            <Field
+              name={fieldName}
+              as={Textarea}
+              label={fieldLabel}
+              rows={rows}
+              cols={90}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

apps/concept-catalog/components/form-fields/text-area-field/text-area-field.module.css

@@ -0,0 +1,22 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: 1em;
+  align-items: center;
+}
+
+.currentValue {
+  composes: currentValue from '../form-fields.module.css';
+}
+
+.container {
+  composes: containerWithLanguage from '../form-fields.module.css';
+}
+
+.inputContainer {
+  composes: inputContainer from '../form-fields.module.css';
+}
+
+.noValueText {
+  composes: noValueText from '../form-fields.module.css';
+}

apps/concept-catalog/hooks/change-requests.ts

@@ -1,5 +1,6 @@
+import { ChangeRequest } from '@catalog-frontend/types';
 import { validOrganizationNumber } from '@catalog-frontend/utils';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 export const useGetChangeRequests = (catalogId: string) => {
   return useQuery({
@@ -22,3 +23,19 @@ export const useGetChangeRequests = (catalogId: string) => {
     refetchOnWindowFocus: false,
   });
 };
+
+export const useCreateChangeRequest = ({ catalogId }) => {
+  return useMutation({
+    mutationFn: async (changeRequest: ChangeRequest) => {
+      return Promise.reject('Not implemented');
+    },
+  });
+};
+
+export const useUpdateChangeRequest = ({ catalogId, changeRequestId }) => {
+  return useMutation({
+    mutationFn: async (changeRequest: ChangeRequest) => {
+      return Promise.reject('Not implemented');
+    },
+  });
+};