Skip to content

Commit

Permalink
Merge pull request #362 from virtualidentityag/release-2024-03-20
Browse files Browse the repository at this point in the history
release 2024-03-20
  • Loading branch information
web-mi authored Mar 20, 2024
2 parents 517dd07 + 2439047 commit c8d76f4
Show file tree
Hide file tree
Showing 35 changed files with 1,159 additions and 545 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.github_token }}
- name: Bump version
if: startsWith(env.BRANCH,'release') == true
if: env.BRANCH == 'release'
run: |
git config --local user.email "[email protected]"
git config --local user.name "GitHub Action"
yarn run release
env:
GITHUB_TOKEN: ${{ secrets.github_token }}
- name: Push changes
if: startsWith(env.BRANCH,'release') == true
if: env.BRANCH == 'release'
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "adminpanel",
"version": "0.1.0",
"version": "0.2.0",
"private": true,
"homepage": "http://tenant1.onlineberatung.local/admin",
"dependencies": {
Expand Down Expand Up @@ -48,6 +48,7 @@
"start": "vite",
"build": "tsc && vite build",
"serve": "vite preview",
"release": "standard-version",
"test": "vite test",
"lint": "yarn run lint:css && yarn run lint:js && yarn run lint:formatting",
"lint:css": "stylelint --fix \"src/**/*.(s(c|a)ss|css|less)\"",
Expand Down Expand Up @@ -108,6 +109,7 @@
"prettier": "^2.5.1",
"react-error-overlay": "6.0.10",
"sass": "^1.56.1",
"standard-version": "^9.5.0",
"stylelint": "^14.4.0",
"stylelint-config-idiomatic-order": "^8.1.0",
"stylelint-config-prettier": "^9.0.3",
Expand Down
2 changes: 2 additions & 0 deletions src/api/agency/addAgencyData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ function buildAgencyDataRequestBody(consultingTypeResponseId: string | number, f
offline: formData.offline,
demographics: formData.demographics,
counsellingRelations: formData.counsellingRelations,
dataProtection: formData.dataProtection,
agencyLogo: formData.agencyLogo,
});
}

Expand Down
1 change: 1 addition & 0 deletions src/api/agency/updateAgencyData.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const updateAgencyData = async (agencyModel: AgencyData, formInput: Agenc
demographics: formInput.demographics,
counsellingRelations: formInput.counsellingRelations,
dataProtection: formInput.dataProtection,
agencyLogo: formInput.agencyLogo,
};

