dev #12401

правки и доработки страницы 'заполнить анкету'
2022-09-13 13:11:41 +04:00 · 2022-09-13 13:11:41 +04:00 · af33ed31c7
commit af33ed31c7
parent bbbab27023
7 changed files with 200 additions and 56 deletions
--- a/src/app/pages/account/bonus-program/bonus-program.component.scss
+++ b/src/app/pages/account/bonus-program/bonus-program.component.scss
@ -51,7 +51,7 @@

      &__decorative-pattern {
        height: 122px;
-        background-color: #B8DEFF;
+        background-color: #fff;
        // padding-top: 9px;
        display: flex;
        justify-content: center;
@ -61,7 +61,7 @@
        }

        // .imgs-row {
-        //   background: url("../../../../assets/card-decorative-pattern.png") repeat-x;
+        //   background: url("./assets/card-decorative-pattern.png") repeat-x;
        //   height: 32%;
        // }
      }
@ -135,10 +135,10 @@
        background-size: cover;
      }

-      &__front {
-        transform: rotateY(0deg);
-        background-image: url(../../../../assets/background.svg);
-      }
+      // &__front {
+      //   transform: rotateY(0deg);
+      //   background-image: url(./assets/background.svg);
+      // }

      &__back {
        position: absolute;
--- a/src/app/pages/account/bonus-program/bonus-program.component.ts
+++ b/src/app/pages/account/bonus-program/bonus-program.component.ts
@ -49,7 +49,6 @@ export class BonusProgramComponent implements OnInit {
    .options({font: "OCR-B"}) // Will affect all barcodes
    .EAN13(`${this.accountData.CardNumber}`.padStart(12, "0"), {fontSize: 18, textMargin: 0})
    .render();
-    console.log(this.accountData)
    this.loadingBonuses = false;
    const transactions: Transaction[] = (await lastValueFrom(
      this.jsonrpc.rpc(
--- a/src/app/pages/account/user-data/user-data.component.html
+++ b/src/app/pages/account/user-data/user-data.component.html
@ -1,33 +1,87 @@
-<form class="woocommerce-form woocommerce-form-login login" action="false" (ngSubmit)="saveData()"
-    [formGroup]="userDataFormGroup">
-    <h2>Личные данные</h2>
-    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
-        <label for="phone">Заполните поля анкеты</label>
-        <input formControlName="name" pInputText type="text"
-            class="woocommerce-Input woocommerce-Input--text input-text" name="name" id="name" placeholder="Имя" />
-    </p>
-    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
-        <input formControlName="birthdate" pInputText type="text"
-            class="woocommerce-Input woocommerce-Input--text input-text" name="birthdate" id="birthdate"
-            placeholder="Дата рождения (00.00.00)" />
-    </p>
-    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
-        <select formControlName="gender" name="gender" id="gender" required>
-            <option value="" disabled selected>Выберите пол</option>
-            <option value="Мужской">Мужской</option>
-            <option value="Женский">Женский</option>
-        </select>
-    </p>
-    <p class="form-row" style="margin-bottom: 6px;">
-        <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="save"
-            value="Сохранить" [disabled]="false">
-            Сохранить
-        </button>
-    </p>
-    <span class="policy">Нажимая кнопку, Вы соглашаетесь с Политикой
-        обработки персональных данных.</span>
-    <div class="decoration-pattern">
-        <img style="height: 34px;" src="../../../../assets/card-decorative-pattern.svg" alt="">
-        <img style="height: 16px; margin-left: 2px;" src="../../../../assets/card-decorative-pattern.svg" alt="">
-    </div>
-</form>
+<form
+  class="woocommerce-form woocommerce-form-login login"
+  action="false"
+  (ngSubmit)="saveData()"
+  [formGroup]="userDataFormGroup"
+>
+  <h2>Личные данные</h2>
+  <p
+    class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
+  >
+    <label for="phone">Заполните поля анкеты</label>
+    <input
+      formControlName="first_name"
+      pInputText
+      type="text"
+      class="woocommerce-Input woocommerce-Input--text input-text"
+      name="first_name"
+      id="first_name"
+      placeholder="Имя"
+    />
+  </p>
+  <p
+    class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
+  >
+    <!-- <p-inputMask
+      type="text"
+      class="woocommerce-Input woocommerce-Input--text"
+      name="birthdate"
+      inputId="birthdate"
+      placeholder="Дата рождения (00.00.00)"
+      mask="99.99.99"
+      [styleClass]="datevalid ? '' : 'invalid'"
+      [(ngModel)]="birthdate"
+      [ngModelOptions]="{standalone: true}"
+    ></p-inputMask> -->
+    <input
+      type="date"
+      formControlName="birthdate"
+      class="woocommerce-Input woocommerce-Input--text input-text"
+      pInputText
+      name="birthdate"
+      id="birthdate"
+      placeholder="Дата рождения"
+    />
+  </p>
+  <p
+    class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
+  >
+    <span class="select-wrapper" [ngClass]="{
+      'select-wrapper': true,
+      'hidden': userDataFormGroup.value.gender.length
+    }">
+      <select formControlName="gender" name="gender" id="gender" required>
+        <!-- <option hidden value="" disabled selected>Выберите пол</option> -->
+        <option value="Мужской">Мужской</option>
+        <option value="Женский">Женский</option>
+      </select>
+    </span>
+  </p>
+  <p class="form-row" style="margin-bottom: 6px">
+    <button
+      type="submit"
+      class="woocommerce-button button woocommerce-form-login__submit"
+      name="save"
+      value="Сохранить"
+      [disabled]="false"
+    >
+      Сохранить
+    </button>
+  </p>
+  <span class="policy"
+    >Нажимая кнопку, Вы соглашаетесь с Политикой обработки персональных
+    данных.</span
+  >
+  <div class="decoration-pattern">
+    <img
+      style="height: 34px"
+      src="./assets/card-decorative-pattern.svg"
+      alt=""
+    />
+    <img
+      style="height: 16px; margin-left: 2px"
+      src="./assets/card-decorative-pattern.svg"
+      alt=""
+    />
+  </div>
+</form>
--- a/src/app/pages/account/user-data/user-data.component.scss
+++ b/src/app/pages/account/user-data/user-data.component.scss
@ -83,14 +83,22 @@
                "Segoe UI Symbol";
            font-size: 1rem;
            color: #495057;
-            background: #ffffff;
            padding: 0.5rem 0.75rem;
-            border: 1px solid #ced4da;
            transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
            -webkit-appearance: none;
            appearance: none;
            border-radius: 4px;
            width: 100%;
+            height: 45px;
+            background: #FFFFFF;
+            border: 1px solid #B8DEFF;
+            border-radius: 15px;
+            &.ng-dirty.ng-invalid {
+                border-color: red;
+            }
+            &.ng-invalid.ng-touched {
+                border-color: red;
+            }
        }

        select {
@ -101,13 +109,23 @@
            height: 45px;
            padding: 0 10px;

-            option[value=""][disabled] {
-                display: none;
+            // option[value=""][disabled] {
+            //     display: none;
+            // }
+            &.ng-dirty.ng-invalid {
+                border-color: red;
+            }
+            &.ng-invalid.ng-touched {
+                border-color: red;
+            }
+            &::before {
+                content: 'jgbfgb';
+                color: red;
            }
        }

        select:required:invalid {
-            color: #7D7D7D;
+            color: #6c757d;
        }
    }

@ -124,8 +142,38 @@
    .decoration-pattern {
        margin-top: 12px;
        display: flex;
-        align-items: end;
+        align-items: flex-end;
        margin-left: 0;
        width: 92%;
    }
+
+    input[type="date"]::before { 
+    	content: attr(placeholder);
+    	width: 100%;
+        color: #6c757d;
+    }
+
+    input[type="date"]:focus::before,
+    input[type="date"].ng-valid::before {
+        display: none;
+    }
+
+    .select-wrapper {
+        position: relative;
+        &::before {
+            content: 'Выберете пол';
+            top: 0;
+            position: absolute;
+            left: 12px;
+        }
+        &.hidden::before {
+            display: none;
+        }
+    }
+    
+    /* hide our custom/fake placeholder text when in focus to show the default
+     * 'mm/dd/yyyy' value and when valid to show the users' date of birth value.
+     */
+    // input[type="date"]:focus::before,
+    // input[type="date"]:valid::before { display: none }
 }
--- a/src/app/pages/account/user-data/user-data.component.ts
+++ b/src/app/pages/account/user-data/user-data.component.ts
@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { MessageService } from 'primeng/api';
 import { UserDataForm } from 'src/app/interface/data';
+import { JsonrpcService, RpcService } from 'src/app/services/jsonrpc.service';

@Component({
  selector: 'app-user-data',
@ -10,25 +12,66 @@ import { UserDataForm } from 'src/app/interface/data';
 export class UserDataComponent implements OnInit {
  public userDataFormGroup!: FormGroup;
  public userData: UserDataForm = {
-    name: '',
+    first_name: '',
    birthdate: '',
    gender: '',
  }


-  constructor() { }
+  constructor(
+    private jsonRpcService: JsonrpcService,
+    private messageService: MessageService,
+  ) { }

  ngOnInit(): void {
+    this.createUserDataForm({...this.userData})
+    this.jsonRpcService.rpc({
+      method: 'getAdditionalInfo',
+      params: []
+    }, RpcService.authService, true).subscribe({
+      next: (res) => {
+        const { first_name, birthdate, gender } = res.data
+        this.userData = { first_name, birthdate, gender }
+        this.createUserDataForm({...this.userData})
+      },
+      error: (err) => {
+        console.error('Error: ', err)
+      }
+    });
+
+  }
+
+  createUserDataForm(val: UserDataForm) {
    this.userDataFormGroup = new FormGroup({
-      name: new FormControl('', [Validators.required, Validators.minLength(2)]),
-      birthdate: new FormControl('', [Validators.required]),
-      gender: new FormControl('', [Validators.required]),
+      first_name: new FormControl(val.first_name, [Validators.required, Validators.minLength(2)]),
+      birthdate: new FormControl(val.birthdate, [Validators.required]),
+      gender: new FormControl(val.gender ? val.gender : '', [Validators.required]),
    })
  }

  saveData() {
+    if (this.userDataFormGroup.invalid) {
+      this.markFormGroupTouched(this.userDataFormGroup)
+      return
+    }
    this.userData = this.userDataFormGroup.value as UserDataForm
-    console.log('####: ', this.userData)
+    this.jsonRpcService.rpc({
+      method: 'updateAdditionalInfo',
+      params: [this.userData]
+    }, RpcService.authService, true).subscribe({
+      next: () => {
+        this.messageService.add({severity:'custom', summary:'Данные успешно обновлены!'});
+      },
+      error: (err) => {
+        console.error('Error: ', err)
+        this.messageService.add({severity:'error', summary:'Произошла ошибка, попробуйте позже'});        
+      }
+    })
  }

+  markFormGroupTouched(formGroup: FormGroup) {
+    (<any>Object).values(formGroup.controls).forEach((control: FormControl) => {
+      control.markAsDirty();
+    });
+  }
 }
--- a/src/index.html
+++ b/src/index.html
@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html lang="ru">
 <head>
  <meta charset="utf-8">
-  <title>CardProject</title>
+  <title>Fashion logica</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="apple-touch-icon" href="./assets/icons/apple-icon-180x180.png">
--- a/src/manifest.webmanifest
+++ b/src/manifest.webmanifest
@ -1,6 +1,6 @@
 {
-  "name": "card-project",
-  "short_name": "card-project",
+  "name": "fashion-logica",
+  "short_name": "fashion-logica",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",