[NAE-1907] - Prompt user before leaving/reloading site when data does not need to be saved #208

camperko · 2023-07-07T10:42:25Z

Description

prompt user with dialog when leaving/reloading site and focus is still in input of field (text/number/i18n)
if user decide to stay on site, blur input field so data is saved

Implements NAE-1907

Dependencies

No new dependencies were introduced.

Third party dependencies

No new dependencies were introduced.

Blocking Pull requests

There are no dependencies on other PR

How Has Been This Tested?

This was tested manually

Test Configuration

Name	Tested on
OS	Linux Mint 21
Runtime	Node 18.12.1
Dependency Manager	npm 8.19.2
Framework version	Angular 13.3.1
Run parameters
Other configuration

Checklist:

…ot need to be saved - prompt user with dialog when leaving/reloading site and focus is still in input of field (text/number/i18n) - if user decide to stay on site, blur input field so data is saved

pull-request-quantifier-deprecated · 2023-07-07T10:42:34Z

This PR has 118 quantified lines of changes. In general, a change size of upto 200 lines is ideal for the best PR experience!

Quantification details

Label      : Medium
Size       : +90 -28
Percentile : 43.6%

Total files changed: 20

Change summary by file extension:
.ts : +69 -20
.html : +21 -8

Change counts above are quantified counts, based on the PullRequestQuantifier customizations.

Why proper sizing of changes matters

Optimal pull request sizes drive a better predictable PR flow as they strike a
balance between between PR complexity and PR review overhead. PRs within the
optimal size (typical small, or medium sized PRs) mean:

Fast and predictable releases to production:
- Optimal size changes are more likely to be reviewed faster with fewer
  iterations.
- Similarity in low PR complexity drives similar review times.
Review quality is likely higher as complexity is lower:
- Bugs are more likely to be detected.
- Code inconsistencies are more likely to be detected.
Knowledge sharing is improved within the participants:
- Small portions can be assimilated better.
Better engineering practices are exercised:
- Solving big problems by dividing them in well contained, smaller problems.
- Exercising separation of concerns within the code changes.

What can I do to optimize my changes