return fetchData({
Expand Down
16 changes: 14 additions & 2 deletions src/components/FormFileUploaderField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ interface FormFileUploaderFieldProps {
labelKey?: string;
name?: string | string[];
allowIcon?: boolean;
tooltip?: string;
}

interface FormRichTextEditorProps {
Expand Down Expand Up @@ -59,10 +60,21 @@ const FormFileUploaderLocal = ({ onChange, value, allowIcon }: FormRichTextEdito
);
};

export const FormFileUploaderField = ({ name, labelKey, className, allowIcon }: FormFileUploaderFieldProps) => {
export const FormFileUploaderField = ({
name,
labelKey,
className,
allowIcon,
tooltip,
}: FormFileUploaderFieldProps) => {
const { t } = useTranslation();
return (
<Form.Item name={name} label={t(labelKey)} className={classNames(className, styles.richEditor)}>
<Form.Item
name={name}
label={t(labelKey)}
className={classNames(className, styles.richEditor)}
tooltip={tooltip}
>
<FormFileUploaderLocal allowIcon={allowIcon} />
</Form.Item>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable react/no-children-prop */
import clsx from 'clsx';
import { EditorState, RichUtils } from 'draft-js';
import { RichUtils, SelectionState } from 'draft-js';
import React, { MouseEvent, ReactNode, useCallback, useMemo } from 'react';
import { DraftJsStyleButtonProps } from '@draft-js-plugins/buttons';
import { Button } from 'antd';
Expand All @@ -13,7 +12,7 @@ interface ButtonProps extends DraftJsStyleButtonProps {
interface CreateBlockStyleButtonProps extends Omit<DraftJsStyleButtonProps, 'buttonProps'> {
blockType: string;
children: ReactNode;
editorState: EditorState;
selectionState: SelectionState;
buttonProps?: ButtonProps;
}

Expand All @@ -23,14 +22,15 @@ const BlockStyleButton = ({
theme,
buttonProps,
setEditorState,
editorState,
getEditorState,
selectionState,
}: CreateBlockStyleButtonProps) => {
const toggleStyle = useCallback(
(event: MouseEvent): void => {
event.preventDefault();
setEditorState(RichUtils.toggleBlockType(editorState, blockType));
setEditorState(RichUtils.toggleBlockType(getEditorState(), blockType));
},
[editorState, setEditorState],
[setEditorState, getEditorState],
);

const preventBubblingUp = useCallback((event: MouseEvent): void => {
Expand All @@ -39,27 +39,30 @@ const BlockStyleButton = ({

const blockTypeIsActive = useMemo((): boolean => {
// if the button is rendered before the editor
const editorState = getEditorState();
if (!editorState) {
return false;
}

const type = editorState.getCurrentContent().getBlockForKey(editorState.getSelection().getStartKey()).getType();
const type =
selectionState && editorState.getCurrentContent().getBlockForKey(selectionState.getStartKey()).getType();
return type === blockType;
}, [editorState]);
}, [selectionState, getEditorState]);

const className = blockTypeIsActive ? clsx(theme.button, theme.active) : theme.button;

return (
<Button
children={children}
className={className}
onMouseDown={preventBubblingUp}
onClick={toggleStyle}
size="small"
role="button"
aria-label={`create ${blockType}`}
{...buttonProps}
/>
>
{children}
</Button>
);
};
export default BlockStyleButton;
132 changes: 132 additions & 0 deletions src/components/FormPluginEditor/Editor.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import DisabledContext from 'antd/es/config-provider/DisabledContext';
import {
ContentState,
convertFromHTML,
DraftEditorCommand,
DraftHandleValue,
EditorState,
getDefaultKeyBinding,
RichUtils,
} from 'draft-js';
import { stateToHTML } from 'draft-js-export-html';
import PluginsEditor from '@draft-js-plugins/editor';
import classNames from 'classnames';
import createPlaceholderPlugin from '../../utils/draftjs/placeholderPlugin';

const Editor = ({
onChange,
value = '',
onSelectionChange,
onInlineStyleChange,
placeholders,
onBlur,
onFocus,
placeholder,
editorPlugins,
}: any) => {
const disabled = useContext(DisabledContext);

const plugins = useMemo(() => [...editorPlugins, createPlaceholderPlugin({ placeholders })], [placeholders]);

const [editorState, setEditorState] = useState<EditorState>(() => {
const { contentBlocks, entityMap } = convertFromHTML(value);
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
return EditorState.createWithContent(contentState);
});

useEffect(() => {
setEditorState((state) => {
const contentState = state.getCurrentContent();
contentState.getAllEntities().forEach((entity, entityKey) => {
contentState.mergeEntityData(entityKey, { disabled });
});
return EditorState.createWithContent(contentState, state.getDecorator());
});
}, [disabled]);

useEffect(() => {
const resetState = () => {
if (editorState.getSelection().getHasFocus()) return;
onSelectionChange(undefined);
onInlineStyleChange(undefined);
};

const selection = editorState.getSelection();
if (!selection.getHasFocus()) return resetState;
onSelectionChange(selection);
onInlineStyleChange(editorState.getCurrentInlineStyle());

return resetState;
}, [editorState, onSelectionChange, onInlineStyleChange]);

const handleChange = useCallback(
(edited: EditorState) => {
setEditorState(edited);
const contentState = edited.getCurrentContent();
onChange(contentState.hasText() ? stateToHTML(contentState) : '');
},
[onChange],
);

// Just because the library isn't properly typed
const extraProps = { onBlur, onFocus };

const className = [`RichEditor-editor`];
const contentState = editorState.getCurrentContent();
if (disabled) {
className.push('RichEditor-disabled');
} else if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className.push('RichEditor-hidePlaceholder');
}
}

const handleKeyCommand = useCallback((command: string, editorStat: EditorState): DraftHandleValue => {
const newState = RichUtils.handleKeyCommand(editorStat, command);
if (newState) {
handleChange(newState);
return 'handled';
}
return 'not-handled';
}, []);

const mapKeyToEditorCommand = useCallback(
(e): DraftEditorCommand | null => {
if (e.keyCode === 9) {
const newEditorState = RichUtils.onTab(e, editorState, 4);
if (newEditorState === editorState) {
handleChange(newEditorState);
}
return null;
}
return getDefaultKeyBinding(e);
},
[editorState],
);

const editorRef = useRef<any>();
const focus = useCallback(() => {
editorRef.current.focus();
}, []);

return (
<>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
<div className={classNames(className)} onClick={focus}>
<PluginsEditor
ref={editorRef}
editorState={editorState}
onChange={handleChange}
placeholder={placeholder}
plugins={plugins}
readOnly={disabled}
{...extraProps}
handleKeyCommand={handleKeyCommand}
keyBindingFn={mapKeyToEditorCommand}
/>
</div>
</>
);
};
export default Editor;
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@
}
}

&-disabled {
cursor: not-allowed;
}

&-toolbar {
&-link,
&-image,
Expand Down
Loading

0 comments on commit c8d76f4

Please sign in to comment.