From 51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 Mon Sep 17 00:00:00 2001 From: Tal Gitelman Date: Sun, 10 Dec 2017 18:55:03 +0200 Subject: Final commit to master merge from Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman --- catalog-ui/src/app/ng2/app.module.ts | 33 ++- .../menu-list-ng2/menu-list-ng2.component.html | 7 + .../menu-list-ng2/menu-list-ng2.component.ts | 36 +++ .../menu-list-ng2/menu-list-ng2.module.ts | 23 ++ .../dynamic-element/dynamic-element.component.less | 3 - .../dynamic-element/dynamic-element.component.ts | 145 ----------- .../dynamic-element/dynamic-element.module.ts | 56 ----- .../checkbox/ui-element-checkbox.component.html | 1 - .../checkbox/ui-element-checkbox.component.less | 2 - .../checkbox/ui-element-checkbox.component.ts | 47 ---- .../dropdown/ui-element-dropdown.component.html | 3 - .../dropdown/ui-element-dropdown.component.less | 11 - .../dropdown/ui-element-dropdown.component.ts | 52 ---- .../input/ui-element-input.component.html | 15 -- .../input/ui-element-input.component.less | 17 -- .../input/ui-element-input.component.ts | 41 --- .../ui-element-integer-input.component.html | 15 -- .../ui-element-integer-input.component.less | 17 -- .../ui-element-integer-input.component.ts | 41 --- .../ui-element-popover-input.component.html | 26 -- .../ui-element-popover-input.component.less | 36 --- .../ui-element-popover-input.component.ts | 58 ----- .../elements-ui/ui-element-base.component.ts | 55 ---- .../filter-properties-assignment.component.html | 26 -- .../filter-properties-assignment.component.less | 45 ---- .../filter-properties-assignment.component.ts | 97 ------- .../hierarchy-display-options.ts | 32 --- .../hierarchy-navigation.component.html | 13 - .../hierarchy-navigation.component.less | 52 ---- .../hierarchy-navigation.component.ts | 48 ---- .../inputs-table/inputs-table.component.html | 49 ---- .../inputs-table/inputs-table.component.less | 164 ------------ .../inputs-table/inputs-table.component.ts | 64 ----- .../src/app/ng2/components/layout/layout.module.ts | 24 ++ .../layout/top-nav/top-nav.component.html | 53 ++++ .../layout/top-nav/top-nav.component.less | 225 +++++++++++++++++ .../components/layout/top-nav/top-nav.component.ts | 149 +++++++++++ .../ng2/components/loader/loader.component.html | 6 - .../ng2/components/loader/loader.component.less | 91 ------- .../app/ng2/components/loader/loader.component.ts | 86 ------- .../filter-properties-assignment.component.html | 27 ++ .../filter-properties-assignment.component.less | 45 ++++ .../filter-properties-assignment.component.ts | 97 +++++++ .../hierarchy-display-options.ts | 32 +++ .../hierarchy-navigation.component.html | 13 + .../hierarchy-navigation.component.less | 52 ++++ .../hierarchy-navigation.component.ts | 48 ++++ .../logic/inputs-table/inputs-table.component.html | 49 ++++ .../logic/inputs-table/inputs-table.component.less | 164 ++++++++++++ .../logic/inputs-table/inputs-table.component.ts | 62 +++++ .../dynamic-property.component.html | 67 +++++ .../dynamic-property.component.less | 84 +++++++ .../dynamic-property/dynamic-property.component.ts | 206 +++++++++++++++ .../pipes/filterChildProperties.pipe.ts | 38 +++ .../properties-table.component.html | 63 +++++ .../properties-table.component.less | 180 +++++++++++++ .../properties-table/properties-table.component.ts | 91 +++++++ .../properties-table/property-table.module.ts | 29 +++ ...select-reqiurement-or-capability.component.less | 77 ++++++ ...select-requirement-or-capability.component.html | 36 +++ .../select-requirement-or-capability.component.ts | 182 ++++++++++++++ .../select-requirement-or-capability.module.ts | 24 ++ .../error-message/error-message.component.html | 5 - .../modal/error-message/error-message.component.ts | 38 --- .../app/ng2/components/modal/modal.component.html | 20 -- .../app/ng2/components/modal/modal.component.less | 128 ---------- .../app/ng2/components/modal/modal.component.ts | 62 ----- .../src/app/ng2/components/modal/modal.module.ts | 22 -- .../popover/popover-content.component.html | 24 -- .../popover/popover-content.component.less | 77 ------ .../popover/popover-content.component.ts | 278 --------------------- .../ng2/components/popover/popover.component.ts | 179 ------------- .../app/ng2/components/popover/popover.module.ts | 47 ---- .../dynamic-property.component.html | 66 ----- .../dynamic-property.component.less | 74 ------ .../dynamic-property/dynamic-property.component.ts | 205 --------------- .../properties-table.component.html | 63 ----- .../properties-table.component.less | 166 ------------ .../properties-table/properties-table.component.ts | 92 ------- .../tooltip/tooltip-content.component.html | 12 - .../tooltip/tooltip-content.component.less | 11 - .../tooltip/tooltip-content.component.ts | 215 ---------------- .../ng2/components/tooltip/tooltip.component.ts | 109 -------- .../app/ng2/components/tooltip/tooltip.module.ts | 45 ---- .../dynamic-element/dynamic-element.component.less | 3 + .../dynamic-element/dynamic-element.component.ts | 140 +++++++++++ .../ui/dynamic-element/dynamic-element.module.ts | 43 ++++ .../checkbox/checkbox.component.html | 8 + .../checkbox/checkbox.component.less | 67 +++++ .../form-components/checkbox/checkbox.component.ts | 50 ++++ .../ui/form-components/checkbox/checkbox.module.ts | 48 ++++ .../dropdown/ui-element-dropdown.component.html | 3 + .../dropdown/ui-element-dropdown.component.less | 11 + .../dropdown/ui-element-dropdown.component.ts | 51 ++++ .../ui/form-components/form-elements.module.ts | 42 ++++ .../input/ui-element-input.component.html | 14 ++ .../input/ui-element-input.component.less | 17 ++ .../input/ui-element-input.component.ts | 41 +++ .../ui-element-integer-input.component.html | 14 ++ .../ui-element-integer-input.component.less | 17 ++ .../ui-element-integer-input.component.ts | 41 +++ .../ui-element-popover-input.component.html | 26 ++ .../ui-element-popover-input.component.less | 36 +++ .../ui-element-popover-input.component.ts | 57 +++++ .../radio-buttons/radio-button.component.less | 42 ++++ .../radio-buttons/radio-buttons.component.html | 8 + .../radio-buttons/radio-buttons.component.ts | 29 +++ .../form-components/ui-element-base.component.ts | 55 ++++ .../ng2/components/ui/loader/loader.component.html | 6 + .../ng2/components/ui/loader/loader.component.less | 91 +++++++ .../ng2/components/ui/loader/loader.component.ts | 86 +++++++ .../components/ui/menu/menu-item.component.html | 3 + .../components/ui/menu/menu-item.component.less | 13 + .../ng2/components/ui/menu/menu-item.component.ts | 44 ++++ .../components/ui/menu/menu-list.component.html | 9 + .../components/ui/menu/menu-list.component.less | 13 + .../ng2/components/ui/menu/menu-list.component.ts | 70 ++++++ .../app/ng2/components/ui/menu/menu-list.module.ts | 27 ++ .../error-message/error-message.component.html | 5 + .../modal/error-message/error-message.component.ts | 38 +++ .../ng2/components/ui/modal/modal.component.html | 21 ++ .../ng2/components/ui/modal/modal.component.less | 129 ++++++++++ .../app/ng2/components/ui/modal/modal.component.ts | 62 +++++ .../app/ng2/components/ui/modal/modal.module.ts | 22 ++ .../multi-steps-wizard-header-base.component.ts | 10 + .../multi-steps-wizard.component.html | 57 +++++ .../multi-steps-wizard.component.less | 90 +++++++ .../multi-steps-wizard.component.ts | 78 ++++++ .../multi-steps-wizard.module.ts | 22 ++ .../components/ui/navbar/navbar-routes.config.ts | 27 ++ .../ng2/components/ui/navbar/navbar.component.html | 23 ++ .../ng2/components/ui/navbar/navbar.component.less | 11 + .../ng2/components/ui/navbar/navbar.component.ts | 52 ++++ .../ng2/components/ui/navbar/navbar.metadata.ts | 31 +++ .../app/ng2/components/ui/navbar/navbar.module.ts | 36 +++ .../ui/popover/popover-content.component.html | 24 ++ .../ui/popover/popover-content.component.less | 77 ++++++ .../ui/popover/popover-content.component.ts | 278 +++++++++++++++++++++ .../ng2/components/ui/popover/popover.component.ts | 179 +++++++++++++ .../ng2/components/ui/popover/popover.module.ts | 45 ++++ .../ui/search-bar/search-bar.component.html | 5 + .../ui/search-bar/search-bar.component.less | 57 +++++ .../ui/search-bar/search-bar.component.ts | 32 +++ .../search-with-autocomplete.component.html | 6 + .../search-with-autocomplete.component.less | 34 +++ .../search-with-autocomplete.component.ts | 30 +++ .../ng2/components/ui/tabs/tab/tab.component.ts | 38 +++ .../app/ng2/components/ui/tabs/tabs.component.html | 9 + .../app/ng2/components/ui/tabs/tabs.component.less | 85 +++++++ .../app/ng2/components/ui/tabs/tabs.component.ts | 78 ++++++ .../src/app/ng2/components/ui/tabs/tabs.module.ts | 55 ++++ .../ui/tooltip/tooltip-content.component.html | 12 + .../ui/tooltip/tooltip-content.component.less | 11 + .../ui/tooltip/tooltip-content.component.ts | 215 ++++++++++++++++ .../ng2/components/ui/tooltip/tooltip.component.ts | 109 ++++++++ .../ng2/components/ui/tooltip/tooltip.module.ts | 44 ++++ .../app/ng2/components/ui/ui-elements.module.ts | 80 ++++++ .../app/ng2/config/sdc-config.config.factory.ts | 17 ++ catalog-ui/src/app/ng2/config/sdc-config.config.ts | 11 + .../config/translation.service.config.factory.ts | 13 + .../app/ng2/config/translation.service.config.ts | 8 + .../connection-properties-view.component.html | 4 + .../connection-properties-view.component.less | 4 + .../connection-properties-view.component.ts | 10 + .../connection-wizard-header.component.html | 36 +++ .../connection-wizard-header.component.less | 53 ++++ .../connection-wizard-header.component.ts | 37 +++ .../connection-wizard/connection-wizard.module.ts | 43 ++++ .../connection-wizard/connection-wizard.service.ts | 67 +++++ .../from-node-step/from-node-step.component.html | 8 + .../from-node-step/from-node-step.component.ts | 49 ++++ .../properties-step/properties-step.component.html | 13 + .../properties-step/properties-step.component.less | 15 ++ .../properties-step/properties-step.component.ts | 67 +++++ .../to-node-step/to-node-step.component.html | 9 + .../to-node-step/to-node-step.component.ts | 69 +++++ .../properties-assignment.module.ts | 69 ++--- .../properties-assignment.page.component.html | 9 +- .../properties-assignment.page.component.ts | 17 +- .../properties-assignment/properties.utils.ts | 181 -------------- .../services/hierarchy-nav.service.ts | 83 ++++++ .../services/properties.utils.ts | 188 ++++++++++++++ .../app/ng2/pipes/filterChildProperties.pipe.ts | 38 --- .../src/app/ng2/pipes/global-pipes.module.ts | 24 ++ .../src/app/ng2/services/authentication.service.ts | 13 +- .../component-instance.service.ts | 35 ++- .../src/app/ng2/services/component-mode.service.ts | 49 ---- .../component-services/component-mode.service.ts | 49 ++++ .../component-services/component.service.ts | 19 +- .../services/component-services/service.service.ts | 10 +- catalog-ui/src/app/ng2/services/config.service.ts | 12 +- catalog-ui/src/app/ng2/services/cookie.service.ts | 8 +- .../src/app/ng2/services/hierarchy-nav.service.ts | 83 ------ catalog-ui/src/app/ng2/services/http.service.ts | 14 +- catalog-ui/src/app/ng2/services/modal.service.ts | 41 ++- .../src/app/ng2/services/properties.service.ts | 8 +- catalog-ui/src/app/ng2/services/user.service.ts | 98 ++++++++ .../ng2/shared/checkbox/checkbox.component.html | 8 - .../ng2/shared/checkbox/checkbox.component.less | 67 ----- .../app/ng2/shared/checkbox/checkbox.component.ts | 50 ---- .../src/app/ng2/shared/checkbox/checkbox.module.ts | 48 ---- .../app/ng2/shared/navbar/navbar-routes.config.ts | 27 -- .../app/ng2/shared/navbar/navbar.component.html | 23 -- .../app/ng2/shared/navbar/navbar.component.less | 11 - .../src/app/ng2/shared/navbar/navbar.component.ts | 52 ---- .../src/app/ng2/shared/navbar/navbar.metadata.ts | 31 --- .../src/app/ng2/shared/navbar/navbar.module.ts | 36 --- .../shared/search-bar/search-bar.component.html | 5 - .../shared/search-bar/search-bar.component.less | 58 ----- .../ng2/shared/search-bar/search-bar.component.ts | 32 --- .../search-with-autocomplete.component.html | 6 - .../search-with-autocomplete.component.less | 35 --- .../search-with-autocomplete.component.ts | 30 --- catalog-ui/src/app/ng2/shared/shared.module.ts | 40 --- .../src/app/ng2/shared/tabs/tab/tab.component.ts | 38 --- .../src/app/ng2/shared/tabs/tabs.component.html | 9 - .../src/app/ng2/shared/tabs/tabs.component.less | 84 ------- .../src/app/ng2/shared/tabs/tabs.component.ts | 78 ------ catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts | 55 ---- .../app/ng2/shared/translator/translate.module.ts | 32 +++ .../app/ng2/shared/translator/translate.pipe.ts | 62 +++++ .../shared/translator/translate.service.config.ts | 30 +++ .../app/ng2/shared/translator/translate.service.ts | 235 +++++++++++++++++ .../src/app/ng2/utils/ng1-upgraded-provider.ts | 10 + 224 files changed, 7121 insertions(+), 4662 deletions(-) create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts create mode 100644 catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less delete mode 100644 catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less delete mode 100644 catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/layout/layout.module.ts create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less create mode 100644 catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.html delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.less delete mode 100644 catalog-ui/src/app/ng2/components/loader/loader.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts create mode 100644 catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html delete mode 100644 catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.html delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.less delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/modal/modal.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.html delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.less delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover-content.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/popover/popover.module.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less delete mode 100644 catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts delete mode 100644 catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts create mode 100644 catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts create mode 100644 catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts create mode 100644 catalog-ui/src/app/ng2/config/sdc-config.config.ts create mode 100644 catalog-ui/src/app/ng2/config/translation.service.config.factory.ts create mode 100644 catalog-ui/src/app/ng2/config/translation.service.config.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html create mode 100644 catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts delete mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts create mode 100644 catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts delete mode 100644 catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts create mode 100644 catalog-ui/src/app/ng2/pipes/global-pipes.module.ts delete mode 100644 catalog-ui/src/app/ng2/services/component-mode.service.ts create mode 100644 catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts delete mode 100644 catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts create mode 100644 catalog-ui/src/app/ng2/services/user.service.ts delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts delete mode 100644 catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts delete mode 100644 catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/shared.module.ts delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.html delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.less delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts delete mode 100644 catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.module.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts create mode 100644 catalog-ui/src/app/ng2/shared/translator/translate.service.ts (limited to 'catalog-ui/src/app/ng2') diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts index 88c2d876c4..291768a500 100644 --- a/catalog-ui/src/app/ng2/app.module.ts +++ b/catalog-ui/src/app/ng2/app.module.ts @@ -27,7 +27,7 @@ import {UpgradeAdapter} from '@angular/upgrade'; import {UpgradeModule} from '@angular/upgrade/static'; import {PropertiesAssignmentModule} from './pages/properties-assignment/properties-assignment.module'; import { - DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, + DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, StateServiceFactory, StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider } from "./utils/ng1-upgraded-provider"; import {ConfigService} from "./services/config.service"; @@ -38,9 +38,14 @@ import {Cookie2Service} from "./services/cookie.service"; import {ComponentServiceNg2} from "./services/component-services/component.service"; import {ServiceServiceNg2} from "./services/component-services/service.service"; import {ComponentInstanceServiceNg2} from "./services/component-instance-services/component-instance.service"; -import { XHRBackend, RequestOptions } from '@angular/http'; -import { SearchBarComponent } from './shared/search-bar/search-bar.component'; -import { SearchWithAutoCompleteComponent } from './shared/search-with-autocomplete/search-with-autocomplete.component'; +import {ModalService} from "./services/modal.service"; +import {UiElementsModule} from "./components/ui/ui-elements.module"; +import {ConnectionWizardModule} from "./pages/connection-wizard/connection-wizard.module"; +import {LayoutModule} from "./components/layout/layout.module"; +import {UserService} from "./services/user.service"; +import {SdcConfig} from "./config/sdc-config.config"; +import { TranslateModule } from "./shared/translator/translate.module"; +import { TranslationServiceConfig } from "./config/translation.service.config"; export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); @@ -51,23 +56,28 @@ export function configServiceFactory(config:ConfigService) { @NgModule({ declarations: [ - AppComponent, - SearchBarComponent, - SearchWithAutoCompleteComponent + AppComponent ], imports: [ BrowserModule, UpgradeModule, FormsModule, HttpModule, + LayoutModule, + TranslateModule, + UiElementsModule, + + //We need to import them here since we use them in angular1 + ConnectionWizardModule, PropertiesAssignmentModule ], exports: [], - entryComponents: [SearchWithAutoCompleteComponent], + entryComponents: [], providers: [ DataTypesServiceProvider, SharingServiceProvider, CookieServiceProvider, + StateServiceFactory, StateParamsServiceFactory, CacheServiceProvider, EventListenerServiceProvider, @@ -75,9 +85,13 @@ export function configServiceFactory(config:ConfigService) { Cookie2Service, ConfigService, ComponentServiceNg2, + ModalService, ServiceServiceNg2, HttpService, + UserService, + SdcConfig, ComponentInstanceServiceNg2, + TranslationServiceConfig, { provide: APP_INITIALIZER, useFactory: configServiceFactory, @@ -90,9 +104,8 @@ export function configServiceFactory(config:ConfigService) { export class AppModule { - // ngDoBootstrap() {} - constructor(public upgrade:UpgradeModule) { + constructor(public upgrade:UpgradeModule) { } } diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html new file mode 100644 index 0000000000..37686342e8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.html @@ -0,0 +1,7 @@ + + + {{ item?.contents }} + + diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts new file mode 100644 index 0000000000..85d1899d96 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.component.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input } from '@angular/core'; + +declare var window:any; +@Component({ + selector: 'canvas-menu', + templateUrl: './menu-list-ng2.component.html' +}) +export class MenuListNg2Component { + @Input() props:any = { + items: [] + }; + + constructor() { + window.menu2 = this; + } +} diff --git a/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts new file mode 100644 index 0000000000..957ba35c5a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/downgrade-wrappers/menu-list-ng2/menu-list-ng2.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { MenuListModule } from "../../ui/menu/menu-list.module"; +import { MenuListNg2Component } from "./menu-list-ng2.component"; + +export { + MenuListNg2Component +}; + +@NgModule({ + declarations: [ + MenuListNg2Component + ], + imports: [CommonModule, MenuListModule], + exports: [ + MenuListNg2Component + ], + entryComponents: [ //need to add anything that will be dynamically created + MenuListNg2Component +] +}) +export class MenuListNg2Module { +} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less deleted file mode 100644 index e219d49aa4..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.less +++ /dev/null @@ -1,3 +0,0 @@ -dynamic-element { - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts deleted file mode 100644 index 246258e44f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.component.ts +++ /dev/null @@ -1,145 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactory, ComponentFactoryResolver } from '@angular/core' -import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component'; -import { UiElementDropDownComponent, DropdownValue } from './elements-ui/dropdown/ui-element-dropdown.component'; -import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component'; -import {UiElementPopoverInputComponent} from "./elements-ui/popover-input/ui-element-popover-input.component"; -import {ValidationConfiguration} from "app/models"; -import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; - -@Component({ - selector: 'dynamic-element', - template: `
`, - styleUrls: ['./dynamic-element.component.less'], - entryComponents: [ - UiElementInputComponent, - UiElementDropDownComponent, - UiElementCheckBoxComponent, - UiElementPopoverInputComponent, - UiElementIntegerInputComponent - ] -}) -export class DynamicElementComponent { - - @ViewChild('target', { read: ViewContainerRef }) target: any; - @Input() type: any; - @Input() name: string; - @Input() readonly:boolean; - @Input() path:string;//optional param. used only for for subnetpoolid type - value:any; - - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') emitter: EventEmitter = new EventEmitter(); - @Input('value') set setValueValue(value) { - this.value = value; - } - - cmpRef: ComponentRef; - private isViewInitialized: boolean = false; - validation = ValidationConfiguration.validation; - - constructor( - private componentFactoryResolver: ComponentFactoryResolver, - private compiler: Compiler, - private el: ElementRef) { - } - - updateComponent() { - if (!this.isViewInitialized) { - return; - } - if (this.cmpRef) { - this.cmpRef.destroy(); - } - - // Factory to create component based on type or peroperty name. - switch(this.type) { - case 'list': - case 'integer': - this.createComponent(UiElementIntegerInputComponent); - this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; - break; - case 'string': - if (this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1) { - if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name - let pathArray = this.path.split("#"); - this.name = pathArray[pathArray.length - 2]; - } - this.createComponent(UiElementPopoverInputComponent); - } - else { - this.createComponent(UiElementInputComponent); - } - break; - case 'boolean': - //this.createComponent(UiElementCheckBoxComponent); - - this.createComponent(UiElementDropDownComponent); - - // Build drop down values - let tmp = []; - tmp.push(new DropdownValue('true','TRUE')); - tmp.push(new DropdownValue('false','FALSE')); - this.cmpRef.instance.values = tmp; - break; - default: - this.createComponent(UiElementInputComponent); - console.log("ERROR: No ui component to handle type: " + this.type); - } - - // Additional attributes in base element class - if (this.cmpRef) { - this.cmpRef.instance.name = this.name; - this.cmpRef.instance.type = this.type; - this.cmpRef.instance.value = this.value; - this.cmpRef.instance.readonly = this.readonly; - } - - // Subscribe to change event of of ui-element-basic and fire event to change the value - this.cmpRef.instance.baseEmitter.subscribe((value):void => { - this.emitter.emit(value) - }); - - } - - createComponent(ComponentToCreate:any):void { - let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate); - this.cmpRef = this.target.createComponent(factory); - } - - ngOnChanges() { - this.updateComponent(); - } - - ngAfterContentInit() { - //console.log("DynamicElementComponent: ngAfterContentInit: type: " + this.type + " value: " + this.value); - this.isViewInitialized = true; - this.updateComponent(); - } - - ngOnDestroy() { - if (this.cmpRef) { - this.cmpRef.destroy(); - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts deleted file mode 100644 index b57020a1d0..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/dynamic-element.module.ts +++ /dev/null @@ -1,56 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from "@angular/core"; -import { UiElementCheckBoxComponent } from './elements-ui/checkbox/ui-element-checkbox.component'; -import { UiElementDropDownComponent } from './elements-ui/dropdown/ui-element-dropdown.component'; -import { UiElementInputComponent } from './elements-ui/input/ui-element-input.component'; -import { DynamicElementComponent } from "app/ng2/components/dynamic-element/dynamic-element.component"; -import { BrowserModule } from '@angular/platform-browser' -import { FormsModule, ReactiveFormsModule } from '@angular/forms' -import { UiElementPopoverInputComponent } from "./elements-ui/popover-input/ui-element-popover-input.component"; -import {PopoverModule} from "../popover/popover.module"; -import {TooltipModule} from "../tooltip/tooltip.module"; -import {UiElementIntegerInputComponent} from "./elements-ui/integer-input/ui-element-integer-input.component"; - -@NgModule({ - declarations: [ - DynamicElementComponent, - UiElementInputComponent, - UiElementCheckBoxComponent, - UiElementDropDownComponent, - UiElementPopoverInputComponent, - UiElementIntegerInputComponent - ], - imports: [ - BrowserModule, - FormsModule, - PopoverModule, - ReactiveFormsModule, - TooltipModule - ], - exports: [ - DynamicElementComponent - ], - providers: [] -}) -export class DynamicElementModule { - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html deleted file mode 100644 index a3e28c5f0b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less deleted file mode 100644 index bed097fe5e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.less +++ /dev/null @@ -1,2 +0,0 @@ -/deep/ ui-element-checkbox { -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts deleted file mode 100644 index f73afd42c7..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/checkbox/ui-element-checkbox.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, ViewChild, ElementRef, ContentChildren, Input } from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-checkbox', - templateUrl: './ui-element-checkbox.component.html', - styleUrls: ['./ui-element-checkbox.component.less'], -}) -export class UiElementCheckBoxComponent extends UiElementBase implements UiElementBaseInterface { - - constructor() { - super(); - } - - ngAfterContentInit() { - // Convert the value to boolean (instanceOf does not work, the type is undefined). - if (this.value==='true' || this.value==='false') { - this.value = this.value==='true'?true:false; - } - } - - onSave() { - this.baseEmitter.emit(this.value); - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html deleted file mode 100644 index bfb927af71..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less deleted file mode 100644 index ea3e35140e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.less +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-dropdown { - - select { - text-indent: 6px; - border: solid 1px @main_color_o; - width: 100%; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts deleted file mode 100644 index 970c61531f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/dropdown/ui-element-dropdown.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, EventEmitter, Output, Input } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -export class DropdownValue { - value:string; - label:string; - - constructor(value:string,label:string) { - this.value = value; - this.label = label; - } -} - -@Component({ - selector: 'ui-element-dropdown', - templateUrl: './ui-element-dropdown.component.html', - styleUrls: ['./ui-element-dropdown.component.less'], -}) -export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { - @Input() - values: DropdownValue[]; - - constructor() { - super(); - } - - onSave() { - this.baseEmitter.emit(JSON.parse(this.value)); - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html deleted file mode 100644 index 814ebfd28b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less deleted file mode 100644 index d320c7ff8b..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-input { - - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts deleted file mode 100644 index fb3b3db859..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/input/ui-element-input.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-input', - templateUrl: './ui-element-input.component.html', - styleUrls: ['./ui-element-input.component.less'], -}) -export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { - super(); - this.pattern = this.validation.validationPatterns.comment; - } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - } - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html deleted file mode 100644 index e5518d453f..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.html +++ /dev/null @@ -1,15 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less deleted file mode 100644 index 8073c3858e..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.less +++ /dev/null @@ -1,17 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -/deep/ ui-element-integer-input { - - input { - text-indent: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts deleted file mode 100644 index 3339b605ca..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/integer-input/ui-element-integer-input.component.ts +++ /dev/null @@ -1,41 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; -import { BrowserModule } from '@angular/platform-browser' -import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; - -@Component({ - selector: 'ui-element-integer-input', - templateUrl: './ui-element-integer-input.component.html', - styleUrls: ['./ui-element-integer-input.component.less'], -}) -export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { - constructor() { - super(); - this.pattern = this.validation.validationPatterns.comment; - } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); - } - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html deleted file mode 100644 index 3bd51b4e36..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.html +++ /dev/null @@ -1,26 +0,0 @@ -
- - -
- - -
- -
- diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less deleted file mode 100644 index 5be443f7b6..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.less +++ /dev/null @@ -1,36 +0,0 @@ -@import '../../../../../../assets/styles/variables'; - -.popover-input-wrapper { - display: flex; -} - -/deep/ ui-element-popover-input { - - .popover { - max-width: 350px; - width: 350px; - } - - .edit-subnet-wrapper { - padding: 12px; - - .subnet-value { - width: 100%; - resize: none; - } - } - - input { - padding-right: 6px; - padding-left: 6px; - border: solid 1px @main_color_o; - } - - .error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; - } - -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts deleted file mode 100644 index 67eb8822b4..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/popover-input/ui-element-popover-input.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, ViewChild, ElementRef, Input} from '@angular/core'; -import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component"; -import {ButtonsModelMap, ButtonModel} from "app/models"; -import { PopoverContentComponent } from "app/ng2/components/popover/popover-content.component" -import { PopoverComponent } from "app/ng2/components/popover/popover.component" - -@Component({ - selector: 'ui-element-popover-input', - templateUrl: './ui-element-popover-input.component.html', - styleUrls: ['./ui-element-popover-input.component.less'] -}) -export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { - @ViewChild('textArea') textArea: ElementRef; - @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; - - saveButton: ButtonModel; - buttonsArray: ButtonsModelMap; - - onSave = ():void => { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - this.popoverContentComponent.hide(); - } - } - - constructor() { - super(); - // Create Save button and insert to buttons map - this.saveButton = new ButtonModel('save', 'blue', this.onSave); - this.buttonsArray = { 'test': this.saveButton }; - - // Define the regex pattern for this controller - this.pattern = this.validation.validationPatterns.comment; - - // Disable / Enable button according to validation - //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid); - } -} diff --git a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts deleted file mode 100644 index 4bc35e814a..0000000000 --- a/catalog-ui/src/app/ng2/components/dynamic-element/elements-ui/ui-element-base.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, EventEmitter, Input, Output } from '@angular/core' -import { ValidationConfiguration } from "app/models"; -import { FormControl, Validators } from '@angular/forms'; - -export interface UiElementBaseInterface { - onSave(); -} - -@Component({ - template: ``, - styles: [] -}) -export class UiElementBase { - - protected validation = ValidationConfiguration.validation; - protected control: FormControl; - - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') baseEmitter: EventEmitter = new EventEmitter(); - @Input('value') set setValueValue(value) { - this.value = value; - } - - protected name: string; - protected type: string; - protected value: any; - protected pattern: any; - protected readonly:boolean; - - constructor() { - //this.control = new FormControl('', [Validators.required]); - this.control = new FormControl('', []); - } - -} diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html deleted file mode 100644 index 4d2b91f3b4..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.html +++ /dev/null @@ -1,26 +0,0 @@ - - -
-
- -
- -
-
- -
-
-
- - -
-
- -
-
-
diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less deleted file mode 100644 index 07f38d3011..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.less +++ /dev/null @@ -1,45 +0,0 @@ -@import '../../../../assets/styles/variables'; -form{ - margin: 0 20px; - .field{ - padding:20px 0; - &:not(:last-child){ - border-bottom: solid 1px @main_color_o; - } - input{ - &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ - &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ - &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ - &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ - &:-ms-input-placeholder { font-style: italic; } /* Edge */ - } - } - /deep/ [ng-reflect-checked="true"]{ - /deep/ .checkbox-label-content{ - color: @main_color_a; - } - } -} - -.open-filter-button{ - cursor: pointer; - width: 32px; - height: 34px; - margin-left:5px; - - &.open{ - z-index: 1061; - background-color: @main_color_p; - border: solid 1px @main_color_c; - border-bottom: none; - } - .filter-icon{ - top: 8px; - right: 2px; - position: relative; - } -} - -/deep/ .popover{ - border: solid 1px @main_color_c !important; -} diff --git a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts deleted file mode 100644 index c43c30db21..0000000000 --- a/catalog-ui/src/app/ng2/components/filter-properties-assignment/filter-properties-assignment.component.ts +++ /dev/null @@ -1,97 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/16/2017. - */ -import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core'; -import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models"; -import {PopoverComponent} from "../popover/popover.component"; -import * as sdcConfig from "../../../../../configurations/dev" - -@Component({ - selector: 'filter-properties-assignment', - templateUrl: './filter-properties-assignment.component.html', - styleUrls: ['./filter-properties-assignment.component.less'] -}) - -export class FilterPropertiesAssignmentComponent { - @Input() componentType: string; - @Output() searchProperties: EventEmitter = new EventEmitter(); - footerButtons:ButtonsModelMap = {}; - typesOptions:Array;//All optional types - selectedTypes:Object = {}; - allSelected:boolean = false;//if all option selected - filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); - @ViewChild('filterPopover') filterPopover: PopoverComponent; - - ngOnInit() { - this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName); - this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close); - this.componentType = this.componentType.toLocaleLowerCase(); - this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType]; - } - - selectAll = () => { - _.forEach(this.typesOptions, (type) => { - this.selectedTypes[type] = this.allSelected; - }); - } - - onTypeSelected = (type:string) => { - if(!this.selectedTypes[type]){ - this.allSelected = false;//unselected 'All' - } - }; - - search = () => { - console.log('search props'); - this.filterData.selectedTypes = []; - _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => { - if(this.selectedTypes[type]){ - this.filterData.selectedTypes.push(type); - } - }); - this.searchProperties.emit(this.filterData); - this.filterPopover.hide(); - } - - close = () => { - this.filterPopover.hide(); - } - - someTypesSelectedAndThereIsPropertyName = ():boolean => { - if( _.find(Object.keys(this.selectedTypes),(key) => { - return this.selectedTypes[key]; - }) && this.filterData.propertyName ){ - return null - } - return true; - } - - clearAll = ():void => { - this.filterData.propertyName = ""; - _.forEach(this.selectedTypes,(value, key) => { - this.selectedTypes[key] = false; - }); - this.allSelected = false; - } - -} diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts deleted file mode 100644 index c8d4566653..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-display-options.ts +++ /dev/null @@ -1,32 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -export class HierarchyDisplayOptions { - idProperty: string; - valueProperty: string; - childrenProperty: string; - searchText:string; - constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) { - this.idProperty = idProperty; - this.valueProperty = valueProperty; - this.childrenProperty = childrenProperty; - this.searchText = searchText; - } -} diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html deleted file mode 100644 index 40a1c37cee..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.html +++ /dev/null @@ -1,13 +0,0 @@ -
-
-
- {{item[displayOptions.valueProperty]}} -
-
- -
-
-
diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less deleted file mode 100644 index 4befa2c797..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.less +++ /dev/null @@ -1,52 +0,0 @@ -.navigation-wrapper { - text-align: left; -} - -.node-item { - border: 1px dotted; - border-right: none; - border-bottom: none; - width: 100%; -} - -.node-item:last-child { - border-left: none; -} - -.node-data-wrapper { - cursor: default; - height: 39px; - line-height: 39px; - position: relative; - top: -20px; - background-color: white; - margin-left: 0.7em; -} - -.children-node { - padding-left: 40px; -} - -.node-data { - margin-left: 10px; - margin-right: 10px; -} - -.node-data-wrapper.selected { - background-color: #e6f6fb; - - .node-data { - color: #009fdb; - } -} - -.node-data-wrapper:hover { - background-color: #eaeaea; -} - -.mark{ - background-color: yellow; -} - - - diff --git a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts deleted file mode 100644 index dc0a02c277..0000000000 --- a/catalog-ui/src/app/ng2/components/hierarchy-navigtion/hierarchy-navigation.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, EventEmitter} from '@angular/core'; -import {HierarchyDisplayOptions} from './hierarchy-display-options'; - - -@Component({ - selector: 'hierarchy-navigation', - templateUrl: './hierarchy-navigation.component.html', - styleUrls: ['./hierarchy-navigation.component.less'] -}) - -export class HierarchyNavigationComponent { - @Input() displayData: Array; - @Input() selectedItem: any; - @Input() displayOptions: HierarchyDisplayOptions; - - @Output() updateSelected:EventEmitter = new EventEmitter(); - - onClick = ($event, item) => { - $event.stopPropagation(); - this.selectedItem = item; - this.updateSelected.emit(item); - }; - - onSelectedUpdate = ($event) => { - this.selectedItem = $event; - this.updateSelected.emit($event); - } -} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html deleted file mode 100644 index 2b58d0f086..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.html +++ /dev/null @@ -1,49 +0,0 @@ -
- -
-
Property Name
-
From Instance
-
Type
-
Value
-
-
-
No data to display
-
-
-
-
{{input.name}}
- -
-
-
- {{instanceNamesMap[input.instanceUniqueId]}} -
-
-
-
- {{input.type | contentAfterLastDot}} -
-
-
- - -
- -
-
- -
-
-
-
- - diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less deleted file mode 100644 index 89c7287449..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.less +++ /dev/null @@ -1,164 +0,0 @@ - -@import './../../../../assets/styles/variables.less'; - -:host /deep/ input { width:100%;} - -.properties-table { - display:flex; - flex-direction:column; - flex: 1; - height:100%; - text-align:left; - - .inner-cell-div{ - width: 100%; - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - - .table-header { - font-weight:bold; - border-top: #d2d2d2 solid 1px; - background-color: #eaeaea; - color:#191919; - - .table-cell { - font-size: 13px; - } - .valueCol { - justify-content: flex-start; - padding: 10px; - } - } - .table-header, .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; - } - - .table-body { - display:flex; - flex-direction: column; - overflow-y:auto; - flex: 1; - - .no-data { - border: #d2d2d2 solid 1px; - border-top:none; - text-align: center; - height: 100%; - padding: 20px; - } - /deep/.selected{ - background-color: #e6f6fb; - color: #009fdb; - } - } - - .table-row { - &:hover { - background-color:#f8f8f8; cursor:pointer; - } - - &:last-child { - flex: 1 0 auto; - } - .selected-row { - background-color:#e6f6fb; - } - } - - .table-cell { - font-size:13px; - flex:1; - border: #d2d2d2 solid 1px; - border-right:none; - border-top:none; - padding: 10px; - text-overflow: ellipsis; - white-space: nowrap; - - - &:last-child { - border-right:#d2d2d2 solid 1px; - } - &.col1 { - flex: 1 0 200px; - max-width:300px; - display: flex; - justify-content: space-between; - - .property-name { - flex: 1; - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 5px; - flex: 0 0 auto; - } - } - &.col2 { - flex: 0 0 150px; - max-width:150px; - } - - &.col3 { - flex:0 0 120px; - max-width:120px; - } - - &.valueCol { - flex: 1 0 auto; - min-width: 350px; - display: flex; - justify-content: flex-end; - padding: 0px; - align-items: center; - - .value-input { - flex: 1; - max-height: 24px; - border: none; - background-color: inherit; - - &:focus, &:active { - border:none; - outline:none; - } - } - - .delete-btn { - flex: 0 0 auto; - } - - .delete-button-container { - max-height: 24px; - } - - &.inner-table-container { - padding: 0px; - - .delete-button-container { - padding: 3px 5px 0 0 ; - } - } - } - - &.input-value-col { - padding: 8px; - } - - - } - - .filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts deleted file mode 100644 index 736655f3f7..0000000000 --- a/catalog-ui/src/app/ng2/components/inputs-table/inputs-table.component.ts +++ /dev/null @@ -1,64 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/4/2017. - */ -import {Component, Input, Output, EventEmitter, ViewChild} from "@angular/core"; -import {InputFEModel} from "app/models"; -import { ModalService } from 'app/ng2/services/modal.service'; - - - -@Component({ - selector: 'inputs-table', - templateUrl: './inputs-table.component.html', - styleUrls: ['../inputs-table/inputs-table.component.less'] -}) -export class InputsTableComponent { - - @Input() inputs: Array; - @Input() instanceNamesMap: Map; - @Input() readonly:boolean; - @Input() isLoading:boolean; - @Output() inputValueChanged: EventEmitter = new EventEmitter(); - @Output() deleteInput: EventEmitter = new EventEmitter(); - - selectedInputToDelete:InputFEModel; - - constructor(private modalService: ModalService){ - } - - onInputValueChanged = (input) => { - this.inputValueChanged.emit(input); - }; - - onDeleteInput = () => { - this.deleteInput.emit(this.selectedInputToDelete); - this.modalService.closeCurrentModal(); - }; - - openDeleteModal = (input:InputFEModel) => { - this.selectedInputToDelete = input; - this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); - } -} - - diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts new file mode 100644 index 0000000000..827209326c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { FormsModule } from "@angular/forms"; +import { TranslateModule } from "../../shared/translator/translate.module"; +import { TopNavComponent } from "./top-nav/top-nav.component"; + +@NgModule({ + declarations: [ + TopNavComponent + ], + imports: [ + CommonModule, + FormsModule, + TranslateModule + ], + exports: [], + entryComponents: [ //need to add anything that will be dynamically created + TopNavComponent + ], + providers: [] +}) +export class LayoutModule { + +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html new file mode 100644 index 0000000000..55c4bf0460 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html @@ -0,0 +1,53 @@ + diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less new file mode 100644 index 0000000000..dc666cbf00 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less @@ -0,0 +1,225 @@ +@import "../../../../../assets/styles/variables"; +@import "../../../../../assets/styles/variables-old"; +@import "../../../../../assets/styles/mixins_old"; +@import "../../../../../assets/styles/sprite"; + +.top-nav { + position: fixed; + top: @header_height; + background-color: @main_color_p; + .box-shadow(0px 1px 3px 0px rgba(0, 0, 0, 0.33)); + width: 100%; + height: @top_nav_height; + line-height: @top_nav_height; + z-index: 10; + display: flex; + flex-direction: row; + align-items: center; + + .asdc-app-title-wrapper { + flex-grow: 1; + line-height: 16px; + margin: 0 20px; + + a.asdc-app-title { + //.m_18_r; + text-decoration: none; + } + + .asdc-version { + //.m_12_r; + .opacity(0.8); + line-height: 14px; + flex-grow: 1; + } + + } + + ul.top-menu { + list-style-type: none; + margin: 0 0 0 20px; + padding: 0; + flex-grow: 999; + + & > li { + float: left; + cursor: pointer; + line-height: 50px; + height: 50px; + padding: 0 20px; + + &.selected { + border-bottom: solid 4px @main_color_a; + + a { + color: @func_color_s; + } + } + + /*&:hover { + border-bottom: solid 4px @main_color_a; + }*/ + + a { + font-family: @font-opensans-medium; + color: @main_color_m; + font-size: 16px; + display: block; + text-align: center; + text-decoration: none; + } + + &.triangle-dropdown { + padding: 0; + position: relative; + + div.triangle { + margin-top: 15px; + border-radius: 2px; + width: 17px; + height: 18px; + + //temp use - until new triangle gets in + line-height: 18px; + text-align: center; + font-size: 10px; + + &:hover { + background-color: rgba(156, 156, 156, 0.2); + + span { + .arrow-right-hover; + } + } + } + + + li a { + font-size: 16px; + } + + ul.sub-menu { + .perfect-scrollbar; + position: absolute; + left: 0; + top: 40px; + z-index: 1; + + overflow-x: hidden; + overflow-y: auto; + max-height: 0; + -webkit-transition: max-height 200ms ease-in; + -moz-transition: max-height 200ms ease-in; + -o-transition: max-height 200ms ease-in; + transition: max-height 200ms ease-in; + + padding: 0; + background-color: white; + visibility: hidden; + + li { + + height: 35px; + background-color: white; + font-size: 13px; + width: 150px; + line-height: 35px; + padding: 0 10px; + + &.disabled { + opacity: 1; + } + &.selected { + background-color: @tlv_color_v; + font-weight: bold; + } + &:hover { + color: @main_color_a; + } + span { + height: 35px; + width: 130px; + display: inline; + white-space: nowrap; + overflow: hidden; + } + } + } + &.item-click:hover ul.sub-menu, + &.item-click:active ul.sub-menu { + visibility: visible; + max-height: 500px; + border: 1px solid @func_color_b; + border-radius: 2px; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + + div ul { + + } + } + } + } + + } + + .top-search { + position: relative; + flex-grow: 1; + padding: 0 20px; + + input.search-text { + .border-radius(2px); + width: 245px; + height: 32px; + line-height: 32px; + border: 1px solid @main_color_o; + outline: none; + text-indent: 10px; + + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + /* font-style: italic; + }*/ + /* Firefox 18- */ + &::-moz-placeholder { + font-style: italic; + } + /* Firefox 19+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* IE 10+ */ + &:-ms-input-placeholder { + font-style: italic; + } + /* Edge */ + } + + .magnification { + position: absolute; + top: 19px; + right: 26px; + } + + } + + .notification-icon { + cursor: pointer; + flex-grow: 1; + margin: 0 10px 6px 0; + .sprite-new; + .vsp-list-icon; + + &:hover { + .vsp-list-icon-hover; + } + + &:active { + .vsp-list-icon-active; + } + + } + +} diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts new file mode 100644 index 0000000000..f48aa4801f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts @@ -0,0 +1,149 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Inject, Input, Output, EventEmitter} from "@angular/core"; +import {IHostedApplication, IUserProperties} from "app/models"; +import {MenuItemGroup, MenuItem} from "app/utils"; +import {UserService} from "../../../services/user.service"; +import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config"; +import {TranslateService} from "../../../shared/translator/translate.service"; + + +declare const window:any; +@Component({ + selector: 'top-nav', + templateUrl: './top-nav.component.html', + styleUrls:['./top-nav.component.less'] +}) +export class TopNavComponent { + @Input() public version:string; + @Input() public menuModel:Array; + @Input() public topLvlSelectedIndex:number; + @Input() public hideSearch:boolean; + @Input() public searchTerm:string; + @Input() public notificationIconCallback:Function; + @Output() public searchTermChange:EventEmitter = new EventEmitter(); + emitSearchTerm(event:string) { + this.searchTermChange.emit(event); + } + + public topLvlMenu:MenuItemGroup; + public user:IUserProperties; + + constructor(private translateService:TranslateService, + @Inject('$state') private $state:ng.ui.IStateService, + private userService:UserService, + @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + window.nav = this; + } + + private _getTopLvlSelectedIndexByState = ():number => { + if (!this.topLvlMenu.menuItems) { + return 0; + } + + let result = -1; + + //set result to current state + this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.current.name) { + result = index; + } + }); + + //if it's a different state , checking previous state param + if (result === -1) { + this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> { + if (item.state === this.$state.params['previousState']) { + result = index; + } + }); + } + + if (result === -1) { + result = 0; + } + + return result; + }; + + ngOnChanges(changes) { + if (changes['menuModel']) { + console.log('menuModel was changed!'); + this.generateMenu(); + } + } + + ngOnInit() { + console.log('Nav is init!', this.menuModel); + this.user = this.userService.getLoggedinUser(); + + this.translateService.languageChangedObservable.subscribe((lang) => { + let tmpArray: Array = [ + new MenuItem(this.translateService.translate("TOP_MENU_HOME_BUTTON"), null, "dashboard", "goToState", null, null), + new MenuItem(this.translateService.translate("TOP_MENU_CATALOG_BUTTON"), null, "catalog", "goToState", null, null) + ]; + + // Only designer can perform onboarding + if (this.user && this.user.role === 'DESIGNER') { + tmpArray.push(new MenuItem(this.translateService.translate("TOP_MENU_ON_BOARD_BUTTON"), null, "onboardVendor", "goToState", null, null)); + _.each(this.sdcConfig.hostedApplications, (hostedApp: IHostedApplication) => { + if (hostedApp.exists) { + tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null)); + } + }); + } + + this.topLvlMenu = new MenuItemGroup(0, tmpArray, true); + this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex; + + this.generateMenu(); + }); + } + + generateMenu() { + if (this.menuModel && this.topLvlMenu && this.menuModel[0] !== this.topLvlMenu) { + this.menuModel.unshift(this.topLvlMenu); + } + } + + goToState(state:string, params:Array):Promise { + return new Promise((resolve, reject) => { + this.$state.go(state, params && params.length > 0 ? [0] : undefined); + resolve(true); + }); + } + + menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) { + itemGroup.itemClick = false; + + let onSuccess = ():void => { + itemGroup.selectedIndex = itemGroup.menuItems.indexOf(item); + }; + let onFailed = ():void => { + }; + + if (item.callback) { + (item.callback.apply(undefined, item.params)).then(onSuccess, onFailed); + } else { + this[item.action](item.state, item.params).then(onSuccess, onFailed); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html deleted file mode 100644 index a62aa114d9..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
-
- diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less deleted file mode 100644 index ddb9915176..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.less +++ /dev/null @@ -1,91 +0,0 @@ -@import '../../../../assets/styles/variables'; -.tlv-loader-back { - background-color: @main_color_p; - position: fixed; - top: 50px; - left: 0; - right: 0; - bottom: 0; - z-index: 9999; - opacity: 0.5; -} - -.tlv-loader-relative { position: absolute; top: 0;} - -.tlv-loader { - z-index: 10002; -} - -.loader-relative { - display: block; - position:absolute; - width: 100%; - height:100%; -} - -.loader-fixed { - display: block; - position:fixed; - top:0; - left:0; - width: 100%; - height:100%; -} - -@keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Internet Explorer */ -@-ms-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -/* Opera < 12.1 */ -@-o-keyframes fadein { - from { opacity: 0; } - to { opacity: 0.8; } -} - -@keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Firefox < 16 */ -@-moz-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Safari, Chrome and Opera > 12.1 */ -@-webkit-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Internet Explorer */ -@-ms-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} - -/* Opera < 12.1 */ -@-o-keyframes fadeout { - from { opacity: 0.8; } - to { opacity: 0; } -} diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts deleted file mode 100644 index f66aa551e2..0000000000 --- a/catalog-ui/src/app/ng2/components/loader/loader.component.ts +++ /dev/null @@ -1,86 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 6/6/2017. - */ -import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; -@Component({ - selector: 'loader', - templateUrl: './loader.component.html', - styleUrls: ['./loader.component.less'] -}) -export class LoaderComponent { - - @Input() display: boolean; - @Input() size: string;// small || medium || large - @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. - @Input() loaderDelay: number; //optional - number of ms to delay loader display. - - private isVisible: boolean = false; - private offset : { - top: string; - left: string; - width: string; - height: string; - }; - - constructor(private viewContainerRef: ViewContainerRef) { - } - - ngOnInit() { - if (!this.size) { - this.size = 'large'; - } - if (this.display === true) { - this.changeLoaderDisplay(true); - } - } - - ngOnChanges(changes: SimpleChanges) { - if(changes.display){ - this.changeLoaderDisplay(this.display); - } - } - - private changeLoaderDisplay = (display: boolean): void => { - if (display) { - window.setTimeout((): void => { - this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. - }, this.loaderDelay || 0); - } else { - this.isVisible = false; - } - } - - private showLoader = () => { - if (this.relative === true) { - let parentElement = this.viewContainerRef.element.nativeElement.parentElement; - this.offset = { - left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, - top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, - width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, - height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined - }; - } - this.isVisible = true; - } - -} diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html new file mode 100644 index 0000000000..ddda82ab58 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.html @@ -0,0 +1,27 @@ + + +
+
+ +
+ +
+
+ +
+
+
+ + +
+
+ +
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less new file mode 100644 index 0000000000..25c1467b3b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.less @@ -0,0 +1,45 @@ +@import '../../../../../assets/styles/variables'; +form{ + margin: 0 20px; + .field{ + padding:20px 0; + &:not(:last-child){ + border-bottom: solid 1px @main_color_o; + } + input{ + &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */ + &:-moz-placeholder { font-style: italic; } /* Firefox 18- */ + &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */ + &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */ + &:-ms-input-placeholder { font-style: italic; } /* Edge */ + } + } + /deep/ [ng-reflect-checked="true"]{ + /deep/ .checkbox-label-content{ + color: @main_color_a; + } + } +} + +.open-filter-button{ + cursor: pointer; + width: 32px; + height: 34px; + margin-left:5px; + + &.open{ + z-index: 1061; + background-color: @main_color_p; + border: solid 1px @main_color_c; + border-bottom: none; + } + .filter-icon{ + top: 8px; + right: 2px; + position: relative; + } +} + +/deep/ .popover{ + border: solid 1px @main_color_c !important; +} diff --git a/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts new file mode 100644 index 0000000000..5a9bfbcecb --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/filter-properties-assignment/filter-properties-assignment.component.ts @@ -0,0 +1,97 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/16/2017. + */ +import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core'; +import {ButtonModel, ButtonsModelMap, FilterPropertiesAssignmentData} from "app/models"; +import * as sdcConfig from "../../../../../../configurations/dev" +import {PopoverComponent} from "../../ui/popover/popover.component"; + +@Component({ + selector: 'filter-properties-assignment', + templateUrl: './filter-properties-assignment.component.html', + styleUrls: ['./filter-properties-assignment.component.less'] +}) + +export class FilterPropertiesAssignmentComponent { + @Input() componentType: string; + @Output() searchProperties: EventEmitter = new EventEmitter(); + footerButtons:ButtonsModelMap = {}; + typesOptions:Array;//All optional types + selectedTypes:Object = {}; + allSelected:boolean = false;//if all option selected + filterData:FilterPropertiesAssignmentData = new FilterPropertiesAssignmentData(); + @ViewChild('filterPopover') filterPopover: PopoverComponent; + + ngOnInit() { + this.footerButtons['Apply'] = new ButtonModel('Apply', 'blue', this.search, this.someTypesSelectedAndThereIsPropertyName); + this.footerButtons['Close'] = new ButtonModel('Close', 'grey', this.close); + this.componentType = this.componentType.toLocaleLowerCase(); + this.typesOptions = sdcConfig.resourceTypesFilter[this.componentType]; + } + + selectAll = () => { + _.forEach(this.typesOptions, (type) => { + this.selectedTypes[type] = this.allSelected; + }); + } + + onTypeSelected = (type:string) => { + if(!this.selectedTypes[type]){ + this.allSelected = false;//unselected 'All' + } + }; + + search = () => { + console.log('search props'); + this.filterData.selectedTypes = []; + _.forEach(sdcConfig.resourceTypesFilter[this.componentType], (type) => { + if(this.selectedTypes[type]){ + this.filterData.selectedTypes.push(type); + } + }); + this.searchProperties.emit(this.filterData); + this.filterPopover.hide(); + } + + close = () => { + this.filterPopover.hide(); + } + + someTypesSelectedAndThereIsPropertyName = ():boolean => { + if( _.find(Object.keys(this.selectedTypes),(key) => { + return this.selectedTypes[key]; + }) && this.filterData.propertyName ){ + return null + } + return true; + } + + clearAll = ():void => { + this.filterData.propertyName = ""; + _.forEach(this.selectedTypes,(value, key) => { + this.selectedTypes[key] = false; + }); + this.allSelected = false; + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts new file mode 100644 index 0000000000..c8d4566653 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-display-options.ts @@ -0,0 +1,32 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +export class HierarchyDisplayOptions { + idProperty: string; + valueProperty: string; + childrenProperty: string; + searchText:string; + constructor(idProperty:string, valueProperty:string, childrenProperty?:string, searchText?:string) { + this.idProperty = idProperty; + this.valueProperty = valueProperty; + this.childrenProperty = childrenProperty; + this.searchText = searchText; + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html new file mode 100644 index 0000000000..c3f9e5ac74 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.html @@ -0,0 +1,13 @@ +
+
+
+ {{item[displayOptions.valueProperty]}} +
+
+ +
+
+
diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less new file mode 100644 index 0000000000..4befa2c797 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less @@ -0,0 +1,52 @@ +.navigation-wrapper { + text-align: left; +} + +.node-item { + border: 1px dotted; + border-right: none; + border-bottom: none; + width: 100%; +} + +.node-item:last-child { + border-left: none; +} + +.node-data-wrapper { + cursor: default; + height: 39px; + line-height: 39px; + position: relative; + top: -20px; + background-color: white; + margin-left: 0.7em; +} + +.children-node { + padding-left: 40px; +} + +.node-data { + margin-left: 10px; + margin-right: 10px; +} + +.node-data-wrapper.selected { + background-color: #e6f6fb; + + .node-data { + color: #009fdb; + } +} + +.node-data-wrapper:hover { + background-color: #eaeaea; +} + +.mark{ + background-color: yellow; +} + + + diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts new file mode 100644 index 0000000000..dc0a02c277 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, EventEmitter} from '@angular/core'; +import {HierarchyDisplayOptions} from './hierarchy-display-options'; + + +@Component({ + selector: 'hierarchy-navigation', + templateUrl: './hierarchy-navigation.component.html', + styleUrls: ['./hierarchy-navigation.component.less'] +}) + +export class HierarchyNavigationComponent { + @Input() displayData: Array; + @Input() selectedItem: any; + @Input() displayOptions: HierarchyDisplayOptions; + + @Output() updateSelected:EventEmitter = new EventEmitter(); + + onClick = ($event, item) => { + $event.stopPropagation(); + this.selectedItem = item; + this.updateSelected.emit(item); + }; + + onSelectedUpdate = ($event) => { + this.selectedItem = $event; + this.updateSelected.emit($event); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html new file mode 100644 index 0000000000..57e0474c66 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.html @@ -0,0 +1,49 @@ +
+ +
+
Property Name
+
From Instance
+
Type
+
Value
+
+
+
No data to display
+
+
+
+
{{input.name}}
+ +
+
+
+ {{instanceNamesMap[input.instanceUniqueId]}} +
+
+
+
+ {{input.type | contentAfterLastDot}} +
+
+
+ + +
+ +
+
+ +
+
+
+
+ + diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less new file mode 100644 index 0000000000..0545874f53 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less @@ -0,0 +1,164 @@ + +@import './../../../../../assets/styles/variables.less'; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + .inner-cell-div{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + + .table-header { + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #eaeaea; + color:#191919; + + .table-cell { + font-size: 13px; + } + .valueCol { + justify-content: flex-start; + padding: 10px; + } + } + .table-header, .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + } + + .table-row { + &:hover { + background-color:#f8f8f8; cursor:pointer; + } + + &:last-child { + flex: 1 0 auto; + } + .selected-row { + background-color:#e6f6fb; + } + } + + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 200px; + max-width:300px; + display: flex; + justify-content: space-between; + + .property-name { + flex: 1; + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + } + + &.valueCol { + flex: 1 0 auto; + min-width: 350px; + display: flex; + justify-content: flex-end; + padding: 0px; + align-items: center; + + .value-input { + flex: 1; + max-height: 24px; + border: none; + background-color: inherit; + + &:focus, &:active { + border:none; + outline:none; + } + } + + .delete-btn { + flex: 0 0 auto; + } + + .delete-button-container { + max-height: 24px; + } + + &.inner-table-container { + padding: 0px; + + .delete-button-container { + padding: 3px 5px 0 0 ; + } + } + } + + &.input-value-col { + padding: 8px; + } + + + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts new file mode 100644 index 0000000000..0add1cd707 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/4/2017. + */ +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import {InputFEModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; + +@Component({ + selector: 'inputs-table', + templateUrl: './inputs-table.component.html', + styleUrls: ['../inputs-table/inputs-table.component.less'], +}) +export class InputsTableComponent { + + @Input() inputs: Array; + @Input() instanceNamesMap: Map; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Output() inputValueChanged: EventEmitter = new EventEmitter(); + @Output() deleteInput: EventEmitter = new EventEmitter(); + + selectedInputToDelete:InputFEModel; + + constructor(private modalService: ModalService){ + } + + onInputValueChanged = (input) => { + this.inputValueChanged.emit(input); + }; + + onDeleteInput = () => { + this.deleteInput.emit(this.selectedInputToDelete); + this.modalService.closeCurrentModal(); + }; + + openDeleteModal = (input:InputFEModel) => { + this.selectedInputToDelete = input; + this.modalService.createActionModal("Delete Input", "Are you sure you want to delete this input?", "Delete", this.onDeleteInput, "Close").instance.open(); + } +} + + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html new file mode 100644 index 0000000000..14b6c7d4c0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.html @@ -0,0 +1,67 @@ +
+ + +
+ +
{{property.name}}
+
+
{{property.name}}
+
+ +
+ + + +
+ +
+ + +
{{property.type | contentAfterLastDot }}
+
{{property.schema.property.type | contentAfterLastDot }}
+ + +
+ + + + Add value to list + + + + +
+ +
+ + + + +
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less new file mode 100644 index 0000000000..0adce2c99d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.less @@ -0,0 +1,84 @@ +@import '../../../../../../assets/styles/variables.less'; +.flat-children-container { + .dynamic-property-row { + /*create nested left border classes for up to 10 levels of nesting*/ + .nested-border-loop(@i) when (@i > 0) { + @size: (@i - 1) *2; + &.nested-level-@{i} .table-cell:first-child { + border-left: ~"solid @{size}px #009fdb"; + } + .nested-border-loop(@i - 1) + } + .nested-border-loop(10); + } + dynamic-property { + &:first-child .dynamic-property-row.with-top-border { + border-top:solid 1px #d2d2d2; + } + &:not(:last-child) .dynamic-property-row { + border-bottom:solid 1px #d2d2d2; + } + } +} +.dynamic-property-row { + display:flex; + flex-direction:row; + align-items: stretch; + + &.readonly{ + background-color: @tlv_color_t; + cursor: auto; + } + //for the case that the parent is disabled but the child is enabled + &:not(.readonly){ + background-color: @main_color_p; + } + + .table-cell { + flex: 1; + padding:9px; + justify-content: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &:first-child { + flex: 0 0 50%; + border-right:#d2d2d2 solid 1px; + &:only-of-type { + flex: 1 1 100%; + border-right:none; + } + } + &.empty { + height:40px; + } + } + .property-icon { + flex: 0 0 auto; + margin-right:10px; + align-self:center; + cursor:pointer; + } + +} + +.filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } +} +.inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + display: inline; + padding-left: 8px; +} +.error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; +} + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts new file mode 100644 index 0000000000..04cb26d030 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/dynamic-property/dynamic-property.component.ts @@ -0,0 +1,206 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, EventEmitter} from "@angular/core"; +import { PropertyFEModel, DerivedFEProperty, DerivedPropertyType } from "app/models"; +import { PROPERTY_TYPES } from 'app/utils'; +import { DataTypeService } from "../../../../services/data-type.service"; +import { trigger, state, style, transition, animate } from '@angular/core'; +import {PropertiesUtils} from "../../../../pages/properties-assignment/services/properties.utils"; + + +@Component({ + selector: 'dynamic-property', + templateUrl: './dynamic-property.component.html', + styleUrls: ['./dynamic-property.component.less'], + animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] +}) +export class DynamicPropertyComponent { + + derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement + propType: DerivedPropertyType; + propPath: string; + isPropertyFEModel: boolean; + nestedLevel: number; + + @Input() canBeDeclared: boolean; + @Input() property: PropertyFEModel | DerivedFEProperty; + @Input() expandedChildId: string; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText: string; + @Input() readonly: boolean; + @Input() hasChildren: boolean; + @Input() hasDeclareOption:boolean; + + @Output() valueChanged: EventEmitter = new EventEmitter(); + @Output() expandChild: EventEmitter = new EventEmitter(); + @Output() checkProperty: EventEmitter = new EventEmitter(); + @Output() deleteItem: EventEmitter = new EventEmitter(); + @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); + @Output() mapKeyChanged: EventEmitter = new EventEmitter(); + @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); + + + constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { + } + + ngOnInit() { + this.isPropertyFEModel = this.property instanceof PropertyFEModel; + this.propType = this.property.derivedDataType; + this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; + this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; + } + + + onClickPropertyRow = (property, event) => { + // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined + event && event.stopPropagation && event.stopPropagation(); + this.clickOnPropertyRow.emit(property); + } + + + expandChildById = (id: string) => { + this.expandedChildId = id; + this.expandChild.emit(id); + } + + checkedChange = (propName: string) => { + this.checkProperty.emit(propName); + } + + getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children + return _.filter((this.property).flattenedChildren,(prop:DerivedFEProperty)=>{ + return _.startsWith(prop.propertiesName + '#', property.propertiesName); + }).length > 1; + } + + createNewChildProperty = (): void => { + + let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); + if (this.property instanceof PropertyFEModel) { + this.addChildProps(newProps, this.property.name); + } else { + this.addChildPropsToParent.emit(newProps); + } + } + + addChildProps = (newProps: Array, childPropName: string) => { + + if (this.property instanceof PropertyFEModel) { + let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children + this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator + this.expandChildById(newProps[0].propertiesName); + + + if(!newProps[0].schema.property.isSimpleType){ + if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) + this.updateMapKeyValueOnMainParent(newProps); + if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { + this.valueChanged.emit(this.property.name); + } + } + } + } + } + + updateMapKeyValueOnMainParent(childrenProps: Array){ + if (this.property instanceof PropertyFEModel) { + //Update only if all this property parents has key name + if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ + angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props + (this.property).childPropUpdated(prop); + },this); + //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) + let parentNames = (this.property).getParentNamesArray(childrenProps[0].propertiesName, []); + childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); + } + } + } + + childValueChanged = (property: DerivedFEProperty) => { //value of child property changed + + if (this.property instanceof PropertyFEModel) { // will always be the case + if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save + this.property.childPropUpdated(property); + this.dataTypeService.checkForCustomBehavior(this.property); + this.valueChanged.emit(this.property.name); + } + } + } + + deleteListOrMapItem = (item: DerivedFEProperty) => { + if (this.property instanceof PropertyFEModel) { + this.removeValueFromParent(item); + this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); + this.expandChildById(item.propertiesName); + } + } + + removeValueFromParent = (item: DerivedFEProperty, target?: any) => { + if (this.property instanceof PropertyFEModel) { + let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); + + if (item.derivedDataType == DerivedPropertyType.MAP) { + let oldKey = item.mapKey; + if (target && typeof target.value == 'string') { //allow saving empty string + let replaceKey:string = target.value; + if (!replaceKey) {//prevent delete map key + return; + } + if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists + target.setCustomValidity('This key is already exists.'); + return; + }else { + target.setCustomValidity(''); + _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); + item.mapKey = replaceKey; + //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. + if(!oldKey && !item.schema.property.isSimpleType){ + //Search this map item children and update these value on parent property valueOBj + let mapKeyFlattenChildren:Array = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { + return _.startsWith(prop.propertiesName, item.propertiesName); + }); + this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); + } + } + } + delete itemParent.valueObj[oldKey]; + } else { + let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); + itemParent.valueObj.splice(itemIndex, 1); + } + if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) + if (itemParent instanceof PropertyFEModel) { //direct child + this.valueChanged.emit(this.property.name); + } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) + this.childValueChanged(itemParent); + } + } + } + } + + preventInsertItem = (property:DerivedFEProperty):boolean => { + if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){ + return true; + } + return false; + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts new file mode 100644 index 0000000000..4520469594 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/pipes/filterChildProperties.pipe.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { DerivedFEProperty } from 'app/models'; + +@Pipe({ + name: 'filterChildProperties', +}) +export class FilterChildPropertiesPipe implements PipeTransform { + public transform(childProperties: Array, parentId: string) { + if (!parentId || !childProperties) return childProperties; + + let validParents: Array = [parentId]; + while (parentId.lastIndexOf('#') > 0) { + parentId = parentId.substring(0, parentId.lastIndexOf('#')); + validParents.push(parentId); + } + return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1); + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html new file mode 100644 index 0000000000..933b80f577 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.html @@ -0,0 +1,63 @@ +
+ +
+
Property Name
+
Type
+
ES
+
Value
+
+
+
No data to display
+ + +
{{feInstanceNamesMap[instanceId]}}
+ +
+ +
+
+ +
+ {{property.name}} +
+
+ +
+
+
+ {{property.type | contentAfterLastDot}} +
+
+
+
+ {{property.schema.property.type | contentAfterLastDot}} +
+
+
+ + + + +
+
+ + +
+
diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less new file mode 100644 index 0000000000..20da0b6ec2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.less @@ -0,0 +1,180 @@ +@import './../../../../../assets/styles/variables.less'; +@import '../../../../../assets/styles/sprite'; +@smaller-screen: ~"only screen and (max-width: 1580px)"; + +:host /deep/ input { width:100%;} + +.properties-table { + display:flex; + flex-direction:column; + flex: 1; + height:100%; + text-align:left; + + + .inner-cell-div{ + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + height: 20px; + } + + .table-header { + display: flex; + flex-direction:row; + flex: 0 0 auto; + font-weight:bold; + border-top: #d2d2d2 solid 1px; + background-color: #f2f2f2; + + .table-cell { + color:#191919; + font-size:13px; + } + } + + .table-rows-header { + border: #d2d2d2 solid 1px; + border-top:none; + } + + .table-body { + display:flex; + flex-direction: column; + overflow-y:auto; + flex: 1; + background-color: @main_color_p; + + .no-data { + border: #d2d2d2 solid 1px; + border-top:none; + text-align: center; + height: 100%; + padding: 20px; + } + /deep/.selected{ + background-color: #e6f6fb; + color: #009fdb; + } + &.view-mode{ + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; + } + } + .table-row { + display: flex; + flex-direction:row; + flex: 0 0 auto; + &.readonly{ + background-color: #f8f8f8; + cursor: auto; + } + + &:hover:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + /deep/ .dynamic-property-row:not(.selected){ + background-color:#f8f8f8; cursor:pointer; + } + } + + .selected-row { + background-color:#e6f6fb; + } + + .table-cell.valueCol { + padding:0px; + + } + } + } + .table-cell { + font-size:13px; + flex:1; + border: #d2d2d2 solid 1px; + border-right:none; + border-top:none; + padding:10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow:hidden; + display: flex; + min-height:40px; + + &:last-child { + border-right:#d2d2d2 solid 1px; + } + &.col1 { + flex: 1 0 210px; + max-width:300px; + display: flex; + justify-content: space-between; + @media @smaller-screen { flex: 0 0 25%;} + + .property-name { + flex: 1; + display: flex; + overflow: hidden; + //max-width: 90%; fix bug 327139 + } + + .property-description-icon { + float: right; + margin-top: 4px; + margin-left: 5px; + flex: 0 0 auto; + } + } + &.col2 { + flex: 0 0 150px; + max-width:150px; + @media @smaller-screen { flex: 0 0 20%;} + } + + &.col3 { + flex:0 0 120px; + max-width:120px; + @media @smaller-screen { flex: 0 0 15%;} + } + + &.valueCol { + flex: 2 0 300px; + display: flex; + @media @smaller-screen { flex: 1 0 40%;} + } + + + /deep/ .checkbox-container { + margin-right: 10px; + } + + /deep/ &.round-checkbox { + .checkbox-container input[type=checkbox].checkbox-hidden { + &:checked ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon; + } + &[disabled] ~ .checkbox-icon::before { + .sprite-new; + .round-checked-icon.disabled; + background-color:inherit; + border:none; + //animation: addDisabledCheck 4s linear; + } + } + } + } + + .filtered { + /deep/ .checkbox-label-content{ + background-color: yellow; + } + } + + dynamic-property { + width:100%; + &:last-child /deep/ .dynamic-property-row { + border-bottom:none; + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts new file mode 100644 index 0000000000..32bbb1b3a0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/properties-table.component.ts @@ -0,0 +1,91 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter} from "@angular/core"; +import {PropertyFEModel, DerivedFEProperty, InstanceFePropertiesMap} from "app/models"; +import {PropertiesService} from "../../../services/properties.service"; + +@Component({ + selector: 'properties-table', + templateUrl: './properties-table.component.html', + styleUrls: ['./properties-table.component.less'] +}) +export class PropertiesTableComponent { + + @Input() fePropertiesMap: InstanceFePropertiesMap; + @Input() feInstanceNamesMap: Map; + @Input() selectedPropertyId: string; + @Input() propertyNameSearchText:string; + @Input() searchTerm:string; + @Input() readonly:boolean; + @Input() isLoading:boolean; + @Input() hasDeclareOption:boolean; + @Input() hidePropertyType:boolean; + + @Output() valueChanged: EventEmitter = new EventEmitter(); + @Output() selectPropertyRow: EventEmitter = new EventEmitter(); + @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter();//only for hasDeclareOption + + constructor (private propertiesService:PropertiesService ){ + } + + ngOnInit() { + } + + propValueChanged = (property) => { + this.valueChanged.emit(property); + }; + + // Click on main row (row of propertyFEModel) + onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { + //event && event.stopPropagation(); + this.selectedPropertyId = property.name; + let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + this.selectPropertyRow.emit(propertyRowSelectedEvent); + }; + + // Click on inner row (row of DerivedFEProperty) + onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { + let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); + this.selectPropertyRow.emit(propertyRowSelectedEvent); + } + + propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { + let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; + + if (!isChecked) { + this.propertiesService.undoDisableRelatedProperties(prop, childPropName); + } else { + this.propertiesService.disableRelatedProperties(prop, childPropName); + } + this.updateCheckedPropertyCount.emit(isChecked); + } + +} + +export class PropertyRowSelectedEvent { + propertyModel:PropertyFEModel | DerivedFEProperty; + instanceName:string; + constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ + this.propertyModel = propertyModel; + this.instanceName = instanceName; + } +} + diff --git a/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts new file mode 100644 index 0000000000..91f33485a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/properties-table/property-table.module.ts @@ -0,0 +1,29 @@ +import {NgModule} from "@angular/core"; +import {PropertiesTableComponent} from "./properties-table.component"; +import {DynamicPropertyComponent} from "./dynamic-property/dynamic-property.component"; +import {FormsModule} from "@angular/forms"; +import {UiElementsModule} from "../../ui/ui-elements.module"; +import {CommonModule} from "@angular/common"; +import {HttpModule} from "@angular/http"; +import {FilterChildPropertiesPipe} from "./pipes/filterChildProperties.pipe"; +import {GlobalPipesModule} from "../../../pipes/global-pipes.module"; +import {PropertiesService} from "../../../services/properties.service"; + +@NgModule({ + imports: [ + FormsModule, + HttpModule, + CommonModule, + GlobalPipesModule, + UiElementsModule + ], + declarations: [ + FilterChildPropertiesPipe, + DynamicPropertyComponent, + PropertiesTableComponent + ], + exports: [PropertiesTableComponent], + providers: [FilterChildPropertiesPipe, PropertiesService] +}) +export class PropertyTableModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less new file mode 100644 index 0000000000..edcb87db3d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-reqiurement-or-capability.component.less @@ -0,0 +1,77 @@ +@import './../../../../../assets/styles/variables.less'; +@import './../../../../../assets/styles/mixins.less'; +.main-container{ + color: @main_color_m; +} +.select-req-or-cap-span { + float: left; + margin-right: 15px; + font-size: 13px; +} +.select-type-label{ + .m_12_m; + margin-bottom: 2px; +} +.select-type{ + display: flex; + margin-bottom: 10px; + ui-element-dropdown{ + width: 40%; + font-size: 13px; + /deep/ select{ + height: 31px; + } + } +} +.table-and-list-container{ + display: flex; + padding-top: 10px; + .inner-container{ + height: 300px; + overflow-y: auto; + border: @main_color_o solid 1px; + } + .inner-container:not(:last-of-type){ + border-right: none; + } + .requirements-or-capabilities-container { + width: 40%; + &.empty-list{ + background-color: @tlv_color_t; + text-align: center; + &:before{ + content: 'Select "type" above'; + line-height: 298px; + } + } + .req-or-cap-item{ + border-bottom: @main_color_o solid 1px; + padding: 10px; + font-size: 13px; + &:hover:not(.selected){ + background-color:@tlv_color_t; cursor:pointer; + } + } + } + .properties-table-container{ + width: 60%; + display: flex; + &.cap-selected{ + background-color: @tlv_color_t; + border: @main_color_a solid 1px; + -webkit-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + -moz-box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + box-shadow: inset 8px -2px 7px -9px rgba(84,84,84,1); + } + properties-table{ + margin: 15px; + width: 100%; + } + } +} + +.selected{ + color: @main_color_a; + background-color: @tlv_color_v; + border-left: @main_color_a solid 4px; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html new file mode 100644 index 0000000000..bcd33efc30 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.html @@ -0,0 +1,36 @@ +
+ Select: + + + +
+ +
+ +
+
+
+ {{item.getFullTitle()}} +
+
+
+ + +
+ +
+
+ diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts new file mode 100644 index 0000000000..ab67dc1850 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.component.ts @@ -0,0 +1,182 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import {Component, EventEmitter, Input, OnInit, Output, SimpleChanges} from '@angular/core'; +import {RadioButtonModel, Match, PropertyModel, InstanceFePropertiesMap, Component as ComponentModel} from "app/models"; +import {Dictionary} from "lodash"; +import {DropdownValue} from "../../ui/form-components/dropdown/ui-element-dropdown.component"; +import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service"; +import {PropertiesUtils} from "app/ng2/pages/properties-assignment/services/properties.utils"; +import {Requirement} from "../../../../models/requirement"; +import {Capability, RequirementCapabilityModel} from "../../../../models/capability"; + +const REQUIREMENT = 'Requirement'; +const CAPABILITY = 'Capability'; + +@Component({ + selector: 'select-requirement-or-capability', + templateUrl: './select-requirement-or-capability.component.html', + styleUrls: ['./select-reqiurement-or-capability.component.less'] +}) + +export class SelectRequirementOrCapabilityComponent implements OnInit { + + + @Input() optionalRequirementsMap:Dictionary; //optional requirement map - key is type, value is array of requirements + @Input() optionalCapabilitiesMap:Dictionary; //optional capabilities map - key is type, value is array of capabilities + + @Input() selectedReqOrCapOption:string; // the selection value chosen by the user (options: requirement / capability ) + + @Input() currentComponent:ComponentModel; + @Input() componentInstanceId:string; + + @Input() selectedReqOrCapModel:RequirementCapabilityModel; + + @Output() updateSelectedReqOrCap:EventEmitter = new EventEmitter(); + @Output() updateCapabilityProperties:EventEmitter> = new EventEmitter>(); + + types:Array = []; + selectedType:string; + + selectOptions:Array; + + requirementsTypes:Array = []; + capabilitiesTypes:Array = []; + + disabledSelectReqOrCapOption: boolean; // If we need to disable the option to choose requirement or capability + displayCapReqListFilterByType:RequirementCapabilityModel[]; + + capabilityProperties:InstanceFePropertiesMap; + + constructor(private componentInstanceServiceNg2:ComponentInstanceServiceNg2, + private propertiesUtils:PropertiesUtils) { + this.selectOptions = [new RadioButtonModel(REQUIREMENT, REQUIREMENT), new RadioButtonModel(CAPABILITY, CAPABILITY)]; + } + + private initDefaultReqOrCapSelection = (): void => { + if(this.selectedReqOrCapOption){//for second step + this.disabledSelectReqOrCapOption = true; + } + if (this.selectedReqOrCapModel) {//init when there is selected req or cap + if (this.selectedReqOrCapModel instanceof Capability) { + this.selectedReqOrCapOption = this.selectOptions[1].value; + this.selectedType = this.selectedReqOrCapModel.type; + } else { + this.selectedReqOrCapOption = this.selectOptions[0].value; + this.selectedType = (this.selectedReqOrCapModel).capability; + } + } + if(Object.keys(this.optionalCapabilitiesMap).length === 0) { // If instance don't have capabilities + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[0].value; + } else if(Object.keys(this.optionalRequirementsMap).length === 0) { // If instance don't have requirements + this.disabledSelectReqOrCapOption = true; + this.selectedReqOrCapOption = this.selectOptions[1].value; + } + this.selectedReqOrCapOption = this.selectedReqOrCapOption || this.selectOptions[1].value; + this.types = this.selectedReqOrCapOption == this.selectOptions[0].value ? this.requirementsTypes : this.capabilitiesTypes; + setTimeout(() => { + if (this.selectedType) { + this.initCapReqListFilterByType(); + } else { + this.setDefaultValueType(); + } + }); + } + + initCapabilityPropertiesTable = ():void => { + if(this.selectedReqOrCapModel instanceof Capability ) { + let selectedCapability = this.selectedReqOrCapModel; + if(selectedCapability.properties){ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({ CAPABILITY : selectedCapability.properties}, false); + } + } + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.selectedReqOrCapModel) { + if (this.selectedReqOrCapModel && this.selectedReqOrCapOption === CAPABILITY) { + this.setCapabilityProperties(); + } + } + } + + ngOnInit() { + this.initTypesList(); + this.initDefaultReqOrCapSelection(); + this.initCapabilityPropertiesTable(); + } + + private initTypesList = ():void => { + this.requirementsTypes = _.keys(this.optionalRequirementsMap); + this.requirementsTypes.unshift('All'); + this.capabilitiesTypes = _.keys(this.optionalCapabilitiesMap); + this.capabilitiesTypes.unshift('All'); + } + + private fillInDisplayCapReqListFilterByType = (allOptionalTypesMap:Dictionary):void => { + if(this.selectedType === 'All'){ + this.displayCapReqListFilterByType = []; + _.map(allOptionalTypesMap,(reqOrCapArray:RequirementCapabilityModel[])=>{ + this.displayCapReqListFilterByType = this.displayCapReqListFilterByType.concat(reqOrCapArray); + }) + }else{ + this.displayCapReqListFilterByType = allOptionalTypesMap[this.selectedType]; + } + + // automatically select a *single* requirement or capability: + if (this.displayCapReqListFilterByType.length === 1) { + const selectedReqCap:RequirementCapabilityModel = this.displayCapReqListFilterByType[0]; + this.selectReqOrCapFromList((this.selectedType === CAPABILITY) ? selectedReqCap : selectedReqCap); + } + } + + private initCapReqListFilterByType = ():void => { + if (this.selectedReqOrCapOption === CAPABILITY) { + this.fillInDisplayCapReqListFilterByType(this.optionalCapabilitiesMap); + } else { + this.fillInDisplayCapReqListFilterByType(this.optionalRequirementsMap); + } + } + + private onTypeSelected = ():void => { + this.initCapReqListFilterByType(); + if (this.displayCapReqListFilterByType.indexOf(this.selectedReqOrCapModel) === -1) { + this.selectReqOrCapFromList(null); + } + } + + private setDefaultValueType = ():void =>{ + // automatically select a *single* type from the list: + this.selectedType = (this.types.length === 2) ? this.types[1] : this.types[0]; + this.initCapReqListFilterByType(); + } + + private onSelectRequirementOrCapability = ():void => { + this.types = this.selectedReqOrCapOption === REQUIREMENT ? this.requirementsTypes : this.capabilitiesTypes; + this.selectReqOrCapFromList(null); + this.setDefaultValueType(); + } + + private selectReqOrCapFromList = (selected:Requirement|Capability):void => { + if (this.selectedReqOrCapModel !== selected) { + this.selectedReqOrCapModel = selected; + this.updateSelectedReqOrCap.emit(selected); + } + } + + + private setCapabilityProperties = ():void => { + let selectedCapability = this.selectedReqOrCapModel; + if (selectedCapability.properties === undefined) { + this.componentInstanceServiceNg2.getInstanceCapabilityProperties(this.currentComponent, this.componentInstanceId, selectedCapability.type, selectedCapability.name) + .subscribe((response:Array) => { + this.capabilityProperties = (response && response.length) ? this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : response}, false) : null; + this.updateCapabilityProperties.emit(response); + }, error => {}); + }else{ + this.capabilityProperties = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({CAPABILITY : selectedCapability.properties}, false); + this.updateCapabilityProperties.emit(selectedCapability.properties); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts new file mode 100644 index 0000000000..cb12dea02a --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/select-requirement-or-capability/select-requirement-or-capability.module.ts @@ -0,0 +1,24 @@ +import {NgModule} from "@angular/core"; +import {SelectRequirementOrCapabilityComponent} from "./select-requirement-or-capability.component"; +import {FormsModule} from "@angular/forms"; +import {FormElementsModule} from "../../ui/form-components/form-elements.module"; +import {CommonModule} from "@angular/common"; +import {GlobalPipesModule} from "app/ng2/pipes/global-pipes.module"; +import {PropertyTableModule} from "../properties-table/property-table.module"; + +@NgModule({ + declarations: [ + SelectRequirementOrCapabilityComponent + ], + imports: [ + CommonModule, + FormsModule, + FormElementsModule, + GlobalPipesModule, + PropertyTableModule], + + exports: [SelectRequirementOrCapabilityComponent], + providers: [] +}) +export class SelectRequirementOrCapabilityModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html deleted file mode 100644 index 433bd4fd6f..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-
Error code: {{input.messageId}}
-
Status code: {{input.status}}
-
{{input.message}}
-
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts deleted file mode 100644 index c0d6673412..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/error-message/error-message.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by ngordon on 7/30/2017. - */ -import { Component, Input } from '@angular/core'; -import { ServerErrorResponse } from 'app/models'; - -@Component({ - selector: 'error-message', - templateUrl: './error-message.component.html' -}) - -export class ErrorMessageComponent { - @Input() input: ServerErrorResponse; - - constructor() { - } - -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html deleted file mode 100644 index d843867cdb..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.html +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
- {{ input.title }} - -
-
-
{{input.content}}
-
-
- -
- -
-
-
-
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less deleted file mode 100644 index c87162afb0..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.less +++ /dev/null @@ -1,128 +0,0 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../assets/styles/mixins'; -@import '../../../../assets/styles/sprite-old'; -/deep/ modal { - display: none; - - .custom-modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1000; - overflow: auto; - margin: auto; - display: flex; - align-items: center; - - .ng2-modal-content { - background: #fff; - width: 100%; - box-shadow: 0 5px 15px rgba(0,0,0,.5); - border-radius: 4px; - .ng2-modal-body{ - padding: 20px; - } - - .ng2-modal-header{ - .m_18_m; - font-weight: bold; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - height: 50px; - line-height: 50px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: left; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0px 20px; - - &.modal-type-standard { - border-bottom: solid 3px @main_color_a; - } - - &.modal-type-error { - border-bottom: solid 3px @func_color_q; - } - - &.modal-type-alert{ - border-bottom: solid 3px @main_color_h; - } - - .title{ - .s_18_m; - -webkit-box-flex: 999; - -ms-flex-positive: 999; - flex-grow: 999; - } - .close-button{ - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } - } - - .ng2-modal-footer{ - background-color: @tlv_color_t; - padding: 17px 30px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - border-radius: 4px; - button{ - margin: 0 12px 0 6px; - } - } - } - } - - .modal-background { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: #000; - opacity: 0.5; - z-index: 900; - } -} - -.xl { - width: 1200px; -} - -.l { - width: 875px; -} - -.md { - width: 650px; -} - -.sm { - width: 552px; -} - -.xsm { - width: 432px; -} - -body.modal-open { - overflow: hidden; -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts deleted file mode 100644 index 89db8d1140..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.component.ts +++ /dev/null @@ -1,62 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 6/1/2017. - */ -import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; -import {ViewContainerRef, ViewChild} from '@angular/core'; -import * as $ from 'jquery'; -import { ButtonsModelMap, ModalModel } from 'app/models'; - -@Component({ - selector: 'modal', - templateUrl: './modal.component.html', - styleUrls:['modal.component.less'] -}) - -export class ModalComponent implements OnInit, OnDestroy { - @Input() input: ModalModel; - @Input() dynamicContent: any; - @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. - private modalElement: JQuery; - - constructor( el: ElementRef ) { - this.modalElement = $(el.nativeElement); - } - - ngOnInit(): void { - this.modalElement.appendTo('body'); - } - - ngOnDestroy(): void { - this.modalElement.remove(); - } - - open(): void { - this.modalElement.show(); - $('body').addClass('modal-open'); - } - - close(): void { - this.modalElement.hide(); - $('body').removeClass('modal-open'); - } -} diff --git a/catalog-ui/src/app/ng2/components/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/modal/modal.module.ts deleted file mode 100644 index 892f6993dd..0000000000 --- a/catalog-ui/src/app/ng2/components/modal/modal.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from "@angular/core"; -import { CommonModule } from '@angular/common'; -import { ModalService } from 'app/ng2/services/modal.service'; -import { ModalComponent } from "app/ng2/components/modal/modal.component"; -import { ErrorMessageComponent } from "./error-message/error-message.component"; - -@NgModule({ - declarations: [ - ModalComponent, - ErrorMessageComponent - ], - imports: [CommonModule], - exports: [], - entryComponents: [ //need to add anything that will be dynamically created - ModalComponent, - ErrorMessageComponent - ], - providers: [ModalService] -}) -export class ModalModule { - -} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/popover/popover-content.component.html deleted file mode 100644 index 6d76f0ad06..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
-
-
-
- {{ title }} - -
- -
- -
-
- - diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/popover/popover-content.component.less deleted file mode 100644 index 04cdd3914b..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.less +++ /dev/null @@ -1,77 +0,0 @@ -@import '../../../../assets/styles/variables'; -@import '../../../../assets/styles/mixins'; -@import '../../../../assets/styles/sprite-old'; -.popover .virtual-area { - height: 11px; - width: 100%; - position: absolute; -} -.popover.top .virtual-area { - bottom: -11px; -} -.popover.bottom .virtual-area { - top: -11px; -} -.popover.left .virtual-area { - right: -11px; -} -.popover.right .virtual-area { - left: -11px; -} -.popover.hide-arrow{ - margin: 0; -} - -.popover-header{ - .m_14_m; - font-weight: bold; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - height: 40px; - line-height: 48px; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - text-align: left; - border-bottom: solid 1px @main_color_o; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0px 20px; - max-width:350px; - - .title{ - flex: 1; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .close-button{ - .sprite; - .sprite.x-btn-black; - cursor: pointer; - } -} - -.popover-footer{ - background-color: @tlv_color_t; - height: 40px; - clear: both; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - button{ - margin: 8px 12px 8px 6px; - } -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts deleted file mode 100644 index 6eb36287d0..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover-content.component.ts +++ /dev/null @@ -1,278 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core"; -import {ButtonsModelMap} from "app/models"; -import {PopoverComponent} from "./popover.component"; - -@Component({ - selector: "popover-content", - templateUrl:'./popover-content.component.html', - styleUrls:['popover-content.component.less'] -}) -export class PopoverContentComponent implements AfterViewInit, OnDestroy { - - @Input() public title: string; - @Input() public buttons:ButtonsModelMap; - - @Input() - content: string; - - @Input() - placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom"; - - @Input() - animation: boolean = true; - - @Input() - closeOnClickOutside: boolean = false; - - @Input() - closeOnMouseOutside: boolean = false; - - @Input() - hideArrow: boolean = false; - - @ViewChild("popoverDiv") - popoverDiv: ElementRef; - - buttonsNames:Array; - - popover: PopoverComponent; - onCloseFromOutside = new EventEmitter(); - top: number = -10000; - left: number = -10000; - isIn: boolean = false; - displayType: string = "none"; - effectivePlacement: string; - - onDocumentMouseDown = (event: any) => { - const element = this.element.nativeElement; - if (!element || !this.popover) return; - if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return; - this.hide(); - this.onCloseFromOutside.emit(undefined); - }; - - - constructor(protected element: ElementRef, - protected cdr: ChangeDetectorRef, - protected renderer: Renderer) { - } - - listenClickFunc: any; - listenMouseFunc: any; - - ngAfterViewInit(): void { - this.buttonsNames = Object.keys(this.buttons); - if (this.closeOnClickOutside) - this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event)); - if (this.closeOnMouseOutside) - this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event)); - - this.show(); - this.cdr.detectChanges(); - } - - ngOnDestroy() { - if (this.closeOnClickOutside) - this.listenClickFunc(); - if (this.closeOnMouseOutside) - this.listenMouseFunc(); - } - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - show(): void { - if (!this.popover || !this.popover.getElement()) - return; - - const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement); - this.displayType = "block"; - this.top = p.top; - this.left = p.left; - this.isIn = true; - } - - hide(): void { - this.top = -10000; - this.left = -10000; - this.isIn = true; - this.popover.hide(); - } - - hideFromPopover() { - this.top = -10000; - this.left = -10000; - this.isIn = true; - } - - // ------------------------------------------------------------------------- - // Protected Methods - // ------------------------------------------------------------------------- - - protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { - let positionStrParts = positionStr.split("-"); - let pos0 = positionStrParts[0]; - let pos1 = positionStrParts[1] || "center"; - let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); - let targetElWidth = targetEl.offsetWidth; - let targetElHeight = targetEl.offsetHeight; - - this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl); - - let shiftWidth: any = { - center: function (): number { - return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; - }, - left: function (): number { - return hostElPos.left; - }, - right: function (): number { - return hostElPos.left + hostElPos.width - targetElWidth; - } - }; - - let shiftHeight: any = { - center: function (): number { - return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; - }, - top: function (): number { - return hostElPos.top; - }, - bottom: function (): number { - return hostElPos.top + hostElPos.height - targetElHeight; - } - }; - - let targetElPos: { top: number, left: number }; - switch (pos0) { - case "right": - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left + hostElPos.width - }; - break; - - case "left": - targetElPos = { - top: shiftHeight[pos1](), - left: hostElPos.left - targetElWidth - }; - break; - - case "bottom": - targetElPos = { - top: hostElPos.top + hostElPos.height, - left: shiftWidth[pos1]() - }; - break; - - default: - targetElPos = { - top: hostElPos.top - targetElHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElPos; - } - - protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { - let offsetParentBCR = { top: 0, left: 0 }; - const elBCR = this.offset(nativeEl); - const offsetParentEl = this.parentOffsetEl(nativeEl); - if (offsetParentEl !== window.document) { - offsetParentBCR = this.offset(offsetParentEl); - offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; - offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; - } - - const boundingClientRect = nativeEl.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeEl.offsetWidth, - height: boundingClientRect.height || nativeEl.offsetHeight, - top: elBCR.top - offsetParentBCR.top, - left: elBCR.left - offsetParentBCR.left - }; - } - - protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } { - const boundingClientRect = nativeEl.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeEl.offsetWidth, - height: boundingClientRect.height || nativeEl.offsetHeight, - top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), - left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) - }; - } - - protected getStyle(nativeEl: HTMLElement, cssProp: string): string { - if ((nativeEl as any).currentStyle) // IE - return (nativeEl as any).currentStyle[cssProp]; - - if (window.getComputedStyle) - return (window.getComputedStyle as any)(nativeEl)[cssProp]; - - // finally try and get inline style - return (nativeEl.style as any)[cssProp]; - } - - protected isStaticPositioned(nativeEl: HTMLElement): boolean { - return (this.getStyle(nativeEl, "position") || "static" ) === "static"; - } - - protected parentOffsetEl(nativeEl: HTMLElement): any { - let offsetParent: any = nativeEl.offsetParent || window.document; - while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { - offsetParent = offsetParent.offsetParent; - } - return offsetParent || window.document; - } - - protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string { - const placementParts = placement.split(" "); - if (placementParts[0] !== "auto") { - return placement; - } - - const hostElBoundingRect = hostElement.getBoundingClientRect(); - - const desiredPlacement = placementParts[1] || "bottom"; - - if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) { - return "bottom"; - } - if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) { - return "top"; - } - if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) { - return "right"; - } - if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) { - return "left"; - } - - return desiredPlacement; - } -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/popover/popover.component.ts deleted file mode 100644 index e976bc7bf2..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover.component.ts +++ /dev/null @@ -1,179 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; -import {PopoverContentComponent} from "./popover-content.component"; - -@Directive({ - selector: "[popover]", - exportAs: "popover" -}) -export class PopoverComponent implements OnChanges { - - protected PopoverComponent = PopoverContentComponent; - protected popover: ComponentRef; - protected visible: boolean; - - - constructor(protected viewContainerRef: ViewContainerRef, - protected resolver: ComponentFactoryResolver) { - } - - @Input("popover") - content: string|PopoverContentComponent; - - @Input() - popoverDisabled: boolean; - - @Input() - popoverAnimation: boolean; - - @Input() - popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right"; - - @Input() - popoverTitle: string; - - @Input() - popoverOnHover: boolean = false; - - @Input() - popoverCloseOnClickOutside: boolean; - - @Input() - popoverCloseOnMouseOutside: boolean; - - @Input() - popoverDismissTimeout: number = 0; - - @Output() - onShown = new EventEmitter(); - - @Output() - onHidden = new EventEmitter(); - - @HostListener("click") - showOrHideOnClick(): void { - if (this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.toggle(); - } - - @HostListener("focusin") - @HostListener("mouseenter") - showOnHover(): void { - if (!this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.show(); - } - - @HostListener("focusout") - @HostListener("mouseleave") - hideOnHover(): void { - if (this.popoverCloseOnMouseOutside) return; - if (!this.popoverOnHover) return; - if (this.popoverDisabled) return; - this.hide(); - } - - ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { - if (changes["popoverDisabled"]) { - if (changes["popoverDisabled"].currentValue) { - this.hide(); - } - } - } - - toggle() { - if (!this.visible) { - this.show(); - } else { - this.hide(); - } - } - - show() { - if (this.visible) return; - - this.visible = true; - if (typeof this.content === "string") { - const factory = this.resolver.resolveComponentFactory(this.PopoverComponent); - if (!this.visible) - return; - - this.popover = this.viewContainerRef.createComponent(factory); - const popover = this.popover.instance as PopoverContentComponent; - popover.popover = this; - popover.content = this.content as string; - if (this.popoverPlacement !== undefined) - popover.placement = this.popoverPlacement; - if (this.popoverAnimation !== undefined) - popover.animation = this.popoverAnimation; - if (this.popoverTitle !== undefined) - popover.title = this.popoverTitle; - if (this.popoverCloseOnClickOutside !== undefined) - popover.closeOnClickOutside = this.popoverCloseOnClickOutside; - if (this.popoverCloseOnMouseOutside !== undefined) - popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; - - popover.onCloseFromOutside.subscribe(() => this.hide()); - if (this.popoverDismissTimeout > 0) - setTimeout(() => this.hide(), this.popoverDismissTimeout); - } else { - const popover = this.content as PopoverContentComponent; - popover.popover = this; - if (this.popoverPlacement !== undefined) - popover.placement = this.popoverPlacement; - if (this.popoverAnimation !== undefined) - popover.animation = this.popoverAnimation; - if (this.popoverTitle !== undefined) - popover.title = this.popoverTitle; - if (this.popoverCloseOnClickOutside !== undefined) - popover.closeOnClickOutside = this.popoverCloseOnClickOutside; - if (this.popoverCloseOnMouseOutside !== undefined) - popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; - - popover.onCloseFromOutside.subscribe(() => this.hide()); - if (this.popoverDismissTimeout > 0) - setTimeout(() => this.hide(), this.popoverDismissTimeout); - popover.show(); - } - - this.onShown.emit(this); - } - - hide() { - if (!this.visible) return; - - this.visible = false; - if (this.popover) - this.popover.destroy(); - - if (this.content instanceof PopoverContentComponent) - (this.content as PopoverContentComponent).hideFromPopover(); - - this.onHidden.emit(this); - } - - getElement() { - return this.viewContainerRef.element.nativeElement; - } - -} diff --git a/catalog-ui/src/app/ng2/components/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/popover/popover.module.ts deleted file mode 100644 index a9605c17b6..0000000000 --- a/catalog-ui/src/app/ng2/components/popover/popover.module.ts +++ /dev/null @@ -1,47 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/17/2017. - */ -import {NgModule} from "@angular/core"; -import { CommonModule } from '@angular/common'; -import {PopoverComponent} from "./popover.component"; -import {PopoverContentComponent} from "./popover-content.component"; - -@NgModule({ - declarations: [ - PopoverComponent, - PopoverContentComponent - ], - imports: [ - // PopoverComponent, - // PopoverContentComponent - CommonModule - ], - exports: [ - PopoverComponent, - PopoverContentComponent - ], - providers: [] -}) -export class PopoverModule { - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html deleted file mode 100644 index 3ffc9c16be..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.html +++ /dev/null @@ -1,66 +0,0 @@ -
- - -
- -
{{property.name}}
-
-
{{property.name}}
-
- -
- - - -
- -
- - -
{{property.type | contentAfterLastDot }}
-
{{property.schema.property.type | contentAfterLastDot }}
- - -
- - - - Add value to list - - - - -
- -
- - - - -
diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less deleted file mode 100644 index 48d3d035d0..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.less +++ /dev/null @@ -1,74 +0,0 @@ -@import '../../../../../assets/styles/variables.less'; -.flat-children-container { - .dynamic-property-row { - /*create nested left border classes for up to 10 levels of nesting*/ - .nested-border-loop(@i) when (@i > 0) { - @size: (@i - 1) *2; - &.nested-level-@{i} .table-cell:first-child { - border-left: ~"solid @{size}px #009fdb"; - } - .nested-border-loop(@i - 1) - } - .nested-border-loop(10); - } - dynamic-property { - &:first-child .dynamic-property-row.with-top-border { - border-top:solid 1px #d2d2d2; - } - &:not(:last-child) .dynamic-property-row { - border-bottom:solid 1px #d2d2d2; - } - } -} -.dynamic-property-row { - display:flex; - flex-direction:row; - align-items: stretch; - - .table-cell { - flex: 1; - padding:9px; - justify-content: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &:first-child { - flex: 0 0 50%; - border-right:#d2d2d2 solid 1px; - &:only-of-type { - flex: 1 1 100%; - border-right:none; - } - } - &.empty { - height:40px; - } - } - .property-icon { - flex: 0 0 auto; - margin-right:10px; - align-self:center; - cursor:pointer; - } - -} - -.filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } -} -.inner-cell-div{ - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - display: inline; - padding-left: 8px; -} -.error { - border: solid 1px @func_color_q; - color: @func_color_q; - outline: none; - box-sizing: border-box; -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts b/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts deleted file mode 100644 index 9cf043098b..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/dynamic-property/dynamic-property.component.ts +++ /dev/null @@ -1,205 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, Input, Output, EventEmitter} from "@angular/core"; -import { PropertyBEModel, PropertyFEModel, DerivedFEProperty, DerivedPropertyType, SchemaPropertyGroupModel, DataTypeModel } from "app/models"; -import { PROPERTY_DATA, PROPERTY_TYPES } from 'app/utils'; -import { PropertiesUtils } from "app/ng2/pages/properties-assignment/properties.utils"; -import { DataTypeService } from "../../../services/data-type.service"; -import { trigger, state, style, transition, animate } from '@angular/core'; - - -@Component({ - selector: 'dynamic-property', - templateUrl: './dynamic-property.component.html', - styleUrls: ['./dynamic-property.component.less'], - animations: [trigger('fadeIn', [transition(':enter', [style({ opacity: '0' }), animate('.7s ease-out', style({ opacity: '1' }))])])] -}) -export class DynamicPropertyComponent { - - derivedPropertyTypes = DerivedPropertyType; //http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement - propType: DerivedPropertyType; - propPath: string; - isPropertyFEModel: boolean; - nestedLevel: number; - - @Input() canBeDeclared: boolean; - @Input() property: PropertyFEModel | DerivedFEProperty; - @Input() expandedChildId: string; - @Input() selectedPropertyId: string; - @Input() propertyNameSearchText: string; - @Input() readonly: boolean; - @Input() hasChildren: boolean; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() expandChild: EventEmitter = new EventEmitter(); - @Output() checkProperty: EventEmitter = new EventEmitter(); - @Output() deleteItem: EventEmitter = new EventEmitter(); - @Output() clickOnPropertyRow: EventEmitter = new EventEmitter(); - @Output() mapKeyChanged: EventEmitter = new EventEmitter(); - @Output() addChildPropsToParent: EventEmitter> = new EventEmitter>(); - - - constructor(private propertiesUtils: PropertiesUtils, private dataTypeService: DataTypeService) { - } - - ngOnInit() { - this.isPropertyFEModel = this.property instanceof PropertyFEModel; - this.propType = this.property.derivedDataType; - this.propPath = (this.property instanceof PropertyFEModel) ? this.property.name : this.property.propertiesName; - this.nestedLevel = (this.property.propertiesName.match(/#/g) || []).length; - } - - - onClickPropertyRow = (property, event) => { - // Because DynamicPropertyComponent is recrusive second time the event is fire event.stopPropagation = undefined - event && event.stopPropagation && event.stopPropagation(); - this.clickOnPropertyRow.emit(property); - } - - - expandChildById = (id: string) => { - this.expandedChildId = id; - this.expandChild.emit(id); - } - - checkedChange = (propName: string) => { - this.checkProperty.emit(propName); - } - - getHasChildren = (property:DerivedFEProperty): boolean => {// enter to this function only from base property (PropertyFEModel) and check for child property if it has children - return _.filter((this.property).flattenedChildren,(prop:DerivedFEProperty)=>{ - return _.startsWith(prop.propertiesName + '#', property.propertiesName); - }).length > 1; - } - - createNewChildProperty = (): void => { - - let newProps: Array = this.propertiesUtils.createListOrMapChildren(this.property, "", undefined); - if (this.property instanceof PropertyFEModel) { - this.addChildProps(newProps, this.property.name); - } else { - this.addChildPropsToParent.emit(newProps); - } - } - - addChildProps = (newProps: Array, childPropName: string) => { - - if (this.property instanceof PropertyFEModel) { - let insertIndex: number = this.property.getIndexOfChild(childPropName) + this.property.getCountOfChildren(childPropName); //insert after parent prop and existing children - this.property.flattenedChildren.splice(insertIndex, 0, ...newProps); //using ES6 spread operator - this.expandChildById(newProps[0].propertiesName); - - - if(!newProps[0].schema.property.isSimpleType){ - if ( newProps[0].mapKey ) {//prevent update the new item value on parent property valueObj and saving on BE if it is map item, it will be updated and saved only after user enter key (when it is list item- the map key is the es type) - this.updateMapKeyValueOnMainParent(newProps); - if (this.property.getParentNamesArray(newProps[0].propertiesName, []).indexOf('') === -1) { - this.valueChanged.emit(this.property.name); - } - } - } - } - } - - updateMapKeyValueOnMainParent(childrenProps: Array){ - if (this.property instanceof PropertyFEModel) { - //Update only if all this property parents has key name - if (this.property.getParentNamesArray(childrenProps[0].propertiesName, []).indexOf('') === -1){ - angular.forEach(childrenProps, (prop:DerivedFEProperty):void => { //Update parent PropertyFEModel with value for each child, including nested props - (this.property).childPropUpdated(prop); - },this); - //grab the cumulative value for the new item from parent PropertyFEModel and assign that value to DerivedFEProp[0] (which is the list or map parent with UUID of the set we just added) - let parentNames = (this.property).getParentNamesArray(childrenProps[0].propertiesName, []); - childrenProps[0].valueObj = _.get(this.property.valueObj, parentNames.join('.')); - } - } - } - - childValueChanged = (property: DerivedFEProperty) => { //value of child property changed - - if (this.property instanceof PropertyFEModel) { // will always be the case - if (this.property.getParentNamesArray(property.propertiesName, []).indexOf('') === -1) {//If one of the parents is empty key -don't save - this.property.childPropUpdated(property); - this.dataTypeService.checkForCustomBehavior(this.property); - this.valueChanged.emit(this.property.name); - } - } - } - - deleteListOrMapItem = (item: DerivedFEProperty) => { - if (this.property instanceof PropertyFEModel) { - this.removeValueFromParent(item); - this.property.flattenedChildren.splice(this.property.getIndexOfChild(item.propertiesName), this.property.getCountOfChildren(item.propertiesName)); - this.expandChildById(item.propertiesName); - } - } - - removeValueFromParent = (item: DerivedFEProperty, target?: any) => { - if (this.property instanceof PropertyFEModel) { - let itemParent = (item.parentName == this.property.name) ? this.property : this.property.flattenedChildren.find(prop => prop.propertiesName == item.parentName); - - if (item.derivedDataType == DerivedPropertyType.MAP) { - let oldKey = item.mapKey; - if (target && typeof target.value == 'string') { //allow saving empty string - let replaceKey:string = target.value; - if (!replaceKey) {//prevent delete map key - return; - } - if(Object.keys(itemParent.valueObj).indexOf(replaceKey) > -1){//the key is exists - target.setCustomValidity('This key is already exists.'); - return; - }else { - target.setCustomValidity(''); - _.set(itemParent.valueObj, replaceKey, itemParent.valueObj[oldKey]); - item.mapKey = replaceKey; - //If the map key was empty its valueObj was not updated on its prent property valueObj, and now we should update it. - if(!oldKey && !item.schema.property.isSimpleType){ - //Search this map item children and update these value on parent property valueOBj - let mapKeyFlattenChildren:Array = _.filter(this.property.flattenedChildren, (prop:DerivedFEProperty) => { - return _.startsWith(prop.propertiesName, item.propertiesName); - }); - this.updateMapKeyValueOnMainParent(mapKeyFlattenChildren); - } - } - } - delete itemParent.valueObj[oldKey]; - } else { - let itemIndex: number = this.property.flattenedChildren.filter(prop => prop.parentName == item.parentName).map(prop => prop.propertiesName).indexOf(item.propertiesName); - itemParent.valueObj.splice(itemIndex, 1); - } - if (item.mapKey) {//prevent going to BE if user tries to delete map item without key (it was not saved in BE) - if (itemParent instanceof PropertyFEModel) { //direct child - this.valueChanged.emit(this.property.name); - } else { //nested child - need to update parent prop by getting flattened name (recurse through parents and replace map/list keys, etc) - this.childValueChanged(itemParent); - } - } - } - } - - preventInsertItem = (property:DerivedFEProperty):boolean => { - if(property.type == PROPERTY_TYPES.MAP && Object.keys(property.valueObj).indexOf('') > -1 ){ - return true; - } - return false; - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html deleted file mode 100644 index a9dc499e7d..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.html +++ /dev/null @@ -1,63 +0,0 @@ -
- -
-
Property Name
-
Type
-
ES
-
Value
-
-
-
No data to display
- - -
{{feInstanceNamesMap[instanceId]}}
- -
- -
-
- -
- {{property.name}} -
-
- -
-
-
- {{property.type | contentAfterLastDot}} -
-
-
-
- {{property.schema.property.type | contentAfterLastDot}} -
-
-
- - - - -
-
- - - -
-
diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less deleted file mode 100644 index 9ede84faff..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.less +++ /dev/null @@ -1,166 +0,0 @@ -@import './../../../../assets/styles/variables.less'; -@import '../../../../assets/styles/sprite'; -@smaller-screen: ~"only screen and (max-width: 1580px)"; - -:host /deep/ input { width:100%;} - -.properties-table { - display:flex; - flex-direction:column; - flex: 1; - height:100%; - text-align:left; - - - .inner-cell-div{ - max-width: 100%; - text-overflow: ellipsis; - overflow: hidden; - height: 20px; - } - - .table-header { - display: flex; - flex-direction:row; - flex: 0 0 auto; - font-weight:bold; - border-top: #d2d2d2 solid 1px; - background-color: #f2f2f2; - - .table-cell { - color:#191919; - font-size:13px; - } - } - - .table-rows-header { - border: #d2d2d2 solid 1px; - border-top:none; - } - - .table-body { - display:flex; - flex-direction: column; - overflow-y:auto; - flex: 1; - - .no-data { - border: #d2d2d2 solid 1px; - border-top:none; - text-align: center; - height: 100%; - padding: 20px; - } - /deep/.selected{ - background-color: #e6f6fb; - color: #009fdb; - } - .table-row { - display: flex; - flex-direction:row; - flex: 0 0 auto; - - &:hover:not(.selected){ - background-color:#f8f8f8; cursor:pointer; - } - - .selected-row { - background-color:#e6f6fb; - } - - .table-cell.valueCol { - padding:0px; - - } - } - } - .table-cell { - font-size:13px; - flex:1; - border: #d2d2d2 solid 1px; - border-right:none; - border-top:none; - padding:10px; - text-overflow: ellipsis; - white-space: nowrap; - overflow:hidden; - display: flex; - min-height:40px; - - &:last-child { - border-right:#d2d2d2 solid 1px; - } - &.col1 { - flex: 1 0 210px; - max-width:300px; - display: flex; - justify-content: space-between; - @media @smaller-screen { flex: 0 0 25%;} - - .property-name { - flex: 1; - display: flex; - max-width: 90%; - } - - .property-description-icon { - float: right; - margin-top: 4px; - margin-left: 5px; - flex: 0 0 auto; - } - } - &.col2 { - flex: 0 0 150px; - max-width:150px; - @media @smaller-screen { flex: 0 0 20%;} - } - - &.col3 { - flex:0 0 120px; - max-width:120px; - @media @smaller-screen { flex: 0 0 15%;} - } - - &.valueCol { - flex: 2 0 300px; - display: flex; - @media @smaller-screen { flex: 1 0 40%;} - } - - - /deep/ .checkbox-container { - margin-right: 10px; - } - - /deep/ &.round-checkbox { - .checkbox-container input[type=checkbox].checkbox-hidden { - &:checked ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon; - } - &[disabled] ~ .checkbox-icon::before { - .sprite-new; - .round-checked-icon.disabled; - background-color:inherit; - border:none; - //animation: addDisabledCheck 4s linear; - } - } - } - } - - .filtered { - /deep/ .checkbox-label-content{ - background-color: yellow; - } - } - - dynamic-property { - width:100%; - &:last-child /deep/ .dynamic-property-row { - border-bottom:none; - } - } - -} diff --git a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts b/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts deleted file mode 100644 index afb7189348..0000000000 --- a/catalog-ui/src/app/ng2/components/properties-table/properties-table.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input, Output, EventEmitter, SimpleChanges, ViewChild, ElementRef } from "@angular/core"; -import {PropertyFEModel, DerivedFEProperty, DerivedPropertyType, InstanceFePropertiesMap} from "app/models"; -import {PropertiesService} from "../../services/properties.service"; -import { DynamicElementComponent } from 'app/ng2/components/dynamic-element/dynamic-element.component'; -import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; - -@Component({ - selector: 'properties-table', - templateUrl: './properties-table.component.html', - styleUrls: ['./properties-table.component.less'] -}) -export class PropertiesTableComponent { - - @Input() fePropertiesMap: InstanceFePropertiesMap; - @Input() feInstanceNamesMap: Map; - @Input() selectedPropertyId: string; - @Input() displayDeleteButton: boolean; - @Input() propertyNameSearchText:string; - @Input() searchTerm:string; - @Input() readonly:boolean; - @Input() isLoading:boolean; - - @Output() valueChanged: EventEmitter = new EventEmitter(); - @Output() selectPropertyRow: EventEmitter = new EventEmitter(); - @Output() updateCheckedPropertyCount: EventEmitter = new EventEmitter(); - //@Output() selectInstanceRow: EventEmitter = new EventEmitter(); - - - constructor ( private propertiesService:PropertiesService ){ - } - - - propValueChanged = (property) => { - !property.isDeclared && this.valueChanged.emit(property); - }; - - // Click on main row (row of propertyFEModel) - onClickPropertyRow = (property:PropertyFEModel, instanceName:string, event?) => { - //event && event.stopPropagation(); - this.selectedPropertyId = property.name; - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); - this.selectPropertyRow.emit(propertyRowSelectedEvent); - }; - - // Click on inner row (row of DerivedFEProperty) - onClickPropertyInnerRow = (property:DerivedFEProperty, instanceName:string) => { - let propertyRowSelectedEvent:PropertyRowSelectedEvent = new PropertyRowSelectedEvent(property, instanceName); - this.selectPropertyRow.emit(propertyRowSelectedEvent); - } - - propertyChecked = (prop: PropertyFEModel, childPropName?: string) => { - let isChecked: boolean = (!childPropName)? prop.isSelected : prop.flattenedChildren.find(prop => prop.propertiesName == childPropName).isSelected; - - if (!isChecked) { - this.propertiesService.undoDisableRelatedProperties(prop, childPropName); - } else { - this.propertiesService.disableRelatedProperties(prop, childPropName); - } - this.updateCheckedPropertyCount.emit(isChecked); - } - -} - -export class PropertyRowSelectedEvent { - propertyModel:PropertyFEModel | DerivedFEProperty; - instanceName:string; - constructor ( propertyModel:PropertyFEModel | DerivedFEProperty, instanceName:string ){ - this.propertyModel = propertyModel; - this.instanceName = instanceName; - } -} - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html deleted file mode 100644 index 1fbf45e39f..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less deleted file mode 100644 index 1ff496f840..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.tooltip-inner { - word-wrap: break-word; - max-width: 300px; -} - -.tooltip.bottom .tooltip-arrow { - border-bottom-color: #000 !important; -} - - - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts deleted file mode 100644 index 4dcb64c499..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts +++ /dev/null @@ -1,215 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core"; - -@Component -({ - selector: "tooltip-content", - templateUrl: "./tooltip-content.component.html", - styleUrls: ["./tooltip-content.component.less"] -}) - -export class TooltipContentComponent implements AfterViewInit { - - // ------------------------------------------------------------------------- - // Inputs / Outputs - // ------------------------------------------------------------------------- - - @Input() hostElement: HTMLElement; - @Input() content: string; - @Input() placement: "top"|"bottom"|"left"|"right" = "bottom"; - @Input() animation: boolean = true; - - // ------------------------------------------------------------------------- - // Properties - // ------------------------------------------------------------------------- - - top: number = -100000; - left: number = -100000; - isIn: boolean = false; - isFade: boolean = false; - - // ------------------------------------------------------------------------- - // Constructor - // ------------------------------------------------------------------------- - - constructor(private element: ElementRef, - private cdr: ChangeDetectorRef) { - } - - // ------------------------------------------------------------------------- - // Lifecycle callbacks - // ------------------------------------------------------------------------- - - ngAfterViewInit(): void { - this.show(); - this.cdr.detectChanges(); - } - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - show(): void { - if(!this.hostElement) { - return; - } - - const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement); - this.top = position.top; - this.left = position.left; - this.isIn = true; - if (this.animation) { - this.isFade = true; - } - } - - hide(): void { - this.top = -100000; - this.left = -100000; - this.isIn = true; - if(this.animation) { - this.isFade = false; - } - } - - // ------------------------------------------------------------------------- - // Private Methods - // ------------------------------------------------------------------------- - - private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} { - let positionStrParts = positionStr.split("-"); - let pos0 = positionStrParts[0]; - let pos1 = positionStrParts[1] || "center"; - let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem); - let targetElemWidth = targetElem.offsetWidth; - let targetElemHeight = targetElem.offsetHeight; - let shiftWidth: any = { - center(): number { - return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2; - }, - left(): number { - return hostElemPosition.left; - }, - right(): number { - return hostElemPosition.left + hostElemPosition.width; - } - }; - - let shiftHeight: any = { - center: function (): number { - return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2; - }, - top: function (): number { - return hostElemPosition.top; - }, - bottom: function (): number { - return hostElemPosition.top + hostElemPosition.height; - } - } - - let targetElemPosition: {top: number, left: number}; - - switch (pos0) { - case "right": - targetElemPosition = { - top: shiftHeight[pos1](), - left: shiftWidth[pos0]() - }; - break; - - case "left": - targetElemPosition = { - top: shiftHeight[pos1](), - left: hostElemPosition.left - targetElemWidth - }; - break; - - case "bottom": - targetElemPosition = { - top: shiftHeight[pos0](), - left: shiftWidth[pos1]() - }; - break; - - default: - targetElemPosition = { - top: hostElemPosition.top - targetElemHeight, - left: shiftWidth[pos1]() - }; - break; - } - - return targetElemPosition; - } - - - private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} { - let offsetParentCBR = {top: 0, left: 0}; - const elemBCR = this.offset(nativeElem); - const offsetParentElem = this.parentOffsetElem(nativeElem); - if(offsetParentElem !== window.document) { - offsetParentCBR = this.offset(offsetParentElem); - offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop; - offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop; - } - - const boundingClientRect = nativeElem.getBoundingClientRect(); - - return { - width: boundingClientRect.width || nativeElem.offsetWidth, - height: boundingClientRect.height || nativeElem.offsetHeight, - top: elemBCR.top - offsetParentCBR.top, - left: elemBCR.left - offsetParentCBR.left - }; - } - - private offset(nativeElem:any): {width: number, height: number, top: number, left: number} { - const boundingClientRect = nativeElem.getBoundingClientRect(); - return { - width: boundingClientRect.width || nativeElem.offsetWidth, - height: boundingClientRect.height || nativeElem.offsetHeight, - top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), - left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) - }; - } - - private getStyle(nativeElem: HTMLElement, cssProperty: string): string { - if(window.getComputedStyle) { - return (window.getComputedStyle(nativeElem) as any)[cssProperty]; - } - - return (nativeElem.style as any)[cssProperty]; - } - - private isStaticPositioned(nativeElem: HTMLElement): boolean { - return (this.getStyle(nativeElem, "position") || "static") === "static"; - } - - private parentOffsetElem(nativeElem: HTMLElement): any { - let offsetParent: any = nativeElem.offsetParent || window.document; - while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { - offsetParent = offsetParent.offsetParent; - } - - return offsetParent || window.document; - } -} diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts deleted file mode 100644 index 79d35c6e0e..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts +++ /dev/null @@ -1,109 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { - Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener -} from "@angular/core"; -import {TooltipContentComponent} from "./tooltip-content.component"; - -@Directive ({ - selector: "[tooltip]" -}) -export class TooltipComponent { - - // ------------------------------------------------------------------------- - // Properties - // ------------------------------------------------------------------------- - - private tooltip: ComponentRef; - private visible: boolean; - private delayInProgress: boolean = false; - - // ------------------------------------------------------------------------- - // Constructor - // ------------------------------------------------------------------------- - - constructor(private viewContainerRef: ViewContainerRef, - private resolver: ComponentFactoryResolver) { - } - - // ------------------------------------------------------------------------- - // Inputs / Outputs - // ------------------------------------------------------------------------- - - @Input("tooltip") content: string|TooltipContentComponent; - @Input() tooltipDisabled: boolean; - @Input() tooltipAnimation: boolean = true; - @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; - @Input() tooltipDelay: number = 1500; - - // ------------------------------------------------------------------------- - // Public Methods - // ------------------------------------------------------------------------- - - @HostListener("mouseenter") - show(): void { - if(this.tooltipDisabled || this.visible || this.content === "") { - return; - } - if (this.tooltipDelay && !this.delayInProgress) { - this.delayInProgress = true; - setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); - return; - } - - this.visible = true; - if (typeof this.content === "string") { - const factory = this.resolver.resolveComponentFactory(TooltipContentComponent); - if (!this.visible) { - return; - } - - this.tooltip = this.viewContainerRef.createComponent(factory); - this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement; - this.tooltip.instance.content = this.content as string; - this.tooltip.instance.placement = this.tooltipPlacement; - this.tooltip.instance.animation = this.tooltipAnimation; - } else { - const tooltip = this.content as TooltipContentComponent; - tooltip.hostElement = this.viewContainerRef.element.nativeElement; - tooltip.placement = this.tooltipPlacement; - tooltip.animation = this.tooltipAnimation; - tooltip.show(); - } - } - - @HostListener("mouseleave") - hide(): void { - this.delayInProgress = false; - if (!this.visible) { - return; - } - - this.visible = false; - if (this.tooltip) { - this.tooltip.destroy(); - } - if (this.content instanceof TooltipContentComponent) { - (this.content as TooltipContentComponent).hide(); - } - } -} - diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts deleted file mode 100644 index 84a3987081..0000000000 --- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts +++ /dev/null @@ -1,45 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {NgModule} from "@angular/core"; -import {TooltipContentComponent} from "./tooltip-content.component"; -import {TooltipComponent} from "./tooltip.component"; -import {CommonModule} from "@angular/common"; - -@NgModule({ - declarations: [ - TooltipComponent, - TooltipContentComponent, - ], - imports: [ - CommonModule - ], - exports: [ - TooltipComponent, - TooltipContentComponent, - ], - entryComponents: [ - TooltipContentComponent - ], - providers: [] -}) -export class TooltipModule { - -} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less new file mode 100644 index 0000000000..e219d49aa4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.less @@ -0,0 +1,3 @@ +dynamic-element { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts new file mode 100644 index 0000000000..53d1590b1c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.component.ts @@ -0,0 +1,140 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Compiler, EventEmitter, ViewContainerRef, ViewChild, Input, Output, ElementRef, ComponentRef, ComponentFactoryResolver } from '@angular/core' +import {ValidationConfiguration} from "app/models"; +import {UiElementInputComponent} from "../form-components/input/ui-element-input.component"; +import {UiElementPopoverInputComponent} from "../form-components/popover-input/ui-element-popover-input.component"; +import {UiElementIntegerInputComponent} from "../form-components/integer-input/ui-element-integer-input.component"; +import {UiElementDropDownComponent, DropdownValue} from "../form-components/dropdown/ui-element-dropdown.component"; +import {PROPERTY_DATA} from "../../../../utils/constants"; + +@Component({ + selector: 'dynamic-element', + template: `
`, + styleUrls: ['./dynamic-element.component.less'], + entryComponents: [ + UiElementInputComponent, + UiElementDropDownComponent, + UiElementPopoverInputComponent, + UiElementIntegerInputComponent + ] +}) +export class DynamicElementComponent { + + @ViewChild('target', { read: ViewContainerRef }) target: any; + @Input() type: any; + @Input() name: string; + @Input() readonly:boolean; + @Input() path:string;//optional param. used only for for subnetpoolid type + value:any; + + // Two way binding for value (need to write the "Change" word like this) + @Output('valueChange') emitter: EventEmitter = new EventEmitter(); + @Input('value') set setValueValue(value) { + this.value = value; + } + + cmpRef: ComponentRef; + private isViewInitialized: boolean = false; + validation = ValidationConfiguration.validation; + + constructor( + private componentFactoryResolver: ComponentFactoryResolver, + private compiler: Compiler, + private el: ElementRef) { + } + + updateComponent() { + if (!this.isViewInitialized) { + return; + } + if (this.cmpRef) { + this.cmpRef.destroy(); + } + + // Factory to create component based on type or peroperty name. + switch(true) { + case this.path && this.path.toUpperCase().indexOf("SUBNETPOOLID") !== -1: + if(this.name.toUpperCase().indexOf("SUBNETPOOLID") == -1){//if it's an item of subnetpoolid list get the parent name + let pathArray = this.path.split("#"); + this.name = pathArray[pathArray.length - 2]; + } + this.createComponent(UiElementPopoverInputComponent); + break; + case this.type == 'integer': + this.createComponent(UiElementIntegerInputComponent); + this.cmpRef.instance.pattern = this.validation.validationPatterns.integer; + break; + case PROPERTY_DATA.SCALAR_TYPES.indexOf(this.type) > -1: + case this.type == 'string': + this.createComponent(UiElementInputComponent); + break; + case this.type == 'boolean': + + this.createComponent(UiElementDropDownComponent); + + // Build drop down values + let tmp = []; + tmp.push(new DropdownValue(true,'TRUE')); + tmp.push(new DropdownValue(false,'FALSE')); + this.cmpRef.instance.values = tmp; + break; + default: + this.createComponent(UiElementInputComponent); + console.log("ERROR: No ui component to handle type: " + this.type); + } + + // Additional attributes in base element class + if (this.cmpRef) { + this.cmpRef.instance.name = this.name; + this.cmpRef.instance.type = this.type; + this.cmpRef.instance.value = this.value; + this.cmpRef.instance.readonly = this.readonly; + } + + // Subscribe to change event of of ui-element-basic and fire event to change the value + this.cmpRef.instance.baseEmitter.subscribe((value):void => { + this.emitter.emit(value) + }); + + } + + createComponent(ComponentToCreate:any):void { + let factory = this.componentFactoryResolver.resolveComponentFactory(ComponentToCreate); + this.cmpRef = this.target.createComponent(factory); + } + + ngOnChanges() { + this.updateComponent(); + } + + ngAfterContentInit() { + this.isViewInitialized = true; + this.updateComponent(); + } + + ngOnDestroy() { + if (this.cmpRef) { + this.cmpRef.destroy(); + } + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts new file mode 100644 index 0000000000..50b22505a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/dynamic-element/dynamic-element.module.ts @@ -0,0 +1,43 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from "@angular/core"; +import {PopoverModule} from "../popover/popover.module"; +import {TooltipModule} from "../tooltip/tooltip.module"; +import {DynamicElementComponent} from "./dynamic-element.component"; +import {FormElementsModule} from "../form-components/form-elements.module"; + +@NgModule({ + declarations: [ + DynamicElementComponent, + ], + imports: [ + PopoverModule, + TooltipModule, + FormElementsModule + ], + exports: [ + DynamicElementComponent + ], + providers: [] +}) +export class DynamicElementModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html new file mode 100644 index 0000000000..872bf90329 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.html @@ -0,0 +1,8 @@ +
+
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less new file mode 100644 index 0000000000..9df2680b6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.less @@ -0,0 +1,67 @@ + @import '../../../../../../assets/styles/tlv-sprite'; +@import '../../../../../../assets/styles/sprite'; + + +.checkbox-container { + display:inline-block; + position:relative; + text-align: left; + height: 20px; + + + .checkbox-icon { + display: inline-block; + } + + .checkbox-label { + font-weight: inherit; + font-size: inherit; + } + + .checkbox-label-content { + margin-left:2px; + } + + .checkbox-icon::before { + .tlv-sprite; + background-position: -10px -60px; + width: 14px; + height: 14px; + content: ''; + display: inline-block; + margin-right: 0px; + margin-top: -2px; + vertical-align: middle; + } + + input[type=checkbox].checkbox-hidden { + width:0; + height:0; + display:none; + &:checked ~ .checkbox-icon::before{ + .sprite-new; + .filled-checkbox-icon + } + &[disabled] ~ .checkbox-icon::before { + /* TODO: add disabled styles here */ + background-image: none; + background-color: #EFEFEF; + border-radius: 2px; + border: solid #CCC 1px; + } + } + + .checkbox-animation { + background-color: #009fdb; + position: absolute; + left: 2px; + top: 4px; + width:10px; + height:10px; + border-radius: 50%; + z-index: 1; + pointer-events: none; + opacity:0; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts new file mode 100644 index 0000000000..c8da016174 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.component.ts @@ -0,0 +1,50 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; + +@Component({ + selector: 'checkbox', + templateUrl: './checkbox.component.html', + styleUrls: ['./checkbox.component.less'], + encapsulation: ViewEncapsulation.None + // animations: [ + // trigger('checkEffect', [ + // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), + // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), + // transition('1 => 0', animate('150ms ease-out')), + // transition('0 => 1', animate('150ms ease-in')) + // ]) + // ] +}) +export class CheckboxComponent { + + @Input() checkboxStyle: string; + @Input() label: string; + @Input() checked: boolean; + @Input() disabled: boolean; + @Output() checkedChange: EventEmitter = new EventEmitter(); + + toggleState(newValue:boolean) { + this.checkedChange.emit(newValue); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts new file mode 100644 index 0000000000..4ac7f2d7cd --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/checkbox/checkbox.module.ts @@ -0,0 +1,48 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { CheckboxComponent } from './checkbox.component'; + + +@NgModule({ + imports: [CommonModule, BrowserModule, FormsModule], + declarations: [CheckboxComponent], + bootstrap: [], + exports: [CheckboxComponent] +}) +export class CheckboxModule { } + +/** README: **/ + +/** USAGE Example: + *In page.module.ts: import CheckboxModule + *In HTML: + * + */ + +/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) + * + * To create or override styles: + * Use /deep/ or >>> prefix to override styles via other components stylesheets + */ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html new file mode 100644 index 0000000000..c6b8384183 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html @@ -0,0 +1,3 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less new file mode 100644 index 0000000000..ea3e35140e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.less @@ -0,0 +1,11 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-dropdown { + + select { + text-indent: 6px; + border: solid 1px @main_color_o; + width: 100%; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts new file mode 100644 index 0000000000..5abf32c61b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts @@ -0,0 +1,51 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Output, Input} from '@angular/core' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +export class DropdownValue { + value:any; + label:string; + + constructor(value:any,label:string) { + this.value = value; + this.label = label; + } +} + +@Component({ + selector: 'ui-element-dropdown', + templateUrl: './ui-element-dropdown.component.html', + styleUrls: ['./ui-element-dropdown.component.less'], +}) +export class UiElementDropDownComponent extends UiElementBase implements UiElementBaseInterface { + @Input() + values: DropdownValue[]|string[]; + + constructor() { + super(); + } + + onSave() { + this.baseEmitter.emit(this.value); + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts new file mode 100644 index 0000000000..e5bdf1f557 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/form-elements.module.ts @@ -0,0 +1,42 @@ +/** + * Created by rc2122 on 9/5/2017. + */ +import {NgModule} from "@angular/core"; +import {BrowserModule} from "@angular/platform-browser"; +import {FormsModule, ReactiveFormsModule} from "@angular/forms"; +import {UiElementPopoverInputComponent} from "./popover-input/ui-element-popover-input.component"; +import {UiElementIntegerInputComponent} from "./integer-input/ui-element-integer-input.component"; +import {UiElementInputComponent} from "./input/ui-element-input.component"; +import {UiElementDropDownComponent} from "./dropdown/ui-element-dropdown.component"; +import {UiElementBase} from "./ui-element-base.component"; +import {CheckboxModule} from "./checkbox/checkbox.module"; +import {RadioButtonComponent} from "./radio-buttons/radio-buttons.component"; +import {PopoverModule} from "../popover/popover.module"; +import {TooltipModule} from "../tooltip/tooltip.module"; + + +@NgModule({ + imports: [ + BrowserModule, + FormsModule, + PopoverModule, + ReactiveFormsModule, + TooltipModule, + CheckboxModule], + + declarations: [UiElementDropDownComponent, + UiElementInputComponent, + UiElementIntegerInputComponent, + UiElementPopoverInputComponent, + UiElementBase, + RadioButtonComponent], + + exports: [UiElementDropDownComponent, + UiElementInputComponent, + UiElementIntegerInputComponent, + UiElementPopoverInputComponent, + RadioButtonComponent, + TooltipModule, + CheckboxModule] +}) +export class FormElementsModule { } \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html new file mode 100644 index 0000000000..b7d7c859c7 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html @@ -0,0 +1,14 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less new file mode 100644 index 0000000000..d320c7ff8b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts new file mode 100644 index 0000000000..fb3b3db859 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +@Component({ + selector: 'ui-element-input', + templateUrl: './ui-element-input.component.html', + styleUrls: ['./ui-element-input.component.less'], +}) +export class UiElementInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html new file mode 100644 index 0000000000..9fbc9e1094 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html @@ -0,0 +1,14 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less new file mode 100644 index 0000000000..8073c3858e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.less @@ -0,0 +1,17 @@ +@import '../../../../../../assets/styles/variables'; + +/deep/ ui-element-integer-input { + + input { + text-indent: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts new file mode 100644 index 0000000000..1667f4393d --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, ContentChildren, Input} from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser' +import { UiElementBase, UiElementBaseInterface } from './../ui-element-base.component'; + +@Component({ + selector: 'ui-element-integer-input', + templateUrl: './ui-element-integer-input.component.html', + styleUrls: ['./ui-element-integer-input.component.less'], +}) +export class UiElementIntegerInputComponent extends UiElementBase implements UiElementBaseInterface { + constructor() { + super(); + //this.pattern = this.validation.validationPatterns.comment; + } + + onSave() { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html new file mode 100644 index 0000000000..3bd51b4e36 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.html @@ -0,0 +1,26 @@ +
+ + +
+ + +
+ +
+ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less new file mode 100644 index 0000000000..5be443f7b6 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.less @@ -0,0 +1,36 @@ +@import '../../../../../../assets/styles/variables'; + +.popover-input-wrapper { + display: flex; +} + +/deep/ ui-element-popover-input { + + .popover { + max-width: 350px; + width: 350px; + } + + .edit-subnet-wrapper { + padding: 12px; + + .subnet-value { + width: 100%; + resize: none; + } + } + + input { + padding-right: 6px; + padding-left: 6px; + border: solid 1px @main_color_o; + } + + .error { + border: solid 1px @func_color_q; + color: @func_color_q; + outline: none; + box-sizing: border-box; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts new file mode 100644 index 0000000000..61688df3f0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts @@ -0,0 +1,57 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, ViewChild, ElementRef, Input} from '@angular/core'; +import {ButtonsModelMap, ButtonModel} from "app/models"; +import {PopoverContentComponent} from "../../popover/popover-content.component"; +import {UiElementBase, UiElementBaseInterface} from "../ui-element-base.component"; + +@Component({ + selector: 'ui-element-popover-input', + templateUrl: './ui-element-popover-input.component.html', + styleUrls: ['./ui-element-popover-input.component.less'] +}) +export class UiElementPopoverInputComponent extends UiElementBase implements UiElementBaseInterface { + @ViewChild('textArea') textArea: ElementRef; + @ViewChild('popoverForm') popoverContentComponent: PopoverContentComponent; + + saveButton: ButtonModel; + buttonsArray: ButtonsModelMap; + + onSave = ():void => { + if (!this.control.invalid){ + this.baseEmitter.emit(this.value); + this.popoverContentComponent.hide(); + } + } + + constructor() { + super(); + // Create Save button and insert to buttons map + this.saveButton = new ButtonModel('save', 'blue', this.onSave); + this.buttonsArray = { 'test': this.saveButton }; + + // Define the regex pattern for this controller + this.pattern = this.validation.validationPatterns.comment; + + // Disable / Enable button according to validation + //this.control.valueChanges.subscribe(data => this.saveButton.disabled = this.control.invalid); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less new file mode 100644 index 0000000000..b929486b10 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-button.component.less @@ -0,0 +1,42 @@ +@import './../../../../../../assets/styles/variables.less'; +.radio-buttons-container{ + display: flex; + &.vertical{ + flex-direction: column; + } + &.horizontal{ + flex-direction: row; + } +} +.radio-button { + margin: 0 10px 10px 0; + display: flex; +} + +input[type=radio] { + width:0; + height:0; + display:none; + &[disabled] ~ .radio-button { + + } +} + +.shown-radio-button{ + border: @main_color_n solid 1px; + height: 14px; + width: 14px; + border-radius: 50%; + padding: 1px; + margin: auto 5px; + .selected{ + background-color: @main_color_a; + height: 100%; + width: 100%; + border-radius: 50%; + } +} +span{ + margin: auto 0; + color: @func_color_s; +} diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html new file mode 100644 index 0000000000..6c927301db --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.html @@ -0,0 +1,8 @@ +
+
+ +
+ {{option.key}} +
+
+ diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts new file mode 100644 index 0000000000..0f80e2ad44 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts @@ -0,0 +1,29 @@ +/** + * Created by rc2122 on 9/4/2017. + */ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { RadioButtonModel } from 'app/models' +import {UiElementBaseInterface, UiElementBase} from "../ui-element-base.component"; + +@Component({ + selector: 'radio-buttons', + templateUrl: './radio-buttons.component.html', + styleUrls: ['./radio-button.component.less'] +}) +export class RadioButtonComponent extends UiElementBase implements UiElementBaseInterface { + + onSave() { + this.baseEmitter.emit(this.value); + } + + @Input() options:Array; + @Input() readonly:boolean; + @Input() direction:string = 'vertical'; //get 'horizontal' | 'vertical' + value:any; + + select(value:any) { + this.value = value; + this.baseEmitter.emit(this.value); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts new file mode 100644 index 0000000000..ae2013ff70 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, EventEmitter, Input, Output } from '@angular/core' +import { ValidationConfiguration } from "app/models"; +import { FormControl, Validators } from '@angular/forms'; + +export interface UiElementBaseInterface { + onSave(); +} + +@Component({ + template: ``, + styles: [] +}) +export class UiElementBase { + + protected validation = ValidationConfiguration.validation; + protected control: FormControl; + + // Two way binding for value (need to write the "Change" word like this) + @Output('valueChange') baseEmitter: EventEmitter = new EventEmitter(); + @Input('value') set setValueValue(value) { + this.value = value; + } + + @Input() name: string; + @Input() type: string; + @Input() value: any; + @Input() pattern: any; + @Input() readonly:boolean; + + constructor() { + //this.control = new FormControl('', [Validators.required]); + this.control = new FormControl('', []); + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html new file mode 100644 index 0000000000..a62aa114d9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.html @@ -0,0 +1,6 @@ +
+
+
+
+ diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less new file mode 100644 index 0000000000..006c3bfa43 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.less @@ -0,0 +1,91 @@ +@import '../../../../../assets/styles/variables'; +.tlv-loader-back { + background-color: @main_color_p; + position: fixed; + top: 50px; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + opacity: 0.5; +} + +.tlv-loader-relative { position: absolute; top: 0;} + +.tlv-loader { + z-index: 10002; +} + +.loader-relative { + display: block; + position:absolute; + width: 100%; + height:100%; +} + +.loader-fixed { + display: block; + position:fixed; + top:0; + left:0; + width: 100%; + height:100%; +} + +@keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Internet Explorer */ +@-ms-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadein { + from { opacity: 0; } + to { opacity: 0.8; } +} + +@keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Firefox < 16 */ +@-moz-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Safari, Chrome and Opera > 12.1 */ +@-webkit-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Internet Explorer */ +@-ms-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} + +/* Opera < 12.1 */ +@-o-keyframes fadeout { + from { opacity: 0.8; } + to { opacity: 0; } +} diff --git a/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts new file mode 100644 index 0000000000..f66aa551e2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/loader/loader.component.ts @@ -0,0 +1,86 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 6/6/2017. + */ +import { Component, Input, ViewContainerRef, SimpleChanges} from "@angular/core"; +@Component({ + selector: 'loader', + templateUrl: './loader.component.html', + styleUrls: ['./loader.component.less'] +}) +export class LoaderComponent { + + @Input() display: boolean; + @Input() size: string;// small || medium || large + @Input() relative: boolean; // If is relative is set to true, loader will appear over parent element. Otherwise, will be fixed over the entire page. + @Input() loaderDelay: number; //optional - number of ms to delay loader display. + + private isVisible: boolean = false; + private offset : { + top: string; + left: string; + width: string; + height: string; + }; + + constructor(private viewContainerRef: ViewContainerRef) { + } + + ngOnInit() { + if (!this.size) { + this.size = 'large'; + } + if (this.display === true) { + this.changeLoaderDisplay(true); + } + } + + ngOnChanges(changes: SimpleChanges) { + if(changes.display){ + this.changeLoaderDisplay(this.display); + } + } + + private changeLoaderDisplay = (display: boolean): void => { + if (display) { + window.setTimeout((): void => { + this.display && this.showLoader(); //only show loader if this.display has not changed in the meanwhile. + }, this.loaderDelay || 0); + } else { + this.isVisible = false; + } + } + + private showLoader = () => { + if (this.relative === true) { + let parentElement = this.viewContainerRef.element.nativeElement.parentElement; + this.offset = { + left: (parentElement.offsetLeft) ? parentElement.offsetLeft + "px" : undefined, + top: (parentElement.offsetTop) ? parentElement.offsetTop + "px" : undefined, + width: (parentElement.offsetWidth) ? parentElement.offsetWidth + "px" : undefined, + height: (parentElement.offsetHeight) ? parentElement.offsetHeight + "px" : undefined + }; + } + this.isVisible = true; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html new file mode 100644 index 0000000000..54640c9414 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less new file mode 100644 index 0000000000..ceb4409144 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.less @@ -0,0 +1,13 @@ +@import "../../../../../assets/styles/variables"; + +.w-sdc-menu-item { + font-size: 14px; + line-height: 14px; + color: @main_color_m; + padding: 3px 6px; + + &:hover { + cursor: pointer; + background-color: @main_color_c; + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts new file mode 100644 index 0000000000..8b2006634e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-item.component.ts @@ -0,0 +1,44 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'menu-item', + templateUrl: './menu-item.component.html', + styleUrls:['./menu-item.component.less'] +}) +export class MenuItemComponent { + @Input() action:Function; + @Input() styleClass:any; + + public parentMenu:any; + + constructor() { + } + + performAction() { + this.action(); + + if (this.parentMenu && typeof(this.parentMenu.close) === 'function') { + this.parentMenu.close(); + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html new file mode 100644 index 0000000000..98c4d26fdd --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.html @@ -0,0 +1,9 @@ +
+ + + +
diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less new file mode 100644 index 0000000000..1b45ea775c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.less @@ -0,0 +1,13 @@ +.w-sdc-menu-list { + position: fixed; + z-index: 100; + + border-style: solid; + border-width: 1px; + border-color: #d8d8d8; + box-sizing: border-box; + background-color: #ffffff; + box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1); + width: 91px; + padding: 6px 0; +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts new file mode 100644 index 0000000000..290c8d06af --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.component.ts @@ -0,0 +1,70 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input, ContentChildren, SimpleChanges, QueryList } from '@angular/core'; +import { MenuItemComponent } from "./menu-item.component"; +import { Point } from "app/models"; + +@Component({ + selector: 'menu-list', + templateUrl: './menu-list.component.html', + styleUrls:['./menu-list.component.less'] +}) +export class MenuListComponent { + @Input('open') inputOpen:boolean = false; + @Input('position') inputPosition:Point = new Point(); + @Input() styleClass:any; + + @ContentChildren(MenuItemComponent) menuItems:QueryList; + + private position:Point; + private isOpen:boolean = false; + + constructor() { + } + + ngOnChanges(changes:SimpleChanges) { + if (changes.inputOpen) { + (changes.inputOpen.currentValue) ? this.open() : this.close(); + } + if (changes.inputPosition) { + this.changePosition(changes.inputPosition.currentValue); + } + } + + ngAfterContentInit() { + this.menuItems.forEach((c) => c.parentMenu = this); + this.menuItems.changes.subscribe((list) => { + list.forEach((c) => c.parentMenu = this); + }); + } + + open(): void { + this.isOpen = true; + } + + close(): void { + this.isOpen = false; + } + + changePosition(position:Point) { + this.position = position; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts new file mode 100644 index 0000000000..fdbbf59f48 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/menu/menu-list.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { MenuListComponent } from "./menu-list.component"; +import { MenuItemComponent } from "./menu-item.component"; + +export { + MenuListComponent, + MenuItemComponent +}; + +@NgModule({ + declarations: [ + MenuListComponent, + MenuItemComponent + ], + imports: [CommonModule], + exports: [ + MenuListComponent, + MenuItemComponent + ], + entryComponents: [ //need to add anything that will be dynamically created + MenuListComponent, + MenuItemComponent + ] +}) +export class MenuListModule { +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html new file mode 100644 index 0000000000..433bd4fd6f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.html @@ -0,0 +1,5 @@ +
+
Error code: {{input.messageId}}
+
Status code: {{input.status}}
+
{{input.message}}
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts new file mode 100644 index 0000000000..c0d6673412 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/error-message/error-message.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by ngordon on 7/30/2017. + */ +import { Component, Input } from '@angular/core'; +import { ServerErrorResponse } from 'app/models'; + +@Component({ + selector: 'error-message', + templateUrl: './error-message.component.html' +}) + +export class ErrorMessageComponent { + @Input() input: ServerErrorResponse; + + constructor() { + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html new file mode 100644 index 0000000000..9a0fdf6bf4 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.html @@ -0,0 +1,21 @@ +
+
+
+ {{ input.title }} + +
+
+
{{input.content}}
+
+
+ +
+ +
+
+
+
diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less new file mode 100644 index 0000000000..fac1ae74a8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.less @@ -0,0 +1,129 @@ +@import '../../../../../assets/styles/variables'; +@import '../../../../../assets/styles/mixins'; +@import '../../../../../assets/styles/sprite-old'; +/deep/ modal { + display: none; +} + +.custom-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 15007; + overflow: auto; + margin: auto; + display: flex; + align-items: center; + + .ng2-modal-content { + background: #fff; + width: 100%; + box-shadow: 0 5px 15px rgba(0,0,0,.5); + border-radius: 4px; + .ng2-modal-body{ + padding: 20px; + } + + .ng2-modal-header{ + .m_18_r; + font-weight: bold; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 50px; + line-height: 50px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + + &.modal-type-standard { + border-bottom: solid 3px @main_color_a; + } + + &.modal-type-error { + border-bottom: solid 3px @func_color_q; + } + + &.modal-type-alert{ + border-bottom: solid 3px @main_color_h; + } + + .title{ + .s_18_r; + -webkit-box-flex: 999; + -ms-flex-positive: 999; + flex-grow: 999; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } + } + + .ng2-modal-footer{ + background-color: @tlv_color_t; + padding: 17px 30px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + border-radius: 4px; + button{ + margin: 0 12px 0 6px; + } + } + } +} + +.modal-background { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #000; + opacity: 0.5; + z-index: 900; +} + + +.xl { + width: 1200px; +} + +.l { + width: 875px; +} + +.md { + width: 650px; +} + +.sm { + width: 552px; +} + +.xsm { + width: 432px; +} + +body.modal-open { + overflow: hidden; +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts new file mode 100644 index 0000000000..89db8d1140 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.component.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 6/1/2017. + */ +import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core'; +import {ViewContainerRef, ViewChild} from '@angular/core'; +import * as $ from 'jquery'; +import { ButtonsModelMap, ModalModel } from 'app/models'; + +@Component({ + selector: 'modal', + templateUrl: './modal.component.html', + styleUrls:['modal.component.less'] +}) + +export class ModalComponent implements OnInit, OnDestroy { + @Input() input: ModalModel; + @Input() dynamicContent: any; + @ViewChild('dynamicContentContainer', { read: ViewContainerRef }) dynamicContentContainer: ViewContainerRef; //Allows for custom component as body instead of simple message. See ModalService.createActionModal for implementation details, and HttpService's catchError() for example. + private modalElement: JQuery; + + constructor( el: ElementRef ) { + this.modalElement = $(el.nativeElement); + } + + ngOnInit(): void { + this.modalElement.appendTo('body'); + } + + ngOnDestroy(): void { + this.modalElement.remove(); + } + + open(): void { + this.modalElement.show(); + $('body').addClass('modal-open'); + } + + close(): void { + this.modalElement.hide(); + $('body').removeClass('modal-open'); + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts new file mode 100644 index 0000000000..c38e60194b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/modal/modal.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from "@angular/core"; +import { CommonModule } from '@angular/common'; +import { ModalService } from 'app/ng2/services/modal.service'; +import { ErrorMessageComponent } from "./error-message/error-message.component"; +import {ModalComponent} from "./modal.component"; + +@NgModule({ + declarations: [ + ModalComponent, + ErrorMessageComponent + ], + imports: [CommonModule], + exports: [ModalComponent, ErrorMessageComponent], + entryComponents: [ //need to add anything that will be dynamically created + ModalComponent, + ErrorMessageComponent + ], + providers: [ModalService] +}) +export class ModalModule { + +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts new file mode 100644 index 0000000000..0c1669ec4b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts @@ -0,0 +1,10 @@ +/** + * Created by rc2122 on 9/27/2017. + */ +import {Component, Input} from "@angular/core"; +@Component({ +}) +export class WizardHeaderBaseComponent { + + @Input() currentStepIndex:number; +} diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html new file mode 100644 index 0000000000..9884b233ac --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html @@ -0,0 +1,57 @@ +
+
+
+ {{ input.title }} + +
+
+
+
+
+
+
{{step.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ + + +
+ +
+
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less new file mode 100644 index 0000000000..3a2168aeb0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less @@ -0,0 +1,90 @@ +@import './../../../../../assets/styles/variables.less'; + +@circle_size: 13px; + +.custom-modal{ + font-family: @font-opensans-regular; +} + +/deep/ multi-steps-wizard { + display: none; +} + +.ng2-modal-header{ + border: none !important; +} + +.ng2-modal-body{ + padding-top: 0 !important; +} + +header{ + margin-bottom: 10px; + .dynamic-header-container{ + position: relative; + top: -9px; + } + .steps-header{ + display: flex; + .step-title{ + flex: 1; + .title-text{ + width: 100%; + text-align: center; + line-height: 40px; + background-color: @tlv_color_u; + font-size: 13px; + } + .line{ + width: calc(~'100% - @{circle_size}'); + position: relative; + left: calc(~'(100% - @{circle_size})/2 * (-1)'); + float: left; + height: 2px; + .inner-line{ + background-color: @main_color_a; + height: 100%; + } + } + .circle{ + margin:0 auto; + border: @main_color_o solid 1px; + height: @circle_size; + width: @circle_size; + border-radius: 50%; + position: relative; + top: -@circle_size/2; + background-color: @main_color_p; + z-index: 1; + } + .full-circle{ + border-color: @main_color_a; + background-color: @main_color_a; + } + &.active{ + color: @main_color_a; + font-family: @font-opensans-medium; + .circle{ + border-color: @main_color_a; + } + } + } + } +} + +.navigation-buttons{ + padding-left: 6px; + border-left: 1px solid @main_color_a; + .navigation-button{ + padding: 0 8px; + .navigation-icon{ + margin: 3px 0; + &.blue-arrow-back{ + float: left; + } + &.white-arrow-next{ + float: right; + } + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts new file mode 100644 index 0000000000..9219a30738 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts @@ -0,0 +1,78 @@ +/** + * Created by rc2122 on 8/15/2017. + */ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ +import { + Component, ElementRef, forwardRef, Inject, Input, trigger, state, style, + transition, animate, ViewChild, ViewContainerRef, ComponentRef +} from "@angular/core"; +import {StepModel} from "app/models"; +import {ModalService} from "../../../services/modal.service"; +import {ModalComponent} from "../modal/modal.component"; +import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component"; + + +@Component({ + selector: 'multi-steps-wizard', + templateUrl: './multi-steps-wizard.component.html', + styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'], + animations: [ + trigger('displayLineAnimation', [ + state('true', style({ + width: '100%', + })), + state('false', style({ + width:'0px', + })), + transition('* => *', animate('500ms')), + ]), + ], +}) +export class MultiStepsWizardComponent extends ModalComponent { + + @Input() steps:Array; + @Input() callback: Function; + @Input() data:any; + @Input() dynamicHeader: ComponentRef; + + @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef; + constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) { + super(el); + } + + private currentStepIndex:number = 0; + + nextStep = ():void => { + if(this.currentStepIndex + 1 < this.steps.length){ + this.currentStepIndex++; + this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component); + this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex; + } + } + + prevStep = ():void => { + if(this.currentStepIndex > 0){ + this.currentStepIndex--; + this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component); + this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex; + } + } +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts new file mode 100644 index 0000000000..3db217d282 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts @@ -0,0 +1,22 @@ +/** + * Created by rc2122 on 8/15/2017. + */ +import { NgModule } from "@angular/core"; +import {MultiStepsWizardComponent} from "./multi-steps-wizard.component"; +import {CommonModule} from "@angular/common"; +import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module"; + +@NgModule({ + declarations: [ + MultiStepsWizardComponent + ], + imports: [CommonModule + ], + exports: [], + entryComponents: [ + MultiStepsWizardComponent + ], + providers: [] +}) +export class MultiStepsWizardModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts new file mode 100644 index 0000000000..ac58cbd063 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar-routes.config.ts @@ -0,0 +1,27 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { MenuType, RouteInfo } from './navbar.metadata'; + +export const ROUTES: RouteInfo[] = [ + { path: 'page1', title: 'Logo', menuType: MenuType.BRAND }, + { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT }, + { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT } +]; diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html new file mode 100644 index 0000000000..d783be4c27 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.html @@ -0,0 +1,23 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less new file mode 100644 index 0000000000..3e5165b798 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.less @@ -0,0 +1,11 @@ +.active { + color: #ffffff; +} +.navbar-toggler { + border: solid 1px #cccccc; + color: #ff0000; +} +.navbar { + background-color: #0000ff; + border-radius: 0; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts new file mode 100644 index 0000000000..68a26c4780 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.component.ts @@ -0,0 +1,52 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, OnInit, ViewEncapsulation} from '@angular/core'; +import { ROUTES } from './navbar-routes.config'; +import { MenuType, RouteInfo } from './navbar.metadata'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: [ './navbar.component.less' ], + encapsulation: ViewEncapsulation.None +}) +export class NavbarComponent implements OnInit { + public menuItems: Array; + public brandMenu: RouteInfo; + isCollapsed = true; + + constructor() {} + + ngOnInit() { + this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); + this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; + } + + public get menuIcon(): string { + return this.isCollapsed ? '☰' : '✖'; + } + + public getMenuItemClasses(menuItem: any) { + return { + 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT + }; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts new file mode 100644 index 0000000000..71cc3cb59f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.metadata.ts @@ -0,0 +1,31 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +export enum MenuType { + BRAND, + LEFT, + RIGHT +} + +export interface RouteInfo { + path: string; + title: string; + menuType: MenuType; +} diff --git a/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts new file mode 100644 index 0000000000..4a754dfe99 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/navbar/navbar.module.ts @@ -0,0 +1,36 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { NavbarComponent } from "./navbar.component"; + +@NgModule({ + imports: [ + RouterModule, + CommonModule + ], + declarations: [ NavbarComponent ], + exports: [ + NavbarComponent + ] +}) +export class NavbarModule {} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html new file mode 100644 index 0000000000..6d76f0ad06 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.html @@ -0,0 +1,24 @@ +
+
+
+
+ {{ title }} + +
+ +
+ +
+
+ + diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less new file mode 100644 index 0000000000..fbdec0b16b --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.less @@ -0,0 +1,77 @@ +@import '../../../../../assets/styles/variables'; +@import '../../../../../assets/styles/mixins'; +@import '../../../../../assets/styles/sprite-old'; +.popover .virtual-area { + height: 11px; + width: 100%; + position: absolute; +} +.popover.top .virtual-area { + bottom: -11px; +} +.popover.bottom .virtual-area { + top: -11px; +} +.popover.left .virtual-area { + right: -11px; +} +.popover.right .virtual-area { + left: -11px; +} +.popover.hide-arrow{ + margin: 0; +} + +.popover-header{ + .m_14_m; + font-weight: bold; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + height: 40px; + line-height: 48px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + border-bottom: solid 1px @main_color_o; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0px 20px; + max-width:350px; + + .title{ + flex: 1; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .close-button{ + .sprite; + .sprite.x-btn-black; + cursor: pointer; + } +} + +.popover-footer{ + background-color: @tlv_color_t; + height: 40px; + clear: both; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + button{ + margin: 8px 12px 8px 6px; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts new file mode 100644 index 0000000000..6eb36287d0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover-content.component.ts @@ -0,0 +1,278 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, Input, Output, AfterViewInit, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, EventEmitter, Renderer } from "@angular/core"; +import {ButtonsModelMap} from "app/models"; +import {PopoverComponent} from "./popover.component"; + +@Component({ + selector: "popover-content", + templateUrl:'./popover-content.component.html', + styleUrls:['popover-content.component.less'] +}) +export class PopoverContentComponent implements AfterViewInit, OnDestroy { + + @Input() public title: string; + @Input() public buttons:ButtonsModelMap; + + @Input() + content: string; + + @Input() + placement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right" = "bottom"; + + @Input() + animation: boolean = true; + + @Input() + closeOnClickOutside: boolean = false; + + @Input() + closeOnMouseOutside: boolean = false; + + @Input() + hideArrow: boolean = false; + + @ViewChild("popoverDiv") + popoverDiv: ElementRef; + + buttonsNames:Array; + + popover: PopoverComponent; + onCloseFromOutside = new EventEmitter(); + top: number = -10000; + left: number = -10000; + isIn: boolean = false; + displayType: string = "none"; + effectivePlacement: string; + + onDocumentMouseDown = (event: any) => { + const element = this.element.nativeElement; + if (!element || !this.popover) return; + if (element.contains(event.target) || this.popover.getElement().contains(event.target)) return; + this.hide(); + this.onCloseFromOutside.emit(undefined); + }; + + + constructor(protected element: ElementRef, + protected cdr: ChangeDetectorRef, + protected renderer: Renderer) { + } + + listenClickFunc: any; + listenMouseFunc: any; + + ngAfterViewInit(): void { + this.buttonsNames = Object.keys(this.buttons); + if (this.closeOnClickOutside) + this.listenClickFunc = this.renderer.listenGlobal("document", "mousedown", (event: any) => this.onDocumentMouseDown(event)); + if (this.closeOnMouseOutside) + this.listenMouseFunc = this.renderer.listenGlobal("document", "mouseover", (event: any) => this.onDocumentMouseDown(event)); + + this.show(); + this.cdr.detectChanges(); + } + + ngOnDestroy() { + if (this.closeOnClickOutside) + this.listenClickFunc(); + if (this.closeOnMouseOutside) + this.listenMouseFunc(); + } + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + show(): void { + if (!this.popover || !this.popover.getElement()) + return; + + const p = this.positionElements(this.popover.getElement(), this.popoverDiv.nativeElement, this.placement); + this.displayType = "block"; + this.top = p.top; + this.left = p.left; + this.isIn = true; + } + + hide(): void { + this.top = -10000; + this.left = -10000; + this.isIn = true; + this.popover.hide(); + } + + hideFromPopover() { + this.top = -10000; + this.left = -10000; + this.isIn = true; + } + + // ------------------------------------------------------------------------- + // Protected Methods + // ------------------------------------------------------------------------- + + protected positionElements(hostEl: HTMLElement, targetEl: HTMLElement, positionStr: string, appendToBody: boolean = false): { top: number, left: number } { + let positionStrParts = positionStr.split("-"); + let pos0 = positionStrParts[0]; + let pos1 = positionStrParts[1] || "center"; + let hostElPos = appendToBody ? this.offset(hostEl) : this.position(hostEl); + let targetElWidth = targetEl.offsetWidth; + let targetElHeight = targetEl.offsetHeight; + + this.effectivePlacement = pos0 = this.getEffectivePlacement(pos0, hostEl, targetEl); + + let shiftWidth: any = { + center: function (): number { + return hostElPos.left + hostElPos.width / 2 - targetElWidth / 2; + }, + left: function (): number { + return hostElPos.left; + }, + right: function (): number { + return hostElPos.left + hostElPos.width - targetElWidth; + } + }; + + let shiftHeight: any = { + center: function (): number { + return hostElPos.top + hostElPos.height / 2 - targetElHeight / 2; + }, + top: function (): number { + return hostElPos.top; + }, + bottom: function (): number { + return hostElPos.top + hostElPos.height - targetElHeight; + } + }; + + let targetElPos: { top: number, left: number }; + switch (pos0) { + case "right": + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left + hostElPos.width + }; + break; + + case "left": + targetElPos = { + top: shiftHeight[pos1](), + left: hostElPos.left - targetElWidth + }; + break; + + case "bottom": + targetElPos = { + top: hostElPos.top + hostElPos.height, + left: shiftWidth[pos1]() + }; + break; + + default: + targetElPos = { + top: hostElPos.top - targetElHeight, + left: shiftWidth[pos1]() + }; + break; + } + + return targetElPos; + } + + protected position(nativeEl: HTMLElement): { width: number, height: number, top: number, left: number } { + let offsetParentBCR = { top: 0, left: 0 }; + const elBCR = this.offset(nativeEl); + const offsetParentEl = this.parentOffsetEl(nativeEl); + if (offsetParentEl !== window.document) { + offsetParentBCR = this.offset(offsetParentEl); + offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop; + offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft; + } + + const boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: elBCR.top - offsetParentBCR.top, + left: elBCR.left - offsetParentBCR.left + }; + } + + protected offset(nativeEl: any): { width: number, height: number, top: number, left: number } { + const boundingClientRect = nativeEl.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeEl.offsetWidth, + height: boundingClientRect.height || nativeEl.offsetHeight, + top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), + left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) + }; + } + + protected getStyle(nativeEl: HTMLElement, cssProp: string): string { + if ((nativeEl as any).currentStyle) // IE + return (nativeEl as any).currentStyle[cssProp]; + + if (window.getComputedStyle) + return (window.getComputedStyle as any)(nativeEl)[cssProp]; + + // finally try and get inline style + return (nativeEl.style as any)[cssProp]; + } + + protected isStaticPositioned(nativeEl: HTMLElement): boolean { + return (this.getStyle(nativeEl, "position") || "static" ) === "static"; + } + + protected parentOffsetEl(nativeEl: HTMLElement): any { + let offsetParent: any = nativeEl.offsetParent || window.document; + while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + return offsetParent || window.document; + } + + protected getEffectivePlacement(placement: string, hostElement: HTMLElement, targetElement: HTMLElement): string { + const placementParts = placement.split(" "); + if (placementParts[0] !== "auto") { + return placement; + } + + const hostElBoundingRect = hostElement.getBoundingClientRect(); + + const desiredPlacement = placementParts[1] || "bottom"; + + if (desiredPlacement === "top" && hostElBoundingRect.top - targetElement.offsetHeight < 0) { + return "bottom"; + } + if (desiredPlacement === "bottom" && hostElBoundingRect.bottom + targetElement.offsetHeight > window.innerHeight) { + return "top"; + } + if (desiredPlacement === "left" && hostElBoundingRect.left - targetElement.offsetWidth < 0) { + return "right"; + } + if (desiredPlacement === "right" && hostElBoundingRect.right + targetElement.offsetWidth > window.innerWidth) { + return "left"; + } + + return desiredPlacement; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts new file mode 100644 index 0000000000..e976bc7bf2 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.component.ts @@ -0,0 +1,179 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Directive, HostListener, ComponentRef, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; +import {PopoverContentComponent} from "./popover-content.component"; + +@Directive({ + selector: "[popover]", + exportAs: "popover" +}) +export class PopoverComponent implements OnChanges { + + protected PopoverComponent = PopoverContentComponent; + protected popover: ComponentRef; + protected visible: boolean; + + + constructor(protected viewContainerRef: ViewContainerRef, + protected resolver: ComponentFactoryResolver) { + } + + @Input("popover") + content: string|PopoverContentComponent; + + @Input() + popoverDisabled: boolean; + + @Input() + popoverAnimation: boolean; + + @Input() + popoverPlacement: "top"|"bottom"|"left"|"right"|"auto"|"auto top"|"auto bottom"|"auto left"|"auto right"; + + @Input() + popoverTitle: string; + + @Input() + popoverOnHover: boolean = false; + + @Input() + popoverCloseOnClickOutside: boolean; + + @Input() + popoverCloseOnMouseOutside: boolean; + + @Input() + popoverDismissTimeout: number = 0; + + @Output() + onShown = new EventEmitter(); + + @Output() + onHidden = new EventEmitter(); + + @HostListener("click") + showOrHideOnClick(): void { + if (this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.toggle(); + } + + @HostListener("focusin") + @HostListener("mouseenter") + showOnHover(): void { + if (!this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.show(); + } + + @HostListener("focusout") + @HostListener("mouseleave") + hideOnHover(): void { + if (this.popoverCloseOnMouseOutside) return; + if (!this.popoverOnHover) return; + if (this.popoverDisabled) return; + this.hide(); + } + + ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { + if (changes["popoverDisabled"]) { + if (changes["popoverDisabled"].currentValue) { + this.hide(); + } + } + } + + toggle() { + if (!this.visible) { + this.show(); + } else { + this.hide(); + } + } + + show() { + if (this.visible) return; + + this.visible = true; + if (typeof this.content === "string") { + const factory = this.resolver.resolveComponentFactory(this.PopoverComponent); + if (!this.visible) + return; + + this.popover = this.viewContainerRef.createComponent(factory); + const popover = this.popover.instance as PopoverContentComponent; + popover.popover = this; + popover.content = this.content as string; + if (this.popoverPlacement !== undefined) + popover.placement = this.popoverPlacement; + if (this.popoverAnimation !== undefined) + popover.animation = this.popoverAnimation; + if (this.popoverTitle !== undefined) + popover.title = this.popoverTitle; + if (this.popoverCloseOnClickOutside !== undefined) + popover.closeOnClickOutside = this.popoverCloseOnClickOutside; + if (this.popoverCloseOnMouseOutside !== undefined) + popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; + + popover.onCloseFromOutside.subscribe(() => this.hide()); + if (this.popoverDismissTimeout > 0) + setTimeout(() => this.hide(), this.popoverDismissTimeout); + } else { + const popover = this.content as PopoverContentComponent; + popover.popover = this; + if (this.popoverPlacement !== undefined) + popover.placement = this.popoverPlacement; + if (this.popoverAnimation !== undefined) + popover.animation = this.popoverAnimation; + if (this.popoverTitle !== undefined) + popover.title = this.popoverTitle; + if (this.popoverCloseOnClickOutside !== undefined) + popover.closeOnClickOutside = this.popoverCloseOnClickOutside; + if (this.popoverCloseOnMouseOutside !== undefined) + popover.closeOnMouseOutside = this.popoverCloseOnMouseOutside; + + popover.onCloseFromOutside.subscribe(() => this.hide()); + if (this.popoverDismissTimeout > 0) + setTimeout(() => this.hide(), this.popoverDismissTimeout); + popover.show(); + } + + this.onShown.emit(this); + } + + hide() { + if (!this.visible) return; + + this.visible = false; + if (this.popover) + this.popover.destroy(); + + if (this.content instanceof PopoverContentComponent) + (this.content as PopoverContentComponent).hideFromPopover(); + + this.onHidden.emit(this); + } + + getElement() { + return this.viewContainerRef.element.nativeElement; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts new file mode 100644 index 0000000000..d8cacc1696 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/popover/popover.module.ts @@ -0,0 +1,45 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/17/2017. + */ +import {NgModule} from "@angular/core"; +import { CommonModule } from '@angular/common'; +import {PopoverComponent} from "./popover.component"; +import {PopoverContentComponent} from "./popover-content.component"; + +@NgModule({ + declarations: [ + PopoverComponent, + PopoverContentComponent + ], + imports: [ + CommonModule + ], + exports: [ + PopoverComponent, + PopoverContentComponent + ], + providers: [] +}) +export class PopoverModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html new file mode 100644 index 0000000000..36629594b0 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.html @@ -0,0 +1,5 @@ +
+ + x + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less new file mode 100644 index 0000000000..751fceec35 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.less @@ -0,0 +1,57 @@ +.search-bar-container { + display:flex; + border-radius: 4px; + box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); + + .search-bar-input { + border: 1px solid #cdcdcd; + border-radius: 4px; + border-right:none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + outline:none; + padding:2px 50px 2px 10px; + color: #5a5a5a; + font-size: 1em; + font-style: italic; + } + + .clear-search-x { + position:absolute; + right:40px; + top:5px; + padding: 0 5px; + + &:hover { + border-radius:2px; + background-color: #ebebeb; + cursor:pointer; + } + } + + .search-bar-button { + background: url('../../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; + background-color: rgba(234, 234, 234, 0.88); + width: 30px; + height: 30px; + padding: 0; + cursor:pointer; + border:solid 1px #cdcdcd; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + + &:hover { + background-position:-126px -1275px; + } + + &:active { + background-color: rgba(31, 171, 223, 0.88); + background-position:-45px -1275px; + border-left:none; + } + &:focus { + outline:none; + } + + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts new file mode 100644 index 0000000000..08bdf2030f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-bar/search-bar.component.ts @@ -0,0 +1,32 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'search-bar', + templateUrl: './search-bar.component.html', + styleUrls: ['./search-bar.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchBarComponent { + + @Input() placeholder: string; + @Input() class: string; + @Input() searchQuery: string; + @Output() searchChanged: EventEmitter = new EventEmitter(); + @Output() searchButtonClicked: EventEmitter = new EventEmitter(); + + searchButtonClick = (): void => { + if (this.searchQuery) { //do not allow empty search + this.searchButtonClicked.emit(this.searchQuery); + } + } + + searchQueryChange = ($event): void => { + this.searchChanged.emit($event); + } + + private clearSearchQuery = (): void => { + this.searchQuery = ""; + this.searchButtonClicked.emit(this.searchQuery); + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html new file mode 100644 index 0000000000..c9769ba5ae --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.html @@ -0,0 +1,6 @@ +
+ +
+
{{item}}
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less new file mode 100644 index 0000000000..f1830846d3 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.less @@ -0,0 +1,34 @@ +.search-with-autocomplete-container{ + &.autocomplete-visible { + + .search-bar-input { + border-bottom-left-radius: 0; + } + .search-bar-button { + border-bottom-right-radius: 0; + } + .autocomplete-results { + border: solid 1px #d2d2d2; + border-top:none; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + background-color: #fff; + padding: 10px 20px; + width:100%; + position:absolute; + max-height: 200px; + overflow-y: scroll; + } + + .autocomplete-result-item { + color:#5a5a5a; + padding: 5px 0; + cursor:pointer; + + &:hover { + color: #999; + } + } + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts new file mode 100644 index 0000000000..ced056d1fc --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; +import { SearchBarComponent } from '../search-bar/search-bar.component'; + +@Component({ + selector: 'search-with-autocomplete', + templateUrl: './search-with-autocomplete.component.html', + styleUrls: ['./search-with-autocomplete.component.less'], + encapsulation: ViewEncapsulation.None +}) +export class SearchWithAutoCompleteComponent { + + @Input() searchPlaceholder: string; + @Input() searchBarClass: string; + @Input() searchQuery: string; + @Input() autoCompleteValues: Array; + @Output() searchChanged: EventEmitter = new EventEmitter(); + @Output() searchButtonClicked: EventEmitter = new EventEmitter(); + + searchChange = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchChanged.emit(searchTerm); + } + + updateSearch = (searchTerm: string) => { + this.searchQuery = searchTerm; + this.searchButtonClicked.emit(searchTerm); + this.autoCompleteValues = []; + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts new file mode 100644 index 0000000000..bad7b80a51 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tab/tab.component.ts @@ -0,0 +1,38 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, Input } from '@angular/core'; +import { ViewEncapsulation } from '@angular/core'; + +@Component({ + selector: 'tab', + template: ` +
+ +
+ `, + encapsulation: ViewEncapsulation.None +}) +export class Tab { + @Input('tabTitle') title: string; + @Input() active:boolean = false; + @Input() indication?: number; + +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html new file mode 100644 index 0000000000..57cf5d46c9 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.html @@ -0,0 +1,9 @@ +
+
+ {{tab.title}} +
{{tab.indication}}
+
+
+
+ +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less new file mode 100644 index 0000000000..f7b18b1cc8 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less @@ -0,0 +1,85 @@ +@import '../../../../../assets/styles/variables'; + +tab { + height: 100%; +} + +.tabs { + display:flex; + flex: 0 0 auto; + flex-direction:row; +} + +.tab { + flex: 1 0 auto; + cursor: pointer; + padding: .5em; +} + +.tab-content-container { + flex: 1; + width:100%; + overflow-y:hidden; + overflow-x:hidden; +} + +.tab-content { + height:100%; +} + +/*Tab styles*/ +.tabs{ + &.round-tabs .tab{ + background-color: #f8f8f8; + color: #959595; + border: solid 1px #d2d2d2; + border-bottom:none; + border-left:none; + position:relative; + + &:first-child { + border-left:solid 1px #d2d2d2; + } + + &.active { + background-color:#009fdb; + color:#e9e9e9; + border-color:#009fdb; + } + + .tab-indication { + position: absolute; + top: -10px; + background-color: #009fdb; + right: 10px; + padding: 2px 0; + border-radius: 15px; + border: solid 1px #d2d2d2; + color:white; + width: 25px; + height: 25px; + text-align: center; + + } + } + + &.simple-tabs .tab { + font-size: 12px; + color: @main_color_n; + + &:after { + display:block; + content: ''; + border-bottom: 2px solid @main_color_a; + transform: scaleX(0); + transition: transform 200ms ease-in-out; + } + + &.active { + color: @main_color_a; + &:after { + transform: scaleX(1.2); + } + } + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts new file mode 100644 index 0000000000..21d2bbad43 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.ts @@ -0,0 +1,78 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core'; +import { Tab } from './tab/tab.component'; +import { ViewEncapsulation } from '@angular/core'; +import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; + +@Component({ + selector: 'tabs', + templateUrl: './tabs.component.html', + styleUrls: ['./tabs.component.less'], + encapsulation: ViewEncapsulation.None, + animations: [ + trigger('indicatorAnimation', [ + transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), + transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ]) + ]) + ] +}) +export class Tabs implements AfterContentInit { + + @Input() tabStyle: string; + @Input() hideIndicationOnTabChange?: boolean = false; + @ContentChildren(Tab) tabs: QueryList; + @Output() tabChanged: EventEmitter = new EventEmitter(); + + + ngAfterContentInit() { + //after contentChildren are set, determine active tab. If no active tab set, activate the first one + let activeTabs = this.tabs.filter((tab) => tab.active); + + if (activeTabs.length === 0) { + this.selectTab(this.tabs.first); + } + } + + selectTab(tab: Tab) { + //activate the tab the user clicked. + this.tabs.toArray().forEach(tab => { + tab.active = false; + if (this.hideIndicationOnTabChange && tab.indication) { + tab.indication = null; + } + }); + tab.active = true; + this.tabChanged.emit(tab); + } + + triggerTabChange(tabTitle) { + this.tabs.toArray().forEach(tab => { + tab.active = (tab.title == tabTitle) ? true : false; + }); + } + + setTabIndication(tabTitle:string, indication?:number) { + let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle); + selectedTab.indication = indication || null; + } + +} diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts new file mode 100644 index 0000000000..1300c41a90 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.module.ts @@ -0,0 +1,55 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core' +import { BrowserModule } from '@angular/platform-browser' + +import { Tabs } from './tabs.component'; +import { Tab } from './tab/tab.component'; + + +@NgModule({ + imports: [BrowserModule], + declarations: [Tabs, Tab], + bootstrap: [], + exports: [Tabs, Tab] +}) +export class TabModule { } + +/** README: **/ + +/** USAGE Example: + *In page.module.ts: import TabModule + *In HTML: + * + * Content of tab 1 + * Content of tab 2 + * ... + * + */ + +/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) + * Existing options: + * tabStyle="round-tabs" will provide generic rounded tab look + * + * To create or override styles: + * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active". + * Use /deep/ or >>> prefix to override styles via other components stylesheets + */ diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html new file mode 100644 index 0000000000..1fbf45e39f --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.html @@ -0,0 +1,12 @@ + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less new file mode 100644 index 0000000000..1ff496f840 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.less @@ -0,0 +1,11 @@ +.tooltip-inner { + word-wrap: break-word; + max-width: 300px; +} + +.tooltip.bottom .tooltip-arrow { + border-bottom-color: #000 !important; +} + + + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts new file mode 100644 index 0000000000..4dcb64c499 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip-content.component.ts @@ -0,0 +1,215 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core"; + +@Component +({ + selector: "tooltip-content", + templateUrl: "./tooltip-content.component.html", + styleUrls: ["./tooltip-content.component.less"] +}) + +export class TooltipContentComponent implements AfterViewInit { + + // ------------------------------------------------------------------------- + // Inputs / Outputs + // ------------------------------------------------------------------------- + + @Input() hostElement: HTMLElement; + @Input() content: string; + @Input() placement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() animation: boolean = true; + + // ------------------------------------------------------------------------- + // Properties + // ------------------------------------------------------------------------- + + top: number = -100000; + left: number = -100000; + isIn: boolean = false; + isFade: boolean = false; + + // ------------------------------------------------------------------------- + // Constructor + // ------------------------------------------------------------------------- + + constructor(private element: ElementRef, + private cdr: ChangeDetectorRef) { + } + + // ------------------------------------------------------------------------- + // Lifecycle callbacks + // ------------------------------------------------------------------------- + + ngAfterViewInit(): void { + this.show(); + this.cdr.detectChanges(); + } + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + show(): void { + if(!this.hostElement) { + return; + } + + const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement); + this.top = position.top; + this.left = position.left; + this.isIn = true; + if (this.animation) { + this.isFade = true; + } + } + + hide(): void { + this.top = -100000; + this.left = -100000; + this.isIn = true; + if(this.animation) { + this.isFade = false; + } + } + + // ------------------------------------------------------------------------- + // Private Methods + // ------------------------------------------------------------------------- + + private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} { + let positionStrParts = positionStr.split("-"); + let pos0 = positionStrParts[0]; + let pos1 = positionStrParts[1] || "center"; + let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem); + let targetElemWidth = targetElem.offsetWidth; + let targetElemHeight = targetElem.offsetHeight; + let shiftWidth: any = { + center(): number { + return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2; + }, + left(): number { + return hostElemPosition.left; + }, + right(): number { + return hostElemPosition.left + hostElemPosition.width; + } + }; + + let shiftHeight: any = { + center: function (): number { + return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2; + }, + top: function (): number { + return hostElemPosition.top; + }, + bottom: function (): number { + return hostElemPosition.top + hostElemPosition.height; + } + } + + let targetElemPosition: {top: number, left: number}; + + switch (pos0) { + case "right": + targetElemPosition = { + top: shiftHeight[pos1](), + left: shiftWidth[pos0]() + }; + break; + + case "left": + targetElemPosition = { + top: shiftHeight[pos1](), + left: hostElemPosition.left - targetElemWidth + }; + break; + + case "bottom": + targetElemPosition = { + top: shiftHeight[pos0](), + left: shiftWidth[pos1]() + }; + break; + + default: + targetElemPosition = { + top: hostElemPosition.top - targetElemHeight, + left: shiftWidth[pos1]() + }; + break; + } + + return targetElemPosition; + } + + + private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} { + let offsetParentCBR = {top: 0, left: 0}; + const elemBCR = this.offset(nativeElem); + const offsetParentElem = this.parentOffsetElem(nativeElem); + if(offsetParentElem !== window.document) { + offsetParentCBR = this.offset(offsetParentElem); + offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop; + offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop; + } + + const boundingClientRect = nativeElem.getBoundingClientRect(); + + return { + width: boundingClientRect.width || nativeElem.offsetWidth, + height: boundingClientRect.height || nativeElem.offsetHeight, + top: elemBCR.top - offsetParentCBR.top, + left: elemBCR.left - offsetParentCBR.left + }; + } + + private offset(nativeElem:any): {width: number, height: number, top: number, left: number} { + const boundingClientRect = nativeElem.getBoundingClientRect(); + return { + width: boundingClientRect.width || nativeElem.offsetWidth, + height: boundingClientRect.height || nativeElem.offsetHeight, + top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop), + left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft) + }; + } + + private getStyle(nativeElem: HTMLElement, cssProperty: string): string { + if(window.getComputedStyle) { + return (window.getComputedStyle(nativeElem) as any)[cssProperty]; + } + + return (nativeElem.style as any)[cssProperty]; + } + + private isStaticPositioned(nativeElem: HTMLElement): boolean { + return (this.getStyle(nativeElem, "position") || "static") === "static"; + } + + private parentOffsetElem(nativeElem: HTMLElement): any { + let offsetParent: any = nativeElem.offsetParent || window.document; + while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) { + offsetParent = offsetParent.offsetParent; + } + + return offsetParent || window.document; + } +} diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts new file mode 100644 index 0000000000..79d35c6e0e --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.component.ts @@ -0,0 +1,109 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { + Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener +} from "@angular/core"; +import {TooltipContentComponent} from "./tooltip-content.component"; + +@Directive ({ + selector: "[tooltip]" +}) +export class TooltipComponent { + + // ------------------------------------------------------------------------- + // Properties + // ------------------------------------------------------------------------- + + private tooltip: ComponentRef; + private visible: boolean; + private delayInProgress: boolean = false; + + // ------------------------------------------------------------------------- + // Constructor + // ------------------------------------------------------------------------- + + constructor(private viewContainerRef: ViewContainerRef, + private resolver: ComponentFactoryResolver) { + } + + // ------------------------------------------------------------------------- + // Inputs / Outputs + // ------------------------------------------------------------------------- + + @Input("tooltip") content: string|TooltipContentComponent; + @Input() tooltipDisabled: boolean; + @Input() tooltipAnimation: boolean = true; + @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom"; + @Input() tooltipDelay: number = 1500; + + // ------------------------------------------------------------------------- + // Public Methods + // ------------------------------------------------------------------------- + + @HostListener("mouseenter") + show(): void { + if(this.tooltipDisabled || this.visible || this.content === "") { + return; + } + if (this.tooltipDelay && !this.delayInProgress) { + this.delayInProgress = true; + setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay); + return; + } + + this.visible = true; + if (typeof this.content === "string") { + const factory = this.resolver.resolveComponentFactory(TooltipContentComponent); + if (!this.visible) { + return; + } + + this.tooltip = this.viewContainerRef.createComponent(factory); + this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement; + this.tooltip.instance.content = this.content as string; + this.tooltip.instance.placement = this.tooltipPlacement; + this.tooltip.instance.animation = this.tooltipAnimation; + } else { + const tooltip = this.content as TooltipContentComponent; + tooltip.hostElement = this.viewContainerRef.element.nativeElement; + tooltip.placement = this.tooltipPlacement; + tooltip.animation = this.tooltipAnimation; + tooltip.show(); + } + } + + @HostListener("mouseleave") + hide(): void { + this.delayInProgress = false; + if (!this.visible) { + return; + } + + this.visible = false; + if (this.tooltip) { + this.tooltip.destroy(); + } + if (this.content instanceof TooltipContentComponent) { + (this.content as TooltipContentComponent).hide(); + } + } +} + diff --git a/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts new file mode 100644 index 0000000000..24478cd716 --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/tooltip/tooltip.module.ts @@ -0,0 +1,44 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {NgModule} from "@angular/core"; +import {TooltipContentComponent} from "./tooltip-content.component"; +import {TooltipComponent} from "./tooltip.component"; +import {CommonModule} from "@angular/common"; + +@NgModule({ + declarations: [ + TooltipComponent, + TooltipContentComponent, + ], + imports: [ + ], + exports: [ + TooltipComponent, + TooltipContentComponent, + ], + entryComponents: [ + TooltipContentComponent + ], + providers: [] +}) +export class TooltipModule { + +} diff --git a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts new file mode 100644 index 0000000000..526096524c --- /dev/null +++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts @@ -0,0 +1,80 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core'; +import { NavbarModule } from "./navbar/navbar.module"; +import {DynamicElementModule} from "./dynamic-element/dynamic-element.module"; +import {FormElementsModule} from "./form-components/form-elements.module"; +import {LoaderComponent} from "./loader/loader.component"; +import {ModalModule} from "./modal/modal.module"; +import {PopoverModule} from "./popover/popover.module"; +import {SearchBarComponent} from "./search-bar/search-bar.component"; +import {SearchWithAutoCompleteComponent} from "./search-with-autocomplete/search-with-autocomplete.component"; +import {TabModule} from "./tabs/tabs.module"; +import {TooltipModule} from "./tooltip/tooltip.module"; +import {CommonModule} from "@angular/common"; +import {FormsModule} from "@angular/forms"; +import {BrowserModule} from "@angular/platform-browser"; +import {MultiStepsWizardModule} from "./multi-steps-wizard/multi-steps-wizard.module"; +import {MenuListModule} from "./menu/menu-list.module"; +import {MenuListNg2Module} from "../downgrade-wrappers/menu-list-ng2/menu-list-ng2.module"; + +@NgModule({ + declarations: [ + LoaderComponent, + SearchBarComponent, + SearchWithAutoCompleteComponent + ], + + imports: [ + BrowserModule, + FormsModule, + CommonModule, + DynamicElementModule, + NavbarModule, + FormElementsModule, + ModalModule, + PopoverModule, + TabModule, + TooltipModule, + MultiStepsWizardModule, + MenuListModule, + MenuListNg2Module + ], + exports: [ + LoaderComponent, + MultiStepsWizardModule, + SearchBarComponent, + SearchWithAutoCompleteComponent, + DynamicElementModule, + NavbarModule, + FormElementsModule, + ModalModule, + PopoverModule, + TabModule, + TooltipModule, + MenuListModule, + MenuListNg2Module + ], + + entryComponents: [SearchWithAutoCompleteComponent] +}) + +export class UiElementsModule {} diff --git a/catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts b/catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts new file mode 100644 index 0000000000..b0fa17d3b6 --- /dev/null +++ b/catalog-ui/src/app/ng2/config/sdc-config.config.factory.ts @@ -0,0 +1,17 @@ +declare const __ENV__:string; + +export interface ISdcConfig { + [index:string]: any +} + +export function getSdcConfig() : ISdcConfig { + let sdcConfig:ISdcConfig = {}; + + if (__ENV__==='prod') { + sdcConfig = require('./../../../../configurations/prod.js'); + } else { + sdcConfig = require('./../../../../configurations/dev.js'); + } + + return sdcConfig; +} diff --git a/catalog-ui/src/app/ng2/config/sdc-config.config.ts b/catalog-ui/src/app/ng2/config/sdc-config.config.ts new file mode 100644 index 0000000000..197cc8b14b --- /dev/null +++ b/catalog-ui/src/app/ng2/config/sdc-config.config.ts @@ -0,0 +1,11 @@ +import {Provider, OpaqueToken} from "@angular/core"; +import {getSdcConfig, ISdcConfig} from "./sdc-config.config.factory"; + +export { ISdcConfig }; + +export const SdcConfigToken = new OpaqueToken('SdcConfigToken'); + +export const SdcConfig:Provider = { + provide: SdcConfigToken, + useFactory: getSdcConfig +}; diff --git a/catalog-ui/src/app/ng2/config/translation.service.config.factory.ts b/catalog-ui/src/app/ng2/config/translation.service.config.factory.ts new file mode 100644 index 0000000000..c435e45def --- /dev/null +++ b/catalog-ui/src/app/ng2/config/translation.service.config.factory.ts @@ -0,0 +1,13 @@ +import { ITranslateServiceConfig } from "../shared/translator/translate.service.config"; + +declare const __ENV__:string; + +export function getTranslationServiceConfig() : ITranslateServiceConfig { + const pathPrefix = (__ENV__ === 'prod') ? 'sdc1/' : ''; + return { + filePrefix: pathPrefix + 'assets/languages/', + fileSuffix: '.json', + allowedLanguages: ['en_US'], + defaultLanguage: 'en_US' + }; +} diff --git a/catalog-ui/src/app/ng2/config/translation.service.config.ts b/catalog-ui/src/app/ng2/config/translation.service.config.ts new file mode 100644 index 0000000000..9c2df7a098 --- /dev/null +++ b/catalog-ui/src/app/ng2/config/translation.service.config.ts @@ -0,0 +1,8 @@ +import { Provider } from "@angular/core"; +import { TranslateServiceConfigToken } from "../shared/translator/translate.service.config"; +import { getTranslationServiceConfig } from "./translation.service.config.factory"; + +export const TranslationServiceConfig:Provider = { + provide: TranslateServiceConfigToken, + useFactory: getTranslationServiceConfig +}; diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html new file mode 100644 index 0000000000..02e7694eb0 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less new file mode 100644 index 0000000000..07f9aa2135 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.less @@ -0,0 +1,4 @@ +connection-wizard-header { + display: block; + margin-bottom: 15px; +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts new file mode 100644 index 0000000000..5abb879013 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component.ts @@ -0,0 +1,10 @@ +import {Component} from "@angular/core"; + + +@Component({ + selector: 'connection-properties-view', + templateUrl: './connection-properties-view.component.html', + styleUrls:['./connection-properties-view.component.less'] +}) +export class ConnectionPropertiesViewComponent { +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html new file mode 100644 index 0000000000..369ab50cad --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.html @@ -0,0 +1,36 @@ +
+
+
+
+
+ {{connectWizardService.connectRelationModel.fromNode.componentInstance.name}} +
+
+ {{getSelectedReqOrCapName(true)}} +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ {{connectWizardService.connectRelationModel.toNode.componentInstance.name}} +
+
+ {{getSelectedReqOrCapName(false)}} +
+
+
+
+
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less new file mode 100644 index 0000000000..72fa6e813f --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.less @@ -0,0 +1,53 @@ +@import '../../../../../assets/styles/sprite-proxy-services-icons'; +@import '../../../../../assets/styles/variables'; +.header-main-container{ + background-color: #f8f8f8; + width: 100%; + height: 100px; + display: flex; + .inner-container{ + margin: 0 auto; + display: flex; + } +} +.selected { + color: @main_color_a; +} +.node{ + display: flex; + &.from-node{ + text-align: right; + } + &.to-node{ + text-align: left; + } + &.selected{ + .icon{ + border: solid 3px @main_color_a; + padding: 4px; + border-radius: 50%; + background-color: @main_color_p; + } + } + .icon{ + margin: auto 0; + display: flex; + } + .text{ + font-family: @font-opensans-medium; + margin: auto 10px; + min-width: 450px; + .node-name{ + font-size: 11px; + } + .selected-req-or-cap{ + font-size: 14px; + } + } +} +.connection{ + width: 67px; + height: 0px; + border-bottom: dashed 2px #979797; + margin: auto 0; +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts new file mode 100644 index 0000000000..f5bc3b7ca4 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component.ts @@ -0,0 +1,37 @@ +/** + * Created by rc2122 on 9/27/2017. + */ +import {Component, Inject, forwardRef} from "@angular/core"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component"; + +@Component({ + selector: 'connection-wizard-header', + templateUrl: './connection-wizard-header.component.html', + styleUrls:['./connection-wizard-header.component.less'] +}) + +export class ConnectionWizardHeaderComponent extends WizardHeaderBaseComponent{ + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) { + super(); + } + + private _getReqOrCapName(isFromNode:boolean) { + const attributeReqOrCap:string = isFromNode ? 'requirement' : 'capability'; + if (this.connectWizardService.selectedMatch[attributeReqOrCap]) { + return this.connectWizardService.selectedMatch[attributeReqOrCap].getTitle(); + } else if (this.connectWizardService.selectedMatch.relationship) { + return this.connectWizardService.selectedMatch.relationship.relation[attributeReqOrCap]; + } + return ''; + } + + private getSelectedReqOrCapName = (isFromNode:boolean):string => { + if(!this.connectWizardService.selectedMatch){ + return ''; + } + return this._getReqOrCapName(this.connectWizardService.selectedMatch.isFromTo ? isFromNode : !isFromNode); + } +} + diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts new file mode 100644 index 0000000000..6b4b4128c1 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.module.ts @@ -0,0 +1,43 @@ +import {ToNodeStepComponent} from "./to-node-step/to-node-step.component"; +import {NgModule} from "@angular/core"; +import {FromNodeStepComponent} from "./from-node-step/from-node-step.component"; +import {PropertiesStepComponent} from "./properties-step/properties-step.component"; +import {ConnectionWizardService} from "./connection-wizard.service"; +import {SelectRequirementOrCapabilityModule} from "../../components/logic/select-requirement-or-capability/select-requirement-or-capability.module"; +import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module"; +import {FormElementsModule} from "../../components/ui/form-components/form-elements.module"; +import {ConnectionWizardHeaderComponent} from "./connection-wizard-header/connection-wizard-header.component"; +import {ConnectionPropertiesViewComponent} from "./connection-properties-view/connection-properties-view.component"; +import {BrowserModule} from "@angular/platform-browser"; + +@NgModule({ + declarations: [ + FromNodeStepComponent, + ToNodeStepComponent, + PropertiesStepComponent, + ConnectionWizardHeaderComponent, + ConnectionPropertiesViewComponent + ], + imports: [ + FormElementsModule, + PropertyTableModule, + SelectRequirementOrCapabilityModule, + BrowserModule + ], + exports: [ + FromNodeStepComponent, + ToNodeStepComponent, + PropertiesStepComponent, + ConnectionWizardHeaderComponent, + ConnectionPropertiesViewComponent + ], + entryComponents: [FromNodeStepComponent, + ToNodeStepComponent, + PropertiesStepComponent, + ConnectionWizardHeaderComponent, + ConnectionPropertiesViewComponent + ], + providers: [ConnectionWizardService] +}) +export class ConnectionWizardModule { +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts new file mode 100644 index 0000000000..a097fb04ea --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/connection-wizard.service.ts @@ -0,0 +1,67 @@ +import {ConnectRelationModel} from "../../../models/graph/connectRelationModel"; +import {Injectable} from "@angular/core"; +import { Requirement, Capability} from "app/models"; +import {Dictionary} from "lodash"; +import {Match, Component, PropertyFEModel} from "app/models"; + +@Injectable() +export class ConnectionWizardService { + + connectRelationModel:ConnectRelationModel; + currentComponent:Component; + selectedMatch:Match; + changedCapabilityProperties:PropertyFEModel[]; + + constructor() { + this.changedCapabilityProperties = []; + } + + public setRelationMenuDirectiveObj = (connectRelationModel:ConnectRelationModel) => { + this.connectRelationModel = connectRelationModel; + // this.selectedCapability = rel + } + + + // getComponentInstanceIdOfSelectedCapability = (): string => { + // if(this.selectedMatch.capability){ + // if(this.selectedMatch.isFromTo) { + // return this.selectedMatch.toNode; + // } else { + // return this.selectedMatch.fromNode; + // } + // } + // return ''; + // + // } + + getOptionalRequirementsByInstanceUniqueId = (isFromTo: boolean, matchWith?:Capability): Dictionary => { + let requirements: Array = []; + _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => { + if(!matchWith || match.capability.uniqueId == matchWith.uniqueId){ + if(match.isFromTo == isFromTo){ + requirements.push(match.requirement); + } + } + }); + requirements = _.uniqBy(requirements, (req:Requirement)=>{ + return req.ownerId + req.uniqueId + req.name; + }); + return _.groupBy(requirements, 'capability'); + } + + getOptionalCapabilitiesByInstanceUniqueId = (isFromTo: boolean, matchWith?:Requirement): Dictionary => { + let capabilities: Array = []; + _.forEach(this.connectRelationModel.possibleRelations, (match: Match) => { + if(!matchWith || match.requirement.uniqueId == matchWith.uniqueId){ + if(match.isFromTo == isFromTo){ + capabilities.push(match.capability); + } + } + }); + capabilities = _.uniqBy(capabilities, (cap:Capability)=>{ + return cap.ownerId + cap.uniqueId + cap.name; + }); + return _.groupBy(capabilities, 'type'); + } +} + diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html new file mode 100644 index 0000000000..0c9d9e6e26 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.html @@ -0,0 +1,8 @@ + + \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts new file mode 100644 index 0000000000..edbbf8a0a3 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/from-node-step/from-node-step.component.ts @@ -0,0 +1,49 @@ +import {Component, OnInit, Inject, forwardRef} from "@angular/core"; +import {IStepComponent} from "../../../../models/wizard-step"; +import {Dictionary} from "lodash"; +import { Match} from "app/models"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {Requirement} from "../../../../models/requirement"; +import {Capability} from "../../../../models/capability"; +import {PropertyModel} from "../../../../models/properties"; + +@Component({ + selector: 'from-node-step', + templateUrl: './from-node-step.component.html' +}) + +export class FromNodeStepComponent implements IStepComponent, OnInit{ + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) {} + + optionalRequirementsMap: Dictionary; + optionalCapabilitiesMap: Dictionary; + + ngOnInit(){ + this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(true); + this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(false); + } + + preventNext = ():boolean => { + return !this.connectWizardService.selectedMatch || (!this.connectWizardService.selectedMatch.capability && !this.connectWizardService.selectedMatch.requirement); + } + + preventBack = ():boolean => { + return true; + } + + onCapabilityPropertiesUpdate(capabilityProperties:Array) { + this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties; + } + + private updateSelectedReqOrCap = (selected:Requirement|Capability):void => { + if(!selected){ + this.connectWizardService.selectedMatch = null; + } else if(selected instanceof Requirement){ + this.connectWizardService.selectedMatch = new Match(selected, null, true, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId, null); + } else{ + this.connectWizardService.selectedMatch = new Match(null,selected , false, null, this.connectWizardService.connectRelationModel.fromNode.componentInstance.uniqueId); + } + } + +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html new file mode 100644 index 0000000000..9e34893272 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.html @@ -0,0 +1,13 @@ +
+ + {{(connectWizardService.selectedMatch.capability && connectWizardService.selectedMatch.capability.getTitle()) || connectWizardService.selectedMatch.relationship.relation.capability}} + +
+
+ + +
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less new file mode 100644 index 0000000000..8e9e07c0d5 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.less @@ -0,0 +1,15 @@ +@import '../../../../../assets/styles/variables'; +.title{ + margin-bottom: 20px; + .capability-name-label{ + font-size: 13px; + } + .capability-name{ + font-family: @font-opensans-medium; + color: @main_color_a; + } +} +.properties-table-container{ + height: 362px; + overflow-y: auto; +} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts new file mode 100644 index 0000000000..3e48785a3c --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/properties-step/properties-step.component.ts @@ -0,0 +1,67 @@ +/** + * Created by ob0695 on 9/4/2017. + */ +/** + * Created by rc2122 on 9/4/2017. + */ +import {Component, Inject, forwardRef} from '@angular/core'; +import {IStepComponent} from "app/models" +import {ConnectionWizardService} from "../connection-wizard.service"; +import {PropertyFEModel} from "../../../../models/properties-inputs/property-fe-model"; +import {InstanceFePropertiesMap} from "../../../../models/properties-inputs/property-fe-map"; +import {PropertiesUtils} from "../../properties-assignment/services/properties.utils"; +import {ComponentInstanceServiceNg2} from "../../../services/component-instance-services/component-instance.service"; + +@Component({ + selector: 'properties-step', + templateUrl: './properties-step.component.html', + styleUrls: ['./properties-step.component.less'] +}) + +export class PropertiesStepComponent implements IStepComponent{ + + capabilityPropertiesMap: InstanceFePropertiesMap; + savingProperty:boolean = false; + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService, private componentInstanceServiceNg2:ComponentInstanceServiceNg2, private propertiesUtils:PropertiesUtils) { + + this.capabilityPropertiesMap = this.propertiesUtils.convertPropertiesMapToFEAndCreateChildren({'capability' : connectWizardService.selectedMatch.capabilityProperties}, false); + } + + ngOnInit() { + this.connectWizardService.changedCapabilityProperties = []; + } + + onPropertySelectedUpdate = ($event) => { + console.log("==>" + 'PROPERTY VALUE SELECTED'); + // this.selectedFlatProperty = $event; + // let parentProperty:PropertyFEModel = this.propertiesService.getParentPropertyFEModelFromPath(this.instanceFePropertiesMap[this.selectedFlatProperty.instanceName], this.selectedFlatProperty.path); + // parentProperty.expandedChildPropertyId = this.selectedFlatProperty.path; + }; + + propertyValueChanged = (property: PropertyFEModel) => { + if (!property.isDeclared) { + const propChangedIdx = this.connectWizardService.changedCapabilityProperties.indexOf(property); + if (this.componentInstanceServiceNg2.hasPropertyChanged(property)) { + console.log("==>" + this.constructor.name + ": propertyValueChanged " + property); + if (propChangedIdx === -1) { + this.connectWizardService.changedCapabilityProperties.push(property); + } + } + else { + if (propChangedIdx !== -1) { + console.log("==>" + this.constructor.name + ": propertyValueChanged (reset to original) " + property); + this.connectWizardService.changedCapabilityProperties.splice(propChangedIdx, 1); + } + } + } + }; + + preventNext = ():boolean => { + return false; + } + + preventBack = ():boolean => { + return this.savingProperty; + } +} diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html new file mode 100644 index 0000000000..67bb12e6fc --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.html @@ -0,0 +1,9 @@ + + \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts new file mode 100644 index 0000000000..9c7bf4dfe6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/connection-wizard/to-node-step/to-node-step.component.ts @@ -0,0 +1,69 @@ +import {Component, forwardRef, Inject} from '@angular/core'; +import {IStepComponent} from "app/models" +import {Dictionary} from "lodash"; +import {ConnectionWizardService} from "../connection-wizard.service"; +import {Match} from "../../../../models/graph/match-relation"; +import {Requirement} from "../../../../models/requirement"; +import {Capability} from "../../../../models/capability"; +import {PropertyModel} from "../../../../models/properties"; + +@Component({ + selector: 'to-node-step', + templateUrl: './to-node-step.component.html' +}) + +export class ToNodeStepComponent implements IStepComponent{ + + displayRequirementsOrCapabilities:string; //get 'Requirement' or 'Capability' + optionalRequirementsMap: Dictionary = {}; + optionalCapabilitiesMap: Dictionary ={}; + + constructor(@Inject(forwardRef(() => ConnectionWizardService)) public connectWizardService: ConnectionWizardService) { + } + + ngOnInit(){ + if(this.connectWizardService.selectedMatch.isFromTo){ + this.displayRequirementsOrCapabilities = 'Capability'; + this.optionalRequirementsMap = {}; + this.optionalCapabilitiesMap = this.connectWizardService.getOptionalCapabilitiesByInstanceUniqueId(true, this.connectWizardService.selectedMatch.requirement); + }else{ + this.displayRequirementsOrCapabilities = 'Requirement'; + this.optionalRequirementsMap = this.connectWizardService.getOptionalRequirementsByInstanceUniqueId(false, this.connectWizardService.selectedMatch.capability); + this.optionalCapabilitiesMap = {} + } + + + } + + preventNext = ():boolean => { + return !this.connectWizardService.selectedMatch.capability || !this.connectWizardService.selectedMatch.requirement; + } + + preventBack = ():boolean => { + return false; + } + + onCapabilityPropertiesUpdate(capabilityProperties:Array) { + this.connectWizardService.selectedMatch.capabilityProperties = capabilityProperties; + } + + private updateSelectedReqOrCap = (selected:Requirement|Capability):void => { + if (!selected) { + if (this.connectWizardService.selectedMatch.isFromTo) { + this.connectWizardService.selectedMatch.capability = undefined; + this.connectWizardService.selectedMatch.toNode = undefined; + } else { + this.connectWizardService.selectedMatch.requirement = undefined; + this.connectWizardService.selectedMatch.fromNode = undefined; + } + } else if (selected instanceof Requirement) { + this.connectWizardService.selectedMatch.requirement = selected; + this.connectWizardService.selectedMatch.fromNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId; + } else { + this.connectWizardService.selectedMatch.capability = selected; + this.connectWizardService.selectedMatch.toNode = this.connectWizardService.connectRelationModel.toNode.componentInstance.uniqueId; + } + this.connectWizardService.selectedMatch.relationship = undefined; + } + +} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts index 1c6f51314d..203c75dd11 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.module.ts @@ -17,70 +17,43 @@ * limitations under the License. * ============LICENSE_END========================================================= */ - import { NgModule } from "@angular/core"; -import { PropertiesAssignmentComponent } from "./properties-assignment.page.component"; -import { HierarchyNavigationComponent } from "./../../components/hierarchy-navigtion/hierarchy-navigation.component"; -import { BrowserModule } from "@angular/platform-browser"; -import { FormsModule } from "@angular/forms"; -import { HttpModule } from "@angular/http"; -import { TabModule } from '../../shared/tabs/tabs.module'; -import { CheckboxModule} from '../../shared/checkbox/checkbox.module'; -import { PropertiesTableComponent } from '../../components/properties-table/properties-table.component'; -import { InputsTableComponent } from '../../components/inputs-table/inputs-table.component'; -import { ContentAfterLastDotPipe } from "../../pipes/contentAfterLastDot.pipe"; -import { SearchFilterPipe } from "../../pipes/searchFilter.pipe"; -import { FilterChildPropertiesPipe } from "../../pipes/filterChildProperties.pipe"; -import { DataTypeService } from './../../services/data-type.service'; -import { PropertiesService } from './../../services/properties.service'; -import { HierarchyNavService } from './../../services/hierarchy-nav.service'; -import { PropertiesUtils } from './properties.utils'; -import { DynamicElementModule } from 'app/ng2/components/dynamic-element/dynamic-element.module'; -import { DynamicPropertyComponent } from './../../components/properties-table/dynamic-property/dynamic-property.component'; -import { PopoverModule } from "../../components/popover/popover.module"; -import { ModalModule } from "../../components/modal/modal.module"; -import { FilterPropertiesAssignmentComponent } from "./../../components/filter-properties-assignment/filter-properties-assignment.component"; -import { GroupByPipe } from 'app/ng2/pipes/groupBy.pipe'; -import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; -import {TooltipModule} from "../../components/tooltip/tooltip.module"; -import { ComponentModeService } from "app/ng2/services/component-mode.service" -import {LoaderComponent} from "app/ng2/components/loader/loader.component" +import {HierarchyNavigationComponent} from "../../components/logic/hierarchy-navigtion/hierarchy-navigation.component"; +import {HttpModule} from "@angular/http"; +import {FormsModule} from "@angular/forms"; +import {PropertyTableModule} from "../../components/logic/properties-table/property-table.module"; +import {UiElementsModule} from "../../components/ui/ui-elements.module"; +import {GlobalPipesModule} from "../../pipes/global-pipes.module"; +import {BrowserModule} from "@angular/platform-browser"; +import {FilterPropertiesAssignmentComponent} from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component"; +import {InputsTableComponent} from "../../components/logic/inputs-table/inputs-table.component"; +import {PropertiesService} from "../../services/properties.service"; +import {DataTypeService} from "../../services/data-type.service"; +import {PropertiesAssignmentComponent} from "./properties-assignment.page.component"; +import {HierarchyNavService} from "./services/hierarchy-nav.service"; +import {PropertiesUtils} from "./services/properties.utils"; +import {ComponentModeService} from "../../services/component-services/component-mode.service"; @NgModule({ declarations: [ PropertiesAssignmentComponent, - PropertiesTableComponent, InputsTableComponent, - ContentAfterLastDotPipe, - GroupByPipe, - KeysPipe, - SearchFilterPipe, - FilterChildPropertiesPipe, HierarchyNavigationComponent, - DynamicPropertyComponent, - // PopoverContentComponent, - // PopoverComponent, - FilterPropertiesAssignmentComponent, - LoaderComponent + FilterPropertiesAssignmentComponent ], imports: [ BrowserModule, FormsModule, HttpModule, - TabModule, - CheckboxModule, - DynamicElementModule, - PopoverModule, - TooltipModule, - ModalModule - ], + GlobalPipesModule, + PropertyTableModule, + UiElementsModule], + entryComponents: [PropertiesAssignmentComponent], exports: [ PropertiesAssignmentComponent - // PopoverContentComponent, - // PopoverComponent ], - providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, ContentAfterLastDotPipe, GroupByPipe, KeysPipe, ComponentModeService] + providers: [PropertiesService, HierarchyNavService, PropertiesUtils, DataTypeService, ComponentModeService] }) export class PropertiesAssignmentModule { diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html index be7e03dccd..beea3fe73f 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html @@ -11,6 +11,7 @@ [propertyNameSearchText]="searchPropertyName" [readonly]="isReadonly" [isLoading]="loadingProperties" + [hasDeclareOption]="true" (valueChanged)="propertyValueChanged($event)" (propertySelected)="propertySelected($event)" (selectPropertyRow)="selectPropertyRow($event)" @@ -31,12 +32,12 @@
- Clear All - - + Clear All + +
- +
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts index 82754f13f0..9603648bd8 100644 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts @@ -20,21 +20,22 @@ import {Component, ViewChild, ElementRef, Renderer, Inject} from "@angular/core"; import { PropertiesService } from "../../services/properties.service"; -import { HierarchyNavService } from "../../services/hierarchy-nav.service"; -import { PropertiesUtils } from './properties.utils'; import { PropertyFEModel, InstanceFePropertiesMap, InstanceBePropertiesMap, InstancePropertiesAPIMap, Component as ComponentData, FilterPropertiesAssignmentData } from "app/models"; -import { PROPERTY_TYPES, ResourceType } from "app/utils"; +import { ResourceType } from "app/utils"; import property = require("lodash/property"); import {ComponentServiceNg2} from "../../services/component-services/component.service"; import {ComponentInstanceServiceNg2} from "../../services/component-instance-services/component-instance.service" -import { InputBEModel, InputFEModel, ComponentInstance, PropertyBEModel, DerivedPropertyType, DerivedFEProperty, ResourceInstance, SimpleFlatProperty } from "app/models"; -import {HierarchyDisplayOptions} from "../../components/hierarchy-navigtion/hierarchy-display-options" -import {PropertyRowSelectedEvent} from "./../../components/properties-table/properties-table.component"; +import { InputBEModel, InputFEModel, ComponentInstance, PropertyBEModel, DerivedFEProperty, ResourceInstance, SimpleFlatProperty } from "app/models"; import { KeysPipe } from 'app/ng2/pipes/keys.pipe'; -import {FilterPropertiesAssignmentComponent} from "../../components/filter-properties-assignment/filter-properties-assignment.component"; -import { ComponentModeService } from "app/ng2/services/component-mode.service" import {WorkspaceMode, EVENTS} from "../../../utils/constants"; import {EventListenerService} from "app/services/event-listener-service" +import {HierarchyDisplayOptions} from "../../components/logic/hierarchy-navigtion/hierarchy-display-options"; +import {FilterPropertiesAssignmentComponent} from "../../components/logic/filter-properties-assignment/filter-properties-assignment.component"; +import {PropertyRowSelectedEvent} from "../../components/logic/properties-table/properties-table.component"; +import {HierarchyNavService} from "./services/hierarchy-nav.service"; +import {PropertiesUtils} from "./services/properties.utils"; +import {ComponentModeService} from "../../services/component-services/component-mode.service"; + @Component({ templateUrl: './properties-assignment.page.component.html', styleUrls: ['./properties-assignment.page.component.less'] diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts deleted file mode 100644 index d8d991d218..0000000000 --- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties.utils.ts +++ /dev/null @@ -1,181 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Injectable } from '@angular/core'; -import { DataTypeModel, PropertyFEModel, PropertyBEModel, InstanceBePropertiesMap, InstanceFePropertiesMap, SchemaProperty, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models"; -import { DataTypeService } from "app/ng2/services/data-type.service"; -import { PropertiesService } from "app/ng2/services/properties.service"; -import { PROPERTY_TYPES } from "app/utils"; -import { UUID } from "angular2-uuid"; - -@Injectable() -export class PropertiesUtils { - - constructor(private dataTypeService:DataTypeService, private propertiesService: PropertiesService) {} - - /** - * Entry point when getting properties from server - * For each instance, loop through each property, and: - * 1. Create flattened children - * 2. Check against inputs to see if any props are declared and disable them - * 3. Initialize valueObj (which also creates any new list/map flattened children as needed) - * Returns InstanceFePropertiesMap - */ - public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, isVF:boolean, inputs?:Array): InstanceFePropertiesMap => { - let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap(); - angular.forEach(instancePropertiesMap, (properties:Array, instanceId:string) => { - let propertyFeArray: Array = []; - _.forEach(properties, (property: PropertyBEModel) => { - - if (this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list - - let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE - - if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map. - newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name); - } - if (newFEProp.getInputValues && newFEProp.getInputValues.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children - newFEProp.getInputValues.forEach(propInputDetail => { - let inputPath = propInputDetail.inputPath; - if (!inputPath) { //TODO: this is a workaround until Marina adds inputPath - let input = inputs.find(input => input.uniqueId == propInputDetail.inputId); - if (!input) { console.log("CANNOT FIND INPUT FOR " + propInputDetail.inputId); return; } - else inputPath = input.inputPath; - } - if (inputPath == newFEProp.name) inputPath = undefined; // if not complex we need to remove the inputPath from FEModel so we not look for a child - newFEProp.setAsDeclared(inputPath); //if a path is sent, its a child prop. this param is optional - this.propertiesService.disableRelatedProperties(newFEProp, inputPath); - }); - } - this.initValueObjectRef(newFEProp); //initialize valueObj. - propertyFeArray.push(newFEProp); - newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children - this.dataTypeService.checkForCustomBehavior(newFEProp); - } - }); - instanceFePropertiesMap[instanceId] = propertyFeArray; - - }); - return instanceFePropertiesMap; - } - - public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array => { - let newProps: Array = []; - let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj); - newProps.push(parentProp); - - if (!property.schema.property.isSimpleType) { - let additionalChildren:Array = this.createFlattenedChildren(property.schema.property.type, parentProp.propertiesName); - this.assignFlattenedChildrenValues(parentProp.valueObj, additionalChildren, parentProp.propertiesName); - additionalChildren.forEach(prop => prop.canBeDeclared = false); - newProps.push(...additionalChildren); - } - return newProps; - } - - /** - * Creates derivedFEProperties of a specified type and returns them. - */ - private createFlattenedChildren = (type: string, parentName: string):Array => { - let tempProps: Array = []; - let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type); - this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName); - return tempProps; - } - - /* Sets the valueObj of parent property and its children. - * Note: This logic is different than assignflattenedchildrenvalues - here we merge values, there we pick either the parents value, props value, or default value - without merging. - */ - public initValueObjectRef = (property: PropertyFEModel): void => { - if (property.derivedDataType == DerivedPropertyType.SIMPLE || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component - property.valueObj = property.value || property.defaultValue; - - if (property.isDeclared && typeof property.valueObj == 'object') property.valueObj = JSON.stringify(property.valueObj); - } else { - if (property.derivedDataType == DerivedPropertyType.LIST) { - property.valueObj = _.merge([], JSON.parse(property.defaultValue || '[]'), JSON.parse(property.value || '[]')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. - } else { - property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. - } - if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) && Object.keys(property.valueObj).length) { - Object.keys(property.valueObj).forEach((key) => { - property.flattenedChildren.push(...this.createListOrMapChildren(property, key, property.valueObj[key])) - }); - } else { - this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name); - } - } - } - - /* - * Loops through flattened properties array and to assign values - * Then, convert any neccessary strings to objects, and vis-versa - * For list or map property, creates new children props if valueObj has values - */ - public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array, parentName: string) => { - if (!derivedPropArray || !parentName) return; - let propsToPushMap: Map> = new Map>(); - derivedPropArray.forEach((prop, index) => { - - let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name - prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue - - if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared - prop.valueObj = JSON.stringify(prop.valueObj); - } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING - && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types - prop.valueObj = JSON.parse(prop.valueObj); - } else { //parse strings that should be objects - if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') { - prop.valueObj = JSON.parse(prop.valueObj || '{}'); - } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') { - prop.valueObj = JSON.parse(prop.valueObj || '[]'); - } else if (prop.derivedDataType == DerivedPropertyType.MAP && typeof prop.valueObj != 'object' && (!prop.isChildOfListOrMap || !prop.schema.property.isSimpleType)) { //dont parse values for children of map of simple - prop.valueObj = JSON.parse(prop.valueObj || '{}'); - } - if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj == 'object' && Object.keys(prop.valueObj).length) { - let newProps: Array = []; - Object.keys(prop.valueObj).forEach((key) => { - newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array - }); - propsToPushMap[index + 1] = newProps; - } - } - }); - - //add props after we're done looping (otherwise our loop gets messed up). Push in reverse order, so we dont mess up indexes. - Object.keys(propsToPushMap).reverse().forEach((indexToInsert) => { - derivedPropArray.splice(+indexToInsert, 0, ...propsToPushMap[indexToInsert]); //slacker parsing - }); - } - - public resetPropertyValue = (property: PropertyFEModel, newValue: string, nestedPath?: string): void => { - property.value = newValue; - if (nestedPath) { - let newProp = property.flattenedChildren.find(prop => prop.propertiesName == nestedPath); - newProp && this.assignFlattenedChildrenValues(JSON.parse(newValue), [newProp], property.name); - } else { - this.initValueObjectRef(property); - } - } - - - -} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts new file mode 100644 index 0000000000..016b04788e --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/hierarchy-nav.service.ts @@ -0,0 +1,83 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable } from '@angular/core'; +import { SimpleFlatProperty, PropertyFEModel, DerivedFEProperty } from 'app/models'; + + +@Injectable() +export class HierarchyNavService { + /** + * Build hirarchy structure for the tree when user selects on table row. + * First create Array and insert also the parent (PropertyFEModel) to this array. + * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId. + * Now we build hirarchy from this Array (that includes childrens) and return it for the tree + * + * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty + * @returns Array - containing childrens Array, augmantin childrens to SimpleFlatProperty. + */ + public getSimplePropertiesTree(property: PropertyFEModel, instanceName: string): Array { + // Build Array of SimpleFlatProperty before unflatten function + let flattenProperties: Array = []; + flattenProperties.push(this.createSimpleFlatProperty(property, instanceName)); // Push the root property + _.each(property.flattenedChildren, (child: DerivedFEProperty): void => { + if (child.isChildOfListOrMap && child.schema.property.isSimpleType) return; //do not display non-complex children of list or map + flattenProperties.push(this.createSimpleFlatProperty(child, instanceName)); + }); + + let tree = this.unflatten(flattenProperties, '', []); + return tree[0].childrens; // Return the childrens without the root. + } + + public createSimpleFlatProperty = (property: PropertyFEModel | DerivedFEProperty, instanceName:string): SimpleFlatProperty => { + if (property instanceof PropertyFEModel) { + return new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName); + } else { + let propName: string = (property.isChildOfListOrMap) ? property.mapKey : property.name; + return new SimpleFlatProperty(property.uniqueId, property.propertiesName, propName, property.parentName, instanceName); + } + + } + + /** + * Unflatten Array and build hirarchy. + * The result will be Array that augmantin with childrens for each SimpleFlatProperty. + */ + private unflatten(array: Array, parent: any, tree?: any): any { + tree = typeof tree !== 'undefined' ? tree : []; + parent = typeof parent !== 'undefined' && parent !== '' ? parent : { path: '' }; + + var childrens = _.filter(array, (child: SimpleFlatProperty): boolean => { + return child.parentName == parent.path; + }); + + if (!_.isEmpty(childrens)) { + if (parent.path == '') { + tree = childrens; + } else { + parent['childrens'] = childrens; + } + _.each(childrens, (child): void => { + this.unflatten(array, child); + }); + } + return tree; + } +} diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts new file mode 100644 index 0000000000..8f46c6f603 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/properties-assignment/services/properties.utils.ts @@ -0,0 +1,188 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable } from '@angular/core'; +import { DataTypeModel, PropertyFEModel, PropertyBEModel, InstanceBePropertiesMap, InstanceFePropertiesMap, DerivedFEProperty, DerivedPropertyType, InputFEModel} from "app/models"; +import { DataTypeService } from "app/ng2/services/data-type.service"; +import { PropertiesService } from "app/ng2/services/properties.service"; +import { PROPERTY_TYPES, PROPERTY_DATA } from "app/utils"; + +@Injectable() +export class PropertiesUtils { + + constructor(private dataTypeService:DataTypeService, private propertiesService: PropertiesService) {} + + /** + * Entry point when getting properties from server + * For each instance, loop through each property, and: + * 1. Create flattened children + * 2. Check against inputs to see if any props are declared and disable them + * 3. Initialize valueObj (which also creates any new list/map flattened children as needed) + * Returns InstanceFePropertiesMap + */ + public convertPropertiesMapToFEAndCreateChildren = (instancePropertiesMap:InstanceBePropertiesMap, isVF:boolean, inputs?:Array): InstanceFePropertiesMap => { + let instanceFePropertiesMap:InstanceFePropertiesMap = new InstanceFePropertiesMap(); + angular.forEach(instancePropertiesMap, (properties:Array, instanceId:string) => { + let propertyFeArray: Array = []; + _.forEach(properties, (property: PropertyBEModel) => { + + if (this.dataTypeService.getDataTypeByTypeName(property.type)) { // if type not exist in data types remove property from list + + let newFEProp: PropertyFEModel = new PropertyFEModel(property); //Convert property to FE + + if (newFEProp.derivedDataType == DerivedPropertyType.COMPLEX) { //Create children if prop is not simple, list, or map. + newFEProp.flattenedChildren = this.createFlattenedChildren(newFEProp.type, newFEProp.name); + } + if (newFEProp.getInputValues && newFEProp.getInputValues.length) { //if this prop (or any children) are declared, set isDeclared and disable checkbox on parents/children + newFEProp.getInputValues.forEach(propInputDetail => { + let inputPath = propInputDetail.inputPath; + if (!inputPath) { //TODO: this is a workaround until Marina adds inputPath + let input = inputs.find(input => input.uniqueId == propInputDetail.inputId); + if (!input) { console.log("CANNOT FIND INPUT FOR " + propInputDetail.inputId); return; } + else inputPath = input.inputPath; + } + if (inputPath == newFEProp.name) inputPath = undefined; // if not complex we need to remove the inputPath from FEModel so we not look for a child + newFEProp.setAsDeclared(inputPath); //if a path is sent, its a child prop. this param is optional + this.propertiesService.disableRelatedProperties(newFEProp, inputPath); + }); + } + this.initValueObjectRef(newFEProp); //initialize valueObj. + propertyFeArray.push(newFEProp); + newFEProp.updateExpandedChildPropertyId(newFEProp.name); //display only the first level of children + this.dataTypeService.checkForCustomBehavior(newFEProp); + } + }); + instanceFePropertiesMap[instanceId] = propertyFeArray; + + }); + return instanceFePropertiesMap; + } + + public createListOrMapChildren = (property:PropertyFEModel | DerivedFEProperty, key: string, valueObj: any): Array => { + let newProps: Array = []; + let parentProp = new DerivedFEProperty(property, property.propertiesName, true, key, valueObj); + newProps.push(parentProp); + + if (!property.schema.property.isSimpleType) { + let additionalChildren:Array = this.createFlattenedChildren(property.schema.property.type, parentProp.propertiesName); + this.assignFlattenedChildrenValues(parentProp.valueObj, additionalChildren, parentProp.propertiesName); + additionalChildren.forEach(prop => prop.canBeDeclared = false); + newProps.push(...additionalChildren); + } + return newProps; + } + + /** + * Creates derivedFEProperties of a specified type and returns them. + */ + private createFlattenedChildren = (type: string, parentName: string):Array => { + let tempProps: Array = []; + let dataTypeObj: DataTypeModel = this.dataTypeService.getDataTypeByTypeName(type); + this.dataTypeService.getDerivedDataTypeProperties(dataTypeObj, tempProps, parentName); + return tempProps; + } + + /* Sets the valueObj of parent property and its children. + * Note: This logic is different than assignflattenedchildrenvalues - here we merge values, there we pick either the parents value, props value, or default value - without merging. + */ + public initValueObjectRef = (property: PropertyFEModel): void => { + if (property.derivedDataType == DerivedPropertyType.SIMPLE || property.isDeclared) { //if property is declared, it gets a simple input instead. List and map values and pseudo-children will be handled in property component + property.valueObj = property.value || property.defaultValue; + if (property.isDeclared) { + if(typeof property.valueObj == 'object'){ + property.valueObj = JSON.stringify(property.valueObj); + } + }else if(property.valueObj && + property.type !== PROPERTY_TYPES.STRING && + property.type !== PROPERTY_TYPES.JSON && + PROPERTY_DATA.SCALAR_TYPES.indexOf(property.type) == -1){ + property.valueObj = JSON.parse(property.valueObj);//The valueObj contains the real value ans not the value as string + } + } else { + if (property.derivedDataType == DerivedPropertyType.LIST) { + property.valueObj = _.merge([], JSON.parse(property.defaultValue || '[]'), JSON.parse(property.value || '[]')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. + } else { + property.valueObj = _.merge({}, JSON.parse(property.defaultValue || '{}'), JSON.parse(property.value || '{}')); //value object should be merged value and default value. Value takes higher precendence. Set valueObj to empty obj if undefined. + } + if ((property.derivedDataType == DerivedPropertyType.LIST || property.derivedDataType == DerivedPropertyType.MAP) && Object.keys(property.valueObj).length) { + Object.keys(property.valueObj).forEach((key) => { + property.flattenedChildren.push(...this.createListOrMapChildren(property, key, property.valueObj[key])) + }); + } else { + this.assignFlattenedChildrenValues(property.valueObj, property.flattenedChildren, property.name); + } + } + } + + /* + * Loops through flattened properties array and to assign values + * Then, convert any neccessary strings to objects, and vis-versa + * For list or map property, creates new children props if valueObj has values + */ + public assignFlattenedChildrenValues = (parentValueJSON: any, derivedPropArray: Array, parentName: string) => { + if (!derivedPropArray || !parentName) return; + let propsToPushMap: Map> = new Map>(); + derivedPropArray.forEach((prop, index) => { + + let propNameInObj = prop.propertiesName.substring(prop.propertiesName.indexOf(parentName) + parentName.length + 1).split('#').join('.'); //extract everything after parent name + prop.valueObj = _.get(parentValueJSON, propNameInObj, prop.value || prop.defaultValue); //assign value -first value of parent if exists. If not, prop.value if not, prop.defaultvalue + + if ( prop.isDeclared && typeof prop.valueObj == 'object') { //Stringify objects of items that are declared + prop.valueObj = JSON.stringify(prop.valueObj); + } else if(typeof prop.valueObj == PROPERTY_TYPES.STRING + && (prop.type == PROPERTY_TYPES.INTEGER || prop.type == PROPERTY_TYPES.FLOAT || prop.type == PROPERTY_TYPES.BOOLEAN)){ //parse ints and non-string simple types + prop.valueObj = JSON.parse(prop.valueObj); + } else { //parse strings that should be objects + if (prop.derivedDataType == DerivedPropertyType.COMPLEX && typeof prop.valueObj != 'object') { + prop.valueObj = JSON.parse(prop.valueObj || '{}'); + } else if (prop.derivedDataType == DerivedPropertyType.LIST && typeof prop.valueObj != 'object') { + prop.valueObj = JSON.parse(prop.valueObj || '[]'); + } else if (prop.derivedDataType == DerivedPropertyType.MAP && typeof prop.valueObj != 'object' && (!prop.isChildOfListOrMap || !prop.schema.property.isSimpleType)) { //dont parse values for children of map of simple + prop.valueObj = JSON.parse(prop.valueObj || '{}'); + } + if ((prop.derivedDataType == DerivedPropertyType.LIST || prop.derivedDataType == DerivedPropertyType.MAP) && typeof prop.valueObj == 'object' && Object.keys(prop.valueObj).length) { + let newProps: Array = []; + Object.keys(prop.valueObj).forEach((key) => { + newProps.push(...this.createListOrMapChildren(prop, key, prop.valueObj[key]));//create new children, assign their values, and then add to array + }); + propsToPushMap[index + 1] = newProps; + } + } + }); + + //add props after we're done looping (otherwise our loop gets messed up). Push in reverse order, so we dont mess up indexes. + Object.keys(propsToPushMap).reverse().forEach((indexToInsert) => { + derivedPropArray.splice(+indexToInsert, 0, ...propsToPushMap[indexToInsert]); //slacker parsing + }); + } + + public resetPropertyValue = (property: PropertyFEModel, newValue: string, nestedPath?: string): void => { + property.value = newValue; + if (nestedPath) { + let newProp = property.flattenedChildren.find(prop => prop.propertiesName == nestedPath); + newProp && this.assignFlattenedChildrenValues(JSON.parse(newValue), [newProp], property.name); + } else { + this.initValueObjectRef(property); + } + } + + + +} diff --git a/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts b/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts deleted file mode 100644 index 4520469594..0000000000 --- a/catalog-ui/src/app/ng2/pipes/filterChildProperties.pipe.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Pipe, PipeTransform } from '@angular/core'; -import { DerivedFEProperty } from 'app/models'; - -@Pipe({ - name: 'filterChildProperties', -}) -export class FilterChildPropertiesPipe implements PipeTransform { - public transform(childProperties: Array, parentId: string) { - if (!parentId || !childProperties) return childProperties; - - let validParents: Array = [parentId]; - while (parentId.lastIndexOf('#') > 0) { - parentId = parentId.substring(0, parentId.lastIndexOf('#')); - validParents.push(parentId); - } - return childProperties.filter(derivedProp => validParents.indexOf(derivedProp.parentName) > -1); - } -} diff --git a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts new file mode 100644 index 0000000000..1d81a1a4bf --- /dev/null +++ b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts @@ -0,0 +1,24 @@ +import {ContentAfterLastDotPipe} from "./contentAfterLastDot.pipe"; +import {SearchFilterPipe} from "./searchFilter.pipe"; +import {KeysPipe} from "./keys.pipe"; +import {GroupByPipe} from "./groupBy.pipe"; +import {NgModule} from "@angular/core"; + +@NgModule({ + declarations: [ + ContentAfterLastDotPipe, + GroupByPipe, + KeysPipe, + SearchFilterPipe + + ], + + exports: [ + ContentAfterLastDotPipe, + GroupByPipe, + KeysPipe, + SearchFilterPipe + ] +}) + +export class GlobalPipesModule {} diff --git a/catalog-ui/src/app/ng2/services/authentication.service.ts b/catalog-ui/src/app/ng2/services/authentication.service.ts index 876385c832..1c6502dd0d 100644 --- a/catalog-ui/src/app/ng2/services/authentication.service.ts +++ b/catalog-ui/src/app/ng2/services/authentication.service.ts @@ -18,26 +18,23 @@ * ============LICENSE_END========================================================= */ -import { Injectable } from '@angular/core'; -import { sdc2Config } from './../../../main'; +import {Injectable, Inject} from '@angular/core'; import {IAppConfigurtaion, ICookie} from "../../models/app-config"; import {Response, Headers, RequestOptions, Http} from '@angular/http'; import {Cookie2Service} from "./cookie.service"; import { Observable } from 'rxjs/Observable'; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class AuthenticationService { - private cookieService:Cookie2Service; - private http:Http; - - constructor(cookieService:Cookie2Service, http: Http) { + constructor(private cookieService:Cookie2Service, private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { this.cookieService = cookieService; this.http = http; } private getAuthHeaders():any { - let cookie:ICookie = sdc2Config.cookie; + let cookie:ICookie = this.sdcConfig.cookie; let authHeaders:any = {}; authHeaders[cookie.userFirstName] = this.cookieService.getFirstName(); authHeaders[cookie.userLastName] = this.cookieService.getLastName(); @@ -51,7 +48,7 @@ export class AuthenticationService { headers: new Headers(this.getAuthHeaders()) }); - let authUrl = sdc2Config.api.root + sdc2Config.api.GET_user_authorize; + let authUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize; return this.http .get(authUrl, options) .map((res: Response) => res.json()); diff --git a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts index 27de59de82..b852539edd 100644 --- a/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts +++ b/catalog-ui/src/app/ng2/services/component-instance-services/component-instance.service.ts @@ -18,22 +18,23 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {Response, RequestOptions, Headers} from '@angular/http'; import { Observable } from 'rxjs/Observable'; -import {sdc2Config} from "../../../../main"; -import {PropertyBEModel} from "app/models"; +import {PropertyFEModel, PropertyBEModel} from "app/models"; import {CommonUtils} from "app/utils"; import {Component, ComponentInstance, InputModel} from "app/models"; import { HttpService } from '../http.service'; +import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config"; +import {isEqual} from "lodash"; @Injectable() export class ComponentInstanceServiceNg2 { protected baseUrl; - constructor(private http: HttpService) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } getComponentInstanceProperties(component: Component, componentInstanceId: string): Observable> { @@ -59,6 +60,24 @@ export class ComponentInstanceServiceNg2 { }) } + getInstanceCapabilityProperties(component: Component, componentInstanceId: string, capabilityType: string, capabilityName: string): Observable> { + + return this.http.get(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' + capabilityType + + '/capabilityName/' + capabilityName + '/properties') + .map((res: Response) => { + return CommonUtils.initBeProperties(res.json()); + }) + } + + updateInstanceCapabilityProperties(component: Component, componentInstanceId: string, capabilityType: string, capabilityName: string, properties: PropertyBEModel[]): Observable { + + return this.http.put(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/componentInstances/' + componentInstanceId + '/capability/' + capabilityType + + '/capabilityName/' + capabilityName +'/properties', properties) + .map((res: Response) => { + return res.json().map((resProperty) => new PropertyBEModel(resProperty)); + }) + } + updateInstanceInput(component: Component, componentInstanceId: string, input: PropertyBEModel): Observable { return this.http.post(this.baseUrl + component.getTypeUrl() + component.uniqueId + '/resourceInstance/' + componentInstanceId + '/input', input) @@ -67,5 +86,9 @@ export class ComponentInstanceServiceNg2 { }) } - + hasPropertyChanged(property: PropertyFEModel) { + let oldValue: any = property.value; + const newValue = property.getJSONValue(); + return ((oldValue || newValue) && !isEqual(oldValue, newValue)); + } } diff --git a/catalog-ui/src/app/ng2/services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-mode.service.ts deleted file mode 100644 index 2e60f6ac57..0000000000 --- a/catalog-ui/src/app/ng2/services/component-mode.service.ts +++ /dev/null @@ -1,49 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -/** - * Created by rc2122 on 5/23/2017. - */ -import { Injectable } from '@angular/core'; -import {WorkspaceMode, ComponentState, Role} from "../../utils/constants"; -import { Component as ComponentData } from "app/models"; -import { CacheService } from "app/services/cache-service" - -@Injectable() - -export class ComponentModeService { - - constructor(private cacheService:CacheService) { - } - - public getComponentMode = (component:ComponentData):WorkspaceMode => {//return if is edit or view for resource or service - let mode = WorkspaceMode.VIEW; - - let user = this.cacheService.get("user"); - if (component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT && - component.lastUpdaterUserId === user.userId) { - if ((component.isService() || component.isResource()) && user.role == Role.DESIGNER) { - mode = WorkspaceMode.EDIT; - } - } - return mode; - } -} - diff --git a/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts new file mode 100644 index 0000000000..b0cc1b8f1a --- /dev/null +++ b/catalog-ui/src/app/ng2/services/component-services/component-mode.service.ts @@ -0,0 +1,49 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +/** + * Created by rc2122 on 5/23/2017. + */ +import { Injectable } from '@angular/core'; +import {WorkspaceMode, ComponentState, Role} from "../../../utils/constants"; +import { Component as ComponentData } from "app/models"; +import { CacheService } from "app/services/cache-service" + +@Injectable() + +export class ComponentModeService { + + constructor(private cacheService:CacheService) { + } + + public getComponentMode = (component:ComponentData):WorkspaceMode => {//return if is edit or view for resource or service + let mode = WorkspaceMode.VIEW; + + let user = this.cacheService.get("user"); + if (component.lifecycleState === ComponentState.NOT_CERTIFIED_CHECKOUT && + component.lastUpdaterUserId === user.userId) { + if ((component.isService() || component.isResource()) && user.role == Role.DESIGNER) { + mode = WorkspaceMode.EDIT; + } + } + return mode; + } +} + diff --git a/catalog-ui/src/app/ng2/services/component-services/component.service.ts b/catalog-ui/src/app/ng2/services/component-services/component.service.ts index c648711d5d..ba1cb15561 100644 --- a/catalog-ui/src/app/ng2/services/component-services/component.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/component.service.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; @@ -27,11 +27,11 @@ import { Component, PropertyBEModel, InstancePropertiesAPIMap, FilterPropertiesA import {downgradeInjectable} from '@angular/upgrade/static'; import {COMPONENT_FIELDS} from "app/utils"; import {ComponentGenericResponse} from "../responses/component-generic-response"; -import {sdc2Config} from "../../../../main"; import {InstanceBePropertiesMap} from "../../../models/properties-inputs/property-fe-map"; import {API_QUERY_PARAMS} from "app/utils"; import { ComponentType, ServerTypeUrl } from "../../../utils/constants"; import { HttpService } from '../http.service'; +import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config"; declare var angular:angular.IAngularStatic; @@ -40,8 +40,8 @@ export class ComponentServiceNg2 { protected baseUrl; - constructor(private http:HttpService) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http:HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } private getComponentDataByFieldsName(componentType:string, componentId: string, fields:Array):Observable { @@ -151,17 +151,6 @@ export class ComponentServiceNg2 { .map((res: Response) => { return res.json(); }); - - // return {'ExtVL 0':[{definition: false,name:"network_assignments",password:false,required:true,type:"org.openecomp.datatypes.network.NetworkAssignments",uniqueId:"623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_assignments"}, - // {definition: false,name: "exVL_naming",password: false,required: true,type: "org.openecomp.datatypes.Naming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.exVL_naming"}, - // {definition: false,name: "network_flows",password: false,required: false,type: "org.openecomp.datatypes.network.NetworkFlows",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_flows"}, - // {definition: false,name: "provider_network",password: false,required: true,type: "org.openecomp.datatypes.network.ProviderNetwork",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.provider_network"}, - // {definition: false,name: "network_homing",password: false,required: true,type: "org.openecomp.datatypes.EcompHoming",uniqueId: "623cca1c-d605-4c9c-9f2b-935ec85ebcf8.network_homing"}], - // 'NetworkCP 0':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}], - // 'NetworkCP 1':[{definition: false,description: "identifies MAC address assignments to the CP",name: "mac_requirements",password: false,required: false,type: "org.openecomp.datatypes.network.MacRequirements",uniqueId: "26ec2bfd-b904-46c7-87ed-b32775120f2c.mac_requirements"}]}; - - } } -angular.module('Sdc.Services').factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code diff --git a/catalog-ui/src/app/ng2/services/component-services/service.service.ts b/catalog-ui/src/app/ng2/services/component-services/service.service.ts index ec912bbcf5..f38dbef595 100644 --- a/catalog-ui/src/app/ng2/services/component-services/service.service.ts +++ b/catalog-ui/src/app/ng2/services/component-services/service.service.ts @@ -18,15 +18,15 @@ * ============LICENSE_END========================================================= */ -import { Injectable } from '@angular/core'; +import { Injectable, Inject } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import { Response } from '@angular/http'; import {Service} from "app/models"; import { downgradeInjectable } from '@angular/upgrade/static'; -import {sdc2Config} from "../../../../main"; import { HttpService } from '../http.service'; +import {SdcConfigToken, ISdcConfig} from "../../config/sdc-config.config"; @Injectable() @@ -34,8 +34,8 @@ export class ServiceServiceNg2 { protected baseUrl = ""; - constructor(private http: HttpService) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http: HttpService, @Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.baseUrl = sdcConfig.api.root + sdcConfig.api.component_api_root; } validateConformanceLevel(service: Service): Observable { @@ -47,5 +47,3 @@ export class ServiceServiceNg2 { } } - -angular.module('Sdc.Services').factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2)); // This is in order to use the service in angular1 till we finish remove all angular1 code diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts index cac850e91c..9bb7b7a075 100644 --- a/catalog-ui/src/app/ng2/services/config.service.ts +++ b/catalog-ui/src/app/ng2/services/config.service.ts @@ -22,13 +22,11 @@ * Created by ob0695 on 4/9/2017. */ -import { Injectable } from '@angular/core'; +import { Injectable, Inject } from '@angular/core'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import {IAppConfigurtaion, ValidationConfiguration, Validations} from "app/models"; -import {sdc2Config} from './../../../main'; - -declare var __ENV__: string; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class ConfigService { @@ -36,12 +34,12 @@ export class ConfigService { private baseUrl; public configuration: IAppConfigurtaion; - constructor(private http: Http) { - this.baseUrl = sdc2Config.api.root + sdc2Config.api.component_api_root; + constructor(private http: Http, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + this.baseUrl = this.sdcConfig.api.root + this.sdcConfig.api.component_api_root; } loadValidationConfiguration(): Promise { - let url: string = sdc2Config.validationConfigPath; + let url: string = this.sdcConfig.validationConfigPath; let promise: Promise = this.http.get(url).map((res: Response) => res.json()).toPromise(); promise.then((validationData: Validations) => { ValidationConfiguration.validation = validationData; diff --git a/catalog-ui/src/app/ng2/services/cookie.service.ts b/catalog-ui/src/app/ng2/services/cookie.service.ts index e5f04f7afd..2a783fdd48 100644 --- a/catalog-ui/src/app/ng2/services/cookie.service.ts +++ b/catalog-ui/src/app/ng2/services/cookie.service.ts @@ -18,9 +18,9 @@ * ============LICENSE_END========================================================= */ -import { Injectable } from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {IAppConfigurtaion, ICookie} from "../../models/app-config"; -import {sdc2Config} from './../../../main'; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class Cookie2Service { @@ -28,8 +28,8 @@ export class Cookie2Service { private cookie:ICookie; private cookiePrefix:string; - constructor() { - this.cookie = sdc2Config.cookie; + constructor(@Inject(SdcConfigToken) sdcConfig:ISdcConfig) { + this.cookie = sdcConfig.cookie; this.cookiePrefix = ''; let junctionName:string = this.getCookieByName(this.cookie.junctionName); diff --git a/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts b/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts deleted file mode 100644 index 016b04788e..0000000000 --- a/catalog-ui/src/app/ng2/services/hierarchy-nav.service.ts +++ /dev/null @@ -1,83 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Injectable } from '@angular/core'; -import { SimpleFlatProperty, PropertyFEModel, DerivedFEProperty } from 'app/models'; - - -@Injectable() -export class HierarchyNavService { - /** - * Build hirarchy structure for the tree when user selects on table row. - * First create Array and insert also the parent (PropertyFEModel) to this array. - * The Array is flat and contains SimpleFlatProperty that has parentName and uniqueId. - * Now we build hirarchy from this Array (that includes childrens) and return it for the tree - * - * @argument property: PropertyFEModel - property contains flattenedChildren array of DerivedFEProperty - * @returns Array - containing childrens Array, augmantin childrens to SimpleFlatProperty. - */ - public getSimplePropertiesTree(property: PropertyFEModel, instanceName: string): Array { - // Build Array of SimpleFlatProperty before unflatten function - let flattenProperties: Array = []; - flattenProperties.push(this.createSimpleFlatProperty(property, instanceName)); // Push the root property - _.each(property.flattenedChildren, (child: DerivedFEProperty): void => { - if (child.isChildOfListOrMap && child.schema.property.isSimpleType) return; //do not display non-complex children of list or map - flattenProperties.push(this.createSimpleFlatProperty(child, instanceName)); - }); - - let tree = this.unflatten(flattenProperties, '', []); - return tree[0].childrens; // Return the childrens without the root. - } - - public createSimpleFlatProperty = (property: PropertyFEModel | DerivedFEProperty, instanceName:string): SimpleFlatProperty => { - if (property instanceof PropertyFEModel) { - return new SimpleFlatProperty(property.uniqueId, property.name, property.name, '', instanceName); - } else { - let propName: string = (property.isChildOfListOrMap) ? property.mapKey : property.name; - return new SimpleFlatProperty(property.uniqueId, property.propertiesName, propName, property.parentName, instanceName); - } - - } - - /** - * Unflatten Array and build hirarchy. - * The result will be Array that augmantin with childrens for each SimpleFlatProperty. - */ - private unflatten(array: Array, parent: any, tree?: any): any { - tree = typeof tree !== 'undefined' ? tree : []; - parent = typeof parent !== 'undefined' && parent !== '' ? parent : { path: '' }; - - var childrens = _.filter(array, (child: SimpleFlatProperty): boolean => { - return child.parentName == parent.path; - }); - - if (!_.isEmpty(childrens)) { - if (parent.path == '') { - tree = childrens; - } else { - parent['childrens'] = childrens; - } - _.each(childrens, (child): void => { - this.unflatten(array, child); - }); - } - return tree; - } -} diff --git a/catalog-ui/src/app/ng2/services/http.service.ts b/catalog-ui/src/app/ng2/services/http.service.ts index 21fe09023a..2785688ace 100644 --- a/catalog-ui/src/app/ng2/services/http.service.ts +++ b/catalog-ui/src/app/ng2/services/http.service.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {Injectable} from '@angular/core'; +import {Injectable, Inject} from '@angular/core'; import {Http, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response, Headers} from '@angular/http'; import {Observable} from 'rxjs/Observable'; import {UUID} from 'angular2-uuid'; @@ -27,15 +27,15 @@ import 'rxjs/add/operator/catch'; import 'rxjs/add/observable/throw'; import {Dictionary} from "../../utils/dictionary/dictionary"; import {SharingService, CookieService} from "app/services"; -import {sdc2Config} from './../../../main'; import { ModalService } from "app/ng2/services/modal.service"; import { ServerErrorResponse } from "app/models"; -import { ErrorMessageComponent } from 'app/ng2/components/modal/error-message/error-message.component'; +import {ErrorMessageComponent} from "../components/ui/modal/error-message/error-message.component"; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; @Injectable() export class HttpService extends Http { - constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService) { + constructor(backend: XHRBackend, options: RequestOptions, private sharingService: SharingService, private cookieService: CookieService, private modalService: ModalService, @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { super(backend, options); this._defaultOptions.withCredentials = true; this._defaultOptions.headers.append(cookieService.getUserIdSuffix(), cookieService.getUserId()); @@ -73,7 +73,7 @@ export class HttpService extends Http { private getUuidValue = (url: string) :string => { let map:Dictionary = this.sharingService.getUuidMap(); - if (map && url.indexOf(sdc2Config.api.root) > 0) { + if (map && url.indexOf(this.sdcConfig.api.root) > 0) { map.forEach((key:string) => { if (url.indexOf(key) !== -1) { return this.sharingService.getUuidValue(key); @@ -93,4 +93,8 @@ export class HttpService extends Http { return Observable.throw(response); }; + public static replaceUrlParams(url:string, urlParams:{[index:string]:any}):string { + return url.replace(/:(\w+)/g, (m, p1):string => urlParams[p1] || ''); + } + } diff --git a/catalog-ui/src/app/ng2/services/modal.service.ts b/catalog-ui/src/app/ng2/services/modal.service.ts index 65ff870769..22b56c7004 100644 --- a/catalog-ui/src/app/ng2/services/modal.service.ts +++ b/catalog-ui/src/app/ng2/services/modal.service.ts @@ -1,6 +1,11 @@ -import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core'; -import { ModalModel, ButtonModel } from 'app/models'; -import { ModalComponent } from 'app/ng2/components/modal/modal.component'; +import { + Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, + +} from '@angular/core'; +import { ModalModel, ButtonModel, StepModel } from 'app/models'; +import {MultiStepsWizardComponent} from "../components/ui/multi-steps-wizard/multi-steps-wizard.component"; +import {ModalComponent} from "../components/ui/modal/modal.component"; +import {WizardHeaderBaseComponent} from "app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component"; @Injectable() @@ -54,6 +59,23 @@ export class ModalService { return customModal; } + public createMultiStepsWizard = (title: string, steps:Array, callback: Function, dynamicHeaderType?: Type): ComponentRef => { + let cancelButton: ButtonModel = new ButtonModel('Cancel', 'outline blue', this.closeCurrentModal); + let modalModel: ModalModel = new ModalModel('xl', title, '', [cancelButton]); + let wizardInstance: ComponentRef = this.createDynamicComponent(MultiStepsWizardComponent); + wizardInstance.instance.input = modalModel; + wizardInstance.instance.steps = steps; + wizardInstance.instance.callback = callback; + if(dynamicHeaderType){ + let dynamicHeader = this.createDynamicComponent(dynamicHeaderType, wizardInstance.instance.dynamicHeaderContainer); + wizardInstance.instance.dynamicHeader = dynamicHeader; + wizardInstance.instance.dynamicHeader.instance.currentStepIndex = 0; + } + this.addDynamicContentToModal(wizardInstance, steps[0].component); + this.currentModal = wizardInstance; + return wizardInstance; + } + public closeCurrentModal = () => { if (!this.currentModal) return; @@ -62,7 +84,7 @@ export class ModalService { } - public addDynamicContentToModal = (modalInstance: ComponentRef, dynamicComponentType: Type, dynamicComponentInput: any) => { + public addDynamicContentToModal = (modalInstance: ComponentRef, dynamicComponentType: Type, dynamicComponentInput?: any) => { let dynamicContent = this.createDynamicComponent(dynamicComponentType, modalInstance.instance.dynamicContentContainer); dynamicContent.instance.input = dynamicComponentInput; @@ -72,14 +94,13 @@ export class ModalService { //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root. //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name)); - private createDynamicComponent(componentType: Type, viewContainerRef?:ViewContainerRef): ComponentRef { + private createDynamicComponent(componentType: Type, viewContainerRef?:ViewContainerRef): ComponentRef { viewContainerRef = viewContainerRef || this.getRootViewContainerRef(); viewContainerRef.clear(); - let factory: ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader - let componentRef = viewContainerRef.createComponent(factory); - + let factory: ComponentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader + let componentRef: ComponentRef = viewContainerRef.createComponent(factory); return componentRef; } @@ -87,4 +108,6 @@ export class ModalService { private getRootViewContainerRef(): ViewContainerRef { return this.applicationRef.components[0].instance.viewContainerRef; } -} \ No newline at end of file +} + + diff --git a/catalog-ui/src/app/ng2/services/properties.service.ts b/catalog-ui/src/app/ng2/services/properties.service.ts index 6f15de858a..86cd2f5c72 100644 --- a/catalog-ui/src/app/ng2/services/properties.service.ts +++ b/catalog-ui/src/app/ng2/services/properties.service.ts @@ -19,16 +19,12 @@ */ import { Injectable } from '@angular/core'; -import { DataTypeModel, PropertyFEModel, PropertyBEModel, SchemaProperty, PropertyDeclareAPIModel, DerivedFEProperty, DerivedFEPropertyMap, DerivedPropertyType, InputFEModel} from "app/models"; -import { DataTypeService } from "./data-type.service"; -import { PROPERTY_TYPES } from "app/utils"; -import { ContentAfterLastDotPipe } from "../pipes/contentAfterLastDot.pipe"; -import { UUID } from "angular2-uuid"; +import { PropertyFEModel, PropertyBEModel, PropertyDeclareAPIModel, DerivedFEProperty} from "app/models"; @Injectable() export class PropertiesService { - constructor(private dataTypeService: DataTypeService, private contentAfterLastDotPipe: ContentAfterLastDotPipe) { + constructor() { } public getParentPropertyFEModelFromPath = (properties: Array, path: string) => { diff --git a/catalog-ui/src/app/ng2/services/user.service.ts b/catalog-ui/src/app/ng2/services/user.service.ts new file mode 100644 index 0000000000..87e90432dc --- /dev/null +++ b/catalog-ui/src/app/ng2/services/user.service.ts @@ -0,0 +1,98 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable, Inject } from "@angular/core"; +import { Headers } from "@angular/http"; +import { Observable } from "rxjs/Observable"; +import { HttpService } from "./http.service"; +import { Cookie2Service } from "./cookie.service"; +import { IUserProperties } from "../../models/user"; + +import {ICookie} from "../../models/app-config"; +import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config"; + +@Injectable() +export class UserService { + private url:string; + private authorizeUrl:string; + + private _loggedinUser:IUserProperties; + + constructor(private httpService:HttpService, + private cookieService:Cookie2Service, + @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) { + this.url = this.sdcConfig.api.root + this.sdcConfig.api.GET_user; + this.authorizeUrl = this.sdcConfig.api.root + this.sdcConfig.api.GET_user_authorize; + } + + public authorize() :Observable { + let cookie:ICookie = this.sdcConfig.cookie; + let authorizeHeaders:Headers = new Headers(); + authorizeHeaders.set(cookie.userFirstName, this.cookieService.getFirstName()); + authorizeHeaders.set(cookie.userLastName, this.cookieService.getLastName()); + authorizeHeaders.set(cookie.userEmail, this.cookieService.getEmail()); + authorizeHeaders.set(cookie.userIdSuffix, this.cookieService.getUserId()); + + return this.httpService.get( + this.authorizeUrl, + { headers: authorizeHeaders } + ).map(resp => resp.json()); + } + + public getAllUsers() :Observable { + return this.httpService.get( + this.sdcConfig.api.root + this.sdcConfig.api.GET_all_users + ).map(resp => resp.json()); + } + + public getUser(userId:string) :Observable { + return this.httpService.get( + HttpService.replaceUrlParams(this.url, { id: userId }) + ).map(resp => resp.json()); + } + + public createUser(userData:{[index:string]: any}) :Observable { + return this.httpService.post( + this.sdcConfig.api.root + this.sdcConfig.api.POST_create_user, + userData + ).map(resp => resp.json()); + } + + public deleteUser(userId:string) :Observable { + return this.httpService.delete( + HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.DELETE_delete_user, { id: userId }) + ).map(resp => resp.json()); + } + + public editUserRole(userId:string, role:string) :Observable { + return this.httpService.post( + HttpService.replaceUrlParams(this.sdcConfig.api.root + this.sdcConfig.api.POST_edit_user_role, { id: userId }), + { role: role } + ).map(resp => resp.json()); + } + + public getLoggedinUser():IUserProperties { + return this._loggedinUser; + } + + public setLoggedinUser(loggedinUser:IUserProperties) { + this._loggedinUser = loggedinUser; + }; +} diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html deleted file mode 100644 index 872bf90329..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-
- -
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less deleted file mode 100644 index 3a28c5fb42..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.less +++ /dev/null @@ -1,67 +0,0 @@ - @import '../../../../assets/styles/tlv-sprite'; -@import '../../../../assets/styles/sprite'; - - -.checkbox-container { - display:inline-block; - position:relative; - text-align: left; - height: 20px; - - - .checkbox-icon { - display: inline-block; - } - - .checkbox-label { - font-weight: inherit; - font-size: inherit; - } - - .checkbox-label-content { - margin-left:2px; - } - - .checkbox-icon::before { - .tlv-sprite; - background-position: -10px -60px; - width: 14px; - height: 14px; - content: ''; - display: inline-block; - margin-right: 0px; - margin-top: -2px; - vertical-align: middle; - } - - input[type=checkbox].checkbox-hidden { - width:0; - height:0; - display:none; - &:checked ~ .checkbox-icon::before{ - .sprite-new; - .filled-checkbox-icon - } - &[disabled] ~ .checkbox-icon::before { - /* TODO: add disabled styles here */ - background-image: none; - background-color: #EFEFEF; - border-radius: 2px; - border: solid #CCC 1px; - } - } - - .checkbox-animation { - background-color: #009fdb; - position: absolute; - left: 2px; - top: 4px; - width:10px; - height:10px; - border-radius: 50%; - z-index: 1; - pointer-events: none; - opacity:0; - } - -} diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts deleted file mode 100644 index c8da016174..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -//import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; - -@Component({ - selector: 'checkbox', - templateUrl: './checkbox.component.html', - styleUrls: ['./checkbox.component.less'], - encapsulation: ViewEncapsulation.None - // animations: [ - // trigger('checkEffect', [ - // state('true', style({ position: 'absolute', left: '2px', top: '5px', width: '10px', height: '10px', display: 'none', opacity: '.5' })), - // state('false', style({ left: '-18px', top: '-15px', height: '50px', width: '50px', opacity: '0' })), - // transition('1 => 0', animate('150ms ease-out')), - // transition('0 => 1', animate('150ms ease-in')) - // ]) - // ] -}) -export class CheckboxComponent { - - @Input() checkboxStyle: string; - @Input() label: string; - @Input() checked: boolean; - @Input() disabled: boolean; - @Output() checkedChange: EventEmitter = new EventEmitter(); - - toggleState(newValue:boolean) { - this.checkedChange.emit(newValue); - } -} - diff --git a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts b/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts deleted file mode 100644 index 4ac7f2d7cd..0000000000 --- a/catalog-ui/src/app/ng2/shared/checkbox/checkbox.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { BrowserModule } from '@angular/platform-browser'; -import { CheckboxComponent } from './checkbox.component'; - - -@NgModule({ - imports: [CommonModule, BrowserModule, FormsModule], - declarations: [CheckboxComponent], - bootstrap: [], - exports: [CheckboxComponent] -}) -export class CheckboxModule { } - -/** README: **/ - -/** USAGE Example: - *In page.module.ts: import CheckboxModule - *In HTML: - * - */ - -/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) - * - * To create or override styles: - * Use /deep/ or >>> prefix to override styles via other components stylesheets - */ diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts deleted file mode 100644 index ac58cbd063..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar-routes.config.ts +++ /dev/null @@ -1,27 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { MenuType, RouteInfo } from './navbar.metadata'; - -export const ROUTES: RouteInfo[] = [ - { path: 'page1', title: 'Logo', menuType: MenuType.BRAND }, - { path: 'page1', title: 'Page 1', menuType: MenuType.LEFT }, - { path: 'page2', title: 'Page 2', menuType: MenuType.LEFT } -]; diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html deleted file mode 100644 index d783be4c27..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.html +++ /dev/null @@ -1,23 +0,0 @@ - diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less deleted file mode 100644 index 3e5165b798..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.less +++ /dev/null @@ -1,11 +0,0 @@ -.active { - color: #ffffff; -} -.navbar-toggler { - border: solid 1px #cccccc; - color: #ff0000; -} -.navbar { - background-color: #0000ff; - border-radius: 0; -} \ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts deleted file mode 100644 index 68a26c4780..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import {Component, OnInit, ViewEncapsulation} from '@angular/core'; -import { ROUTES } from './navbar-routes.config'; -import { MenuType, RouteInfo } from './navbar.metadata'; - -@Component({ - selector: 'app-navbar', - templateUrl: './navbar.component.html', - styleUrls: [ './navbar.component.less' ], - encapsulation: ViewEncapsulation.None -}) -export class NavbarComponent implements OnInit { - public menuItems: Array; - public brandMenu: RouteInfo; - isCollapsed = true; - - constructor() {} - - ngOnInit() { - this.menuItems = ROUTES.filter(menuItem => menuItem.menuType !== MenuType.BRAND); - this.brandMenu = ROUTES.filter(menuItem => menuItem.menuType === MenuType.BRAND)[0]; - } - - public get menuIcon(): string { - return this.isCollapsed ? '☰' : '✖'; - } - - public getMenuItemClasses(menuItem: any) { - return { - 'pull-xs-right': this.isCollapsed && menuItem.menuType === MenuType.RIGHT - }; - } -} diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts deleted file mode 100644 index 71cc3cb59f..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.metadata.ts +++ /dev/null @@ -1,31 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -export enum MenuType { - BRAND, - LEFT, - RIGHT -} - -export interface RouteInfo { - path: string; - title: string; - menuType: MenuType; -} diff --git a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts b/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts deleted file mode 100644 index 4a754dfe99..0000000000 --- a/catalog-ui/src/app/ng2/shared/navbar/navbar.module.ts +++ /dev/null @@ -1,36 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NavbarComponent } from "./navbar.component"; - -@NgModule({ - imports: [ - RouterModule, - CommonModule - ], - declarations: [ NavbarComponent ], - exports: [ - NavbarComponent - ] -}) -export class NavbarModule {} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html deleted file mode 100644 index 36629594b0..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - x - -
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less deleted file mode 100644 index cfeb8d3b01..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less +++ /dev/null @@ -1,58 +0,0 @@ -.search-bar-container { - display:flex; - border-radius: 4px; - box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); - - .search-bar-input { - border: 1px solid #cdcdcd; - border-radius: 4px; - border-right:none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - outline:none; - padding:2px 50px 2px 10px; - color: #5a5a5a; - font-size: 1em; - font-style: italic; - } - - .clear-search-x { - position:absolute; - right:40px; - top:5px; - padding: 0 5px; - - &:hover { - border-radius:2px; - background-color: #ebebeb; - cursor:pointer; - } - } - - .search-bar-button { - //background: url('../../../../assets/styles/svg/source/search-magnify.svg') no-repeat 50%; - background: url('../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px; - background-color: rgba(234, 234, 234, 0.88); - width: 30px; - height: 30px; - padding: 0; - cursor:pointer; - border:solid 1px #cdcdcd; - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; - - &:hover { - background-position:-126px -1275px; - } - - &:active { - background-color: rgba(31, 171, 223, 0.88); - background-position:-45px -1275px; - border-left:none; - } - &:focus { - outline:none; - } - - } -} diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts deleted file mode 100644 index 08bdf2030f..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'search-bar', - templateUrl: './search-bar.component.html', - styleUrls: ['./search-bar.component.less'], - encapsulation: ViewEncapsulation.None -}) -export class SearchBarComponent { - - @Input() placeholder: string; - @Input() class: string; - @Input() searchQuery: string; - @Output() searchChanged: EventEmitter = new EventEmitter(); - @Output() searchButtonClicked: EventEmitter = new EventEmitter(); - - searchButtonClick = (): void => { - if (this.searchQuery) { //do not allow empty search - this.searchButtonClicked.emit(this.searchQuery); - } - } - - searchQueryChange = ($event): void => { - this.searchChanged.emit($event); - } - - private clearSearchQuery = (): void => { - this.searchQuery = ""; - this.searchButtonClicked.emit(this.searchQuery); - } -} - diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html deleted file mode 100644 index c9769ba5ae..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
- -
-
{{item}}
-
-
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less deleted file mode 100644 index 92b054cd85..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less +++ /dev/null @@ -1,35 +0,0 @@ - -.search-with-autocomplete-container{ - &.autocomplete-visible { - - .search-bar-input { - border-bottom-left-radius: 0; - } - .search-bar-button { - border-bottom-right-radius: 0; - } - .autocomplete-results { - border: solid 1px #d2d2d2; - border-top:none; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - background-color: #fff; - padding: 10px 20px; - width:100%; - position:absolute; - max-height: 200px; - overflow-y: scroll; - } - - .autocomplete-result-item { - color:#5a5a5a; - padding: 5px 0; - cursor:pointer; - - &:hover { - color: #999; - } - } - } -} - diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts deleted file mode 100644 index ced056d1fc..0000000000 --- a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core'; -import { SearchBarComponent } from '../search-bar/search-bar.component'; - -@Component({ - selector: 'search-with-autocomplete', - templateUrl: './search-with-autocomplete.component.html', - styleUrls: ['./search-with-autocomplete.component.less'], - encapsulation: ViewEncapsulation.None -}) -export class SearchWithAutoCompleteComponent { - - @Input() searchPlaceholder: string; - @Input() searchBarClass: string; - @Input() searchQuery: string; - @Input() autoCompleteValues: Array; - @Output() searchChanged: EventEmitter = new EventEmitter(); - @Output() searchButtonClicked: EventEmitter = new EventEmitter(); - - searchChange = (searchTerm: string) => { - this.searchQuery = searchTerm; - this.searchChanged.emit(searchTerm); - } - - updateSearch = (searchTerm: string) => { - this.searchQuery = searchTerm; - this.searchButtonClicked.emit(searchTerm); - this.autoCompleteValues = []; - } -} - diff --git a/catalog-ui/src/app/ng2/shared/shared.module.ts b/catalog-ui/src/app/ng2/shared/shared.module.ts deleted file mode 100644 index 2bc7d52ab8..0000000000 --- a/catalog-ui/src/app/ng2/shared/shared.module.ts +++ /dev/null @@ -1,40 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { NgModule } from '@angular/core'; - -import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; -import { NavbarModule } from "./navbar/navbar.module"; - -@NgModule({ - declarations: [ - - ], - imports: [ - CommonModule, - RouterModule, - NavbarModule - ], - exports: [ - ] -}) - -export class SharedModule {} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts deleted file mode 100644 index bad7b80a51..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tab/tab.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, Input } from '@angular/core'; -import { ViewEncapsulation } from '@angular/core'; - -@Component({ - selector: 'tab', - template: ` -
- -
- `, - encapsulation: ViewEncapsulation.None -}) -export class Tab { - @Input('tabTitle') title: string; - @Input() active:boolean = false; - @Input() indication?: number; - -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html deleted file mode 100644 index 3e263a3862..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- {{tab.title}} -
{{tab.indication}}
-
-
-
- -
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less deleted file mode 100644 index 6f9e57aaf2..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.less +++ /dev/null @@ -1,84 +0,0 @@ -@import '../../../../assets/styles/variables'; - -tab { - height: 100%; -} - -.tabs { - display:flex; - flex: 0 0 auto; - flex-direction:row; -} - -.tab { - flex: 1 0 auto; - cursor: pointer; - padding: .5em; -} - -.tab-content-container { - flex: 1; - width:100%; - overflow-y:hidden; -} - -.tab-content { - height:100%; -} - -/*Tab styles*/ -.tabs{ - &.round-tabs .tab{ - background-color: #f8f8f8; - color: #959595; - border: solid 1px #d2d2d2; - border-bottom:none; - border-left:none; - position:relative; - - &:first-child { - border-left:solid 1px #d2d2d2; - } - - &.active { - background-color:#009fdb; - color:#e9e9e9; - border-color:#009fdb; - } - - .tab-indication { - position: absolute; - top: -10px; - background-color: #009fdb; - right: 10px; - padding: 2px 0; - border-radius: 15px; - border: solid 1px #d2d2d2; - color:white; - width: 25px; - height: 25px; - text-align: center; - - } - } - - &.simple-tabs .tab { - font-size: 12px; - color: @main_color_n; - - &:after { - display:block; - content: ''; - border-bottom: 2px solid @main_color_a; - transform: scaleX(0); - transition: transform 200ms ease-in-out; - } - - &.active { - color: @main_color_a; - &:after { - transform: scaleX(1.2); - } - } - } -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts deleted file mode 100644 index 21d2bbad43..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.component.ts +++ /dev/null @@ -1,78 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, ContentChildren, QueryList, AfterContentInit, Input, Output, EventEmitter } from '@angular/core'; -import { Tab } from './tab/tab.component'; -import { ViewEncapsulation } from '@angular/core'; -import { trigger, state, style, transition, animate, keyframes } from '@angular/core'; - -@Component({ - selector: 'tabs', - templateUrl: './tabs.component.html', - styleUrls: ['./tabs.component.less'], - encapsulation: ViewEncapsulation.None, - animations: [ - trigger('indicatorAnimation', [ - transition(':enter', [style({ transform: 'translateY(-50%)', opacity: 0 }), animate('250ms', style({ transform: 'translateY(0)', opacity: 1 })) ]), - transition(':leave', [style({ opacity: 1 }), animate('500ms', style({ opacity: 0 })) ]) - ]) - ] -}) -export class Tabs implements AfterContentInit { - - @Input() tabStyle: string; - @Input() hideIndicationOnTabChange?: boolean = false; - @ContentChildren(Tab) tabs: QueryList; - @Output() tabChanged: EventEmitter = new EventEmitter(); - - - ngAfterContentInit() { - //after contentChildren are set, determine active tab. If no active tab set, activate the first one - let activeTabs = this.tabs.filter((tab) => tab.active); - - if (activeTabs.length === 0) { - this.selectTab(this.tabs.first); - } - } - - selectTab(tab: Tab) { - //activate the tab the user clicked. - this.tabs.toArray().forEach(tab => { - tab.active = false; - if (this.hideIndicationOnTabChange && tab.indication) { - tab.indication = null; - } - }); - tab.active = true; - this.tabChanged.emit(tab); - } - - triggerTabChange(tabTitle) { - this.tabs.toArray().forEach(tab => { - tab.active = (tab.title == tabTitle) ? true : false; - }); - } - - setTabIndication(tabTitle:string, indication?:number) { - let selectedTab: Tab = this.tabs.toArray().find(tab => tab.title == tabTitle); - selectedTab.indication = indication || null; - } - -} diff --git a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts b/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts deleted file mode 100644 index 6bf19d4099..0000000000 --- a/catalog-ui/src/app/ng2/shared/tabs/tabs.module.ts +++ /dev/null @@ -1,55 +0,0 @@ -/*- - * ============LICENSE_START======================================================= - * SDC - * ================================================================================ - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. - * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============LICENSE_END========================================================= - */ - -import { Component, NgModule } from '@angular/core' -import { BrowserModule } from '@angular/platform-browser' - -import { Tabs } from './tabs.component'; -import { Tab } from './tab/tab.component'; - - -@NgModule({ - imports: [BrowserModule], - declarations: [Tabs, Tab], - bootstrap: [], - exports: [Tabs, Tab] -}) -export class TabModule { } - -/** README: **/ - -/** USAGE Example: - *In page.module.ts: import TabModule - *In HTML: - * - * Content of tab 1 - * Content of tab 2 - * ... - * - */ - -/**STYLING: (ViewEncapsulation is set to None to allow styles to be overridden or customized) - * Existing options: - * tabStyle="round-tabs" will provide generic rounded tab look - * - * To create or override styles: - * Parent div has class ".tabs". Each tab has class ".tab". Active tab has class ".active". - * Use /deep/ or >>> prefix to override styles via other components stylesheets - */ diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.module.ts b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts new file mode 100644 index 0000000000..feaec03bbd --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.module.ts @@ -0,0 +1,32 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { NgModule } from '@angular/core' + +import { TranslateService } from "./translate.service"; +import { TranslatePipe } from "./translate.pipe"; + + +@NgModule({ + providers: [TranslateService], + declarations: [TranslatePipe], + exports: [TranslatePipe] +}) +export class TranslateModule { } diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts new file mode 100644 index 0000000000..42e019829f --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.pipe.ts @@ -0,0 +1,62 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Pipe, PipeTransform } from '@angular/core'; +import { TranslateService, ITranslateArgs } from "./translate.service"; + + +@Pipe({ + name: 'translate', + pure: false +}) +export class TranslatePipe implements PipeTransform { + private translated:string; + private lastParams: { + phrase: string; + args: {[index: string]: any}; + language: string; + } = { + phrase: undefined, + args: undefined, + language: undefined + }; + + constructor(private translateService:TranslateService) { + } + + private shouldUpdate(curParams:{[index:string]: any}) : boolean { + return ( + curParams.language !== this.lastParams.language || + curParams.args !== this.lastParams.args || + curParams.phrase !== this.lastParams.phrase + ); + } + + public transform(phrase:string, args:ITranslateArgs, language:string=this.translateService.activeLanguage) : string { + const curParams = { phrase, args, language }; + if (this.shouldUpdate(curParams)) { + this.lastParams = curParams; + this.translated = this.translateService.translate(phrase, args, language); + console.log('*updated:', this.translated); + } + + return this.translated; + } +} diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts new file mode 100644 index 0000000000..a1d7833062 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.config.ts @@ -0,0 +1,30 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { OpaqueToken } from "@angular/core"; + +export const TranslateServiceConfigToken = new OpaqueToken('TranslateServiceConfigToken'); + +export interface ITranslateServiceConfig { + filePrefix:string; + fileSuffix:string; + allowedLanguages:string[]; + defaultLanguage:string; +} diff --git a/catalog-ui/src/app/ng2/shared/translator/translate.service.ts b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts new file mode 100644 index 0000000000..ff7c643b46 --- /dev/null +++ b/catalog-ui/src/app/ng2/shared/translator/translate.service.ts @@ -0,0 +1,235 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import { Injectable, Inject } from "@angular/core"; +import { Response, Http } from "@angular/http"; +import { Observable, Observer, ConnectableObservable, Subscription } from "rxjs"; +import { ITranslateServiceConfig, TranslateServiceConfigToken } from "./translate.service.config"; + +export { ITranslateServiceConfig, TranslateServiceConfigToken }; + +export interface ITranslateLanguageJson { + [index:string]: string; +} + +export interface ITranslateArgs { + [index:string]: any; +} + +export class PhraseTranslator { + private _observable:ConnectableObservable; + private _observer:Observer; + private _languageChangeSubscription:Subscription; + + private _phraseKey:string; + private _args:ITranslateArgs; + private _language:string; + + private _markForCheck:boolean = false; + private _lastParams: { + phraseKey: string; + args: {[index: string]: any}; + language: string; + } = { + phraseKey: undefined, + args: undefined, + language: undefined + }; + + constructor(private translateService:TranslateService) { + this._observable = Observable.create(observer => { + this._observer = observer; + this._languageChangeSubscription = this.translateService.languageChangedObservable.subscribe(language => { + // using the active language, then force update + if (!this._language) { + this.update(true); + } + }); + }).publishReplay(1).refCount(); + } + + public get observable() { + return this._observable; + } + + public destroy() { + this._observer.complete(); + this._languageChangeSubscription.unsubscribe(); + + delete this._observable; + delete this._observer; + delete this._languageChangeSubscription; + } + + public shouldUpdate() : boolean { + if (!this._markForCheck) { + return false; + } + this._markForCheck = false; + return ( + this._language !== this._lastParams.language || + this._args !== this._lastParams.args || + this._phraseKey !== this._lastParams.phraseKey + ); + } + + public update(forceUpdate:boolean=false) : void { + // only update translation when having subscriptions connected. + if (this._observer && !this._observer.closed) { + if (forceUpdate || this.shouldUpdate()) { + this._lastParams = { + phraseKey: this._phraseKey, + args: this._args, + language: this._language + }; + this._markForCheck = false; + + const translated = this.translateService.translate(this._phraseKey, this._args, this._language); + this._observer.next(translated); + } + } + } + + private _changeParam(paramKey:string, value:any, update:boolean) : void { + this[`_${paramKey}`] = value; + this._markForCheck = true; + if (update) { + this.update(); + } + } + + public changePhraseKey(phraseKey:string, update:boolean=true) : void { + this._changeParam('phraseKey', phraseKey, update); + } + + public changeArgs(args:ITranslateArgs, update:boolean=true) :void { + this._changeParam('args', args, update); + } + + public changeLangauge(language:string, update:boolean=true) :void { + this._changeParam('language', language, update); + } + + public changeParams(phraseKey:string, args:ITranslateArgs={}, language?:string, forceUpdate:boolean=false) { + this._phraseKey = phraseKey; + this._args = args; + this._language = language; + this._markForCheck = true; + this.update(forceUpdate); + } +} + + +@Injectable() +export class TranslateService { + private _activeLanguage:string; + private _languageChangedObservable:ConnectableObservable; + private _languageChangedObserver:Observer; + private _cacheLanguagesJsons:{[index:string]:ITranslateLanguageJson} = {}; + private _cacheLanguagesLoaders:{[index:string]:Observable} = {}; + + constructor(@Inject(TranslateServiceConfigToken) private config:ITranslateServiceConfig, private http:Http) { + this.initLanguageObservable(); + this.loadAndActivateLanguage(this.config.defaultLanguage); + } + + public get languageChangedObservable() : Observable { + return this._languageChangedObservable; + } + + public get activeLanguage() { + return this._activeLanguage; + } + + private initLanguageObservable() { + this._languageChangedObservable = ConnectableObservable.create(observer => { + this._languageChangedObserver = observer; + }).publishReplay(1); // replay last emitted change on subscribe + this._languageChangedObservable.connect(); + } + + private loadLanguageJsonFile(language:string, emitOnLoad:boolean=true) : Observable { + if (this.config.allowedLanguages.indexOf(language) === -1) { + return Observable.throw(`Language "${language}" is not available.`); + } + + if (this._cacheLanguagesJsons[language]) { + return Observable.of(this._cacheLanguagesJsons[language]); + } + + if (!(language in this._cacheLanguagesLoaders)) { + const filePath = `${this.config.filePrefix}${language}${this.config.fileSuffix}`; + this._cacheLanguagesLoaders[language] = this.http.get(filePath) + .map(resp => resp.json()) + .catch(() => Observable.throw(`Failed to load language file for "${language}"`)) + .publish(); + (>this._cacheLanguagesLoaders[language]).connect(); + this._cacheLanguagesLoaders[language].subscribe(languageJson => { + this._cacheLanguagesJsons[language] = languageJson; + delete this._cacheLanguagesLoaders[language]; + if (emitOnLoad) { + this._languageChangedObserver.next(language); + } + return languageJson; + }); + } + return this._cacheLanguagesLoaders[language]; + } + + public activateLanguage(language:string) : boolean { + if (this._cacheLanguagesJsons[language]) { + if (language !== this._activeLanguage) { + this._activeLanguage = language; + this._languageChangedObserver.next(this._activeLanguage); + } + return true; + } + return false; + } + + public loadAndActivateLanguage(language:string) : Observable { + const loadLanguageObservable = this.loadLanguageJsonFile(language, false); + loadLanguageObservable.subscribe(() => { + this.activateLanguage(language); + }, () => {}); + return loadLanguageObservable; + } + + public translate(phraseKey:string, args:ITranslateArgs={}, language:string=this._activeLanguage) : string { + const phrase:string = (this._cacheLanguagesJsons[language] || {})[phraseKey] || ''; + let translated:string; + if (typeof(phrase) === 'string') { + translated = phrase + .replace( + /(^|[^\\]|\\\\)\{\{(\w+)\}\}/g, + (m, p1, p2) => `${p1}${args[p2]||''}` + ) + .replace('\\{{', '{{') + .replace('\\\\', '\\'); + } + return translated; + } + + public createPhraseTranslator(phraseKey?:string, args?:ITranslateArgs, language?:string) : PhraseTranslator { + const phraseTranslator = new PhraseTranslator(this); + phraseTranslator.changeParams(phraseKey, args, language); + return phraseTranslator; + } +} diff --git a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts index ce13a8c235..c21817c001 100644 --- a/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts +++ b/catalog-ui/src/app/ng2/utils/ng1-upgraded-provider.ts @@ -42,6 +42,10 @@ export function cookieServiceFactory(cacheObj: ICacheObject) { return cacheObj.get('Sdc.Services.CookieService'); } +export function stateServiceFactory(cacheObj: ICacheObject) { + return cacheObj.get('$state'); +} + export function stateParamsServiceFactory(cacheObj: ICacheObject) { return cacheObj.get('$stateParams'); } @@ -74,6 +78,12 @@ export const CookieServiceProvider = { deps: ['$injector'] }; +export const StateServiceFactory = { + provide: '$state', + useFactory: stateServiceFactory, + deps: ['$injector'] +}; + export const StateParamsServiceFactory = { provide: '$stateParams', useFactory: stateParamsServiceFactory, -- cgit 1.2.3-korg