feat(docs): need split examples of validation (#UIM-543) (#543)

* feat(docs): need split examples of validation (#UIM-543) WIP * fixed navigation * fixed after UX review * added one more example for composite form
positive-js · Dec 3, 2020 · a96e612 · a96e612
1 parent 8a7b20c
commit a96e612
Show file tree

Hide file tree

Showing 21 changed files with 522 additions and 270 deletions.
diff --git a/packages/mosaic-examples/mosaic/validation/module.ts b/packages/mosaic-examples/mosaic/validation/module.ts
@@ -9,9 +9,12 @@ import { McSelectModule } from '@ptsecurity/mosaic/select';
 import { McTextareaModule } from '@ptsecurity/mosaic/textarea';
 import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
 
-import {
-    ValidationOverviewExample
-} from './validation-overview/validation-overview-example';
+import { ValidationCompositeExample } from './validation-composite/validation-composite-example';
+import { ValidationGlobalExample } from './validation-global/validation-global-example';
+import { ValidationOnBlurExample } from './validation-on-blur/validation-on-blur-example';
+import { ValidationOnTypeExample } from './validation-on-type/validation-on-type-example';
+import { ValidationOverviewExample } from './validation-overview/validation-overview-example';
+import { ValidationSmallExample } from './validation-small/validation-small-example';
 
 
 @NgModule({
@@ -27,7 +30,21 @@ import {
         McButtonModule,
         McTextareaModule
     ],
-    declarations: [ValidationOverviewExample],
-    exports: [ValidationOverviewExample]
+    declarations: [
+        ValidationOverviewExample,
+        ValidationCompositeExample,
+        ValidationGlobalExample,
+        ValidationOnBlurExample,
+        ValidationOnTypeExample,
+        ValidationSmallExample
+    ],
+    exports: [
+        ValidationOverviewExample,
+        ValidationCompositeExample,
+        ValidationGlobalExample,
+        ValidationOnBlurExample,
+        ValidationOnTypeExample,
+        ValidationSmallExample
+    ]
 })
 export class ValidationExamplesModule {}
diff --git a/...s/mosaic-examples/mosaic/validation/validation-composite/validation-composite-example.css b/...s/mosaic-examples/mosaic/validation/validation-composite/validation-composite-example.css
@@ -0,0 +1,30 @@
+.docs-form {
+    color: #999999
+}
+
+.docs-label {
+    margin-bottom: 4px;
+}
+
+.docs-hint {
+    color: #E76E5C;
+}
+
+.docs-composite-form {
+    width: 600px;
+
+    margin-bottom: 40px;
+}
+
+.docs-column {
+    width: 200px;
+    margin-right: 16px;
+}
+
+.layout-row {
+    margin-bottom: 4px;
+}
+
+.validation-error {
+    background-color: #FCEFEC;
+}
diff --git a/.../mosaic-examples/mosaic/validation/validation-composite/validation-composite-example.html b/.../mosaic-examples/mosaic/validation/validation-composite/validation-composite-example.html
@@ -0,0 +1,60 @@
+Проверка во время ввода значения
+<div class="layout-margin docs-composite-form" [class.validation-error]="compositeFormWithOnTypeChecking.errors?.range">
+    <form class="docs-form" [formGroup]="compositeFormWithOnTypeChecking" novalidate>
+        <div class="layout-row">
+            <div class="docs-column">
+                <div class="docs-label">Начало диапазона</div>
+                <mc-form-field
+                    mcTooltip
+                    [mcTitle]="'Только цифры и точки'"
+                    [mcMouseEnterDelay]="10"
+                    #startTooltip="mcTooltip"
+                    mcTrigger="manual"
+                    mcPlacement="bottom">
+                    <input mcInput formControlName="start" (input)="onInputStart($event)">
+                </mc-form-field>
+            </div>
+
+            <div class="docs-column">
+                <div class="docs-label">Окончание</div>
+                <mc-form-field
+                    mcTooltip
+                    [mcTitle]="'Только цифры и точки'"
+                    [mcMouseEnterDelay]="10"
+                    #endTooltip="mcTooltip"
+                    mcTrigger="manual"
+                    mcPlacement="bottom">
+                    <input mcInput formControlName="end" (input)="onInputEnd($event)">
+                </mc-form-field>
+            </div>
+        </div>
+
+        <mc-hint class="mc-caption docs-hint" *ngIf="compositeFormWithOnTypeChecking.errors?.range">IP-адрес окончания диапазона должен быть больше, чем IP-адрес начала</mc-hint>
+    </form>
+</div>
+
+
+Проверка по уходу с поля
+<div class="layout-margin docs-composite-form" [class.validation-error]="compositeFormWithOnBlurChecking.errors?.range">
+    <form class="docs-form" [formGroup]="compositeFormWithOnBlurChecking" novalidate>
+        <div class="layout-row">
+            <div class="docs-column">
+                <div class="docs-label">Начало диапазона</div>
+                <mc-form-field>
+                    <input mcInput formControlName="start">
+                    <mc-hint class="mc-caption docs-hint" *ngIf="compositeFormWithOnBlurChecking.controls.start.invalid">IP-адрес не соответствует стандартам RFC</mc-hint>
+                </mc-form-field>
+            </div>
+
+            <div class="docs-column">
+                <div class="docs-label">Окончание</div>
+                <mc-form-field>
+                    <input mcInput formControlName="end">
+                    <mc-hint class="mc-caption docs-hint" *ngIf="compositeFormWithOnBlurChecking.controls.end.invalid">IP-адрес не соответствует стандартам RFC</mc-hint>
+                </mc-form-field>
+            </div>
+        </div>
+
+        <mc-hint class="mc-caption docs-hint" *ngIf="compositeFormWithOnBlurChecking.errors?.range">IP-адрес окончания диапазона должен быть больше, чем IP-адрес начала</mc-hint>
+    </form>
+</div>
diff --git a/...es/mosaic-examples/mosaic/validation/validation-composite/validation-composite-example.ts b/...es/mosaic-examples/mosaic/validation/validation-composite/validation-composite-example.ts
@@ -0,0 +1,82 @@
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+
+function compositeFormValidator(): ValidatorFn {
+    return (g: AbstractControl | FormGroup): ValidationErrors | null => {
+        const start = g.get('start')?.value;
+        const end = g.get('end')?.value;
+
+        if (IP_PATTERN.test(start) && IP_PATTERN.test(end)) {
+            const parsedStartIp = start.split('.').map((octet) => parseInt(octet, 10));
+            const parsedEndIp = end.split('.').map((octet) => parseInt(octet, 10));
+
+            for (let i = 0; i < parsedStartIp.length; i++) {
+                if (parsedStartIp[i] > parsedEndIp[i]) { return { range: true }; }
+            }
+        }
+
+        return null;
+    };
+}
+
+const IP_PATTERN = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
+
+/**
+ * @title validation-composite
+ */
+@Component({
+    selector: 'validation-composite-example',
+    templateUrl: 'validation-composite-example.html',
+    styleUrls: ['validation-composite-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ValidationCompositeExample {
+    compositeFormWithOnTypeChecking: FormGroup;
+    compositeFormWithOnBlurChecking: FormGroup;
+
+    @ViewChild('startTooltip', { static: false }) startTooltip: any;
+    @ViewChild('endTooltip', { static: false }) endTooltip: any;
+
+    constructor() {
+        this.compositeFormWithOnTypeChecking = new FormGroup({
+            start: new FormControl('', [Validators.pattern(IP_PATTERN)]),
+            end: new FormControl('', [Validators.pattern(IP_PATTERN)])
+        }, compositeFormValidator());
+
+        this.compositeFormWithOnBlurChecking = new FormGroup({
+            start: new FormControl('', [Validators.pattern(IP_PATTERN)]),
+            end: new FormControl('', [Validators.pattern(IP_PATTERN)])
+        }, compositeFormValidator());
+    }
+
+    onInputStart(event) {
+        const regex = /^[\d\.]+$/g;
+
+        if (!regex.test(event.target.value)) {
+            event.target.value = event.target.value.replace(/\D+/g, '');
+
+            if (!this.startTooltip.isTooltipOpen) {
+                this.startTooltip.show();
+
+                // tslint:disable-next-line:no-magic-numbers
+                setTimeout(() => this.startTooltip.hide(), 3000);
+            }
+        }
+    }
+
+    onInputEnd(event) {
+        const regex = /^[\d\.]+$/g;
+
+        if (!regex.test(event.target.value)) {
+            event.target.value = event.target.value.replace(/\D+/g, '');
+
+            if (!this.endTooltip.isTooltipOpen) {
+                this.endTooltip.show();
+
+                // tslint:disable-next-line:no-magic-numbers
+                setTimeout(() => this.endTooltip.hide(), 3000);
+            }
+        }
+    }
+}
diff --git a/packages/mosaic-examples/mosaic/validation/validation-global/validation-global-example.css b/packages/mosaic-examples/mosaic/validation/validation-global/validation-global-example.css
@@ -0,0 +1,15 @@
+.docs-form {
+    color: #999999
+}
+
+.docs-row {
+    margin-bottom: 16px;
+}
+
+.docs-label {
+    margin-bottom: 4px;
+}
+
+.docs-width {
+    width: 400px;
+}
diff --git a/packages/mosaic-examples/mosaic/validation/validation-global/validation-global-example.html b/packages/mosaic-examples/mosaic/validation/validation-global/validation-global-example.html
@@ -0,0 +1,34 @@
+<div class="layout-margin docs-width">
+    <div class="mc-alert mc-alert_error" *ngIf="showServerErrors">
+        <i mc-icon="mc-info_16" color="error" class="mc-alert__icon"></i>
+        <div>
+            <div><b>Не удается получить ответ от сервера</b></div>
+            При попытке отправить данные сервер не ответил, попробуйте снова
+        </div>
+    </div>
+
+    <form class="docs-form" [formGroup]="globalErrorForm" (ngSubmit)="submitGlobalErrorForm()" novalidate>
+        <div class="docs-row">
+            <div class="docs-label">Имя</div>
+            <mc-form-field>
+                <input mcInput formControlName="firstName">
+            </mc-form-field>
+        </div>
+
+        <div class="docs-row">
+            <div class="docs-label">Фамилия</div>
+            <mc-form-field>
+                <input mcInput formControlName="lastName">
+            </mc-form-field>
+        </div>
+
+        <button
+            mc-button
+            color="primary"
+            type="submit"
+            [class.mc-progress]="inProgress"
+            [disabled]="inProgress">
+            Отправить
+        </button>
+    </form>
+</div>
diff --git a/packages/mosaic-examples/mosaic/validation/validation-global/validation-global-example.ts b/packages/mosaic-examples/mosaic/validation/validation-global/validation-global-example.ts
@@ -0,0 +1,37 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+
+/**
+ * @title validation-global
+ */
+@Component({
+    selector: 'validation-global-example',
+    templateUrl: 'validation-global-example.html',
+    styleUrls: ['validation-global-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ValidationGlobalExample {
+    globalErrorForm: FormGroup;
+    showServerErrors: boolean = false;
+    inProgress: boolean = false;
+
+    constructor() {
+        this.globalErrorForm = new FormGroup({
+            firstName: new FormControl(''),
+            lastName: new FormControl(''),
+            thirdName: new FormControl('')
+        });
+    }
+
+    submitGlobalErrorForm() {
+        this.showServerErrors = false;
+        this.inProgress = true;
+
+        setTimeout(() => {
+            this.showServerErrors = true;
+            this.inProgress = false;
+            // tslint:disable-next-line:no-magic-numbers
+        }, 1000);
+    }
+}
diff --git a/packages/mosaic-examples/mosaic/validation/validation-on-blur/validation-on-blur-example.css b/packages/mosaic-examples/mosaic/validation/validation-on-blur/validation-on-blur-example.css
@@ -0,0 +1,15 @@
+.docs-row {
+    margin-bottom: 16px;
+}
+
+.docs-label {
+    margin-bottom: 4px;
+}
+
+.docs-width {
+    width: 400px;
+}
+
+.docs-hint {
+    color: #E76E5C;
+}
diff --git a/...ages/mosaic-examples/mosaic/validation/validation-on-blur/validation-on-blur-example.html b/...ages/mosaic-examples/mosaic/validation/validation-on-blur/validation-on-blur-example.html
@@ -0,0 +1,9 @@
+<div class="layout-margin docs-width">
+    <div class="docs-row">
+        <div class="docs-label">IP-адрес</div>
+        <mc-form-field>
+            <input mcInput [formControl]="ipAddress">
+            <mc-hint class="mc-caption docs-hint" *ngIf="ipAddress.invalid">IP-адрес не соответствует стандартам RFC</mc-hint>
+        </mc-form-field>
+    </div>
+</div>
diff --git a/packages/mosaic-examples/mosaic/validation/validation-on-blur/validation-on-blur-example.ts b/packages/mosaic-examples/mosaic/validation/validation-on-blur/validation-on-blur-example.ts
@@ -0,0 +1,22 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+
+const IP_PATTERN = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
+
+/**
+ * @title validation-on-blur
+ */
+@Component({
+    selector: 'validation-on-blur-example',
+    templateUrl: 'validation-on-blur-example.html',
+    styleUrls: ['validation-on-blur-example.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class ValidationOnBlurExample {
+    ipAddress: FormControl;
+
+    constructor() {
+        this.ipAddress = new FormControl('', [Validators.pattern(IP_PATTERN)]);
+    }
+}
diff --git a/packages/mosaic-examples/mosaic/validation/validation-on-type/validation-on-type-example.css b/packages/mosaic-examples/mosaic/validation/validation-on-type/validation-on-type-example.css
@@ -0,0 +1,15 @@
+.docs-form {
+    color: #999999
+}
+
+.docs-row {
+    margin-bottom: 16px;
+}
+
+.docs-label {
+    margin-bottom: 4px;
+}
+
+.docs-width {
+    width: 400px;
+}
diff --git a/...ages/mosaic-examples/mosaic/validation/validation-on-type/validation-on-type-example.html b/...ages/mosaic-examples/mosaic/validation/validation-on-type/validation-on-type-example.html
@@ -0,0 +1,16 @@
+<div class="layout-margin docs-width">
+    <form class="docs-form" [formGroup]="checkOnFlyForm" novalidate>
+        <div class="docs-row">
+            <div class="docs-label">Название папки</div>
+            <mc-form-field
+                mcTooltip
+                [mcTitle]="'Только цифры'"
+                [mcMouseEnterDelay]="10"
+                #tooltip="mcTooltip"
+                mcTrigger="manual"
+                mcPlacement="bottom">
+                <input mcInput formControlName="folderName" (input)="onInput($event)">
+            </mc-form-field>
+        </div>
+    </form>
+</div>