first commit

src/app/pages/company-profile/company-profile.component.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { ToastrService } from "ngx-toastr";
+import { CompanyService } from "src/app/services/company.service";
+
+@Component({
+  selector: "app-company-profile",
+  templateUrl: "./company-profile.component.html",
+  styleUrls: ["./company-profile.component.scss"],
+})
+export class CompanyProfileComponent implements OnInit {
+  updateInfoForm: FormGroup;
+  imgFile: any;
+  fileName: any;
+  imgSrc: any;
+  institutionId!: number;
+  imgFormatError: boolean = false;
+  fileSizeError: boolean = false;
+  company: any;
+
+  private emailPattern =
+    "(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])";
+
+  constructor(
+    private fb: FormBuilder,
+    private toastr: ToastrService,
+    private companyService: CompanyService
+  ) {
+    this.updateInfoForm = this.fb.group({
+      companyName: ["", [Validators.required, Validators.minLength(6)]],
+      companyUsername: ["", [Validators.required]],
+      companyAddress: ["", [Validators.required, Validators.minLength(6)]],
+      companyCity: ["", [Validators.required, Validators.minLength(3)]],
+      companyPhone: [
+        "",
+        [
+          Validators.required,
+          Validators.minLength(11),
+          Validators.pattern("^[0-9]*$"),
+        ],
+      ],
+      companyEmail: [
+        "",
+        [Validators.required, Validators.pattern(this.emailPattern)],
+      ],
+      companyDescription: ["", [Validators.required, Validators.minLength(10)]],
+      companyLogo: ["", Validators.required],
+    });
+
+    this.companyService.getCompanyById(1).subscribe((company) => {
+      this.company = company;
+      console.log(this.company);
+    });
+  }
+
+  get formControls() {
+    return this.updateInfoForm.controls;
+  }
+
+  ngOnInit(): void {
+    this.updateInfoForm.patchValue({
+      companyName: this.company.name,
+      companyUsername: this.company.username,
+      companyEmail: this.company.email,
+      companyPhone: this.company.phone,
+      companyAddress: this.company.address,
+      companyCity: this.company.city,
+      companyDescription: this.company.description,
+      companyLogo: this.company.image,
+    });
+  }
+
+  // Check file type
+  checkFileType(file: File): boolean {
+    const imageTypes = ["image/jpeg", "image/png", "image/gif", "image/jpg"]; // Add more types if needed
+    return imageTypes.includes(file.type);
+  }
+
+  onFileChange(event: any) {
+    this.imgFile = <File>event.target.files[0];
+    this.fileName = this.imgFile.name;
+
+    console.log(this.imgFile);
+
+    if (this.checkFileType(this.imgFile)) {
+      let reader = new FileReader();
+      reader.readAsDataURL(event.target.files[0]);
+      reader.onload = (event: any) => {
+        this.imgSrc = event.target.result;
+        this.updateInfoForm.patchValue({
+          image: this.imgSrc,
+        });
+      };
+    } else {
+      // Use toastr service to show error message
+      this.toastr.error("Please select correct image format", "Error", {
+        timeOut: 3000,
+        progressBar: true,
+        progressAnimation: "increasing",
+        closeButton: true,
+        positionClass: "toast-top-center",
+      });
+      this.imgFormatError = true;
+    }
+
+    /* checking file size here is greater than 2MB */
+    if (this.imgFile.size > 2000000) {
+      this.fileSizeError = true;
+    } else {
+      this.fileSizeError = false;
+    }
+  }
+
+  updateInfo() {
+    if (this.updateInfoForm.invalid) {
+      return;
+    }
+  }
+}