Implemented filter list

ui/src/app/metadata/domain/filter/component/MetadataFilterVersionContext.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { MetadataFilterTypes } from '../index';
+
+export const isAdditionalFilter = (type) => MetadataFilterTypes.indexOf(type) > -1;
+
+export const getVersionModelFilterPluginsFn = (model, kind) => {
+    const filters = kind === 'provider' ?
+        model.metadataFilters ? model.metadataFilters.filter(filter => MetadataFilterTypes.indexOf(filter['@type']) === -1) :
+            [] : null;
+    return filters;
+};
+
+export const getComparisonModelsFilteredFn = (models) => models.map((model) => {
+    return ({
+        ...model,
+        metadataFilters: getVersionModelFilterPluginsFn(
+            model,
+            model.hasOwnProperty('@type') ? model.hasOwnProperty('metadataFilters') ? 'provider' : 'filter' : 'resolver'
+        )
+    });
+});
+
+export const getVersionModelFiltersFn =
+    (model, kind) => kind === 'provider' ?
+        model.metadataFilters ? model.metadataFilters.filter(filter => isAdditionalFilter(filter['@type'])) :
+            [] : null;
+
+export const getComparisonFilterOrderedFn = (list) =>
+    list.map(models =>
+        models.map(filter =>
+        ({
+            ...filter,
+            comparable: list
+                .reduce((acc, v) => acc.concat(v), [])
+                .map(v => v.resourceId)
+                .some((id, index, coll) => {
+                    return coll.indexOf(filter.resourceId) !== coll.lastIndexOf(filter.resourceId);
+                })
+        })
+        ));
+
+export const getComparisonFilterListFn = (models) => models.map(m => getVersionModelFiltersFn(m, 'provider'));
+
+export const getComparisonFilterConfiguration = (filters, dates) => {
+    const rows = filters.reduce((num, version) => version.length > num ? version.length : num, 0);
+    const range = [...Array(rows).keys()];
+    return {
+        dates,
+        filters: range.reduce((collection, index) => {
+            const val = filters.map(version => version[index]);
+            collection[index] = val;
+            return collection;
+        }, [])
+    };
+}
+
+export function useComparisonFilterList(models) {
+    return React.useMemo(() => getComparisonFilterListFn(models), [models]);
+}
+
+export function useOrderedComparisonFilterList (models) {
+    const data = useComparisonFilterList(models);
+
+    return React.useMemo(() => getComparisonFilterOrderedFn(data), [data]);
+}
+
+export function useComparisonFilterConfiguration (models, dates) {
+    const filters = useOrderedComparisonFilterList(models);
+
+    return React.useMemo(() => getComparisonFilterConfiguration(filters, dates), [filters, dates]);
+}
+
+
+export function MetadataFilterVersionContext ({ models, dates, children }) {
+    const config = useComparisonFilterConfiguration(models, dates);
+
+    return (<>{children(config)}</>);
+}

ui/src/app/metadata/domain/filter/component/MetadataFilterVersionList.js