Use the PullRequestQuantifier to quantify your PR accurately
- Create a context profile for your repo using the context generator
- Exclude files that are not necessary to be reviewed or do not increase the review complexity. Example: Autogenerated code, docs, project IDE setting files, binaries, etc. Check out the Excluded section from your prquantifier.yaml context profile.
- Understand your typical change complexity, drive towards the desired complexity by adjusting the label mapping in your prquantifier.yaml context profile.
- Only use the labels that matter to you, see context specification to customize your prquantifier.yaml context profile.
Change your engineering behaviors
- For PRs that fall outside of the desired spectrum, review the details and check if:
  - Your PR could be split in smaller, self-contained PRs instead
  - Your PR only solves one particular issue. (For example, don't refactor and code new features in the same PR).

How to interpret the change counts in git diff output

One line was added: +1 -0
One line was deleted: +0 -1
One line was modified: +1 -1 (git diff doesn't know about modified, it will
interpret that line like one addition plus one deletion)
Change percentiles: Change characteristics (addition, deletion, modification)
of this PR in relation to all other PRs within the repository.

Was this comment helpful? 👍 :ok_hand: :thumbsdown: (Email)
Customize PullRequestQuantifier for this repository.

sonarcloud · 2023-07-07T10:55:35Z

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

43.3% Coverage
0.0% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

Kovy95 · 2023-10-30T13:51:56Z

.../src/lib/data-fields/number-field/number-currency-field/number-currency-field.component.html

@@ -8,7 +8,9 @@
           [placeholder]="numberField.placeholder"
           [required]="numberField.behavior.required"
           (focusout)="onFocusOut($event)"
-           (focusin)="onFocusIn()">
+           (focusin)="onFocusIn()"


working correctly ? because there are assigned two different functions two times, isn't it better to assigned it like (focusin)="onFocusIn();numberField.setFocus()" ?

Consider to use dedicated function for multiple functions call on output event.

Kovy95 · 2023-10-30T13:52:51Z

.../lib/data-fields/text-field/rich-textarea-field/easymde-wrapper/easymde-wrapper.component.ts

@@ -62,6 +62,8 @@ export class EasymdeWrapperComponent implements OnDestroy, AfterViewInit, Contro
        this._easyMDE = new EasyMDE(this.options);
        this._easyMDE.value(this.textAreaField.value);
        this._easyMDE.codemirror.on('change', this._onChange);
+        this._easyMDE.codemirror.on('focus', () => this.textAreaField.setFocus());
+        this._easyMDE.codemirror.on('blur', () => this.textAreaField.unsetFocus());


it was tested ? is it working ?

renczesstefan · 2024-05-20T10:01:05Z

.../src/lib/data-fields/number-field/number-currency-field/number-currency-field.component.html

@@ -8,7 +8,9 @@
           [placeholder]="numberField.placeholder"
           [required]="numberField.behavior.required"
           (focusout)="onFocusOut($event)"
-           (focusin)="onFocusIn()">
+           (focusin)="onFocusIn()"


Consider to use dedicated function for multiple functions call on output event.

renczesstefan · 2024-05-20T10:01:19Z

...rif-components/src/lib/data-fields/i18n-field/i18n-text-field/i18n-text-field.component.html

@@ -50,7 +50,8 @@
                   [placeholder]="textI18nField.placeholder ? textI18nField.placeholder : ''"
                   [required]="textI18nField.behavior.required"
                   [(ngModel)]="currentValue[selectedLanguage]"
-                   (blur)="setSelectedValue()">
+                   (focusout)="setSelectedValue(); textI18nField.unsetFocus()"


Consider to use dedicated function for multiple functions call on output event.

# Conflicts: # projects/nae-example-app/src/app/app.module.ts # projects/netgrif-components-core/src/lib/data-fields/models/abstract-data-field.ts # projects/netgrif-components-core/src/lib/data-fields/text-field/textarea-field/abstract-textarea-field.component.ts # projects/netgrif-components/src/lib/data-fields/number-field/number-currency-field/number-currency-field.component.html # projects/netgrif-components/src/lib/data-fields/number-field/number-default-field/number-default-field.component.html # projects/netgrif-components/src/lib/data-fields/text-field/html-textarea-field/html-textarea-field.component.html # projects/netgrif-components/src/lib/data-fields/text-field/simple-text-field/simple-text-field.component.html # projects/netgrif-components/src/lib/data-fields/text-field/text-field.component.ts # projects/netgrif-components/src/lib/data-fields/text-field/textarea-field/textarea-field.component.html

- updated to 6.4.0

minop · 2024-05-22T08:11:15Z

...rif-components-core/src/lib/data-fields/base-component/abstract-base-data-field.component.ts


-    constructor(@Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<T>) {
+    constructor(@Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<T>,
+                @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean | null = false) {


as far as I know, setting default value for an @Optional injector does not work as desired.
null is a falsy value, so it still works as intended.

Yes, if there is no such injection token provided, it will be considered as null, which will indicate falsy value, but I think, the default value is used because of without that it would be needed to add the @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean to constructors of every subclass of AbstractBaseDataFieldComponent

minop · 2024-05-22T08:15:05Z

...cts/netgrif-components-core/src/lib/data-fields/i18n-field/abstract-i18n-errors.component.ts

-                          @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<I18nField>) {
-        super(dataFieldPortalData);
+                          @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<I18nField>,
+                          @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean | null = false) {


I believe the default value (even if it doesn't work) should be provided only at the class that introduces the dependency (AbstractBaseDataFieldComponent in this case)

minop · 2024-05-22T08:15:24Z

...ects/netgrif-components-core/src/lib/data-fields/i18n-field/abstract-i18n-field.component.ts

-    constructor(@Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null) {
-        super(informAboutInvalidData);
+    constructor(@Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null,
+                @Optional() @Inject(NAE_SAVE_DATA_INFORM) saveDataInform: boolean | null = false) {


default value in inheritance chain

minop · 2024-05-22T08:15:35Z

...ts-core/src/lib/data-fields/i18n-field/i18n-text-field/abstract-i18n-text-field.component.ts

-                          @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<I18nField>) {
-        super(languageIconsService, _translateService, dataFieldPortalData);
+                          @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<I18nField>,
+                          @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean | null = false) {


default value in inheritance chain

minop · 2024-05-22T08:16:41Z

projects/netgrif-components-core/src/lib/data-fields/models/abstract-data-field-component.ts

+    }
+
+    protected constructor(@Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) protected _informAboutInvalidData: boolean | null,
+                          @Optional() @Inject(NAE_SAVE_DATA_INFORM) protected _saveDataInform: boolean | null = false) {


default value doesn't work

minop · 2024-05-22T08:27:56Z

...mponents/src/lib/data-fields/text-field/signature-pad-field/signature-pad-field.component.ts

-                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<TextAreaField>) {
-        super(_translate, dataFieldPortalData);
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<TextAreaField>,
+                @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean | null = false) {


default value in inheritance chain

minop · 2024-05-22T08:28:12Z

...f-components/src/lib/data-fields/text-field/simple-text-field/simple-text-field.component.ts

-                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<TextField>) {
-        super(_translate, dataFieldPortalData);
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<TextField>,
+                @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean | null = false) {


default value in inheritance chain

minop · 2024-05-22T08:28:25Z

projects/netgrif-components/src/lib/data-fields/text-field/text-field.component.ts

+    textFieldComponentEnum = TextFieldComponentEnum;
+
+    constructor(@Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null,
+                @Optional() @Inject(NAE_SAVE_DATA_INFORM) saveDataInform: boolean | null) {


default value in inheritance chain

minop · 2024-05-22T08:29:31Z

...tgrif-components/src/lib/data-fields/text-field/textarea-field/textarea-field.component.html

@@ -7,11 +7,14 @@
              #textArea
              [placeholder]="dataField.placeholder"
              [required]="dataField.behavior.required"
-              [formControl]="formControlRef"
+              [(ngModel)]="dataField.value"


why? A lot of functionality (e.g. enabling/disabling) depends on the FormControl as far as I know.

I notice the hidden <input> on line 17. Does it work, when for example disabling the hidden field?

@camperko I think you can answer this.

minop · 2024-05-22T08:30:52Z

...netgrif-components/src/lib/data-fields/text-field/textarea-field/textarea-field.component.ts

-                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<TextAreaField>) {
-        super(_translate, _ngZone, dataFieldPortalData);
+                @Optional() @Inject(DATA_FIELD_PORTAL_DATA) dataFieldPortalData: DataFieldPortalData<TextAreaField>,
+                @Optional() @Inject(NAE_SAVE_DATA_INFORM) _saveDataInform: boolean | null = false) {


default value in inheritance chain

- updated according to PR

sonarcloud · 2024-05-22T09:08:03Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
53.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

sonarcloud · 2024-09-16T12:01:56Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
53.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

camperko added 2 commits July 3, 2023 09:35

Prompt user before leaving

c1440cf

[NAE-1907] Prompt user before leaving/reloading site when data does n…

f505217

…ot need to be saved - prompt user with dialog when leaving/reloading site and focus is still in input of field (text/number/i18n) - if user decide to stay on site, blur input field so data is saved

pull-request-quantifier-deprecated bot added the Medium label Jul 7, 2023

camperko changed the title ~~Nae 1907 - Prompt user before leaving/reloading site when data does not need to be saved~~ [NAE-1907] - Prompt user before leaving/reloading site when data does not need to be saved Jul 7, 2023

camperko self-assigned this Jul 7, 2023

camperko added improvement New feature or request new feature labels Jul 7, 2023

camperko requested review from tuplle, minop, renczesstefan and machacjozef July 7, 2023 10:43

Kovy95 requested changes Oct 30, 2023

View reviewed changes

renczesstefan requested changes May 20, 2024

View reviewed changes

renczesstefan added 2 commits May 20, 2024 16:23

[NAE-1907]

29baa10

- updated to 6.4.0

machacjozef requested review from renczesstefan and Kovy95 May 20, 2024 16:45

minop requested changes May 22, 2024

View reviewed changes

[NAE-1907]

36d78d8

- updated according to PR

Merge branch 'release/6.4.0' into NAE-1907

5c84d5a

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NAE-1907] - Prompt user before leaving/reloading site when data does not need to be saved #208

[NAE-1907] - Prompt user before leaving/reloading site when data does not need to be saved #208

camperko commented Jul 7, 2023 •

edited by martinkranec

Loading

pull-request-quantifier-deprecated bot commented Jul 7, 2023

What can I do to optimize my changes

How to interpret the change counts in git diff output

sonarcloud bot commented Jul 7, 2023

Kovy95 Oct 30, 2023

renczesstefan May 20, 2024

Kovy95 Oct 30, 2023

renczesstefan May 20, 2024

renczesstefan May 20, 2024

minop May 22, 2024

renczesstefan May 22, 2024

minop May 22, 2024

renczesstefan May 22, 2024

minop May 22, 2024

minop May 22, 2024

minop May 22, 2024

minop May 22, 2024

minop May 22, 2024

minop May 22, 2024

minop May 22, 2024

renczesstefan May 22, 2024

minop May 22, 2024

sonarcloud bot commented May 22, 2024

sonarcloud bot commented Sep 16, 2024

[NAE-1907] - Prompt user before leaving/reloading site when data does not need to be saved #208

Are you sure you want to change the base?

[NAE-1907] - Prompt user before leaving/reloading site when data does not need to be saved #208

Conversation

camperko commented Jul 7, 2023 • edited by martinkranec Loading

Description

Dependencies

Third party dependencies

Blocking Pull requests

How Has Been This Tested?

Test Configuration

Checklist:

pull-request-quantifier-deprecated bot commented Jul 7, 2023

What can I do to optimize my changes

How to interpret the change counts in git diff output

sonarcloud bot commented Jul 7, 2023

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

sonarcloud bot commented May 22, 2024

Quality Gate passed

sonarcloud bot commented Sep 16, 2024

Quality Gate passed

camperko commented Jul 7, 2023 •

edited by martinkranec

Loading