comapny creatr

src/app/authentication/auth-sign-up/signup-business/signup-business.component.html

@@ -1,7 +1,7 @@
 <section>
   <app-type-header> </app-type-header>
   <div class="form-container">
-    <form>
+    <form [formGroup]="form" (submit)="onSubmit()">
       <p class="bold">Basic Information</p>
       <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="center start">
         <div
@@ -12,10 +12,19 @@
           fxFlex.gt-sm="31"
         >
           <label for="company_name">
-            <img src="../../../../assets/images/company.svg" alt="" title="" />
+            <img src="assets/images/company.svg" alt="" title="" />
             <span>Company Name <span class="red">*</span></span>
           </label>
-          <input type="text" id="company_name" placeholder="Company Name" />
+          <input
+            type="text"
+            id="company_name"
+            placeholder="Company Name"
+            formControlName="companyName"
+          />
+          <app-error-form
+            [name]="'companyName'"
+            [control]="form.get('companyName')!"
+          ></app-error-form>
         </div>
         <div
           class="form-input"
@@ -25,18 +34,19 @@
           fxFlex.gt-sm="31"
         >
           <label for="commercial_no">
-            <img
-              src="../../../../assets/images/commercial.svg"
-              alt=""
-              title=""
-            />
+            <img src="assets/images/commercial.svg" alt="" title="" />
             <span>Commercial Registration No <span class="red">*</span></span>
           </label>
           <input
             type="text"
             id="commercial_no"
             placeholder="Commercial Registration No"
+            formControlName="crNumber"
           />
+          <app-error-form
+            [name]="'crNumber'"
+            [control]="form.get('crNumber')!"
+          ></app-error-form>
         </div>
         <div
           class="form-input"
@@ -46,13 +56,27 @@
           fxFlex.gt-sm="31"
         >
           <label for="tax_no">
-            <img src="../../../../assets/images/tax.svg" alt="" title="" />
+            <img src="assets/images/tax.svg" alt="" title="" />
             <span>tax declaration No <span class="red">*</span></span>
           </label>
-          <input type="text" id="tax_no" placeholder="tax declaration No" />
+          <input
+            type="text"
+            id="tax_no"
+            placeholder="tax declaration No"
+            formControlName="taxNumber"
+          />
+          <app-error-form
+            [name]="'taxNumber'"
+            [control]="form.get('taxNumber')!"
+          ></app-error-form>
         </div>
       </div>
-      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="center start">
+      <div
+        class="gap-36 mt-2"
+        fxLayout="row wrap"
+        fxLayoutAlign="center start"
+        formGroupName="userAddress"
+      >
         <div
           class="form-input"
           fxLayout="column"
@@ -61,12 +85,25 @@
           fxFlex.gt-sm="31"
         >
           <label for="country">
-            <img src="../../../../assets/images/country.svg" alt="" title="" />
+            <img src="assets/images/country.svg" alt="" title="" />
             <span>Country <span class="red">*</span></span>
           </label>
-          <select id="country">
-            <!-- <option disabled selected>Select your country</option> -->
+          <select
+            id="country"
+            formControlName="countryId"
+            (change)="onChangeCountry($event)"
+          >
+            <option disabled selected [value]="null">
+              Select your country
+            </option>
+            <option *ngFor="let country of countries" [value]="country.id">
+              {{ country.nameEn }}
+            </option>
           </select>
+          <app-error-form
+            [name]="'countryId'"
+            [control]="form.get('userAddress.countryId')!"
+          ></app-error-form>
         </div>
         <div
           class="form-input"
@@ -76,10 +113,19 @@
           fxFlex.gt-sm="31"
         >
           <label for="city">
-            <img src="../../../../assets/images/city.svg" alt="" title="" />
+            <img src="assets/images/city.svg" alt="" title="" />
             <span>City<span class="red">*</span></span>
           </label>
-          <input type="text" id="city" placeholder="Enter your city" />
+          <select id="country" formControlName="city">
+            <option disabled selected [value]="null">Select your city</option>
+            <option *ngFor="let city of cities" [value]="city.id">
+              {{ city.nameEn }}
+            </option>
+          </select>
+          <app-error-form
+            [name]="'city'"
+            [control]="form.get('userAddress.city')!"
+          ></app-error-form>
         </div>
         <div
           class="form-input"
@@ -89,119 +135,195 @@
           fxFlex.gt-sm="31"
         >
           <label for="postal">
-            <img src="../../../../assets/images/postal.svg" alt="" title="" />
+            <img src="assets/images/postal.svg" alt="" title="" />
             <span>Postal Code <span class="red">*</span></span>
           </label>
