From ea5e43cc939f2010b4f4c97cb8d346c91348fbba Mon Sep 17 00:00:00 2001
From: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>
Date: Sun, 15 Apr 2018 09:06:57 +0300
Subject: Onboarding filter

Issue-ID: SDC-1187
Change-Id: I74ce464c8ee4060c381b094d26d1ded270cdf40d
Signed-off-by: svishnev <shlomo-stanisla.vishnevetskiy@amdocs.com>
---
 .../sdc-app/onboarding/onboard/filter/Filter.jsx   | 165 ++++-----------------
 1 file changed, 32 insertions(+), 133 deletions(-)

(limited to 'openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx')

diff --git a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
index c80232de0a..a00357c7b9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/onboard/filter/Filter.jsx
@@ -17,14 +17,19 @@
 import { connect } from 'react-redux';
 import React from 'react';
 import PropTypes from 'prop-types';
-import i18n from 'nfvo-utils/i18n/i18n.js';
-import Input from 'nfvo-components/input/validation/Input.jsx';
-import Accordion from 'nfvo-components/accordion/Accordion.jsx';
-import { actionTypes } from './FilterConstants.js';
 import featureToggle from 'sdc-app/features/featureToggle.js';
 import { featureToggleNames } from 'sdc-app/features/FeaturesConstants.js';
 import { tabsMapping as onboardTabsMapping } from '../OnboardConstants.js';
-import { itemsType as itemsTypeConstants } from './FilterConstants.js';
+import { actionTypes } from './FilterConstants.js';
+
+import Panel from 'sdc-ui/lib/react/Panel.js';
+import {
+    ItemStatus,
+    ByVendorView,
+    EntityType,
+    Permissions,
+    OnboardingProcedure
+} from './FilterComponents.jsx';
 
 const mapStateToProps = ({ onboard: { filter, activeTab } }) => {
     return {
@@ -35,145 +40,39 @@ const mapStateToProps = ({ onboard: { filter, activeTab } }) => {
 
 const mapActionsToProps = dispatch => {
     return {
-        onDataChanged: deltaData =>
+        onDataChanged: deltaData => {
             dispatch({
                 type: actionTypes.FILTER_DATA_CHANGED,
                 deltaData
-            })
+            });
+        }
     };
 };
 
-const Filter = ({
-    onDataChanged,
-    data: {
-        entityTypeVsp,
-        entityTypeVlm,
-        roleOwner,
-        roleContributor,
-        roleViewer,
-        procedureNetwork,
-        procedureManual,
-        recentlyUpdated,
-        byVendorView,
-        itemsType
-    },
-    activeTab
-}) => (
-    <div className="catalog-filter">
-        {activeTab === onboardTabsMapping.CATALOG && (
-            <Input
-                type="select"
-                className="catalog-filter-items-type"
-                data-test-id="catalog-filter-items-type"
-                disabled={byVendorView}
-                value={itemsType}
-                onChange={e => onDataChanged({ itemsType: e.target.value })}>
-                <option
-                    key={itemsTypeConstants.ACTIVE}
-                    value={itemsTypeConstants.ACTIVE}>
-                    Active Items
-                </option>
-                <option
-                    key={itemsTypeConstants.ARCHIVED}
-                    value={itemsTypeConstants.ARCHIVED}>
-                    Archived Items
-                </option>
-            </Input>
-        )}
-        {activeTab === onboardTabsMapping.CATALOG && (
-            <Input
-                label={i18n('By Vendor View')}
-                type="checkbox"
-                disabled={itemsType === itemsTypeConstants.ARCHIVED}
-                checked={byVendorView}
-                onChange={byVendorView => onDataChanged({ byVendorView })}
-                data-test-id="filter-by-vendor-view"
-                value=""
-            />
-        )}
-        <Input
-            label={i18n('Recently Updated')}
-            type="checkbox"
-            checked={recentlyUpdated}
-            onChange={recentlyUpdated => onDataChanged({ recentlyUpdated })}
-            data-test-id="filter-recently-updated"
-            value=""
-        />
-
-        <Accordion title={i18n('ENTITY TYPE')}>
-            <Input
-                label={i18n('VSP')}
-                type="checkbox"
-                checked={entityTypeVsp}
-                onChange={entityTypeVsp => onDataChanged({ entityTypeVsp })}
-                data-test-id="filter-type-vsp"
-                value=""
-            />
-            <Input
-                label={i18n('VLM')}
-                type="checkbox"
-                checked={entityTypeVlm}
-                onChange={entityTypeVlm => onDataChanged({ entityTypeVlm })}
-                data-test-id="filter-type-vlm"
-                value=""
-            />
-        </Accordion>
-
-        <Accordion title={i18n('ROLE')}>
-            <Input
-                label={i18n('Owner')}
-                type="checkbox"
-                checked={roleOwner}
-                onChange={roleOwner => onDataChanged({ roleOwner })}
-                data-test-id="filter-role-owner"
-                value=""
-            />
-            <Input
-                label={i18n('Contributer')}
-                type="checkbox"
-                checked={roleContributor}
-                onChange={roleContributor => onDataChanged({ roleContributor })}
-                data-test-id="filter-role-contributor"
-                value=""
-            />
-            <Input
-                label={i18n('Viewer')}
-                type="checkbox"
-                checked={roleViewer}
-                onChange={roleViewer => onDataChanged({ roleViewer })}
-                data-test-id="filter-role-viewr"
-                value=""
-            />
-        </Accordion>
-
-        <Accordion title={i18n('ONBOARDING PROCEDURE')}>
-            <Input
-                label={i18n('Network Package')}
-                type="checkbox"
-                checked={procedureNetwork}
-                onChange={procedureNetwork =>
-                    onDataChanged({ procedureNetwork })
-                }
-                data-test-id="filter-procedure-network"
-                value=""
-            />
-            <Input
-                label={i18n('Manual')}
-                type="checkbox"
-                checked={procedureManual}
-                onChange={procedureManual => onDataChanged({ procedureManual })}
-                data-test-id="filter-procedure-manual"
-                value=""
-            />
-        </Accordion>
-    </div>
-);
+const Filter = ({ onDataChanged, data, activeTab }) => {
+    return (
+        <Panel className="catalog-filter">
+            <ItemStatus data={data} onDataChanged={onDataChanged} />
+            <EntityType data={data} onDataChanged={onDataChanged} />
+            <Permissions data={data} onDataChanged={onDataChanged} />
+            <OnboardingProcedure data={data} onDataChanged={onDataChanged} />
+            {activeTab === onboardTabsMapping.CATALOG && (
+                <ByVendorView data={data} onDataChanged={onDataChanged} />
+            )}
+        </Panel>
+    );
+};
 
 Filter.PropTypes = {
     onDataChanged: PropTypes.func,
-    data: PropTypes.object
+    data: PropTypes.object,
+    activeTab: PropTypes.number
 };
 
 export default featureToggle(featureToggleNames.FILTER)(
     connect(mapStateToProps, mapActionsToProps)(Filter)
 );
+
+export const ConnectedFilter = connect(mapStateToProps, mapActionsToProps)(
+    Filter
+);
-- 
cgit 1.2.3-korg