Skip to content

Commit

Permalink
Implemented copy
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed May 13, 2021
1 parent d370a02 commit d02ebe8
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 29 deletions.
4 changes: 2 additions & 2 deletions ui/src/app/form/component/InfoIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Translate from '../../i18n/components/translate';

export function InfoIcon ({ value, ...props }) {
export function InfoIcon ({ value, placement='left', ...props }) {
return(
<OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={(
<OverlayTrigger trigger={['hover', 'focus']} placement={placement} overlay={(
<Popover variant="info">
<Popover.Content><Translate value={value} /></Popover.Content>
</Popover>
Expand Down
14 changes: 6 additions & 8 deletions ui/src/app/metadata/copy/CopySource.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import { faArrowCircleRight, faAsterisk, faCheck, faTimes } from '@fortawesome/f

import { Translate } from '../../i18n/components/translate';
import { EntityTypeahead } from './EntityTypeahead';
import kebabCase from 'lodash/kebabCase';

const sections = [
{ i18nKey: 'organizationInfo', property: 'organization' },
{ i18nKey: 'organizationInformation', property: 'organization' },
{ i18nKey: 'contacts', property: 'contacts' },
{ i18nKey: 'uiMduiInfo', property: 'mdui' },
{ i18nKey: 'spSsoDescriptorInfo', property: 'serviceProviderSsoDescriptor' },
Expand All @@ -19,9 +20,9 @@ const sections = [
{ i18nKey: 'attributeRelease', property: 'attributeRelease' }
];

export function CopySource({ onNext }) {
export function CopySource({ copy, onNext }) {

const [selected, setSelected] = React.useState([]);
const [selected, setSelected] = React.useState(copy.properties);
const onSelect = (item, checked) => {
let s = [...selected];
if (checked) {
Expand All @@ -42,10 +43,7 @@ export function CopySource({ onNext }) {
mode: 'onChange',
reValidateMode: 'onBlur',
defaultValues: {
target: null,
serviceProviderName: null,
entityId: null,
properties: selected
...copy
},
resolver: undefined,
context: undefined,
Expand Down Expand Up @@ -157,7 +155,7 @@ export function CopySource({ onNext }) {
<tbody>
{sections.map((item, i) =>
<tr key={i}>
<td><label className="mb-0" htmlFor={`property-checkbox-${i}`}><Translate value={item.i18nKey} /></label></td>
<td><label className="mb-0" htmlFor={`property-checkbox-${i}`}><Translate value={`label.${kebabCase(item.i18nKey)}`} /></label></td>
<td>
<Check
custom
Expand Down
107 changes: 100 additions & 7 deletions ui/src/app/metadata/copy/SaveCopy.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,119 @@
import React from 'react';
import Check from 'react-bootstrap/FormCheck';
import { faArrowCircleLeft, faCheck, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useForm } from 'react-hook-form';

import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
import { useMetadataConfiguration } from '../hooks/configuration';
import { removeNull } from '../../core/utility/remove_null';

import { MetadataConfiguration } from '../component/MetadataConfiguration';
import Translate from '../../i18n/components/translate';

import { InfoIcon } from '../../form/component/InfoIcon';

export function useCopiedConfiguration(copy, schema, definition) {

export function useCopiedModel (copy) {
const { properties, target, serviceProviderName, entityId } = copy;
const copied = removeNull(properties.reduce((c, section) => ({ ...c, ...{ [section]: target[section] } }), {}));
const model = [{
const model = {
serviceProviderName,
entityId,
...copied
}];
return useMetadataConfiguration(model, schema, definition);
};
return model;
}

export function useCopiedConfiguration(model, schema, definition) {
return useMetadataConfiguration([model], schema, definition);
}

export function SaveCopy ({ copy }) {
export function SaveCopy ({ copy, saving, onSave, onBack }) {
const definition = React.useContext(MetadataDefinitionContext);
const schema = React.useContext(MetadataSchemaContext);

const configuration = useCopiedConfiguration(copy, schema, definition);
const model = useCopiedModel(copy);
const configuration = useCopiedConfiguration(model, schema, definition);

const { register, handleSubmit, getValues } = useForm({
mode: 'onChange',
reValidateMode: 'onBlur',
defaultValues: {
serviceEnabled: false
},
resolver: undefined,
context: undefined,
criteriaMode: "firstError",
shouldFocusError: true,
shouldUnregister: false,
});

const onFinish = (data) => {
onSave({
...model,
...data
})
};

return (
<>
<div className="row">
<div className="col col-xs-12 col-xl-6">
<ul className="nav nav-wizard m-3">
<li className="nav-item">
<button type="button" className="nav-link previous btn d-flex justify-content-between align-items-start" onClick={onBack}>
<span className="direction d-flex flex-column align-items-center">
<FontAwesomeIcon icon={faArrowCircleLeft} size="2x" />
<Translate value="action.back">Back</Translate>
</span>
<span className="label">
<Translate value="label.name-and-entityid">
Name and Entity ID.
</Translate>
</span>
</button>
</li>
<li className="nav-item">
<h3 className="tag tag-primary">
<span className="index">
<FontAwesomeIcon icon={faCheck} />
</span>
<Translate value="label.finish-summary-validation">Finished!</Translate>
</h3>
</li>
<li className="nav-item">
<button className="nav-link save btn d-flex justify-content-between align-items-start" aria-label="Save" onClick={() => handleSubmit(onFinish)()} type="button">
<span className="label"><Translate value="action.save">Save</Translate></span>
<span className="direction d-flex flex-column align-items-center">
<FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={saving} size="2x" />
<Translate value="action.save">Save</Translate>
</span>
</button>
</li>
</ul>
</div>
</div>
<form onSubmit={ handleSubmit(onFinish) }>
<div className="row">
<fieldset className="col-xl-6 form-section">
<section className="entity-section">
<div className="form-group d-flex">
<label htmlFor="serviceEnabled" className="mr-2"><Translate value="label.enable-this-service" /></label>
<Check custom
id="serviceEnabled"
className="mr-2"
type={'checkbox'}
{...register('serviceEnabled')}
/>
<InfoIcon value={`tooltip.enable-this-service-upon-saving`} placement="right" />
</div>
</section>
</fieldset>
</div>
</form>

return (<MetadataConfiguration configuration={configuration} />);
<MetadataConfiguration configuration={configuration} />
</>
);
}
40 changes: 28 additions & 12 deletions ui/src/app/metadata/view/MetadataCopy.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,48 @@ import { MetadataSchema } from '../hoc/MetadataSchema';

import {CopySource} from '../copy/CopySource';
import { SaveCopy } from '../copy/SaveCopy';
import { useMetadataEntity } from '../hooks/api';
import { useHistory } from 'react-router';

export function MetadataCopy () {

const { post, response, loading } = useMetadataEntity('source');
const history = useHistory();

const [copy, setCopy] = React.useState({
target: null,
serviceProviderName: null,
entityId: null,
properties: []
});
const [confirm, setConfirm] = React.useState(false);

const next = (data) => {
setCopy(data);
setConfirm(true)
};

const back = (data) => {
setConfirm(false);
};

const [copy, setCopy] = React.useState();
async function save (data) {
await post('', data);
if (response.ok) {
history.push('/');
}
}

return (
<React.Fragment>
{!copy &&
<CopySource onNext={next} />
{!confirm &&
<CopySource copy={copy} onNext={next} />
}
{copy &&
{confirm && copy &&
<MetadataSchema type="source">
<SaveCopy copy={copy} />
<SaveCopy copy={copy} onBack={back} onSave={save} saving={loading} />
</MetadataSchema>
}
<button type="button"
className="btn btn-primary sr-only"
disabled={!copy}
onClick={() => next()}>
<Translate value="action.next">Next</Translate>
<FontAwesomeIcon icon={faArrowCircleRight} size="lg" />
</button>
</React.Fragment>
);
}

0 comments on commit d02ebe8

Please sign in to comment.