derek/boredcareers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working #6

Merged
derek merged 17 commits from working into main 2025-07-29 10:20:18 -07:00
Conversation 0 Commits 17 Files Changed 24
+110 -31
3 changed files with 110 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 56f205fa4c - Show all commits
src/Client/src/app/pages/main/company/connect/companyconnect.component.css
+18
View File
@@ -1,3 +1,21 @@
button {
width: 150px;
border-radius: 5px;
margin: 10px;
text-align: center;
padding: 15px 0;
transition: .5s;
background-color: #0000;
border: 1px solid var(--Mistox-White);
color: var(--Mistox-White);
text-decoration: none;
}
button:hover {
background-color: #00000044;
color: var(--Mistox-Light);
}
.title-text {
width: 100%;
text-align: center;
src/Client/src/app/pages/main/company/connect/companyconnect.component.html
+12 -12
View File
@@ -7,7 +7,7 @@
<div class="center">
<div class="content-frame">
<label>Company Name</label>
<input name="name" [(ngModel)]="newListing.name" type="text" placeholder="Mistox" />
<input class="input-field" name="name" [(ngModel)]="newListing.name" type="text" placeholder="Mistox" />
<button type="button" (click)="nextStep()">Next</button>
</div>
<div class="footer-frame">
@@ -22,7 +22,7 @@
<div class="center">
<div class="content-frame">
<label>Company Website URL</label>
<input name="url" [(ngModel)]="newListing.websiteURL" type="text" placeholder="https://mistox.com/" />
<input class="input-field" name="url" [(ngModel)]="newListing.websiteURL" type="text" placeholder="https://mistox.com/" />
<button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
@@ -37,7 +37,7 @@
<div class="center">
<div class="content-frame">
<label>Company Logo URL</label>
<input name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
<input class="input-field" name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
<button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
@@ -55,11 +55,11 @@
<div class="split">
<div class="half-frame">
<label>Company Email</label>
<input name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
<input class="input-field" name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
</div>
<div class="half-frame">
<label>Company Phone Number</label>
<input name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
<input class="input-field" name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
</div>
</div>
<button type="button" (click)="prevStep()">Back</button>
@@ -78,19 +78,19 @@
<div class="split">
<div class="half-frame">
<label>City</label>
<input name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
<input class="input-field" name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
</div>
<div class="half-frame">
<label>2 Letter Country</label>
<input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
<input class="input-field" name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
</div>
<div class="half-frame">
<label>2 Letter State/Region</label>
<input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
<input class="input-field" name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
</div>
<div class="half-frame">
<label>Postal Code</label>
<input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
<input class="input-field" name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
</div>
</div>
<button type="button" (click)="prevStep()">Back</button>
@@ -107,7 +107,7 @@
<div class="center">
<div class="content-frame">
<label>Description</label>
<textarea name="description" [(ngModel)]="newListing.description" type="text"></textarea>
<textarea class="input-field" name="description" [(ngModel)]="newListing.description" type="text"></textarea>
<button type="button" (click)="prevStep()">Back</button>
<button type="button" (click)="nextStep()">Next</button>
</div>
@@ -143,8 +143,8 @@
<span>postal code: {{ newListing.postalCode }}</span>
</div>
</div>
<div>
<span>{{ newListing.description }}</span>
<div *ngFor="let descLine of newListing.description.split('\n')">
<span>{{ descLine }}</span><br />
</div>
</div>
<div class="content-frame">
src/Client/src/app/pages/main/company/connect/companyconnect.component.ts
+80 -19
View File
@@ -1,4 +1,4 @@
import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core';
import { Component, ElementRef, HostListener, QueryList, ViewChildren } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';
@@ -26,6 +26,20 @@ export class CompanyConnectComponent {
};
ngAfterViewInit(){
this.formSteps.changes.subscribe(() => {
this.updateUI(0);
});
this.updateUI(0);
}
@HostListener('window:keydown', ['$event'])
handleGlobalKeyDown(event: KeyboardEvent){
if (event.key === 'Tab'){
event.preventDefault();
}
}
updateUI(subItem: number){
this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
if (i === this.currentStep) {
step.nativeElement.style.left = '0%';
@@ -35,35 +49,82 @@ export class CompanyConnectComponent {
step.nativeElement.style.left = '100%';
}
});
setTimeout(() => {
(this.formSteps.get(this.currentStep)?.nativeElement.querySelectorAll('.input-field')[subItem] as HTMLElement)?.focus();
}, 500);
}
nextStep(){
this.currentStep += 1;
this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
if (i === this.currentStep) {
step.nativeElement.style.left = '0%';
} else if (i < this.currentStep) {
step.nativeElement.style.left = '-100%';
} else {
step.nativeElement.style.left = '100%';
}
});
this.updateUI(0);
}
prevStep(){
this.currentStep -= 1;
this.formSteps.forEach((step: ElementRef<HTMLDivElement>, i: number) => {
if (i === this.currentStep) {
step.nativeElement.style.left = '0%';
} else if (i < this.currentStep) {
step.nativeElement.style.left = '-100%';
} else {
step.nativeElement.style.left = '100%';
}
});
this.updateUI(0);
}
isNullOrEmpty(str: string | null | undefined): boolean {
return !str || str.trim().length === 0;
}
focusFrame(frameNum: number, subItem: number): void {
this.currentStep = frameNum;
this.updateUI(subItem);
}
PostNewCompany(company: Company){
if (this.isNullOrEmpty(company.name)){
this.focusFrame(0, 0);
return;
}
if (this.isNullOrEmpty(company.websiteURL)){
this.focusFrame(1, 0);
return;
}
if (this.isNullOrEmpty(company.logoURL)){
this.focusFrame(2, 0);
return;
}
if (this.isNullOrEmpty(company.email)){
this.focusFrame(3, 0);
return;
}
if (this.isNullOrEmpty(company.phone)){
this.focusFrame(3, 1);
return;
}
if (this.isNullOrEmpty(company.city)){
this.focusFrame(4, 0);
return;
}
if (this.isNullOrEmpty(company.country)){
this.focusFrame(4, 1);
return;
}
if (this.isNullOrEmpty(company.stateOrRegion)){
this.focusFrame(4, 2);
return;
}
if (this.isNullOrEmpty(company.postalCode)){
this.focusFrame(4, 3);
return;
}
if (this.isNullOrEmpty(company.description)){
this.focusFrame(5, 0);
return;
}
this.http.post("api/company?newCompany=true", company).subscribe({
next: data => {
this.router.navigate([""]);