p90524618
/
answer
mirror of https://gitee.com/answerdev/answer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: admin/settings-users

This commit is contained in:
haitaoo 2023-04-17 16:42:53 +08:00
parent 10afa0a47b
commit 9da53361a7
10 changed files with 192 additions and 382 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
i18n/en_US.yaml
View File

@ -1459,6 +1459,18 @@ ui:
text: For users without a custom avatar of their own.
profile_editable:
title: Profile Editable
allow_update_display_name:
label: Allow users to change their display name
allow_update_username:
label: Allow users to change their username
allow_update_avatar:
label: Allow users to change their profile image
allow_update_bio:
label: Allow users to change their about me
allow_update_website:
label: Allow users to change their website
allow_update_location:
label: Allow users to change their location
form:
optional: (optional)

51
ui/src/components/SchemaForm/components/Check.tsx
View File

@ -5,8 +5,6 @@ import type * as Type from '@/common/interface';
interface Props {
type: 'radio' | 'checkbox';
title: string;
desc: string | undefined;
fieldName: string;
onChange: (evt: React.ChangeEvent<HTMLInputElement>, ...rest) => void;
enumValues: (string | boolean | number)[];
@ -15,8 +13,6 @@ interface Props {
}
const Index: FC<Props> = ({
type = 'radio',
title,
desc,
fieldName,
onChange,
enumValues,
@ -25,33 +21,26 @@ const Index: FC<Props> = ({
}) => {
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<Stack direction="horizontal">
{enumValues?.map((item, index) => {
return (
<Form.Check
key={String(item)}
inline
required
type={type}
name={fieldName}
id={`form-${String(item)}`}
label={enumNames?.[index]}
checked={(fieldObject?.value || '') === item}
feedback={fieldObject?.errorMsg}
feedbackType="invalid"
isInvalid={fieldObject?.isInvalid}
onChange={(evt) => onChange(evt, index)}
/>
);
})}
</Stack>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
<Stack direction="horizontal">
{enumValues?.map((item, index) => {
return (
<Form.Check
key={String(item)}
inline
required
type={type}
name={fieldName}
id={`form-${String(item)}`}
label={enumNames?.[index]}
checked={(fieldObject?.value || '') === item}
feedback={fieldObject?.errorMsg}
feedbackType="invalid"
isInvalid={fieldObject?.isInvalid}
onChange={(evt) => onChange(evt, index)}
/>
);
})}
</Stack>
);
};

29
ui/src/components/SchemaForm/components/Input.tsx
View File

@ -4,8 +4,6 @@ import { Form } from 'react-bootstrap';
import type * as Type from '@/common/interface';
interface Props {
title: string;
desc: string | undefined;
type: string | undefined;
placeholder: string | undefined;
fieldName: string;
@ -13,9 +11,7 @@ interface Props {
formData: Type.FormDataType;
}
const Index: FC<Props> = ({
title,
type = 'text',
desc,
placeholder = '',
fieldName,
onChange,
@ -23,22 +19,15 @@ const Index: FC<Props> = ({
}) => {
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<Form.Control
name={fieldName}
placeholder={placeholder}
type={type}
value={fieldObject?.value || ''}
onChange={onChange}
style={type === 'color' ? { width: '6rem' } : {}}
isInvalid={fieldObject?.isInvalid}
/>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
<Form.Control
name={fieldName}
placeholder={placeholder}
type={type}
value={fieldObject?.value || ''}
onChange={onChange}
style={type === 'color' ? { width: '6rem' } : {}}
isInvalid={fieldObject?.isInvalid}
/>
);
};

37
ui/src/components/SchemaForm/components/Select.tsx
View File

@ -4,7 +4,6 @@ import { Form } from 'react-bootstrap';
import type * as Type from '@/common/interface';
interface Props {
title: string;
desc: string | undefined;
fieldName: string;
onChange: (evt: React.ChangeEvent<HTMLSelectElement>) => void;
@ -13,7 +12,6 @@ interface Props {
formData: Type.FormDataType;
}
const Index: FC<Props> = ({
title,
desc,
fieldName,
onChange,
@ -23,27 +21,20 @@ const Index: FC<Props> = ({
}) => {
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<Form.Select
aria-label={desc}
name={fieldName}
value={fieldObject?.value || ''}
onChange={onChange}
isInvalid={fieldObject?.isInvalid}>
{enumValues?.map((item, index) => {
return (
<option value={String(item)} key={String(item)}>
{enumNames?.[index]}
</option>
);
})}
</Form.Select>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
<Form.Select
aria-label={desc}
name={fieldName}
value={fieldObject?.value || ''}
onChange={onChange}
isInvalid={fieldObject?.isInvalid}>
{enumValues?.map((item, index) => {
return (
<option value={String(item)} key={String(item)}>
{enumNames?.[index]}
</option>
);
})}
</Form.Select>
);
};

41
ui/src/components/SchemaForm/components/Switch.tsx
View File

@ -5,41 +5,26 @@ import type * as Type from '@/common/interface';
interface Props {
title: string;
desc: string | undefined;
label: string | undefined;
fieldName: string;
onChange: (evt: React.ChangeEvent<HTMLInputElement>, ...rest) => void;
formData: Type.FormDataType;
}
const Index: FC<Props> = ({
title,
desc,
fieldName,
onChange,
label,
formData,
}) => {
const Index: FC<Props> = ({ title, fieldName, onChange, label, formData }) => {
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<Form.Check
required
id={`switch-${title}`}
name={fieldName}
type="switch"
label={label}
checked={fieldObject?.value || ''}
feedback={fieldObject?.errorMsg}
feedbackType="invalid"
isInvalid={fieldObject.isInvalid}
onChange={onChange}
/>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
<Form.Check
required
id={`switch-${title}`}
name={fieldName}
type="switch"
label={label}
checked={fieldObject?.value || ''}
feedback={fieldObject?.errorMsg}
feedbackType="invalid"
isInvalid={fieldObject.isInvalid}
onChange={onChange}
/>
);
};

31
ui/src/components/SchemaForm/components/Textarea.tsx
View File

@ -6,8 +6,6 @@ import classnames from 'classnames';
import type * as Type from '@/common/interface';
interface Props {
title: string;
desc: string | undefined;
placeholder: string | undefined;
rows: number | undefined;
className: classnames.Argument;
@ -16,8 +14,6 @@ interface Props {
formData: Type.FormDataType;
}
const Index: FC<Props> = ({
title,
desc,
placeholder = '',
rows = 3,
className,
@ -27,23 +23,16 @@ const Index: FC<Props> = ({
}) => {
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<Form.Control
as="textarea"
name={fieldName}
placeholder={placeholder}
value={fieldObject?.value || ''}
onChange={onChange}
isInvalid={fieldObject?.isInvalid}
rows={rows}
className={classnames(className)}
/>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
<Form.Control
as="textarea"
name={fieldName}
placeholder={placeholder}
value={fieldObject?.value || ''}
onChange={onChange}
isInvalid={fieldObject?.isInvalid}
rows={rows}
className={classnames(className)}
/>
);
};

24
ui/src/components/SchemaForm/components/Timezone.tsx
View File

@ -1,32 +1,22 @@
import React, { FC } from 'react';
import { Form } from 'react-bootstrap';
import type * as Type from '@/common/interface';
import TimeZonePicker from '@/components/TimeZonePicker';
interface Props {
title: string;
desc: string | undefined;
fieldName: string;
onChange: (evt: React.ChangeEvent<HTMLSelectElement>, ...rest) => void;
formData: Type.FormDataType;
}
const Index: FC<Props> = ({ title, desc, fieldName, onChange, formData }) => {
const Index: FC<Props> = ({ fieldName, onChange, formData }) => {
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<TimeZonePicker
value={fieldObject?.value || ''}
isInvalid={fieldObject?.isInvalid}
name={fieldName}
onChange={onChange}
/>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
<TimeZonePicker
value={fieldObject?.value || ''}
isInvalid={fieldObject?.isInvalid}
name={fieldName}
onChange={onChange}
/>
);
};

9
ui/src/components/SchemaForm/components/Upload.tsx
View File

@ -5,19 +5,15 @@ import type * as Type from '@/common/interface';
import BrandUpload from '@/components/BrandUpload';
interface Props {
title: string;
type: Type.UploadType | undefined;
acceptType: string | undefined;
desc: string | undefined;
fieldName: string;
onChange: (key, val) => void;
formData: Type.FormDataType;
}
const Index: FC<Props> = ({
title,
type = 'avatar',
acceptType = '',
desc,
fieldName,
onChange,
formData,
@ -25,7 +21,6 @@ const Index: FC<Props> = ({
const fieldObject = formData[fieldName];
return (
<>
<Form.Label>{title}</Form.Label>
<BrandUpload
type={type}
acceptType={acceptType}
@ -37,10 +32,6 @@ const Index: FC<Props> = ({
className="d-none"
isInvalid={fieldObject?.isInvalid}
/>
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{desc ? <Form.Text className="text-muted">{desc}</Form.Text> : null}
</>
);
};

261
ui/src/components/SchemaForm/index.tsx
View File

@ -1,4 +1,4 @@
import {
import React, {
ForwardRefRenderFunction,
forwardRef,
useImperativeHandle,
@ -40,7 +40,11 @@ export interface JSONSchema {
export interface BaseUIOptions {
empty?: string;
className?: string | string[];
// Will be appended to the className of the form component itself
className?: classnames.Argument;
// The className that will be attached to a form field container
fieldClassName?: classnames.Argument;
// Make a form component render into simplified mode
simplify?: boolean;
validator?: (
value,
@ -130,7 +134,9 @@ interface IRef {
/**
* TODO:
* 1. Normalize and document `formData[key].hidden && 'd-none'`
* * Normalize and document `formData[key].hidden && 'd-none'`
* * `handleXXChange` methods are placed in the concrete component
* * Improving field hints for `formData`
*/
/**
@ -373,18 +379,31 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
} = properties[key];
const { 'ui:widget': widget = 'input', 'ui:options': uiOpt } =
uiSchema[key] || {};
const fieldObject = formData[key];
const uiSimplify = widget === 'legend' || uiOpt?.simplify;
let groupClassName: BaseUIOptions['fieldClassName'] = uiOpt?.simplify
? 'mb-2'
: 'mb-3';
if (widget === 'legend') {
groupClassName = 'mb-0';
}
if (uiOpt?.fieldClassName) {
groupClassName = uiOpt.fieldClassName;
}
return (
<Form.Group
key={title}
controlId={key}
className={classnames({
'mb-3': widget !== 'legend' && !uiOpt?.simplify,
'd-none': formData[key].hidden,
})}>
className={classnames(
groupClassName,
formData[key].hidden ? 'd-none' : null,
)}>
{/* Uniform processing `label` */}
{title && !uiSimplify ? <Form.Label>{title}</Form.Label> : null}
{/* Handling of individual specific controls */}
{widget === 'legend' ? <Legend title={title} /> : null}
{widget === 'select' ? (
<Select
title={title}
desc={description}
fieldName={key}
onChange={handleSelectChange}
@ -396,8 +415,6 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
{widget === 'radio' || widget === 'checkbox' ? (
<Check
type={widget}
title={title}
desc={description}
fieldName={key}
onChange={handleInputCheck}
enumValues={enumValues}
@ -408,7 +425,6 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
{widget === 'switch' ? (
<Switch
title={title}
desc={description}
label={uiOpt && 'label' in uiOpt ? uiOpt.label : ''}
fieldName={key}
onChange={handleSwitchChange}
@ -417,8 +433,6 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
) : null}
{widget === 'timezone' ? (
<Timezone
title={title}
desc={description}
fieldName={key}
onChange={handleSelectChange}
formData={formData}
@ -426,14 +440,12 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
) : null}
{widget === 'upload' ? (
<Upload
title={title}
type={
uiOpt && 'imageType' in uiOpt ? uiOpt.imageType : undefined
}
acceptType={
uiOpt && 'acceptType' in uiOpt ? uiOpt.acceptType : ''
}
desc={description}
fieldName={key}
onChange={handleUploadChange}
formData={formData}
@ -441,8 +453,6 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
) : null}
{widget === 'textarea' ? (
<Textarea
title={title}
desc={description}
placeholder={
uiOpt && 'placeholder' in uiOpt ? uiOpt.placeholder : ''
}
@ -455,8 +465,6 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
) : null}
{widget === 'input' ? (
<Input
title={title}
desc={description}
type={uiOpt && 'inputType' in uiOpt ? uiOpt.inputType : 'text'}
placeholder={
uiOpt && 'placeholder' in uiOpt ? uiOpt.placeholder : ''
@ -466,216 +474,15 @@ const SchemaForm: ForwardRefRenderFunction<IRef, IProps> = (
formData={formData}
/>
) : null}
{/* Unified handling of `Feedback` and `Text` */}
<Form.Control.Feedback type="invalid">
{fieldObject?.errorMsg}
</Form.Control.Feedback>
{description ? (
<Form.Text className="text-muted">{description}</Form.Text>
) : null}
</Form.Group>
);
// if (widget === 'select') {
// return (
// <Form.Group
// key={title}
// controlId={key}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}>
// <Form.Label>{title}</Form.Label>
// <Form.Select
// aria-label={description}
// name={key}
// value={formData[key]?.value || ''}
// onChange={handleSelectChange}
// isInvalid={formData[key].isInvalid}>
// {properties[key].enum?.map((item, index) => {
// return (
// <option value={String(item)} key={String(item)}>
// {properties[key].enumNames?.[index]}
// </option>
// );
// })}
// </Form.Select>
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
// }
// if (widget === 'checkbox' || widget === 'radio') {
// return (
// <Form.Group
// key={title}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}
// controlId={key}>
// <Form.Label>{title}</Form.Label>
// <Stack direction="horizontal">
// {properties[key].enum?.map((item, index) => {
// return (
// <Form.Check
// key={String(item)}
// inline
// required
// type={widget}
// name={key}
// id={`form-${String(item)}`}
// label={properties[key].enumNames?.[index]}
// checked={(formData[key]?.value || '') === item}
// feedback={formData[key]?.errorMsg}
// feedbackType="invalid"
// isInvalid={formData[key].isInvalid}
// onChange={(e) => handleInputCheck(e, index)}
// />
// );
// })}
// </Stack>
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
// }
// if (widget === 'switch') {
// return (
// <Form.Group
// key={title}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}
// controlId={key}>
// <Form.Label>{title}</Form.Label>
// <Form.Check
// required
// id={`switch-${title}`}
// name={key}
// type="switch"
// label={(uiOpt as SwitchOptions)?.label}
// checked={formData[key]?.value || ''}
// feedback={formData[key]?.errorMsg}
// feedbackType="invalid"
// isInvalid={formData[key].isInvalid}
// onChange={handleSwitchChange}
// />
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
// }
// if (widget === 'timezone') {
// return (
// <Form.Group
// key={title}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}
// controlId={key}>
// <Form.Label>{title}</Form.Label>
// <TimeZonePicker
// value={formData[key]?.value || ''}
// name={key}
// onChange={handleSelectChange}
// />
// <Form.Control
// name={key}
// className="d-none"
// isInvalid={formData[key].isInvalid}
// />
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
// }
// if (widget === 'upload') {
// const options: UploadOptions = uiSchema[key]?.['ui:options'] || {};
// return (
// <Form.Group
// key={title}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}
// controlId={key}>
// <Form.Label>{title}</Form.Label>
// <BrandUpload
// type={options.imageType || 'avatar'}
// acceptType={options.acceptType || ''}
// value={formData[key]?.value}
// onChange={(value) => handleUploadChange(key, value)}
// />
// <Form.Control
// name={key}
// className="d-none"
// isInvalid={formData[key].isInvalid}
// />
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
// }
// if (widget === 'textarea') {
// const options: TextareaOptions = uiSchema[key]?.['ui:options'] || {};
//
// return (
// <Form.Group
// controlId={`form-${key}`}
// key={key}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}>
// <Form.Label>{title}</Form.Label>
// <Form.Control
// as="textarea"
// name={key}
// placeholder={options?.placeholder || ''}
// value={formData[key]?.value || ''}
// onChange={handleInputChange}
// isInvalid={formData[key].isInvalid}
// rows={options?.rows || 3}
// className={classnames(options.className)}
// />
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
//
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
// }
// const options: InputOptions = uiSchema[key]?.['ui:options'] || {};
//
// return (
// <Form.Group
// controlId={key}
// key={key}
// className={classnames('mb-3', formData[key].hidden && 'd-none')}>
// <Form.Label>{title}</Form.Label>
// <Form.Control
// name={key}
// placeholder={options?.placeholder || ''}
// type={options?.inputType || 'text'}
// value={formData[key]?.value || ''}
// onChange={handleInputChange}
// style={options?.inputType === 'color' ? { width: '6rem' } : {}}
// isInvalid={formData[key].isInvalid}
// />
// <Form.Control.Feedback type="invalid">
// {formData[key]?.errorMsg}
// </Form.Control.Feedback>
//
// {description && (
// <Form.Text className="text-muted">{description}</Form.Text>
// )}
// </Form.Group>
// );
})}
{!hiddenSubmit && (
<Button variant="primary" type="submit">

79
ui/src/pages/Admin/SettingsUsers/index.tsx
View File

@ -34,6 +34,30 @@ const Interface: FC = () => {
type: 'string',
title: t('profile_editable.title'),
},
allow_update_display_name: {
type: 'boolean',
title: 'allow_update_display_name',
},
allow_update_username: {
type: 'boolean',
title: 'allow_update_username',
},
allow_update_avatar: {
type: 'boolean',
title: 'allow_update_avatar',
},
allow_update_bio: {
type: 'boolean',
title: 'allow_update_bio',
},
allow_update_website: {
type: 'boolean',
title: 'allow_update_website',
},
allow_update_location: {
type: 'boolean',
title: 'allow_update_location',
},
},
};
@ -46,20 +70,63 @@ const Interface: FC = () => {
profile_editable: {
'ui:widget': 'legend',
},
profile_displayname: {
'ui:widget': 'legend',
allow_update_display_name: {
'ui:widget': 'switch',
'ui:options': {
label: t('allow_update_display_name.label'),
simplify: true,
},
},
allow_update_username: {
'ui:widget': 'switch',
'ui:options': {
label: t('allow_update_username.label'),
simplify: true,
},
},
allow_update_avatar: {
'ui:widget': 'switch',
'ui:options': {
label: t('allow_update_avatar.label'),
simplify: true,
},
},
allow_update_bio: {
'ui:widget': 'switch',
'ui:options': {
label: t('allow_update_bio.label'),
simplify: true,
},
},
allow_update_website: {
'ui:widget': 'switch',
'ui:options': {
label: t('allow_update_website.label'),
simplify: true,
},
},
allow_update_location: {
'ui:widget': 'switch',
'ui:options': {
label: t('allow_update_location.label'),
fieldClassName: 'mb-3',
simplify: true,
},
},
};
const onSubmit = (evt: FormEvent) => {
evt.preventDefault();
evt.stopPropagation();
// @ts-ignore
const reqParams: AdminSettingsUsers = {
default_avatar: '',
allow_update_avatar: formData.allow_update_avatar.value,
allow_update_bio: formData.allow_update_bio.value,
allow_update_display_name: formData.allow_update_display_name.value,
allow_update_location: formData.allow_update_location.value,
allow_update_username: formData.allow_update_username.value,
allow_update_website: formData.allow_update_website.value,
default_avatar: formData.default_avatar.value,
};
// @ts-ignore
putUsersSetting(reqParams)
.then(() => {
Toast.onShow({