summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components
diff options
context:
space:
mode:
authorfranciscovila <javier.paradela.vila@est.tech>2022-11-24 10:29:04 +0000
committerMichael Morris <michael.morris@est.tech>2023-01-26 23:32:10 +0000
commit701e441228724c5b701d94cc3f1e520ce656398a (patch)
tree5900482086d86f8b8e465e6d4b57db4bd7a94184 /catalog-ui/src/app/ng2/components
parent1bbecd7edbdd907a53812d303d378236d23d071e (diff)
Import data type in UI
Develop all necessary changes in the UI to allow importing a data type from a yaml file Issue-ID: SDC-4279 Signed-off-by: franciscovila <javier.paradela.vila@est.tech> Change-Id: Id413386fad8b362e8c4a1d25c859a22178189074
Diffstat (limited to 'catalog-ui/src/app/ng2/components')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html51
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less60
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts45
-rw-r--r--catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts47
-rw-r--r--catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts7
5 files changed, 208 insertions, 2 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html
new file mode 100644
index 0000000000..37439f8d70
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.html
@@ -0,0 +1,51 @@
+<!--
+ ~ -
+ ~ ============LICENSE_START=======================================================
+ ~ Copyright (C) 2023 Nordix Foundation.
+ ~ ================================================================================
+ ~ 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.
+ ~
+ ~ SPDX-License-Identifier: Apache-2.0
+ ~ ============LICENSE_END=========================================================
+ -->
+<div class="import-type-container">
+
+ <form novalidate class="w-sdc-form" name="importForm" validation-on-load form-to-validate="importForm">
+
+ <div class="w-sdc-form-section-container">
+
+ <div class="i-sdc-form-item">
+ <label class="i-sdc-form-label required">Type</label>
+ <select class="i-sdc-form-select"
+ data-ng-class="{'view-mode': true}"
+ data-ng-disabled="false"
+
+ data-tests-id="selectType"
+ data-ng-required="true"
+
+ >
+ <option value="" selected>Data Type</option>
+ </select>
+ </div>
+
+ <div class="i-sdc-form-item">
+ <label class="i-sdc-form-label required">Select File to Import
+ <input (change)="onFileChange($event)" type="file" class="i-sdc-dashboard-item-upload-input"/>
+ </label>
+ </div>
+
+ </div>
+
+ </form>
+
+</div> \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
new file mode 100644
index 0000000000..8c391c52c8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
@@ -0,0 +1,60 @@
+/*
+ * -
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2023 Nordix Foundation.
+ * ================================================================================
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ */
+
+.import-type-container {
+ max-width: 100%;
+}
+
+.default-value-container {
+ overflow: scroll;
+ max-height: 300px;
+ max-width: 100%;
+
+ ul {
+ margin: 0 0 0 20px;
+ list-style: none;
+ line-height: 2em;
+ }
+
+ &::-webkit-scrollbar-track {
+ border: 0;
+ }
+}
+
+.input-label {
+ margin: 0;
+ font-weight: bold;
+}
+
+.input-value {
+ display: flex;
+ flex-flow: row nowrap;
+ gap: 7px;
+
+ input {
+ min-width: 150px;
+ max-width: 250px;
+ }
+}
+
+.empty-value {
+ color: #aaaaaa;
+} \ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts
new file mode 100644
index 0000000000..9e785638d8
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.spec.ts
@@ -0,0 +1,45 @@
+/*
+ * -
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2023 Nordix Foundation.
+ * ================================================================================
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalImportTypeComponent } from './modal-import-type.component';
+
+describe('ModalImportTypeComponent', () => {
+ let component: ModalImportTypeComponent;
+ let fixture: ComponentFixture<ModalImportTypeComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ModalImportTypeComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ModalImportTypeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts
new file mode 100644
index 0000000000..2c56b2ef7f
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.ts
@@ -0,0 +1,47 @@
+/*
+ * -
+ * ============LICENSE_START=======================================================
+ * Copyright (C) 2023 Nordix Foundation.
+ * ================================================================================
+ * 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.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * ============LICENSE_END=========================================================
+ */
+import {Component, Inject, OnInit} from '@angular/core';
+
+@Component({
+ selector: 'app-modal-import-type',
+ templateUrl: './modal-import-type.component.html',
+ styleUrls: ['./modal-import-type.component.less']
+})
+export class ModalImportTypeComponent implements OnInit {
+
+ file:File = null;
+
+ constructor() {}
+
+ ngOnInit() {
+ }
+
+ onFileChange(event: any) {
+ this.file = event.target.files[0];
+ }
+
+ public onImportDataType(file: any): void {
+ if (file && file.filename) {
+ console.log("file: " + file.filename);
+ }
+ }
+
+}
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
index cdb173cb12..8e0a66c8f5 100644
--- a/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
+++ b/catalog-ui/src/app/ng2/components/ui/ui-elements.module.ts
@@ -44,6 +44,7 @@ import {FileOpenerComponent} from "./file-opener/file-opener.component";
import {DownloadArtifactComponent} from "app/ng2/components/ui/download-artifact/download-artifact.component";
import {SdcElementIconComponent} from "./sdc-element-icon/sdc-element-icon.component";
import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
+import { ModalImportTypeComponent } from './modal-import-type/modal-import-type.component';
@NgModule({
declarations: [
@@ -56,7 +57,8 @@ import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
FileOpenerComponent,
SdcElementIconComponent,
DownloadArtifactComponent,
- PanelWrapperComponent
+ PanelWrapperComponent,
+ ModalImportTypeComponent
],
imports: [
@@ -97,7 +99,8 @@ import {PanelWrapperComponent} from "./panel-wrapper/panel-wrapper.component";
SdcElementIconComponent,
FileOpenerComponent,
DownloadArtifactComponent,
- PanelWrapperComponent
+ PanelWrapperComponent,
+ ModalImportTypeComponent
],
entryComponents: [SearchWithAutoCompleteComponent, SdcElementIconComponent, PaletteAnimationComponent]
})