Update all pages to new angular format

ToDo.yaml

@@ -46,7 +46,9 @@ Client:
         Edit employees not implimented yet
 
     Company:
-        No employees for table yet
+        Need to impliment Add employee
+        Need to impliment Remove employee
+        Edit Company -> Dont allow edit of company email due to it being verified
 
 
 database:

src/Client/src/app/pages/main/company/company.component.html

@@ -1,9 +1,12 @@
 <div class="top-bar">
-    <button *ngFor="let company of Employers" (click)="changeSelectedCompany(company.company.id!)">{{ company.company.name.toUpperCase() }}</button>
+    @for(company of Employers; track company.accountID){
+        <button (click)="changeSelectedCompany(company.company.id!)">{{ company.company.name.toUpperCase() }}</button>
         <button routerLink="/company/editor" >CONNECT A COMPANY</button>
+    }
 </div>
 <div class="content-frame">
-    <div *ngIf="Comp != null">
+    @if(Comp != null){
+        <div>
             <button class="content-edit" style="color: #fff; border-color: #fff;" routerLink="/company/editor" [queryParams]="{ CompanyID: Comp.id }" >EDIT COMPANY</button>
             <div class="center-item">
                 <a [href]="Comp.websiteURL">
@@ -19,20 +22,27 @@
                 <h1>{{ Comp.city }}, {{ Comp.stateOrRegion }} {{ Comp.postalCode }}</h1>
             </div>
             <div class="content-desc">
-            <h1 *ngFor="let line of Desc">{{ line }}</h1>
+                @for (line of Desc; track line.length){
-        </div>
+                    <h1>{{ line }}</h1>
-        <div class="content-button" *ngIf="Comp.emailVerified">
+                }
-            <button style="color: #fff; border-color: #fff;" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >POST JOB</button>
-        </div>
-        <div class="content-button" *ngIf="!Comp.emailVerified">
-            <a style="color: #fff; border-color: #fff;" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
-            <span>You must verify your company email before you can post job listings.</span>
             </div>
             <hr />
             <div class="split-frame">
                 <div class="half-frame">
+                    @if (Comp.emailVerified){
+                        <div class="content-button">
+                            <button style="color: #fff; border-color: #fff;" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >POST JOB</button>
+                        </div>
+                    } @else {
+                        <div class="content-button">
+                            <a style="color: #fff; border-color: #fff;" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
+                            <span>You must verify your company email before you can post job listings.</span>
+                        </div>
+                    }
+                    <hr />
                     <h2>Active Job Listings</h2>
-                <div class="job-tile" *ngFor="let listing of List">
+                    @for (listing of List; track listing.id) {
+                        <div class="job-tile">
                             <div class="center-text">
                                 <h1>{{ listing.title }}</h1>
                             </div>
@@ -40,19 +50,35 @@
                             <button [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: listing.id }" >EDIT LISTING</button>
                             <button (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>
                         </div>
+                    }
                 </div>
                 <div class="half-frame">
+                    @if (Comp.emailVerified){
+                        <div class="content-button">
+                            <button style="color: #fff; border-color: #fff;" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >ADD EMPLOYEE</button>
+                        </div>
+                    } @else {
+                        <div class="content-button">
+                            <a style="color: #fff; border-color: #fff;" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
+                            <span>You must verify your company email before you can post job listings.</span>
+                        </div>
+                    }
+                    <hr />
                     <h2>Employees</h2>
                     @for (listing of CompEmployees; track listing.id) {
                         <div class="job-tile">
                             <div class="center-text">
                                 <h1>{{ listing.accountName }}</h1>
                             </div>
-                        <button [routerLink]="['/']" [queryParams]="{ JobID: listing.id }" >REMOVE</button>
+                            @if (listing.accountID != auth.loggedInUser.id){
-                        <button (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>
+                                <button (click)="RemoveJobListing(listing.id!)">Remove</button>
+                            } @else {
+                                <button disabled>SELF</button>
+                            }
                         </div>
                     }
                 </div>
             </div>
         </div>
+    }
 </div>

src/Client/src/app/pages/main/company/editor/editor.component.html

@@ -148,9 +148,11 @@
                         <span>postal code: {{ newListing.postalCode }}</span>
                     </div>
                 </div>
-                <div *ngFor="let descLine of newListing.description.split('\n')">
+                @for(descLine of newListing.description.split('\n'); track descLine.length){
+                    <div>
                         <span>{{ descLine }}</span><br />
                     </div>
+                }
             </div>
             <div class="content-frame">
                 <button type="button" (click)="prevStep()">Back</button>

src/Client/src/app/pages/main/jobs/editor/jobeditor.component.html

@@ -40,7 +40,8 @@
     </div>
 
     <!-- Location -->
-    <div #step *ngIf="!Listing.remote" class="sub-frame">
+    @if(!Listing.remote){
+        <div #step class="sub-frame">
             <div class="center">
                 <h2>Job Location</h2>
                 <div>
@@ -69,6 +70,7 @@
                 </div>
             </div>
         </div>
+    }
 
     <!-- Salary Range -->
     <div #step class="sub-frame">

src/Client/src/app/pages/main/jobs/jobs.component.html

@@ -1,5 +1,6 @@
 <!-- Avaliable Jobs -->
-<div class="tile-frame" *ngFor="let cur of JobListingPage">
+ @for (cur of JobListingPage; track cur.id){
+    <div class="tile-frame">
         <div class="tile">
             <div class="tile-title">
                 <h1>{{ cur.title }}</h1>
@@ -7,7 +8,9 @@
             </div>
             <div class="tile-split">
                 <h1>{{ cur.jobType }}</h1>
-            <h1 *ngIf="cur.remote" >Remote</h1>
+                @if(cur.remote){
+                    <h1>Remote</h1>
+                }
             </div>
             <div class="tile-split">
                 <h1>{{ cur.city }}</h1>
@@ -18,3 +21,4 @@
             </div>
         </div>
     </div>
+ }

src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.html

@@ -1,5 +1,6 @@
 <div class="job-frame">
-    <div class="company-details" *ngIf="jobsCompany != null" >
+    @if (jobsCompany != null){
+        <div class="company-details">
             <div class="center-item">
                 <a [href]="jobsCompany.websiteURL">
                     <img [src]="jobsCompany.logo" />
@@ -14,18 +15,24 @@
                 <h1>{{ jobsCompany.city }}, {{ jobsCompany.stateOrRegion }} {{ jobsCompany.postalCode }}</h1>
             </div>
             <div class="content-desc">
-            <h1 *ngFor="let line of jobsCompany.description.split('\n')">{{ line }}</h1>
+                @for(line of jobsCompany.description.split('\n'); track line.length){
+                    <h1>{{ line }}</h1>
+                }
             </div>
         </div>
-    <div class="job-details" *ngIf="selectedJob != null" >
+    }
+    @if (selectedJob != null) {
+        <div class="job-details">
             <div class="job-timestamp">
                 <h1>Opened: {{ selectedJob.createdTime }}</h1>
                 <h1>Modified: {{ selectedJob.modifiedTime }}</h1>
             </div>
 
-        <div class="job-warning" *ngIf="selectedJob.isDeleted" >
+            @if (selectedJob.isDeleted){
+                <div class="job-warning">
                     <h2>THIS JOB POSTING IS CLOSED</h2>
                 </div>
+            }
 
             <h1>{{ selectedJob.title }}</h1>
 
@@ -42,4 +49,5 @@
 
             <h1>{{ selectedJob.description }}</h1>
         </div>
+    }
 </div>

src/Client/src/app/pages/main/resumes/resumes.component.html

@@ -1,4 +1,6 @@
 <!-- My Resumes -->
-<div *ngIf="auth.isLoggedIn" class="jobs-frame">
+ @if (auth.isLoggedIn){
+    <div class="jobs-frame">
     
     </div>
+ }