Merge branch '123-client-make-possible-to-add-simple-form' into 'develop'

Resolve "Client: Make possible to add simple form"

Closes #123

See merge request !93

client/src/app/instance/webpage/dynamic-content/dynamic-components/form-sample.component.html

+<form #form="ngForm" (ngSubmit)="submit(form)">
+    <div class="form-group">
+        <label for="example-form">{{ label }}</label>
+        <input
+            type="{{ type }}"
+            class="form-control"
+            id="example-form"
+            ngModel
+            name="inputVal"
+            #inputVal="ngModel"
+            required
+        />
+    </div>
+    <button
+        class="btn btn-secondary"
+        type="submit"
+        [disabled]="!form.form.valid"
+    >
+        <i class="{{ faSymbol }}"></i> {{ textButton }}
+    </button>
+</form>

client/src/app/instance/webpage/dynamic-content/dynamic-components/form-sample.component.spec.ts

+/**
+ * This file is part of Anis Client.
+ *
+ * @copyright Laboratoire d'Astrophysique de Marseille / CNRS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormSampleComponent } from './form-sample.component';
+import { FormsModule, NgForm } from '@angular/forms';
+import { ToastrModule } from 'ngx-toastr';
+
+import { Router } from '@angular/router';
+import { SearchService } from 'src/app/instance/store/services/search.service';
+import { ToastrService } from 'ngx-toastr';
+import { Observable, of } from 'rxjs';
+
+class MockRouter {
+    navigate(url: string): string {
+        return url;
+    }
+}
+
+class MockSearch {
+    retrieveDataLength(query: string): Observable<[{ nb: number }]> {
+        return null;
+    }
+}
+
+class MockToastr {
+    error(): void {}
+}
+
+describe('FormSampleComponent', () => {
+    let component: FormSampleComponent;
+    let fixture: ComponentFixture<FormSampleComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [FormSampleComponent],
+            imports: [FormsModule, ToastrModule],
+            providers: [
+                { provide: Router, useClass: MockRouter },
+                { provide: ToastrService, useClass: MockToastr },
+                { provide: SearchService, useClass: MockSearch },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(FormSampleComponent);
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should call error if no ids found with the query', () => {
+        const spyOnError = jest.spyOn(MockToastr.prototype, 'error');
+        const spyOnNavigate = jest.spyOn(MockRouter.prototype, 'navigate');
+        const spyOnSearch = jest
+            .spyOn(MockSearch.prototype, 'retrieveDataLength')
+            .mockReturnValue(of([{ nb: 0 }]));
+
+        component.datasetName = 'observations';
+        component.instanceName = 'default';
+        let form = { value: { inputVal: 43 } } as NgForm;
+        component.submit(form);
+
+        expect(spyOnSearch).toHaveBeenCalledTimes(1);
+        expect(spyOnSearch).toHaveBeenCalledWith(
+            'observations?a=count&c=1::eq::43'
+        );
+        expect(spyOnError).toHaveBeenCalledTimes(1);
+        expect(spyOnNavigate).toHaveBeenCalledTimes(0);
+    });
+
+    it('should call error if no ids found with the query', () => {
+        const spyOnError = jest.spyOn(MockToastr.prototype, 'error');
+        const spyOnNavigate = jest.spyOn(MockRouter.prototype, 'navigate');
+        const spyOnSearch = jest
+            .spyOn(MockSearch.prototype, 'retrieveDataLength')
+            .mockReturnValue(of([{ nb: 1 }]));
+
+        component.datasetName = 'observations';
+        component.instanceName = 'default';
+        let form = { value: { inputVal: 250 } } as NgForm;
+        component.submit(form);
+
+        expect(spyOnSearch).toHaveBeenCalledTimes(1);
+        expect(spyOnSearch).toHaveBeenCalledWith(
+            'observations?a=count&c=1::eq::250'
+        );
+        expect(spyOnError).toHaveBeenCalledTimes(0);
+        expect(spyOnNavigate).toHaveBeenCalledTimes(1);
+        expect(spyOnNavigate).toHaveBeenCalledWith(
+            ['/instance/default/search/detail/observations/250']
+        );
+    });
+});

client/src/app/instance/webpage/dynamic-content/dynamic-components/form-sample.component.ts

+/**
+ * This file is part of Anis Client.
+ *
+ * @copyright Laboratoire d'Astrophysique de Marseille / CNRS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Component, Input, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { SearchService } from 'src/app/instance/store/services/search.service';
+
+@Component({
+    selector: 'app-form-attribut',
+    templateUrl: './form-sample.component.html',
+})
+export class FormSampleComponent implements OnInit {
+    @Input() instanceName: string = null;
+    @Input() faSymbol: string = null;
+    @Input() type: string = null;
+    @Input() label: string = null;
+    @Input() textButton: string = null;
+    @Input() datasetName: string = null;
+
+    constructor(
+        private router: Router,
+        private search: SearchService,
+        private toastr: ToastrService
+    ) {}
+
+    ngOnInit(): void {}
+
+    submit(f: NgForm): void {
+        const query: string = `${this.datasetName}?a=count&c=1::eq::${f.value.inputVal}`;
+        this.search.retrieveDataLength(query).subscribe((data) => {
+            switch (data[0].nb) {
+                case 0:
+                    this.toastr.error(
+                        'Target ID does not exist',
+                        'Navigation error'
+                    );
+                    break;
+                case 1:
+                    const route: string = `/instance/${this.instanceName}/search/detail/${this.datasetName}/${f.value.inputVal}`;
+                    this.router.navigate([route]);
+                    break;
+                default:
+                    console.log('Problem occured during the navigation');
+            }
+        });
+    }
+}

client/src/app/instance/webpage/dynamic-content/dynamic-components/index.ts

 import { DatasetSampleComponent } from './dataset-sample.component';
+import { FormSampleComponent } from './form-sample.component';
 
-export const dynamicComponents = [
-    DatasetSampleComponent
-];
+export const dynamicComponents = [DatasetSampleComponent, FormSampleComponent];

client/src/app/instance/webpage/webpage.module.ts

@@ -26,7 +26,7 @@ import { hookParsers, dynamicComponents } from './dynamic-content';
     declarations: [
         routedComponents,
         dummiesComponents,
-        dynamicComponents
+        dynamicComponents,
     ],
     providers: [
         hookParsers