Issue #3283508 by Ryo Yamashita, yas: Add the function to update list of entities in the SPA (f69d0936) · Commits · project / cloud

modules/cloud_dashboard/cloud_dashboard/src/atoms/SortDirectionIcon.tsx

+9 −8

Original line number	Diff line number	Diff line
		@@ -7,11 +7,12 @@ import { BsChevronDown, BsChevronUp } from 'react-icons/bs';
		*/
		const SortDirectionIcon = ({ direction }: { direction: "ASC" \| "DESC" }) => {

		if (direction === 'ASC') {
		switch (direction) {
		case 'ASC':
		return <BsChevronUp aria-hidden="true" data-toggle="tooltip"
		data-placement="bottom" title=""
		data-original-title="Sort by descending order" />;
		} else {
		case 'DESC':
		return <BsChevronDown aria-hidden="true" data-toggle="tooltip"
		data-placement="bottom" title=""
		data-original-title="Sort by ascending order" />;

modules/cloud_dashboard/cloud_dashboard/src/molecules/EntityFormLabel.tsx

+9 −8

Original line number	Diff line number	Diff line
		@@ -14,7 +14,9 @@ const EntityFormLabel = ({ label, entityName, entityData }: {
		if (result === null) {
		break;
		}
		if (result.length >= 1) {
		if (result.length === 0) {
		continue;
		}
		const key = result[0].replace('{{', '').replace('}}', '');
		const data = entityData !== undefined && key in entityData.attributes
		? `${entityData.attributes[key]}`
		@@ -23,7 +25,6 @@ const EntityFormLabel = ({ label, entityName, entityData }: {
		: '';
		outputLabel = outputLabel.replace(result[0], `${data}`);
		}
		}

		return <Form.Group className="form-item js-form-item">
		<Form.Label className="control-label">{outputLabel}</Form.Label>

modules/cloud_dashboard/cloud_dashboard/src/molecules/FieldSelect.tsx

+2 −2

Original line number	Diff line number	Diff line
		@@ -44,8 +44,8 @@ const FieldSelect = ({ columnKey, columnName, setColumnName, cloudContext }: {

		// Set columnData list.
		useEffect(() => {
		getFieldEntityNameList(getEntityListAll, cloudContext, columnKey).then((res) => {
		setDataList(res);
		getFieldEntityNameList(getEntityListAll, cloudContext, columnKey).then((fieldEntityNameList) => {
		setDataList(fieldEntityNameList);
		});
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [cloudContext]);

modules/cloud_dashboard/cloud_dashboard/src/molecules/JoinSelectBlock.tsx

+2 −2

Original line number	Diff line number	Diff line
		@@ -22,8 +22,8 @@ const JoinSelectBlock = ({ label, value, setValue, entityTypeId, required, readO
		const [dataList, setDataList] = useState<EntityData[]>([]);

		useEffect(() => {
		getEntityListAll(entityTypeId).then((d) => {
		setDataList(d);
		getEntityListAll(entityTypeId).then((entityDataList) => {
		setDataList(entityDataList);
		})
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, []);

modules/cloud_dashboard/cloud_dashboard/src/molecules/RadioSelectBlock.tsx

+82 −45

Original line number	Diff line number	Diff line
		import { Form } from 'react-bootstrap';

		/**
		* Block of key-value input view.
		*
		* @param
		*/
		const RadioSelectBlock = ({ label, value, setValue, valueList, orientation, required, readOnly }: {
		const VerticalRadioSelectBlock = ({ label, value, setValue, valueList, required, readOnly }: {
		label: string,
		value: string,
		setValue: (s: string) => void,
		valueList: { labelName: string, name: string }[],
		orientation: 'horizontal' \| 'vertical',
		required: boolean,
		readOnly: boolean,
		}) => {

		if (orientation === 'vertical') {
		return <Form.Group className="form-item js-form-item">
		<Form.Label className={required ? 'form-required' : ''}>{label}</Form.Label>
		<div className="form-radios">
		@@ -28,7 +21,6 @@ const RadioSelectBlock = ({ label, value, setValue, valueList, orientation, requ
		setValue(valueRecord.name);
		}} readOnly={readOnly} />
		<Form.Label className="option" onClick={() => {
		console.log(valueRecord.name);
		setValue(valueRecord.name);
		}}>{valueRecord.labelName}</Form.Label>
		</div>;
		@@ -36,7 +28,18 @@ const RadioSelectBlock = ({ label, value, setValue, valueList, orientation, requ
		}
		</div>
		</Form.Group>;
		} else {

		}

		const HorizontalRadioSelectBlock = ({ label, value, setValue, valueList, required, readOnly }: {
		label: string,
		value: string,
		setValue: (s: string) => void,
		valueList: { labelName: string, name: string }[],
		required: boolean,
		readOnly: boolean,
		}) => {

		return <div className="container-inline">
		<b className={required ? 'form-required' : ''}>{`${label}: `}</b>
		<div className="form-radios">
		@@ -46,11 +49,9 @@ const RadioSelectBlock = ({ label, value, setValue, valueList, orientation, requ
		<input className="form-radio" name={valueRecord.name} type="radio" value={valueRecord.name}
		checked={value === valueRecord.name}
		onChange={() => {
		console.log(valueRecord.name);
		setValue(valueRecord.name);
		}} readOnly={readOnly} />
		<Form.Label className="control-label option" onClick={() => {
		console.log(valueRecord.name);
		setValue(valueRecord.name);
		}}>
		{valueRecord.labelName}
		@@ -60,7 +61,43 @@ const RadioSelectBlock = ({ label, value, setValue, valueList, orientation, requ
		}
		</div>
		</div>;

		}

		/**
		* Block of key-value input view.
		*
		* @param
		*/
		const RadioSelectBlock = ({ label, value, setValue, valueList, orientation, required, readOnly }: {
		label: string,
		value: string,
		setValue: (s: string) => void,
		valueList: { labelName: string, name: string }[],
		orientation: 'horizontal' \| 'vertical',
		required: boolean,
		readOnly: boolean,
		}) => {

		switch (orientation) {
		case 'vertical':
		return <VerticalRadioSelectBlock
		label={label}
		value={value}
		setValue={setValue}
		valueList={valueList}
		required={required}
		readOnly={readOnly} />;
		case 'horizontal':
		return <HorizontalRadioSelectBlock
		label={label}
		value={value}
		setValue={setValue}
		valueList={valueList}
		required={required}
		readOnly={readOnly} />;
		}

		}

		export default RadioSelectBlock;