-          <input type="text" id="postal" placeholder="Postal code" />
-        </div>
-      </div>
-
-      <div class="mt-2">
-        <div class="form-input" fxLayout="column" fxLayoutAlign="start stretch">
-          <label for="city">
-            <img
-              src="../../../../assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
-              alt=""
-              title=""
-            />
-            <span>National Address<span class="red">*</span></span>
-          </label>
           <input
             type="text"
-            id="national_address"
-            placeholder="National address"
+            id="postal"
+            placeholder="Postal code"
+            formControlName="postalCode"
           />
+          <app-error-form
+            [name]="'postalCode'"
+            [control]="form.get('userAddress.postalCode')!"
+          ></app-error-form>
+        </div>
+        <div class="mt-2" fxFlex.lt-md="100" fxFlex.gt-sm="100">
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+          >
+            <label for="national_address">
+              <img
+                src="assets/images/country-direction-location-map-navigation-pin-svgrepo-com.svg"
+                alt=""
+                title=""
+              />
+              <span>National Address<span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="national_address"
+              placeholder="National address"
+              formControlName="addressDesc"
+            />
+            <app-error-form
+              [name]="'addressDesc'"
+              [control]="form.get('userAddress.addressDesc')!"
+            ></app-error-form>
+          </div>
         </div>
       </div>
 
       <p class="bold mt-3">authorized</p>
-      <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
-        <div
-          class="form-input"
-          fxLayout="column"
-          fxLayoutAlign="start stretch"
-          fxFlex.lt-md="45"
-          fxFlex.gt-sm="31"
-        >
-          <label for="authorized">
-            <img
-              src="../../../../assets/images/authorized_name.svg"
-              alt=""
-              title=""
+      <div formGroupName="companyUser">
+        <div class="gap-36" fxLayout="row wrap" fxLayoutAlign="start start">
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+            fxFlex.lt-md="45"
+            fxFlex.gt-sm="31"
+          >
+            <label for="first_name">
+              <img src="assets/images/authorized_name.svg" alt="" title="" />
+              <span>First Name <span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="first_name"
+              placeholder="First Name"
+              formControlName="firstName"
             />
-            <span>Authorized Name <span class="red">*</span></span>
-          </label>
-          <input type="text" id="authorized" placeholder="Authorized Name" />
-        </div>
-        <div
-          class="form-input"
-          fxLayout="column"
-          fxLayoutAlign="start stretch"
-          fxFlex.lt-md="45"
-          fxFlex.gt-sm="31"
-        >
-          <label for="authorized_id">
-            <img
-              src="../../../../assets/images/authorized_name.svg"
-              alt=""
-              title=""
+            <app-error-form
+              [name]="'firstName'"
+              [control]="form.get('companyUser.firstName')!"
+            ></app-error-form>
+          </div>
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+            fxFlex.lt-md="45"
+            fxFlex.gt-sm="31"
+          >
+            <label for="last_name">
+              <img src="assets/images/authorized_name.svg" alt="" title="" />
+              <span>Last Name <span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="last_name"
+              placeholder="Last Name"
+              formControlName="last_name"
             />
-            <span>Authorized ID <span class="red">*</span></span>
-          </label>
-          <input type="text" id="authorized_id" placeholder="Authorized id" />
-        </div>
-        <div
-          class="form-input"
-          fxLayout="column"
-          fxLayoutAlign="start stretch"
-          fxFlex.lt-md="45"
-          fxFlex.gt-sm="31"
-        >
-          <label for="passport_no">
-            <img
-              src="../../../../assets/images/passport-svgrepo-com.svg"
-              alt=""
-              title=""
+            <app-error-form
+              [name]="'last_name'"
+              [control]="form.get('companyUser.last_name')!"
+            ></app-error-form>
+          </div>
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+            fxFlex.lt-md="45"
+            fxFlex.gt-sm="31"
+          >
+            <label for="authorized_id">
+              <img src="assets/images/authorized_name.svg" alt="" title="" />
+              <span>Authorized ID <span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="authorized_id"
+              placeholder="Authorized id"
+              formControlName="idNumber"
             />
-            <span>Passport Number <span class="red">*</span></span>
-          </label>
-          <input type="text" id="passport_no" placeholder="Passport Number" />
-        </div>
-      </div>
-      <div class="gap-36 mt-2" fxLayout="row wrap" fxLayoutAlign="start start">
-        <div
-          class="form-input"
-          fxLayout="column"
-          fxLayoutAlign="start stretch"
-          fxFlex.lt-md="45"
-          fxFlex.gt-sm="31"
-        >
-          <label for="mobile_number">
-            <img
-              src="../../../../assets/images/mobile-horizontal-svgrepo-com.svg"
-              alt=""
-              title=""
+            <app-error-form
+              [name]="'idNumber'"
+              [control]="form.get('companyUser.idNumber')!"
+            ></app-error-form>
+          </div>
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+            fxFlex.lt-md="45"
+            fxFlex.gt-sm="31"
+          >
+            <label for="passport_no">
+              <img
+                src="assets/images/passport-svgrepo-com.svg"
+                alt=""
+                title=""
+              />
+              <span>Passport Number <span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="passport_no"
+              placeholder="Passport Number"
+              formControlName="passportNumber"
             />