@@ -0,0 +1,82 @@
+import { faCheckSquare, faSquare } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import FormattedDate from '../../../../core/components/FormattedDate';
+import Translate from '../../../../i18n/components/translate';
+import { usePropertyWidth } from '../../../component/properties/hooks';
+
+
+
+
+export function MetadataFilterVersionList ({ configuration, columns }) {
+
+    const width = usePropertyWidth(columns);
+
+    const [comparing, setComparing] = React.useState(false);
+    const [selected, setSelected] = React.useState(null);
+
+    return (
+        <React.Fragment>
+            { configuration && configuration.dates.length > 0 &&
+                <React.Fragment>
+                    <div className="d-flex border-bottom border-light border-2 py-2">
+                        <strong style={{width}}>
+                            <Translate value={ comparing ? `label.order` : `label.option` } />
+                        </strong>
+                    {configuration.dates.map(d =>
+                            <strong style={{width}} >
+                                <FormattedDate date={d} time={true} />
+                            </strong>
+                        ) }
+                    </div>
+                    {configuration.filters.map((version, i) =>
+                        <div className="d-flex border-bottom border-light">
+                            <div style={{width}} className="py-2">
+                                { i + 1 }
+                            </div>
+                            {version.map((filter, n) => 
+                                <div style={{width}} className="border-primary">
+                                    {filter ?
+                                        <div className={`p-2 d-flex align-items-center ${((n % 2 === 0) && selected !== filter.resourceId) ? 'bg-lighter' : 'bg-primary-light'}`}>
+                                            <div className="w-50">
+                                                <p className="mb-0">{ filter.name }</p>
+                                                <p className="mb-0 text-muted">{ filter['@type'] }</p>
+                                            </div>
+                                            { filter.comparable &&
+                                                <button className="btn btn-link mx-auto" onClick={() => setSelected(filter.resourceId)}>
+                                                    <FontAwesomeIcon icon={ selected === filter.resourceId ? faCheckSquare : faSquare } size="lg" />
+                                                    <span className="sr-only">Compare</span>
+                                                </button>
+                                            }
+                                        </div>
+                                        :
+                                        <div className="p-2 w-100">-</div>
+                                    }
+                                </div>
+                            )}
+                        </div>
+                    ) }
+                    { configuration &&
+                        <React.Fragment>
+                            {configuration.filters.length < 1 ?
+                                <div className="alert alert-info m-4">
+                                    <h3><Translate value="message.no-filters">No Filters</Translate></h3>
+                                    <p><Translate value="message.no-filters-added">No filters have been added to this Metadata Provider</Translate></p>
+                                </div>
+                                :
+                                <div className="d-flex justify-content-end my-2">
+                                    <button className="btn btn-primary" disabled={!selected} onClick={() => setComparing()}>
+                                        <Translate value="label.compare-selected">Compare Selected</Translate>
+                                    </button>
+                                </div>
+                            }
+                        </React.Fragment>
+                    }
+                </React.Fragment>
+            }
+        </React.Fragment>
+
+
+
+    );
+}

ui/src/app/metadata/domain/filter/component/MetadataFilters.js

@@ -1,4 +1,3 @@
-import { fi } from 'date-fns/locale';
 import React from 'react';
 import { useMetadataEntities } from '../../../hooks/api';
 

ui/src/app/metadata/hoc/ComparisonContext.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+
+
+
+export function ComparisonContext () {
+    return (<></>);
+}

ui/src/app/metadata/hoc/Configuration.js

@@ -5,8 +5,6 @@ export function Configuration ({entities, schema, definition, limited, children}
 
     const config = useMetadataConfiguration(entities, schema, definition, limited);
 
-    console.log(config)
-
     return (
         <>{children(config)}</>
     );

ui/src/app/metadata/hooks/configuration.js

@@ -21,4 +21,4 @@ export function useMetadataConfiguration(models, schema, definition, limited = f
     const processed = definition.schemaPreprocessor ? definition.schemaPreprocessor(schema) : schema;
 
     return getLimitedConfigurationsFn(getConfigurationSections(models, definition, processed), limited);
-}
+}

ui/src/app/metadata/hooks/schema.js

@@ -1,3 +1,5 @@
+import { MetadataFilterTypes } from "../domain/filter";
+
 export function getDefinition(path, definitions) {
     let def = path.split('/').pop();
     return definitions[def];
@@ -213,4 +215,4 @@ export const getSplitSchema = (schema, step) => {
     }
 
     return s;
-};
+};

ui/src/app/metadata/view/MetadataComparison.js

@@ -14,6 +14,8 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons';
 import Translate from '../../i18n/components/translate';
 import { CustomInput } from 'reactstrap';
 import { useTranslation } from '../../i18n/hooks';
