Merge pull request #3919 from ita-social-projects/fix/ui-bugs

Fix/Mobile UI bugs and form handling issues

Author: ViktoriyaRyazhska

src/app/ubs/ubs-admin/components/ubs-admin-employee/ubs-admin-employee-edit-form/ubs-admin-employee-edit-form.component.spec.ts

@@ -202,7 +202,7 @@ describe('UbsAdminEmployeeEditFormComponent', () => {
     component.selectedFile = 'fake';
     component.removeImage();
 
-    expect(component.imageURL).toBe(null);
+    expect(component.imageURL).toBe(component.defaultPhotoURL);
     expect(component.imageName).toBe(null);
     expect(component.selectedFile).toBe(null);
   });
@@ -337,7 +337,7 @@ describe('UbsAdminEmployeeEditFormComponent', () => {
       component.imageName = 'my-image.jpg';
       component.selectedFile = new File([''], 'my-image.jpg');
       component.removeImage();
-      expect(component.imageURL).toBeNull();
+      expect(component.imageURL).toBe(component.defaultPhotoURL);
       expect(component.imageName).toBeNull();
       expect(component.selectedFile).toBeNull();
     });

src/app/ubs/ubs-admin/components/ubs-admin-employee/ubs-admin-employee-edit-form/ubs-admin-employee-edit-form.component.ts

@@ -241,13 +241,14 @@ export class UbsAdminEmployeeEditFormComponent implements OnInit, OnDestroy {
     return initialSorted.some((value, index) => value !== currentSorted[index]);
   }
 
-  async prepareEmployeeDataToSend(dto: string, image?: string | ArrayBuffer): Promise<FormData> {
+  async prepareEmployeeDataToSend(dto: string): Promise<FormData> {
     this.isUploading = true;
     const selectedTariffs = this.filteredTariffs.filter((it) => it.selected);
     this.employeeDataToSend = {
       employeeDto: {
         ...this.employeeForm.value,
-        employeePositionIds: this.employeePositionIds
+        employeePositionIds: this.employeePositionIds,
+        image: this.selectedFile ? undefined : this.imageURL
       },
       tariffs: selectedTariffs.map((tariff) => {
         return { tariffId: tariff.id, hasChat: tariff.hasChat };
@@ -256,16 +257,11 @@ export class UbsAdminEmployeeEditFormComponent implements OnInit, OnDestroy {
     if (this.isUpdatingEmployee) {
       this.employeeDataToSend.employeeDto.id = this.data.id;
     }
-    if (image) {
-      this.employeeDataToSend.employeeDto.image = image;
-    }
-    const formData: FormData = new FormData();
-    const stringifiedDataToSend = JSON.stringify(this.employeeDataToSend);
-    formData.append(dto, stringifiedDataToSend);
+    const formData = new FormData();
+    formData.append(dto, JSON.stringify(this.employeeDataToSend));
 
-    if (this.imageURL && this.imageURL !== this.defaultPhotoURL) {
-      const blob = await fetch(this.imageURL as string).then((res) => res.blob());
-      formData.append('image', blob, this.imageName);
+    if (this.selectedFile) {
+      formData.append('image', this.selectedFile, this.selectedFile.name);
     }
     return formData;
   }
@@ -284,14 +280,12 @@ export class UbsAdminEmployeeEditFormComponent implements OnInit, OnDestroy {
   }
 
   async updateEmployee(): Promise<void> {
-    const image = !this.selectedFile ? this.defaultPhotoURL : this.imageURL;
-    const dataToSend = await this.prepareEmployeeDataToSend('employee', image);
+    const dataToSend = await this.prepareEmployeeDataToSend('employee');
     this.store.dispatch(UpdateEmployee({ data: dataToSend, employee: this.employeeDataToSend }));
   }
 
   async createEmployee(): Promise<void> {
-    const image = !this.selectedFile ? this.defaultPhotoURL : this.imageURL;
-    const dataToSend = await this.prepareEmployeeDataToSend('employee', image);
+    const dataToSend = await this.prepareEmployeeDataToSend('employee');
     this.store.dispatch(AddEmployee({ data: dataToSend, employee: this.employeeDataToSend }));
   }
 
@@ -355,7 +349,7 @@ export class UbsAdminEmployeeEditFormComponent implements OnInit, OnDestroy {
   }
 
   removeImage() {
-    this.imageURL = null;
+    this.imageURL = this.defaultPhotoURL;
     this.imageName = null;
     this.selectedFile = null;
     if (this.editMode) {

src/app/ubs/ubs-user/components/ubs-user-order-details/ubs-user-order-details.component.scss

@@ -18,6 +18,12 @@
   .recipient {
     grid-column: 1 / -1;
   }
+
+  .recipient p {
+    overflow-wrap: break-word;  
+    word-break: normal; 
+    max-width: 800px;     
+  }
 }
 
 .table_of_details {

src/app/ubs/ubs/components/ubs-order-details/ubs-order-certificate/ubs-order-certificate.component.scss

@@ -86,6 +86,8 @@ small.text-message.ng-star-inserted {
 
 .radio-btn {
   margin-left: -6px;
+  display: flex;
+  flex-direction: column;
 }
 
 .checkmark {
@@ -126,7 +128,7 @@ small.text-message.ng-star-inserted {
 }
 
 .custom-radio-btn {
-  display: block;
+  display: flex;
   position: relative;
   padding-left: 28px;
   margin-bottom: 0;

src/app/ubs/ubs/components/ubs-order-details/ubs-order-details.component.html

@@ -96,6 +96,9 @@ <h5>{{ 'order-details.question-certificate' | translate }}</h5>
       <div class="bottom">
         <h3>{{ 'order-details.eco-shop' | translate }}</h3>
         <h5 class="shop-order-question">{{ 'order-details.shop-order-question' | translate }}</h5>
+        <div class="bottom-text">
+          <p class="p-text">{{ 'order-details.cant-found-order' | translate }}</p>
+        </div>
         <div class="form-group shop-submit">
           <div class="shop-submit-box">
             <div class="inputs-box">
@@ -123,9 +126,6 @@ <h5 class="shop-order-question">{{ 'order-details.shop-order-question' | transla
                 </div>
               </div>
             </div>
-            <div class="bottom-text">
-              <p class="p-text">{{ 'order-details.cant-found-order' | translate }}</p>
-            </div>
           </div>
           <button
             *ngIf="isCanAddEcoShopOrderNumber()"

src/app/ubs/ubs/components/ubs-order-details/ubs-order-details.component.scss

@@ -333,6 +333,10 @@ input[type='number'] {
     max-width: 455px;
   }
 
+  .bottom-text {
+    width: 360px;
+  }
+
   .custom-control {
     padding-left: 1.4rem;
   }
@@ -517,11 +521,6 @@ h5 {
   }
 }
 
-.bottom-text {
-  width: 360px;
-  padding: 26px 0 0 16px;
-}
-
 .comment {
   background: var(--ubs-primary-white);
 }
@@ -634,6 +633,14 @@ li {
     background: transparent;
     border: 1px solid var(--ubs-quaternary-dark-grey);
     border-radius: 4px;
+
+    &:disabled {
+      background: var(--ubs-quintynary-light-grey);
+      border-color: var(--ubs-quintynary-light-grey);
+      color: var(--ubs-primary-light-grey);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
   }
 
   .bottom_comment {