diff --git a/mscr-ui/public/locales/en/admin.json b/mscr-ui/public/locales/en/admin.json index 8a37bcca2..64ee53238 100644 --- a/mscr-ui/public/locales/en/admin.json +++ b/mscr-ui/public/locales/en/admin.json @@ -142,6 +142,7 @@ "missing-target-schema": "Target schema hasn't been selected", "modified": "Modified", "optional": "optional", + "register-crosswalk-file-uri-reference": "Provide crosswalk file URI reference", "register-schema": "Register Schema", "register-schema-file-required": "You must provide a schema file to register a schema.", "register-schema-file-uri-reference": "Provide schema file URI reference", diff --git a/mscr-ui/public/locales/fi/admin.json b/mscr-ui/public/locales/fi/admin.json index 242aeced4..8f113d1db 100644 --- a/mscr-ui/public/locales/fi/admin.json +++ b/mscr-ui/public/locales/fi/admin.json @@ -142,6 +142,7 @@ "missing-target-schema": "Kohdeskeemaa ei ole määritelty", "modified": "Muokattu", "optional": "valinnainen", + "register-crosswalk-file-uri-reference": "", "register-schema": "", "register-schema-file-required": "", "register-schema-file-uri-reference": "", diff --git a/mscr-ui/public/locales/sv/admin.json b/mscr-ui/public/locales/sv/admin.json index 4b2a12699..f50fe58ba 100644 --- a/mscr-ui/public/locales/sv/admin.json +++ b/mscr-ui/public/locales/sv/admin.json @@ -142,6 +142,7 @@ "missing-target-schema": "", "modified": "", "optional": "", + "register-crosswalk-file-uri-reference": "", "register-schema": "", "register-schema-file-required": "", "register-schema-file-uri-reference": "", diff --git a/mscr-ui/src/common/components/file-drop-area-mscr/index.tsx b/mscr-ui/src/common/components/file-drop-area-mscr/index.tsx index fb9617ed3..e74b05681 100644 --- a/mscr-ui/src/common/components/file-drop-area-mscr/index.tsx +++ b/mscr-ui/src/common/components/file-drop-area-mscr/index.tsx @@ -128,11 +128,11 @@ export default function FileDropAreaMscr({ >
- {isSchemaUpload && ( + <> setFileUriField(value?.toString() ?? '')} value={fileUriField} disabled={disabled} @@ -144,7 +144,7 @@ export default function FileDropAreaMscr({
{t('upload-documents')} - )} + {file === null ? ( diff --git a/mscr-ui/src/common/components/language-selector/mscr-language-selector.styles.tsx b/mscr-ui/src/common/components/language-selector/mscr-language-selector.styles.tsx index cf86cf030..5f54eb2d2 100644 --- a/mscr-ui/src/common/components/language-selector/mscr-language-selector.styles.tsx +++ b/mscr-ui/src/common/components/language-selector/mscr-language-selector.styles.tsx @@ -11,16 +11,16 @@ export const MultiSelect = styled(MultiSelectDS)<{ $isWide?: boolean }>` `; export const LanguageBlock = styled(Block)` - //border: 1px solid ${(props) => props.theme.suomifi.colors.depthLight1}; - //margin-top: ${(props) => props.theme.suomifi.spacing.xs}; - //background: ${(props) => props.theme.suomifi.colors.highlightLight3}; + //border: 1px solid ${(props) => props.theme.suomifi.colors.depthLight1}; + //margin-top: ${(props) => props.theme.suomifi.spacing.xs}; + //background: ${(props) => props.theme.suomifi.colors.highlightLight3}; .name-input { margin-bottom: ${(props) => props.theme.suomifi.spacing.s}; } `; -export const NameInput = styled(TextInput)` +export const WideTextInput = styled(TextInput)` width: 100%; `; diff --git a/mscr-ui/src/common/components/language-selector/mscr-language-selector.tsx b/mscr-ui/src/common/components/language-selector/mscr-language-selector.tsx index b987f987a..6ebb1b98f 100644 --- a/mscr-ui/src/common/components/language-selector/mscr-language-selector.tsx +++ b/mscr-ui/src/common/components/language-selector/mscr-language-selector.tsx @@ -4,27 +4,24 @@ import { MultiSelectProps, Paragraph, Text, + TextInput, } from 'suomifi-ui-components'; import { LanguageBlock, - NameInput, MultiSelect, DescriptionInput, + WideTextInput, } from './mscr-language-selector.styles'; import { TEXT_AREA_MAX, TEXT_INPUT_MAX } from 'yti-common-ui/utils/constants'; - -export interface LanguageBlockType { - labelText: string; - uniqueItemId: string; - title: string; - description: string; - selected: boolean; -} +import { LanguageBlockType } from 'yti-common-ui/components/form/language-selector'; export default function MscrLanguageSelector( props: MultiSelectProps & { setLanguages: (value: LanguageBlockType[]) => void; userPosted: boolean; + setVersionLabel: (value: string) => void; + versionLabel: string; + versionLabelCaption: string; translations: { textInput: string; textDescription: string; @@ -125,36 +122,51 @@ export default function MscrLanguageSelector( id={`language-block-${item.uniqueItemId}`} > {/* - {item.labelText} - */} - handleTitleChange(e.target.value, item.uniqueItemId)} - status={ - props.userPosted && - props.items.find((l) => l.uniqueItemId === item.uniqueItemId) - ?.title === '' - ? 'error' - : 'default' - } - defaultValue={item.title} - id={`name-input-${item.uniqueItemId}`} - maxLength={TEXT_INPUT_MAX} - disabled={props.disabled} - /> - - handleDescriptionChange(e.target.value, item.uniqueItemId) - } - defaultValue={item.description} - id={`description-input-${item.uniqueItemId}`} - maxLength={TEXT_AREA_MAX} - disabled={props.disabled} - /> + {item.labelText} + */} +
+
+ + handleTitleChange(e.target.value, item.uniqueItemId) + } + status={ + props.userPosted && + props.items.find((l) => l.uniqueItemId === item.uniqueItemId) + ?.title === '' + ? 'error' + : 'default' + } + defaultValue={item.title} + id={`name-input-${item.uniqueItemId}`} + maxLength={TEXT_INPUT_MAX} + disabled={props.disabled} + /> +
+
+ props.setVersionLabel(e.target.value)} + /> +
+
+ + handleDescriptionChange(e.target.value, item.uniqueItemId) + } + defaultValue={item.description} + id={`description-input-${item.uniqueItemId}`} + maxLength={TEXT_AREA_MAX} + disabled={props.disabled} + /> +
+
))} diff --git a/mscr-ui/src/common/components/spinner-overlay/index.tsx b/mscr-ui/src/common/components/spinner-overlay/index.tsx index 134aad4ba..946b635b7 100644 --- a/mscr-ui/src/common/components/spinner-overlay/index.tsx +++ b/mscr-ui/src/common/components/spinner-overlay/index.tsx @@ -4,6 +4,8 @@ export enum SpinnerType { SchemaRegistrationModal = 'schema-registration-modal', CrosswalkRegistrationModal = 'crosswalk-registration-modal', CrosswalkCreationModal = 'crosswalk-creation-modal', + SchemaRevisionModal = 'schema-revision-modal', + CrosswalkRevisionModal = 'crosswalk-revision-modal', } export const delay = async (ms) => { diff --git a/mscr-ui/src/common/interfaces/search.interface.ts b/mscr-ui/src/common/interfaces/search.interface.ts index e50debf2d..784dc8bd8 100644 --- a/mscr-ui/src/common/interfaces/search.interface.ts +++ b/mscr-ui/src/common/interfaces/search.interface.ts @@ -44,6 +44,7 @@ export interface ResultInfo { versionLabel: string; namespace: string; format?: Format; + owner: [] | undefined; } export interface PaginatedQuery { diff --git a/mscr-ui/src/common/utils/getApiErrors.ts b/mscr-ui/src/common/utils/getApiErrors.ts index 9c0feddae..89e94e7d2 100644 --- a/mscr-ui/src/common/utils/getApiErrors.ts +++ b/mscr-ui/src/common/utils/getApiErrors.ts @@ -2,12 +2,9 @@ import { SerializedError } from '@reduxjs/toolkit'; import { AxiosBaseQueryError } from 'yti-common-ui/interfaces/axios-base-query.interface'; import { MSCRError } from '../interfaces/error.interface'; - - export default function getApiError( error: AxiosBaseQueryError | SerializedError ): MSCRError { - const mscrError: MSCRError = {}; mscrError.status = ''; mscrError.message = ''; @@ -25,15 +22,14 @@ export default function getApiError( mscrError.status = error.data.status.toString(); } if ('message' in error.data && typeof error.data.message === 'string') { - mscrError.message = error.data.message ?? 'Unexpected error occured'; + mscrError.message = error.data.message ?? 'Unexpected error occurred'; } if ('title' in error.data && typeof error.data.title === 'string') { - mscrError.message = error.data.title ?? 'Unexpected error occured'; + mscrError.message = error.data.title ?? 'Unexpected error occurred'; } if ('detail' in error.data && typeof error.data.detail === 'string') { mscrError.detail = error.data.detail ?? 'Server Error'; } } - return mscrError; } diff --git a/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx b/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx index 3b20e7a97..cd9c5a25a 100644 --- a/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx +++ b/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const ActionMenuWrapper = styled.div` margin-bottom: -40px; margin-top: 18px; - z-index: 200; + z-index: 0; position: relative; `; diff --git a/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-fields.tsx b/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-fields.tsx index ea95c16b9..08e5aa240 100644 --- a/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-fields.tsx +++ b/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-fields.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'next-i18next'; -import { Dropdown, DropdownItem, Text, TextInput } from 'suomifi-ui-components'; +import { DropdownItem, Text } from 'suomifi-ui-components'; import { FormErrors } from './validate-crosswalk-form'; import { CrosswalkFormType } from '@app/common/interfaces/crosswalk.interface'; import TargetAndSourceSchemaSelector from './target-and-source-schema-selector'; @@ -17,6 +17,7 @@ import { formatsAvailableForCrosswalkCreation, formatsAvailableForCrosswalkRegistration, } from '@app/common/interfaces/format.interface'; +import { WideDropdown } from '@app/modules/form/crosswalk-form/crosswalk-form.styles'; interface RegisterCrosswalkFormProps { formData: CrosswalkFormType; @@ -27,6 +28,7 @@ interface RegisterCrosswalkFormProps { disabled?: boolean; errors?: FormErrors; editMode?: boolean; + groupWorkspacePid: string | undefined; } export default function CrosswalkFormFields({ @@ -36,8 +38,8 @@ export default function CrosswalkFormFields({ isRevision, userPosted, disabled, - errors, - editMode, + errors, groupWorkspacePid + }: RegisterCrosswalkFormProps) { const { t } = useTranslation('admin'); @@ -48,6 +50,7 @@ export default function CrosswalkFormFields({ setFormData={setFormData} createNew={createNew} schemaSelectorDisabled={isRevision} + groupWorkspacePid={groupWorkspacePid} > {createNew && ( @@ -55,36 +58,58 @@ export default function CrosswalkFormFields({ {formatsAvailableForCrosswalkCreation.join(', ')} )} - {!createNew && renderCrosswalkFormat()} {renderLanguages()} - {renderVersionLabel()} - {!createNew && renderState()} + {!createNew && renderCrosswalkFormatAndState()} ); - function renderCrosswalkFormat() { + function renderCrosswalkFormatAndState() { // may be load the formats from an array return ( -
- - setFormData({ - ...formData, - format: e, - }) - } - > - {formatsAvailableForCrosswalkRegistration.map((format) => ( - - {format} - - ))} - -
+ <> +
+
+ + setFormData({ + ...formData, + format: e, + }) + } + > + {formatsAvailableForCrosswalkRegistration.map((format) => ( + + {format} + + ))} + +
+
+ + setFormData({ + ...formData, + state: e, + }) + } + > + {possibleStatesAtRegistration.map((state) => ( + + {state} + + ))} + +
+
+ ); } @@ -105,6 +130,9 @@ export default function CrosswalkFormFields({ languages: e, }) } + versionLabelCaption={t('crosswalk-form.version-label')} + versionLabel={formData.versionLabel ?? '1'} + setVersionLabel={(e) => setVersionLabel(e)} userPosted={userPosted} translations={{ textInput: t('language-input-text'), @@ -127,44 +155,11 @@ export default function CrosswalkFormFields({ ); } - function renderVersionLabel() { - return ( - - setFormData({ - ...formData, - versionLabel: value as string, - }) - } - /> - ); - } - - function renderState() { - return ( -
- - setFormData({ - ...formData, - state: e, - }) - } - > - {possibleStatesAtRegistration.map((state) => ( - - {state} - - ))} - -
- ); + function setVersionLabel(value: string) { + setFormData({ + ...formData, + versionLabel: value as string, + }); } //Currently Hidden from the form diff --git a/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-modal.tsx b/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-modal.tsx index 26404d790..0cb773b22 100644 --- a/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-modal.tsx +++ b/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form-modal.tsx @@ -64,6 +64,7 @@ export default function CrosswalkFormModal({ const [putCrosswalk, newCrosswalkResult] = usePutCrosswalkMutation(); const [, setIsValid] = useState(false); const [fileData, setFileData] = useState(); + const [fileUri, setFileUri] = useState(''); const [submitAnimationVisible, setSubmitAnimationVisible] = useState(false); @@ -78,6 +79,7 @@ export default function CrosswalkFormModal({ setUserPosted(false); setFormData(crosswalkFormInitialData); setFileData(null); + setFileUri(null); }, [crosswalkFormInitialData]); useEffect(() => { @@ -104,6 +106,14 @@ export default function CrosswalkFormModal({ return Promise.resolve(); }; + function isFormValid() { + if (errors) { + return !Object.values(errors).includes(true); + } else { + return false; + } + } + const handleSubmit = () => { scrollToModalTop(); setUserPosted(true); @@ -123,18 +133,24 @@ export default function CrosswalkFormModal({ pid, authenticatedUser ); - // console.log('payload: ', payload); - if (!createNew && fileData) { - const crosswalkFormData = new FormData(); - crosswalkFormData.append('metadata', JSON.stringify(payload)); - crosswalkFormData.append('file', fileData); + const crosswalkFormData = new FormData(); + crosswalkFormData.append('metadata', JSON.stringify(payload)); + if (isFormValid() && !createNew && fileUri && fileUri.length > 0) { + crosswalkFormData.append('contentURL', fileUri); + Promise.all([spinnerDelay(), putCrosswalkFull(crosswalkFormData)]).then( + (values) => { + setSubmitAnimationVisible(false); + } + ); + } else if (isFormValid() && !createNew && fileData) { + crosswalkFormData.append('file', fileData); Promise.all([spinnerDelay(), putCrosswalkFull(crosswalkFormData)]).then( (values) => { setSubmitAnimationVisible(false); } ); - } else if (createNew) { + } else if (isFormValid() && createNew) { Promise.all([spinnerDelay(), putCrosswalk(payload)]).then((values) => { setSubmitAnimationVisible(false); }); @@ -156,6 +172,10 @@ export default function CrosswalkFormModal({ const inputErrors = getErrors(t, errors); const result = createNew ? newCrosswalkResult : registerCrosswalkResult; if (result.isError) { + const errorObject = getApiError(result.error); + if (errorObject.status && errorObject.message) { + inputErrors.push(`${errorObject.status}: ${errorObject.message}`); + } const errorMessage = getApiError(result.error).message; if (errorMessage) return [...inputErrors, errorMessage]; } @@ -233,6 +253,7 @@ export default function CrosswalkFormModal({ submitAnimationVisible } errors={userPosted ? errors : undefined} + groupWorkspacePid={pid} /> {!createNew && ( )} diff --git a/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form.styles.tsx b/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form.styles.tsx new file mode 100644 index 000000000..96aebc095 --- /dev/null +++ b/mscr-ui/src/modules/form/crosswalk-form/crosswalk-form.styles.tsx @@ -0,0 +1,14 @@ +import styled from 'styled-components'; +import {Block, Dropdown, SingleSelect} from 'suomifi-ui-components'; + +export const WideDropdown = styled(Dropdown)` + width: 100%; +`; + +export const WideSingleSelect = styled(SingleSelect)` + width: 100%; +`; + +export const CrosswalkModal = styled(Block)` + width: 100%; +`; diff --git a/mscr-ui/src/modules/form/crosswalk-form/target-and-source-schema-selector.tsx b/mscr-ui/src/modules/form/crosswalk-form/target-and-source-schema-selector.tsx index 8192f393b..8c0fc5ad1 100644 --- a/mscr-ui/src/modules/form/crosswalk-form/target-and-source-schema-selector.tsx +++ b/mscr-ui/src/modules/form/crosswalk-form/target-and-source-schema-selector.tsx @@ -1,4 +1,4 @@ -import { SingleSelect, TextInput } from 'suomifi-ui-components'; +import { DropdownItem, TextInput } from 'suomifi-ui-components'; import { CrosswalkFormType } from '@app/common/interfaces/crosswalk.interface'; import * as React from 'react'; import { @@ -10,44 +10,75 @@ import { useRouter } from 'next/router'; import { MscrSearchResult } from '@app/common/interfaces/search.interface'; import { getLanguageVersion } from '@app/common/utils/get-language-version'; import { ModelFormContainer } from '@app/modules/form/form.styles'; -import { formatsAvailableForCrosswalkCreation } from '@app/common/interfaces/format.interface'; import { useTranslation } from 'next-i18next'; +import { formatsAvailableForCrosswalkCreation } from '@app/common/interfaces/format.interface'; +import { + CrosswalkModal, + WideDropdown, + WideSingleSelect, +} from '@app/modules/form/crosswalk-form/crosswalk-form.styles'; + +import { + selectLogin, +} from '@app/common/components/login/login.slice'; +import { useSelector } from 'react-redux'; +import { User } from 'yti-common-ui/interfaces/user.interface'; interface CrosswalkFormProps { formData: CrosswalkFormType; setFormData: (value: CrosswalkFormType) => void; createNew: boolean; schemaSelectorDisabled?: boolean; + groupWorkspacePid: string | undefined; } interface SelectableSchema { labelText: string; uniqueItemId: string; + organizationIds: string[]; + owner: string[]; +} + +interface SelectableWorkspace { + labelText: string; + uniqueItemId: string; } export default function TargetAndSourceSchemaSelector({ formData, setFormData, createNew, - schemaSelectorDisabled, + schemaSelectorDisabled, groupWorkspacePid }: CrosswalkFormProps) { + const user: User = useSelector(selectLogin()); const formatRestrictions = createNew ? formatsAvailableForCrosswalkCreation : []; const { data, isSuccess } = useGetPublicSchemasQuery(formatRestrictions); - const { data: sourceSchemaData } = useGetSchemaQuery( - formData.sourceSchema, - { skip: !schemaSelectorDisabled } - ); - const { data: targetSchemaData } = useGetSchemaQuery( - formData.targetSchema, - { skip: !schemaSelectorDisabled } - ); + + const { data: sourceSchemaData } = useGetSchemaQuery(formData.sourceSchema, { + skip: !schemaSelectorDisabled, + }); + const { data: targetSchemaData } = useGetSchemaQuery(formData.targetSchema, { + skip: !schemaSelectorDisabled, + }); //defaultSchemas.push({ labelText: 'test', uniqueItemId: 'test'}); const [dataLoaded, setDataLoaded] = useState(false); const [defaultSchemas, setDefaultSchemas] = useState( Array() ); + const [sourceSchemas, setSourceSchemas] = useState(Array()); + const [targetSchemas, setTargetSchemas] = useState(Array()); + + const workspaceValuesInit: SelectableWorkspace[] = []; + const [workspaceValues, setWorkspaceValues] = + useState(workspaceValuesInit); + + const [selectedSourceWorkspace, setSelectedSourceWorkspace] = + useState(''); + const [selectedTargetWorkspace, setSelectedTargetWorkspace] = + useState(''); + const [defaultSourceSchema, setDefaultSourceSchema] = useState(''); const [defaultTargetSchema, setDefaultTargetSchema] = useState(''); const router = useRouter(); @@ -56,39 +87,121 @@ export default function TargetAndSourceSchemaSelector({ useEffect(() => { if (schemaSelectorDisabled && sourceSchemaData && targetSchemaData) { - setDefaultSourceSchema(getLanguageVersion({ - data: sourceSchemaData.label, - lang, - })); - setDefaultTargetSchema(getLanguageVersion({ - data: targetSchemaData.label, - lang, - })); + setDefaultSourceSchema( + getLanguageVersion({ + data: sourceSchemaData.label, + lang, + }) + ); + setDefaultTargetSchema( + getLanguageVersion({ + data: targetSchemaData.label, + lang, + }) + ); } }, [lang, schemaSelectorDisabled, sourceSchemaData, targetSchemaData]); + const workspaceValuesPersonalCrosswalks: SelectableWorkspace[] = [ + { + labelText: 'All', + uniqueItemId: 'all', + }, + { + labelText: 'Personal workspace', + uniqueItemId: 'personalWorkspace', + }, + ]; + + const workspaceValuesGroupCrosswalks: SelectableWorkspace[] = [ + { + labelText: 'All', + uniqueItemId: 'all', + }, + { + labelText: 'Group workspace', + uniqueItemId: 'groupWorkspace', + }, + ]; + useEffect(() => { - const fetchedSchemas: { labelText: string; uniqueItemId: string }[] = []; + const fetchedSchemas: SelectableSchema[] = []; data?.hits.hits.forEach((item: MscrSearchResult) => { const label = getLanguageVersion({ data: item._source.label, lang, }); - const schema = { labelText: label, uniqueItemId: item._source.id }; + + const schema = { + labelText: label, + uniqueItemId: item._source.id, + organizationIds: + item._source.organizations.length > 0 + ? item._source.organizations.map(organization => organization.id) + : [''], + owner: + item._source?.owner && item._source?.owner?.length > 0 + ? item._source.owner + : [], + }; fetchedSchemas.push(schema); }); setDefaultSchemas(fetchedSchemas); + setSourceSchemas(fetchedSchemas); + setTargetSchemas(fetchedSchemas); setDataLoaded(true); - // console.log('schemas', defaultSchemas); + setSelectedSourceWorkspace('all'); + setSelectedTargetWorkspace('all'); + + if (router.asPath.includes('personal')) { + setWorkspaceValues([...workspaceValuesPersonalCrosswalks]); + } else { + setWorkspaceValues([...workspaceValuesGroupCrosswalks]); + } }, [data?.hits.hits, isSuccess, lang]); + useEffect(() => { + if (selectedSourceWorkspace === 'all') { + setSourceSchemas(defaultSchemas); + } else if (selectedSourceWorkspace === 'personalWorkspace') { + setSourceSchemas( + defaultSchemas.filter((item) => item.owner.includes(user.id)) + ); + } else { + setSourceSchemas( + defaultSchemas.filter((item) => { + if (groupWorkspacePid) { + return item.organizationIds.includes(groupWorkspacePid); + } + }) + ); + } + }, [selectedSourceWorkspace, groupWorkspacePid]); + + useEffect(() => { + if (selectedTargetWorkspace === 'all') { + setTargetSchemas(defaultSchemas); + } else if (selectedTargetWorkspace === 'personalWorkspace') { + setTargetSchemas( + defaultSchemas.filter((item) => item.owner.includes(user.id)) + ); + } else { + setTargetSchemas( + defaultSchemas.filter((item) => { + if (groupWorkspacePid) { + return item.organizationIds.includes(groupWorkspacePid); + } + }) + ); + } + }, [selectedTargetWorkspace, groupWorkspacePid]); + function setSource(selectedSchemaId: string | null) { if (selectedSchemaId) { setFormData({ ...formData, sourceSchema: selectedSchemaId, }); - // console.log('SOURCE SET', formData); } } @@ -98,83 +211,124 @@ export default function TargetAndSourceSchemaSelector({ ...formData, targetSchema: selectedSchemaId, }); - // console.log('TARGET SET', formData.targetSchema); } } return ( -
+ {dataLoaded && ( -
-
- {!schemaSelectorDisabled && ( - - amount === 1 ? 'option available' : 'options available' - } - onItemSelect={setSource} - /> - )} - {schemaSelectorDisabled && ( - - )} - {/**/} - {/*
*/} - {/*

Select a schema to see properties.

*/} - {/*
*/} - {/**/} -
+ <> +
+
+ {!schemaSelectorDisabled && ( + <> +
+ { + setSelectedSourceWorkspace(e); + }} + > + {workspaceValues.map((format) => ( + + {format.labelText} + + ))} + +
+ + amount === 1 ? 'option available' : 'options available' + } + onItemSelect={setSource} + /> + + )} + {schemaSelectorDisabled && ( + + )} + {/**/} + {/*
*/} + {/*

Select a schema to see properties.

*/} + {/*
*/} + {/**/} +
-
- {!schemaSelectorDisabled && ( - - amount === 1 ? 'option available' : 'options available' - } - onItemSelect={setTarget} - /> - )} - {schemaSelectorDisabled && ( - - )} - {/**/} - {/*
*/} - {/*

Select a schema to see properties.

*/} - {/*
*/} - {/**/} +
+ {!schemaSelectorDisabled && ( + <> +
+ { + setSelectedTargetWorkspace(e); + }} + > + {workspaceValues.map((format) => ( + + {format.labelText} + + ))} + +
+ + amount === 1 ? 'option available' : 'options available' + } + onItemSelect={setTarget} + /> + + )} + {schemaSelectorDisabled && ( + + )} + {/**/} + {/*
*/} + {/*

Select a schema to see properties.

*/} + {/*
*/} + {/**/} +
-
+ )} -
+ ); } diff --git a/mscr-ui/src/modules/form/revision-form-modal/index.tsx b/mscr-ui/src/modules/form/revision-form-modal/index.tsx index b0bb4ba48..8974b8c56 100644 --- a/mscr-ui/src/modules/form/revision-form-modal/index.tsx +++ b/mscr-ui/src/modules/form/revision-form-modal/index.tsx @@ -206,26 +206,40 @@ export default function RevisionFormModal({ const spinnerDelay = async () => { setSubmitAnimationVisible(true); - await delay(2000); + if (!(errors && Object.values(errors).includes(true))) { + await delay(2000); + } return Promise.resolve(); }; - const handleSubmit = () => { - scrollToModalTop(); - setUserPosted(true); - if (!formData) { - return; - } + function isFormValid() { + if (errors && Object.values(errors).includes(true)) { + return false; + } else if (gatherInputError().length > 0) { + return false; + } else return true; + } + + function validateForm() { let errors; - if (type == Type.Schema) { + if (type == Type.Schema && formData) { errors = validateSchemaForm(formData, fileData, fileUri); setErrors(errors); - } else { + } else if (formData) { errors = validateCrosswalkForm(formData as CrosswalkFormType); setErrors(errors); } + } + + const handleSubmit = () => { + scrollToModalTop(); + setUserPosted(true); + if (!formData) { + return; + } + validateForm(); - if (Object.values(errors).includes(true)) { + if (errors && Object.values(errors).includes(true)) { return; } const validatedFormData: SchemaFormType = { @@ -296,7 +310,6 @@ export default function RevisionFormModal({ errors = validateCrosswalkForm(formData as CrosswalkFormType); setErrors(errors); } - //console.log(errors); }, [userPosted, formData, fileData, fileUri, type]); // This part was checking the user permission and based on that showing the button in every render @@ -319,12 +332,13 @@ export default function RevisionFormModal({ } else if (resultCrosswalkFullRevision.isError) { errorObject = getApiError(resultCrosswalkFullRevision.error); } else { - return; + return ''; } if (errorObject.status && errorObject.message) { errorMessage = `${errorObject.status}: ${errorObject.message}`; return errorMessage; } + return ''; } function getErrorDetail() { @@ -408,7 +422,11 @@ export default function RevisionFormModal({ {submitAnimationVisible && ( )} @@ -459,10 +477,12 @@ export default function RevisionFormModal({ )} {userPosted && gatherInputError() && !submitAnimationVisible && ( - + <> + + )} {/*Showing API Error if only input form error is not present*/} {userPosted && diff --git a/mscr-ui/src/modules/form/schema-form/schema-form-fields.tsx b/mscr-ui/src/modules/form/schema-form/schema-form-fields.tsx index 20dde4fee..6686005b4 100644 --- a/mscr-ui/src/modules/form/schema-form/schema-form-fields.tsx +++ b/mscr-ui/src/modules/form/schema-form/schema-form-fields.tsx @@ -1,17 +1,16 @@ /* eslint-disable */ import { useTranslation } from 'next-i18next'; -import { Dropdown, DropdownItem, TextInput } from 'suomifi-ui-components'; +import { DropdownItem } from 'suomifi-ui-components'; import { ModelFormContainer } from '../form.styles'; -import LanguageSelector from 'yti-common-ui/components/form/language-selector'; import { FormErrors } from './validate-schema-form'; import { SchemaFormType } from '@app/common/interfaces/schema.interface'; import { Format, - formatsAvailableForCrosswalkRegistration, formatsAvailableForSchemaRegistration, } from '@app/common/interfaces/format.interface'; import { State } from '@app/common/interfaces/state.interface'; import MscrLanguageSelector from '@app/common/components/language-selector/mscr-language-selector'; +import { WideDropdown } from '@app/modules/form/crosswalk-form/crosswalk-form.styles'; interface SchemaFormProps { formData: SchemaFormType; @@ -37,39 +36,65 @@ SchemaFormProps) { // Creating the actual schema Input form return ( - {renderSchemaFormat()} {renderLanguages()} - {/*!editMode && renderContributors()*/} - {renderVersionLabel()} - {renderState()} + {renderFormatAndState()} {/*editMode && renderContributors()*/} ); - function renderSchemaFormat() { + function renderFormatAndState() { + // may be load the formats from an array return ( -
- - setFormData({ - ...formData, - format: e, - }) - } - > - {formatsAvailableForSchemaRegistration.map((format) => ( - - {format} - - ))} - -
+ <> +
+
+ + setFormData({ + ...formData, + format: e, + }) + } + > + {formatsAvailableForSchemaRegistration.map((format) => ( + + {format} + + ))} + +
+
+
+ + setFormData({ + ...formData, + state: e as State, + }) + } + > + {'DRAFT'} + {'PUBLISHED'} + {'DEPRECATED'} + +
+
+
+ ); } @@ -97,6 +122,9 @@ SchemaFormProps) { textDescription: t('schema-form.description'), optionalText: '', }} + versionLabelCaption={t('schema-form.version-label')} + versionLabel={formData.versionLabel ?? '1'} + setVersionLabel={(e) => setVersionLabel(e)} allowItemAddition={false} ariaChipActionLabel={''} ariaSelectedAmountText={''} @@ -113,72 +141,10 @@ SchemaFormProps) { ); } - function renderVersionLabel() { - return ( - - setFormData({ - ...formData, - versionLabel: value as string, - }) - } - /> - ); - } - - function renderState() { - return ( -
- - setFormData({ - ...formData, - state: e as State, - }) - } - > - {'DRAFT'} - {'PUBLISHED'} - {'DEPRECATED'} - -
- ); + function setVersionLabel(value: any) { + setFormData({ + ...formData, + versionLabel: value as string, + }); } - - // function renderContributors() { - // return ( - // - // setFormData({ - // ...formData, - // organizations: e, - // }) - // } - // items={formData.organizations} - // status={ - // 'default' - // /* Old value below, can it be perma-removed? (leftover from https://github.com/CSCfi/mscr-ui-monorepo/pull/17) - // {userPosted && errors?.organizations ? 'error' : 'default'}*/ - // } - // ariaChipActionLabel={''} - // ariaSelectedAmountText={''} - // ariaOptionsAvailableText={''} - // ariaOptionChipRemovedText={''} - // noItemsText={''} - // /> - // ); - // } } diff --git a/mscr-ui/src/modules/form/schema-form/schema-form-modal.tsx b/mscr-ui/src/modules/form/schema-form/schema-form-modal.tsx index 38581da32..2faf3de73 100644 --- a/mscr-ui/src/modules/form/schema-form/schema-form-modal.tsx +++ b/mscr-ui/src/modules/form/schema-form/schema-form-modal.tsx @@ -141,7 +141,6 @@ export default function SchemaFormModal({ } else { return; } - Promise.all([spinnerDelay(), putSchemaFull(schemaFormData)]).then( (values) => { setSubmitAnimationVisible(false); diff --git a/mscr-ui/src/pages/mscr-style-customizations.scss b/mscr-ui/src/pages/mscr-style-customizations.scss index 8a15c446b..d9ea0d333 100644 --- a/mscr-ui/src/pages/mscr-style-customizations.scss +++ b/mscr-ui/src/pages/mscr-style-customizations.scss @@ -133,6 +133,42 @@ body { height: calc(100% - 70vh); } } + &.crosswalk-revision-modal { + height: calc(100% - 44vh); + @media screen and (min-height: 600px) { + height: calc(100% - 40vh); + } + @media screen and (min-height: 650px) { + height: calc(100% - 40vh); + } + @media screen and (min-height: 800px) { + height: calc(100% - 53vh); + } + @media screen and (min-height: 950px) { + height: calc(100% - 58vh); + } + @media screen and (min-height: 1150px) { + height: calc(100% - 65vh); + } + } + &.schema-revision-modal { + height: calc(100% - 48vh); + @media screen and (min-height: 600px) { + height: calc(100% - 39vh); + } + @media screen and (min-height: 650px) { + height: calc(100% - 36vh); + } + @media screen and (min-height: 800px) { + height: calc(100% - 30vh); + } + @media screen and (min-height: 1000px) { + height: calc(100% - 30vh); + } + @media screen and (min-height: 1150px) { + height: calc(100% - 41vh); + } + } } .crosswalk-editor { @@ -299,20 +335,4 @@ body { .selected-row { background: #eaf2fa; } - - /* CROSSWALK SELECTION */ - .crosswalk-selection-modal { - font-size: 0.85rem; - - .source-select-dropdown { - width: 100% !important; - } - - .source-select-info-box { - margin-top: 15px; - padding: 5px; - width: 100%; - background: #e2f1fd; - } - } }