+import { MetadataFilterVersionList } from '../domain/filter/component/MetadataFilterVersionList';
+import { MetadataFilterVersionContext } from '../domain/filter/component/MetadataFilterVersionContext';
 
 export function MetadataComparison () {
 
@@ -50,6 +52,19 @@ export function MetadataComparison () {
                                         onChange={ () => setLimited(!limited) } />
                                 </div>
                                 <MetadataConfiguration configuration={config} />
+
+                                {type === 'provider' && v &&
+                                <React.Fragment>
+                                    <div className="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
+                                        <h2 className="title h4 m-0 flex-grow-1">
+                                            <span className="text ml-2"><Translate value="label.metadata-filter">Metadata Filter</Translate></span>
+                                        </h2>
+                                    </div>
+                                    <MetadataFilterVersionContext models={v} dates={config.dates}>
+                                        {(c) => <MetadataFilterVersionList configuration={c} columns={ c.dates.length }/>}
+                                    </MetadataFilterVersionContext>
+                                </React.Fragment>
+                                }
                             </div>
                         }
                 </Configuration>
@@ -60,62 +75,3 @@ export function MetadataComparison () {
     );
 }
 
-/*
-
-<h2 class="mb-4" [ngSwitch]="type$ | async">
-    Compare
-    <ng-container *ngSwitchCase="'resolver'"><translate-i18n key="label.source">Source</translate-i18n></ng-container>
-    <ng-container *ngSwitchDefault><translate-i18n key="label.provider">Provider</translate-i18n></ng-container>
-    Configuration
-</h2>
-<div *ngIf="!(loading$ | async)" class="" [ngClass]="{
-    'container-fluid': (numVersions$ | async) > 2,
-    'container': (numVersions$ | async) <= 2
-}">
-    <div class="px-3 my-3 d-flex justify-content-between">
-        <a class="btn btn-link" routerLink="../history">
-            <i class="fa fa-history sr-hidden"></i>&nbsp;
-            <translate-i18n key="action.version-history">Version History</translate-i18n>
-        </a>
-        <button class="btn btn-link" (click)="limiter.next('compare')">
-            <translate-i18n key="action.view-only-changes">Compare Changes</translate-i18n>&nbsp;
-            <i class="fa fa-lg sr-hidden"
-                [ngClass]="{
-                    'fa-toggle-off': limited$ | async,
-                    'fa-toggle-on': !(limited$ | async)
-                }"></i>
-        </button>
-    </div>
-    <metadata-configuration
-        [configuration]="versions$ | async"></metadata-configuration>
-    <ng-container *ngIf="isProvider$ | async">
-        <div class="numbered-header d-flex justify-content-start bg-light align-items-center py-1">
-            <h2 class="title h4 m-0 flex-grow-1">
-                <span class="text ml-2"><translate-i18n key="label.metadata-filter">Metadata Filter</translate-i18n></span>
-            </h2>
-        </div>
-        <ng-container *ngIf="!(filterCompare$ | async)">
-            <filter-version-list
-                class="d-block p-2"
-                [filters]="filters$ | async"
-                (compare)="compareFilters($event)">
-            </filter-version-list>
-        </ng-container>
-        <ng-container *ngIf="(filterCompare$ | async)">
-            <br />
-            <metadata-configuration [configuration]="filterCompare$ | async"></metadata-configuration>
-            <div class="d-flex justify-content-end my-2">
-                <button class="btn btn-success" (click)="resetCompareFilters()">
-                    <i class="fa fa-arrow-left" aria-hidden="true"></i>&nbsp;
-                    <translate-i18n key="label.filter-versions">Filter Versions</translate-i18n>
-                </button>
-            </div>
-        </ng-container>
-    </ng-container>
-</div>
-<div *ngIf="loading$ | async" class="d-flex justify-content-center">
-    <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
-    <span class="sr-only">Loading...</span>
-</div>
-
-*/

ui/src/app/metadata/view/MetadataHistory.js

@@ -43,6 +43,14 @@ export function MetadataHistory () {
 
     const [selected, setSelected] = React.useState([]);
 
+    const [sorted, setSorted] = React.useState([]);
+
+    React.useEffect(() => {
+        if (data && data.length) {
+            setSorted(sortVersionsByDate(data));
+        }
+    }, [data]);
+
     return (
         <>
             <h2 className="mb-4">

ui/src/app/metadata/view/MetadataVersion.js

@@ -23,7 +23,6 @@ export function MetadataVersion() {
 
     const [metadata, setMetadata] = React.useState();
 
-
     const schema = React.useContext(MetadataSchemaContext);
     const definition = React.useContext(MetadataDefinitionContext);