Skip to content

Commit

Permalink
stubbed out pages
Browse files Browse the repository at this point in the history
  • Loading branch information
rmathis committed Apr 26, 2021
1 parent e64a180 commit 13b4178
Show file tree
Hide file tree
Showing 18 changed files with 346 additions and 35 deletions.
4 changes: 3 additions & 1 deletion ui/src/app/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import Footer from './core/components/Footer';
import Dashboard from './dashboard/container/Dashboard';
import Header from './core/components/Header';
import { UserProvider } from './core/user/UserContext';
import { Metadata } from './metadata/Metadata';

function App() {
return (
Expand All @@ -28,6 +29,7 @@ function App() {
<Redirect to="/dashboard" />
</Route>
<Route path="/dashboard" component={Dashboard} />
<Route path="/metadata/:type/:id" component={Metadata} />
</Switch>
</main>
<Footer />
Expand All @@ -40,7 +42,7 @@ function App() {

/*
<main >
<page-title class="sr-only sr-only-focusable"></page-title>
<page-title className="sr-only sr-only-focusable"></page-title>
<router-outlet></router-outlet>
<notification-list></notification-list>
</main>
Expand Down
10 changes: 5 additions & 5 deletions ui/src/app/admin/container/UserManagement.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,23 +99,23 @@ export default function UserManagement({ users, roles, onDelete, onSetRole }) {
<td>{{ user.emailAddress }}</td>
<td>
<label [for]="'role-' + user.username"
class="sr-only"><translate-i18n key="action.user-role">User role</translate-i18n></label>
className="sr-only"><translate-i18n key="action.user-role">User role</translate-i18n></label>
<select
[id]="'role-' + user.username"
[name]="'role-' + user.username"
[ngModel]="user.role"
class="form-control"
className="form-control"
(change)="setUserRole(user, $event.target.value)"
[disabled]="currentUser.username === user.username">
<option *ngFor="let role of roles$ | async" [value]="role">{{ role }}</option>
</select>
</td>
<td>
<button class="btn btn-link" (click)="deleteUser(user.username)" *ngIf="!(currentUser.username === user.username)">
<span class="sr-only">
<button className="btn btn-link" (click)="deleteUser(user.username)" *ngIf="!(currentUser.username === user.username)">
<span className="sr-only">
<translate-i18n key="label.delete-user">Delete User</translate-i18n>
</span>
<i class="fa fa-trash fa-lg text-danger"></i>
<i className="fa fa-trash fa-lg text-danger"></i>
</button>
</td>
</tr>*/
4 changes: 2 additions & 2 deletions ui/src/app/core/components/FormattedDate.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { format } from 'date-fns';

export default function FormattedDate ({ date }) {
const formatted = React.useMemo(() => format(new Date(date), 'MMM Lo, Y'), [date]);
export default function FormattedDate ({ date, time = false }) {
const formatted = React.useMemo(() => format(new Date(date), `MMM Lo, Y${time ? ' HH:mm:ss' : ''}`), [date, time]);

return (<>{ formatted }</>);
}
14 changes: 6 additions & 8 deletions ui/src/app/dashboard/container/Dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,13 @@ export function Dashboard () {
</NavItem>
</Nav>
<Switch>
<Route>
<Route exact path={`${path}`}>
<Redirect to={ `${path}/metadata/manager/resolvers` } />
</Route>
<Route path={`${path}/metadata/manager/resolvers`} component={SourcesTab} />
<Route path={`${path}/metadata/manager/providers`} component={ProvidersTab} />
<Route path={`${path}/admin/management`} component={AdminTab} />
<Route path={`${path}/admin/actions`} component={ActionsTab} />
<Route exact path={`${path}`}>
<Redirect to={`${path}/metadata/manager/resolvers`} />
</Route>
<Route path={`${path}/metadata/manager/resolvers`} component={SourcesTab} />
<Route path={`${path}/metadata/manager/providers`} component={ProvidersTab} />
<Route path={`${path}/admin/management`} component={AdminTab} />
<Route path={`${path}/admin/actions`} component={ActionsTab} />
</Switch>
</div>
);
Expand Down
7 changes: 3 additions & 4 deletions ui/src/app/dashboard/container/ProvidersTab.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import React from 'react';
import useFetch from 'use-http';
import Translate from '../../i18n/components/translate';
import API_BASE_PATH from '../../App.constant';

import { useMetadataEntities } from '../../metadata/hooks/api';
import Translate from '../../i18n/components/translate';
import ProviderList from '../../metadata/provider/component/ProviderList';

export function ProvidersTab () {

const [providers, setProviders] = React.useState([]);

const { get, response } = useFetch(`${API_BASE_PATH}/MetadataResolvers`, {})
const { get, response } = useMetadataEntities('provider');

async function loadProviders() {
const providers = await get('/')
Expand Down
3 changes: 2 additions & 1 deletion ui/src/app/dashboard/container/SourcesTab.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import Translate from '../../i18n/components/translate';
import API_BASE_PATH from '../../App.constant';

import SourceList from '../../metadata/source/component/SourceList';
import { useMetadataEntities } from '../../metadata/hooks/api';

export function SourcesTab () {

const [sources, setSources] = React.useState([]);

const { get, del, response } = useFetch(`${API_BASE_PATH}/EntityDescriptors`, {})
const { get, del, response } = useMetadataEntities('source');

async function loadSources() {
const sources = await get('/')
Expand Down
33 changes: 33 additions & 0 deletions ui/src/app/metadata/Metadata.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import { MetadataOptions } from './component/MetadataOptions';
import { MetadataDetail } from './component/MetadataDetail';
import { MetadataHistory } from './component/MetadataHistory';
import { MetadataEditor } from './editor/MetadataEditor';
import { MetadataSelector } from './hoc/MetadataSelector';
import MetadataSchema from './hoc/MetadataSchema';

export function Metadata () {

let { path } = useRouteMatch();

return (
<MetadataSelector>
<MetadataSchema>
<Switch>
<Route path={`${path}/configuration/options`} render={ () =>
<MetadataDetail>
<MetadataOptions></MetadataOptions>
</MetadataDetail>
} />
<Route path={`${path}/configuration/history`} render={ () =>
<MetadataDetail>
<MetadataHistory></MetadataHistory>
</MetadataDetail>
} />
<Route path={`${path}/edit`} component={ MetadataEditor } />
</Switch>
</MetadataSchema>
</MetadataSelector>
);
}
7 changes: 7 additions & 0 deletions ui/src/app/metadata/component/MetadataConfiguration.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';

export function MetadataConfiguration () {
return (
<></>
);
}
33 changes: 33 additions & 0 deletions ui/src/app/metadata/component/MetadataDetail.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Translate from '../../i18n/components/translate';

import { MetadataObjectContext } from '../hoc/MetadataSelector';

export function MetadataDetail ({ children }) {

const metadata = React.useContext(MetadataObjectContext);

return (
<div className="container-fluid p-3">
<section className="section" tabIndex="0">
<div className="section-body px-4 pb-4 border border-info">
<nav aria-label="breadcrumb">
<ol className="breadcrumb breadcrumb-bar">
<li className="breadcrumb-item">
<Link to="/dashboard"><Translate value="action.dashboard">Dashboard</Translate></Link>
</li>
<li className="breadcrumb-item active" aria-current="page">
<span className="display-6">
{ metadata.serviceProviderName || metadata.name }
</span>
</li>
</ol>
</nav>
{ children }
</div>
</section>
</div>

);
}
35 changes: 35 additions & 0 deletions ui/src/app/metadata/component/MetadataHeader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from 'react';
import FormattedDate from '../../core/components/FormattedDate';

import Translate from '../../i18n/components/translate';

export function MetadataHeader ({ model, current = true, enabled = true }) {
return (
<div className="card enabled-status">
<div className="card-body">
<div className="d-flex justify-content-between">
<h5 className="card-title version-title">
<Translate value="label.saved">Saved</Translate>:&nbsp;
<span className="save-date">
<FormattedDate date={model.modifiedDate} time={true} />
</span>
<br />
<Translate value="label.by">By</Translate>:&nbsp;
<span className="author">{model.createdBy }</span>
</h5>

</div>

<p className="card-text">
<span className={`badge badge-${enabled ? 'primary' : 'danger' }`}>
<Translate value={`value.${enabled ? 'enabled' : 'disabled'}`}>Enabled</Translate>
</span>
&nbsp;
<span className={`badge badge-${current ? 'primary' : 'warning'}`}>
<Translate value={`value.${current ? 'current' : 'not-current'}`}>Current</Translate>
</span>
</p>
</div>
</div>
);
}
13 changes: 13 additions & 0 deletions ui/src/app/metadata/component/MetadataHistory.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';

import Translate from '../../i18n/components/translate';

export function MetadataHistory () {
return (
<>
<h2 className="mb-4">
<Translate value={`label.version-history`}>version history</Translate>
</h2>
</>
);
}
56 changes: 56 additions & 0 deletions ui/src/app/metadata/component/MetadataOptions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { faArrowDown, faHistory } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { Link, useParams } from 'react-router-dom';

import Translate from '../../i18n/components/translate';

import { MetadataObjectContext } from '../hoc/MetadataSelector';
import { MetadataHeader } from './MetadataHeader';

export function MetadataOptions () {

const metadata = React.useContext(MetadataObjectContext);

const { type, id } = useParams();

return (
<>
<h2 className="mb-4">
<Translate value={`label.${type}-configuration`}>[{type}] configuration</Translate>
</h2>
<div className="container">
<MetadataHeader
current={true}
enabled={type === 'source' ? metadata.enabled : metadata.serviceEnabled}
model={metadata} />
<div className="px-3 my-3 d-flex justify-content-between" id="navigation">
<div>
<Link className="btn btn-link" to={`/metadata/${type}/${id}/configuration/history`}>
<FontAwesomeIcon icon={ faHistory } />&nbsp;
<Translate value="action.version-history">Version History</Translate>
</Link>
{type === 'provider' &&
<button className="btn btn-link" onClick={"onScrollTo('filters')"}>
<FontAwesomeIcon icon={faArrowDown} />&nbsp;
<Translate value="label.filters">Filters</Translate>
</button>
}
</div>
{/*<div *ngIf="hasXml$ | async">
<div className="btn-group" role="group" aria-label="Options selected">
<a className="btn" routerLink="../options" routerLinkActive="btn-primary" aria-pressed="true">
<span className="sr-only"><Translate value="action.toggle-view">Toggle view:</Translate></span>
Options
</a>
<a className="btn" routerLink="../xml" routerLinkActive="btn-primary">
<span className="sr-only"><Translate value="action.toggle-view">Toggle view:</Translate></span>
XML
</a>
</div>
</div>*/}
</div>
</div>
</>
);
}
26 changes: 26 additions & 0 deletions ui/src/app/metadata/editor/MetadataEditor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

import Translate from '../../i18n/components/translate';

import { MetadataObjectContext, MetadataTypeContext } from '../hoc/MetadataSelector';

export function MetadataEditor () {

const metadata = React.useContext(MetadataObjectContext);
const type = React.useContext(MetadataTypeContext);

return (
<section className="section" aria-label={`Edit metadata ${type} - ${metadata.serviceProviderName || metadata.name }`} tabIndex="0">
<div className="section-header bg-info p-2 text-white">
<div className="row justify-content-between">
<div className="col-md-12">
<span className="display-6">
<i className="fa fa-fw fa-gears"></i>
Edit metadata { type } - {metadata.serviceProviderName || metadata.name}
</span>
</div>
</div>
</div>
</section>
);
}
36 changes: 36 additions & 0 deletions ui/src/app/metadata/hoc/MetadataSchema.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react';
import { useParams } from 'react-router';
import { useMetadataSchema, getSchemaPath } from '../hooks/api';

export const MetadataSchemaContext = React.createContext();


export function MetadataSchema({ children }) {

let { type } = useParams();

const { get, response } = useMetadataSchema();

const [schema, setSchema] = React.useState([]);

async function loadSchema(t) {
const source = await get(`/${getSchemaPath(t)}`)
if (response.ok) {
setSchema(source);
}
}

React.useEffect(() => { loadSchema(type) }, [type]);

return (
<>
{type &&
<MetadataSchemaContext.Provider value={type}>
{children}
</MetadataSchemaContext.Provider>
}
</>
);
}

export default MetadataSchema;
Loading

0 comments on commit 13b4178

Please sign in to comment.