-            <span>Mobile Number <span class="red">*</span></span>
-          </label>
-          <input type="text" id="mobile_number" placeholder="Mobile Number" />
-        </div>
-        <div
-          class="form-input"
-          fxLayout="column"
-          fxLayoutAlign="start stretch"
-          fxFlex.lt-md="45"
-          fxFlex.gt-sm="31"
-        >
-          <label for="email">
-            <img
-              src="../../../../assets/images/email-9-svgrepo-com.svg"
-              alt=""
-              title=""
+            <app-error-form
+              [name]="'passportNumber'"
+              [control]="form.get('companyUser.passportNumber')!"
+            ></app-error-form>
+          </div>
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+            fxFlex.lt-md="45"
+            fxFlex.gt-sm="31"
+          >
+            <label for="mobile_number">
+              <img
+                src="assets/images/mobile-horizontal-svgrepo-com.svg"
+                alt=""
+                title=""
+              />
+              <span>Mobile Number <span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="mobile_number"
+              placeholder="Mobile Number"
+              formControlName="phoneNumber"
             />
-            <span>Email <span class="red">*</span></span>
-          </label>
-          <input type="text" id="email" placeholder="Email" />
+            <app-error-form
+              [name]="'phoneNumber'"
+              [control]="form.get('companyUser.phoneNumber')!"
+            ></app-error-form>
+          </div>
+          <div
+            class="form-input"
+            fxLayout="column"
+            fxLayoutAlign="start stretch"
+            fxFlex.lt-md="45"
+            fxFlex.gt-sm="31"
+          >
+            <label for="email">
+              <img
+                src="assets/images/email-9-svgrepo-com.svg"
+                alt=""
+                title=""
+              />
+              <span>Email <span class="red">*</span></span>
+            </label>
+            <input
+              type="text"
+              id="email"
+              placeholder="Email"
+              formControlName="email"
+            />
+            <app-error-form
+              [name]="'email'"
+              [control]="form.get('companyUser.email')!"
+            ></app-error-form>
+          </div>
         </div>
       </div>
 
@@ -229,23 +351,38 @@
       >
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Commercial Registration</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="commercialRegAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Tax Declaration</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="taxDeclarationAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Passport</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="passportAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">Experience Certification</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="eduCertificateAttach"
+          />
         </div>
         <div fxFlex.lt-md="45" fxFlex.gt-sm="23.5">
           <p class="bold">ID</p>
-          <app-file-upload />
+          <app-file-upload
+            (uploadFile)="onUploadFile($event)"
+            name="experienceCertificateAttach"
+          />
         </div>
       </div>
 
@@ -258,6 +395,12 @@
           + Add new card
         </button>
       </div> -->
+
+      <div fxLayout="column" fxLayoutAlign="center center">
+        <button type="submit" [disabled]="loading" [class.spinner]="loading">
+          Sign Up
+        </button>
+      </div>
     </form>
   </div>
 </section>

src/app/authentication/auth-sign-up/signup-business/signup-business.component.ts

@@ -1,12 +1,19 @@
 import { Component, OnInit } from '@angular/core';
 import { BaseForm } from '@core/base/base-form';
 import { ComponentBase } from '@core/base/common-base';
+
 import {
   FormGroup,
   UntypedFormControl,
   UntypedFormGroup,
   Validators,
 } from '@angular/forms';
