DSP-869 add select project component #213

waychal · 2020-10-28T11:49:42Z

It adds the select project component with autocompletion feature.

In component, filtered project list for given user IRI is provided to select a project. When project is selected, it emits the event to the parent and returns the project's short name.

- New component in ui-lib (action module) to select project which can be used in fulltext, but also in advanced search (DSP-292) - Add filter to search project by short name, long name or short code - Send project info back to parent - Add input parameter for user IRI to only display projects that belkongs to this user

kilchenmann · 2020-10-28T12:55:06Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.scss

+.dsp-select-project-component {
+  &.select-form {
+    margin-top: -18px;
+  }


This part is not needed. The defined style has no effect.

kilchenmann · 2020-10-28T12:55:37Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.scss

+  .select-project-btn {
+    margin: 0 0 16px;
+    min-width: 140px;
+  }


This part is not needed. The defined style has no effect when the class is not used in the template.

kilchenmann · 2020-10-28T12:58:30Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.spec.ts

+import { OverlayModule } from '@angular/cdk/overlay';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { Component, ViewChild } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
+import { MatOptionModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MockProjects, ProjectsEndpointAdmin, UsersEndpointAdmin } from '@dasch-swiss/dsp-js';
+import { of } from 'rxjs/internal/observable/of';
+import { DspApiConnectionToken } from '../../../core';


Please clean up the the imports by running "Organize imports" command in your IDE.
https://docs.google.com/document/d/1SIVMxoV0N8xYqhVk_0hhuqSuUF47D1YYrDESqdmipfM/edit#heading=h.dayyw3sk2234

kilchenmann · 2020-10-28T13:01:31Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.ts

+    // list of projects
+    projects: ReadProject[];
+
+    // selected project
+    selectedProject: ReadProject;
+
+    // filter projects while typing (autocomplete)
+    filteredProjects: Observable<ReadProject[]>;
+
+    // form group
+    selectProjectForm: FormGroup;
+
+    // in case of an (api) error
+    error: any;
+
+    // user IRI so we could show only projects that belongs to this user
+    @Input() userIri?: string;
+
+    @Output() projectInfo: EventEmitter<string> = new EventEmitter<string>();


Please follow our Coding Conventions about "Variable declaration order"

kilchenmann · 2020-10-28T13:04:03Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.ts

+    projects: ReadProject[];
+
+    // selected project
+    selectedProject: ReadProject;


This should be the @output().

I will add a comment how to do it...

Maybe you can find selected project in list of projects by looking for shortcode.

I have updated the code to return ReadProject object. But currently I am looping the complete projects array to get the selected project info. It would be good to have dictionary and not array for all projects to improve performance.

projects/dsp-ui/src/lib/action/action.module.ts

kilchenmann · 2020-10-28T13:18:47Z

projects/dsp-ui/src/lib/action/action.module.ts

+    ReactiveFormsModule,
    MatMenuModule,
    MatSnackBarModule,
    ReactiveFormsModule


ReactiveFormsModule is listed twice

Removed duplicate entry.

mpro7 · 2020-10-28T16:53:49Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.html

+    <form class="form-content">
+        <mat-form-field class="large-field select-project">
+
+            <input matInput [matAutocomplete]="project" [formControl]="selectProjectForm.controls['projectName']"


HTML code could be neat aligned as mentioned in coding convention. To do so you should install recommended Prettier extension and align it manually or enable alignment on save in vscode settings.

@mpro7 Good point. I use the default "Format Document" or "Format Selection" command in vsc. We had some issues with "Prettier" especially in html files.

@kilchenmann what issues exactly? I personally resigned from Prettier, since devs didn't want to extend formatting to some settings. Format Document/Selection depends on the default formatter and defined rules. I think we could revise the coding/formatting convention and provide the best possible solution to automate the rules, as well as get settings aligned.

@mdelez mentioned some issues with prettier. I do not remember which ones exactly. And I thought @waychal is using anyway webstorm and not vsc. We should discuss the tools to format code in another task (maybe) on youtrack...

@kilchenmann @mpro7 Yes, I use default formatting from webstorm. I will check the conventions in the link provided above by Marcin.

I've disabled Prettier. I think we were using the default config file and it was not formatting it the way we wanted. Maybe if we spend some more time on the config file, we can get it to act how we want it to.

Discussion has been moved to DSP-936

…mponent to its parent

kilchenmann · 2020-11-03T14:42:30Z

@waychal I just updated this branch from main branch. It was outdated.
I will review this PR tomorrow again

…wiss/dsp-ui-lib into dsp-869-select-project-component

tobiasschweizer · 2020-11-19T17:15:31Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.html

+                matInput
+                placeholder="Select project"
+                [matAutocomplete]="project"
+                [formControl]="selectProjectForm.controls['projectName']">


I think this is the problem:

ERROR: projects/dsp-ui/src/lib/action/components/select-project/select-project.component.html:9:17 - error >TS2739: Type 'AbstractControl' is missing the following properties from type 'FormControl': registerOnChange, >registerOnDisabledChange, _applyFormState
[formControl]="selectProjectForm.controls['projectName']">

I prefer this way:

<form class="form-content" [formGroup]="selectProjectForm"> <input [formControlName]="'projectName'"> </form>

You can reproduce this locally when building in dev mode: npm run build-lib-dev.

This command builds the lib in dev mode (without the --prod flag) and uses

dsp-ui-lib/projects/dsp-ui/tsconfig.lib.json

Line 20 in fbb655e

"strictTemplates": true

see https://indepth.dev/a-look-at-major-features-in-the-angular-ivy-version-9-release#strict-template-type-checking

The build failed because the compiler could not determine whether you passed the correct type to [FormControl].

tobiasschweizer · 2020-11-19T17:17:46Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.html

+            <button
+                mat-icon-button
+                matSuffix
+                *ngIf="selectProjectForm.controls['projectName'].value"


Instead of selectProjectForm.controls['projectName'] you could assign the instance of FormControl to a member of SelectProjectComponent and access it like this, see

dsp-ui-lib/projects/dsp-ui/src/lib/viewer/values/int-value/int-value.component.ts

Lines 42 to 58 in fbb655e

ngOnInit() {

// initialize form control elements

this.valueFormControl = new FormControl(null);

this.commentFormControl = new FormControl(null);

// subscribe to any change on the comment and recheck validity

this.valueChangesSubscription = this.commentFormControl.valueChanges.subscribe(

data => {

this.valueFormControl.updateValueAndValidity();

}

);

this.form = this._fb.group({

intValue: this.valueFormControl,

comment: this.commentFormControl

});

then from the template you can directly access the class's member valueFormControl

tobiasschweizer · 2020-11-19T17:21:15Z

projects/dsp-ui/src/lib/action/components/select-project/select-project.component.ts

+        this.selectProjectForm = this._formBuilder.group({
+            projectName: new FormControl({
+                value: '', disabled: false
+            }) as FormControl


What do you need the type assertion FormControl for? Did the compiler complain?

Is the disabled: false needed or could you just do new FormControl('') it the empty string is your initial value?

Instantiate a FormControl, with an initial value.
const control = new FormControl('some value');
console.log(control.value); // 'some value'

https://angular.io/api/forms/FormControl#initializing-form-controls

waychal · 2020-11-23T23:03:59Z

@tobiasschweizer Thanks. All tests are passing now.

tobiasschweizer · 2020-11-24T08:26:14Z

@tobiasschweizer Thanks. All tests are passing now.

Great, anything I should add to the unit test guideline?

tobiasschweizer · 2020-11-24T08:35:41Z

@waychal I added DSP-1104 to add some missing explanation about different build options and tests being run on github-ci.

waychal · 2020-11-24T13:48:01Z

@waychal I added DSP-1104 to add some missing explanation about different build options and tests being run on github-ci.

may be you can separate tests commands and build commands in separate documents?
OR you can have single document where all the commands added in package.json are explained.

Snehal Kumbhar added 3 commits October 28, 2020 11:59

Added ubit tests for select-project component

3583ac5

Merge branch 'master' into dsp-869-select-project-component

f06cfef

waychal added the enhancement New feature or request label Oct 28, 2020

waychal requested a review from kilchenmann October 28, 2020 11:49

waychal self-assigned this Oct 28, 2020

updated fit to it in unit tests

e4304f0

kilchenmann suggested changes Oct 28, 2020

View reviewed changes

mpro7 reviewed Oct 28, 2020

View reviewed changes

kilchenmann changed the base branch from master to main October 29, 2020 16:50

Snehal Kumbhar and others added 4 commits November 3, 2020 11:44

changes according to the PR comments

fb342f5

Returned selected project <ReadProject> object from select-project-co…

d661f0c

…mponent to its parent

Merge branch 'master' into dsp-869-select-project-component

c761af8

Merge branch 'main' into dsp-869-select-project-component

a492825

Snehal Kumbhar added 2 commits November 9, 2020 22:58

fix error in test build

b831a70

Merge branch 'dsp-869-select-project-component' of github.com:dasch-s…

6bdd41a

…wiss/dsp-ui-lib into dsp-869-select-project-component

tobiasschweizer reviewed Nov 19, 2020

View reviewed changes

Solve formcontrol error occured in build-lib-dev

d96d514

waychal force-pushed the dsp-869-select-project-component branch from b3d7d5f to d96d514 Compare November 20, 2020 13:12

Snehal Kumbhar and others added 3 commits November 20, 2020 14:36

Merge branch 'main' into dsp-869-select-project-component

c8e7101

Fixed errors in unit tests

d4d43eb

Merge branch 'main' into dsp-869-select-project-component

cdd2aa6

waychal requested a review from kilchenmann November 24, 2020 16:51

kilchenmann approved these changes Nov 24, 2020

View reviewed changes

Merge branch 'main' into dsp-869-select-project-component

0652219

waychal merged commit 4cb3dd5 into main Nov 24, 2020

waychal deleted the dsp-869-select-project-component branch November 24, 2020 18:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DSP-869 add select project component #213

DSP-869 add select project component #213

waychal commented Oct 28, 2020 •

edited

Loading

kilchenmann Oct 28, 2020

waychal Nov 3, 2020

kilchenmann Oct 28, 2020

waychal Nov 3, 2020

kilchenmann Oct 28, 2020

waychal Nov 3, 2020

kilchenmann Oct 28, 2020

waychal Nov 3, 2020

kilchenmann Oct 28, 2020

kilchenmann Oct 28, 2020

waychal Nov 3, 2020

kilchenmann Oct 28, 2020

waychal Nov 3, 2020

mpro7 Oct 28, 2020

kilchenmann Oct 29, 2020

mpro7 Oct 29, 2020

kilchenmann Oct 29, 2020

waychal Oct 29, 2020

mdelez Oct 29, 2020

kilchenmann Oct 29, 2020

waychal Nov 3, 2020

kilchenmann commented Nov 3, 2020

tobiasschweizer Nov 19, 2020

tobiasschweizer Nov 20, 2020 •

edited

Loading

tobiasschweizer Nov 19, 2020

tobiasschweizer Nov 19, 2020

tobiasschweizer Nov 19, 2020

tobiasschweizer Nov 19, 2020

waychal commented Nov 23, 2020

tobiasschweizer commented Nov 24, 2020

tobiasschweizer commented Nov 24, 2020 •

edited

Loading

waychal commented Nov 24, 2020

	ngOnInit() {
	// initialize form control elements
	this.valueFormControl = new FormControl(null);

	this.commentFormControl = new FormControl(null);

	// subscribe to any change on the comment and recheck validity
	this.valueChangesSubscription = this.commentFormControl.valueChanges.subscribe(
	data => {
	this.valueFormControl.updateValueAndValidity();
	}
	);

	this.form = this._fb.group({
	intValue: this.valueFormControl,
	comment: this.commentFormControl
	});

DSP-869 add select project component #213

DSP-869 add select project component #213

Conversation

waychal commented Oct 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kilchenmann commented Nov 3, 2020

Choose a reason for hiding this comment

tobiasschweizer Nov 20, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

waychal commented Nov 23, 2020

tobiasschweizer commented Nov 24, 2020

tobiasschweizer commented Nov 24, 2020 • edited Loading

waychal commented Nov 24, 2020

waychal commented Oct 28, 2020 •

edited

Loading

tobiasschweizer Nov 20, 2020 •

edited

Loading

tobiasschweizer commented Nov 24, 2020 •

edited

Loading