dev #12401

правки и доработки страницы 'заполнить анкету'

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 {
+      // &__front {
-        transform: rotateY(0deg);
+      //   transform: rotateY(0deg);
-        background-image: url(../../../../assets/background.svg);
+      //   background-image: url(./assets/background.svg);
-      }
+      // }
 
       &__back {
         position: absolute;

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(

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()"
+<form
-    [formGroup]="userDataFormGroup">
+  class="woocommerce-form woocommerce-form-login login"
-    <h2>Личные данные</h2>
+  action="false"
-    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
+  (ngSubmit)="saveData()"
-        <label for="phone">Заполните поля анкеты</label>
+  [formGroup]="userDataFormGroup"
-        <input formControlName="name" pInputText type="text"
+>
-            class="woocommerce-Input woocommerce-Input--text input-text" name="name" id="name" placeholder="Имя" />
+  <h2>Личные данные</h2>
-    </p>
+  <p
-    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
+    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"
+    <label for="phone">Заполните поля анкеты</label>
-            placeholder="Дата рождения (00.00.00)" />
+    <input
-    </p>
+      formControlName="first_name"
-    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
+      pInputText
-        <select formControlName="gender" name="gender" id="gender" required>
+      type="text"
-            <option value="" disabled selected>Выберите пол</option>
+      class="woocommerce-Input woocommerce-Input--text input-text"
-            <option value="Мужской">Мужской</option>
+      name="first_name"
-            <option value="Женский">Женский</option>
+      id="first_name"
-        </select>
+      placeholder="Имя"
-    </p>
+    />
-    <p class="form-row" style="margin-bottom: 6px;">
+  </p>
-        <button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="save"
+  <p
-            value="Сохранить" [disabled]="false">
+    class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
-            Сохранить
+  >
-        </button>
+    <!-- <p-inputMask
-    </p>
+      type="text"
-    <span class="policy">Нажимая кнопку, Вы соглашаетесь с Политикой
+      class="woocommerce-Input woocommerce-Input--text"
-        обработки персональных данных.</span>
+      name="birthdate"
-    <div class="decoration-pattern">
+      inputId="birthdate"
-        <img style="height: 34px;" src="../../../../assets/card-decorative-pattern.svg" alt="">
+      placeholder="Дата рождения (00.00.00)"
-        <img style="height: 16px; margin-left: 2px;" src="../../../../assets/card-decorative-pattern.svg" alt="">
+      mask="99.99.99"
-    </div>
+      [styleClass]="datevalid ? '' : 'invalid'"
-</form>
+      [(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>

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] {
+            // option[value=""][disabled] {
-                display: none;
+            //     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 }
 }

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)]),
+      first_name: new FormControl(val.first_name, [Validators.required, Validators.minLength(2)]),
-      birthdate: new FormControl('', [Validators.required]),
+      birthdate: new FormControl(val.birthdate, [Validators.required]),
-      gender: new FormControl('', [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();
+    });
+  }
 }

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">

src/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-  "name": "card-project",
+  "name": "fashion-logica",
-  "short_name": "card-project",
+  "short_name": "fashion-logica",
   "theme_color": "#1976d2",
   "background_color": "#fafafa",
   "display": "standalone",