+import { COUNTRY } from '@core/models/authenticcation.model';
+import { AuthService } from '@core/services/authentication/auth.service';
+import { takeUntil } from 'rxjs';
+import { CITY } from '../../../core/models/authenticcation.model';
+import { ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-signup-business',
@@ -18,12 +25,19 @@ export class SignupBusinessComponent
   implements OnInit, BaseForm
 {
   form!: FormGroup;
+  countries: COUNTRY[] = [];
+  cities: CITY[] = [];
 
-  constructor() {
+  constructor(
+    private readonly authService: AuthService,
+    private readonly router: Router,
+    private readonly toastr: ToastrService
+  ) {
     super();
   }
   ngOnInit(): void {
     this.initForm();
+    this.getCountries();
   }
 
   initForm(): void {
@@ -31,43 +45,87 @@ export class SignupBusinessComponent
       companyName: new UntypedFormControl(null, [Validators.required]),
       crNumber: new UntypedFormControl(null, [Validators.required]),
       taxNumber: new UntypedFormControl(null, [Validators.required]),
+      // commercialRegAttach: new UntypedFormControl(null),
+      // taxDeclarationAttach: new UntypedFormControl(null),
+      // passportAttach: new UntypedFormControl(null),
+      // experienceCertificateAttach: new UntypedFormControl(null),
+      // idAttach: new UntypedFormControl(null),
+
+      userAddress: new UntypedFormGroup({
+        countryId: new UntypedFormControl(null, [Validators.required]),
+        city: new UntypedFormControl(null, [Validators.required]),
+        postalCode: new UntypedFormControl(null, [Validators.required]),
+        addressDesc: new UntypedFormControl(null, [Validators.required]),
+      }),
+
       companyUser: new UntypedFormGroup({
         firstName: new UntypedFormControl(null, [Validators.required]),
-        dateOfBirth: new UntypedFormControl(null, [Validators.required]),
+        last_name: new UntypedFormControl(null, [Validators.required]),
         idNumber: new UntypedFormControl(null, [Validators.required]),
-        lastName: new UntypedFormControl(null, [Validators.required]),
-        email: new UntypedFormControl(null, [
-          Validators.required,
-          Validators.email,
-        ]),
         passportNumber: new UntypedFormControl(null, [Validators.required]),
-        favoriteName: new UntypedFormControl(null, [Validators.required]),
         phoneNumber: new UntypedFormControl(null, [Validators.required]),
-        linkedInLink: new UntypedFormControl(null, [Validators.required]),
-        userType: new UntypedFormControl(3, [Validators.required]),
-        userName: new UntypedFormControl(null, [Validators.required]),
-        password: new UntypedFormControl(null, [Validators.required]),
-        qualificationId: new UntypedFormControl(null, [Validators.required]),
-        universityId: new UntypedFormControl(null, [Validators.required]),
-        jobTitleId: new UntypedFormControl(null, [Validators.required]),
-        industryId: new UntypedFormControl(null, [Validators.required]),
-        countryId: new UntypedFormControl(null, [Validators.required]),
-        taxNumber: new UntypedFormControl(null, [Validators.required]),
-        incomeTaxValue: new UntypedFormControl(null, [Validators.required]),
-        cvAttach: new UntypedFormControl(null, [Validators.required]),
-        passportAttach: new UntypedFormControl(null, [Validators.required]),
-        eduCertificateAttach: new UntypedFormControl(null, [
-          Validators.required,
-        ]),
-        experienceCertificateAttach: new UntypedFormControl(null, [
-          Validators.required,
-        ]),
-        profCertificateAttach: new UntypedFormControl(null, [
-          Validators.required,
-        ]),
+        email: new UntypedFormControl(null, [Validators.required]),
       }),
     });
   }
 
-  onSubmit(): void {}
+  getCountries(): void {
+    this.authService
+      .getCountries()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.countries = res;
+      });
+  }
+
+  onChangeCountry(event: any): void {
+    const id = event.target.value;
+    this.getCities(id);
+  }
+
+  getCities(id: number): void {
+    this.authService
+      .getCities({ CountryId: id })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((res) => {
+        this.cities = res;
+      });
+  }
+
+  onUploadFile(event: any): void {
+    // if (event.file) {
+    //   this.form.patchValue({ [event.type]: event.file });
+    // } else {
+    //   this.form.patchValue({ [event.type]: null });
+    // }
+  }
+
+  onSubmit(): void {
+    console.log(this.form.value);
+    if (super.submitValidity(this.form)) {
+      const multiPartForm = new FormData();
+
+      for (const key in { ...this.form.value }) {
+        if (this.form.value.hasOwnProperty(key)) {
+          if (this.form.get(key)?.value) {
+            multiPartForm.append(key, this.form.get(key)?.value);
+          }
+        }
+      }
+
+      this.authService
+        .createCompany(multiPartForm)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(
+          (res) => {
+            this.toastr.success('Registeration Successfully !');
+            this.router.navigate(['/auth']);
+            this.loading = false;
+          },
+          (error) => {
+            this.loading = false;
+          }
+        );
+    }
+  }
 }

src/app/core/services/authentication/auth.service.ts

@@ -84,6 +84,10 @@ export class AuthService {
     return this.apiService.get<CITY[]>('Lookup/GetCityByCountry', params);
   }
 
+  createCompany(data: any): Observable<any> {
+    return this.apiService.post<any, Observable<any>>('Company/Create', data);
+  }
+
   isAuthenticated(): boolean {
     return !!(localStorage.getItem('token') && localStorage.getItem('id'));
   }

src/app/modules/dashboard/company-dashboard/company-dashboard.component.html

@@ -60,9 +60,9 @@
     <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
       <app-teams></app-teams>
     </div>
-    <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
+    <!-- <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
       <app-company-to-do></app-company-to-do>
-    </div>
+    </div> -->
     <div fxFlex.lt-md="100" fxFlex.gt-sm="24">
       <app-meetings></app-meetings>
     </div>