diff --git a/README.md b/README.md index 30a7ecf..db430c4 100644 --- a/README.md +++ b/README.md @@ -64,10 +64,9 @@ For more information on using the Angular CLI, including detailed command refere --fix upload of the image in edit mode --add deletion button to the card -centralize scss check the same styles for differnet buttons --adjust to mobile format ****animations transitions (prev next cards) +--DEPLOY AND WRITE README + diff --git a/package-lock.json b/package-lock.json index f85006a..9ea3369 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "iisa-web", "version": "0.0.0", "dependencies": { - "@angular/animations": "^19.1.0", + "@angular/animations": "^19.2.14", "@angular/cdk": "^19.2.19", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", diff --git a/package.json b/package.json index aaf7881..67303e1 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ }, "private": true, "dependencies": { - "@angular/animations": "^19.1.0", + "@angular/animations": "^19.2.14", "@angular/cdk": "^19.2.19", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 94f5f50..1b62bab 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -1,9 +1,10 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { provideRouter } from '@angular/router'; +import { provideAnimations } from '@angular/platform-browser/animations'; import { routes } from './app.routes'; import { provideHttpClient } from '@angular/common/http'; export const appConfig: ApplicationConfig = { - providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()] + providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient(), provideAnimations()] }; diff --git a/src/app/components/application-list/application-list.component.html b/src/app/components/application-list/application-list.component.html index 333dcf0..15708d5 100644 --- a/src/app/components/application-list/application-list.component.html +++ b/src/app/components/application-list/application-list.component.html @@ -1,7 +1,7 @@
-

Applications

@@ -82,7 +82,7 @@
@if (application.profileImage) { {{ application.fullName }} diff --git a/src/app/components/application-list/application-list.component.scss b/src/app/components/application-list/application-list.component.scss index b53c583..7a71754 100644 --- a/src/app/components/application-list/application-list.component.scss +++ b/src/app/components/application-list/application-list.component.scss @@ -18,6 +18,23 @@ position: relative; margin-bottom: 2rem; } +button.secondary-btn { + background: transparent; + color: #00ffff; + border: 1px solid #00ffff; + padding: 0.8rem 1.5rem; + border-radius: 8px; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + margin-right: 1rem; +} + +button.secondary-btn:hover { + background: rgba(0, 255, 255, 0.12); + box-shadow: 0 0 20px #00ffff; + transform: translateY(-2px); +} .back-button { position: absolute; diff --git a/src/app/components/application-list/application-list.component.ts b/src/app/components/application-list/application-list.component.ts index 7c625cd..d0759cc 100644 --- a/src/app/components/application-list/application-list.component.ts +++ b/src/app/components/application-list/application-list.component.ts @@ -13,6 +13,7 @@ import { BaseChartDirective } from 'ng2-charts'; import { ChartData, ChartOptions, Chart, registerables } from 'chart.js'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSnackBar } from '@angular/material/snack-bar'; +import { MatButtonModule } from '@angular/material/button'; Chart.register(...registerables); @@ -28,6 +29,7 @@ Chart.register(...registerables); MatInputModule, MatProgressSpinnerModule, BaseChartDirective, + MatButtonModule ], templateUrl: './application-list.component.html', styleUrls: ['./application-list.component.scss'] diff --git a/src/app/components/application/application.component.html b/src/app/components/application/application.component.html index 5dc59f1..34c3e88 100644 --- a/src/app/components/application/application.component.html +++ b/src/app/components/application/application.component.html @@ -1,86 +1,95 @@ -
-
+ +

🛰 Application Details

-
- +
+
+
+ + + {{ currentIndex() + 1 }} of {{ applicationList().length }} + + +
+ +
@if (isApplicationDetailsLoading) { -
- -

Loading application details...

-
- } @else if (hasApplicationData) { -
- -
- - - - {{ currentIndex() + 1 }} of {{ applicationList().length }} - - - +
+
+ +

Loading application details...

- -
- +
+ } + @if(!isApplicationDetailsLoading){ +
+ @if(this.currentApplication() === null) { +
+ inbox +

No application data available

+ +
+ } + @if (this.currentApplication() !== null) {
@if (currentApplication().profileImage) {
} - +

{{ currentApplication().fullName }}

+
+ person + {{ currentApplication().age }} years old +
+
+ location_on + {{ currentApplication().cityOrRegion }} +
+ @if (currentApplication().email) {
- person - {{ currentApplication().age }} years old + email + {{ currentApplication().email }}
+ } + @if (currentApplication().phoneNumber) {
- location_on - {{ currentApplication().cityOrRegion }} + phone + {{ currentApplication().phoneNumber }}
- @if (currentApplication().email) { -
- email - {{ currentApplication().email }} -
- } - @if (currentApplication().phoneNumber) { -
- phone - {{ currentApplication().phoneNumber }} -
- } + }
-
@if (getHobbiesArray().length > 0) {
@@ -92,14 +101,12 @@
} - @if (currentApplication().justification) {

rocket_launch Journey Justification?

{{ currentApplication().justification }}

} - @if (currentApplication().createdAt) {

calendar_today Application Date

@@ -109,7 +116,6 @@
}
-
@if (canEdit()) {
-
View Raw Data 
{{ currentApplication() | json }}
-
-
- } @else { -
- inbox -

No application data available

- + }
}
+
+ + diff --git a/src/app/components/application/application.component.scss b/src/app/components/application/application.component.scss index 498b356..4075da2 100644 --- a/src/app/components/application/application.component.scss +++ b/src/app/components/application/application.component.scss @@ -1,4 +1,6 @@ -.container { + +:host { + display: block; width: 100%; min-height: 100vh; margin: 0; @@ -113,17 +115,53 @@ } } -/* Application Card */ -.application-card { - background: rgba(0, 0, 0, 0.4); - border-radius: 16px; - padding: 2rem; - backdrop-filter: blur(15px); - border: 1px solid rgba(0, 255, 255, 0.2); - box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1); - margin-bottom: 2rem; +.delete-button { + margin-left: 12px; + + background: rgba(255, 68, 68, 0.1); + border: 1px solid #ff4444; + border-radius: 8px; + color: #ff4444; + cursor: pointer; + transition: all 0.3s ease; + flex-shrink: 0; } +.delete-button:hover { + background: rgba(255, 68, 68, 0.2); + color: #ff6666; + box-shadow: 0 0 20px rgba(255, 68, 68, 0.4); + transform: translateY(-2px); + border-color: #ff6666; +} + +.delete-button mat-icon { + font-size: 20px; + width: 20px; + height: 20px; +} + +/* Application Card */ +.application-card-container { + position: relative; + overflow-x: hidden; + border-radius: 16px; + min-height: 60rem; + .application-card { + position: absolute; + top: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.4); + border-radius: 16px; + padding: 2rem; + backdrop-filter: blur(15px); + border: 1px solid rgba(0, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 255, 255, 0.1); + } +} + + /* Profile Section */ .profile-section { display: flex; @@ -414,4 +452,5 @@ font-size: 0.95rem; font-style: italic; } -} \ No newline at end of file +} + diff --git a/src/app/components/application/application.component.ts b/src/app/components/application/application.component.ts index 43a3fce..087bb84 100644 --- a/src/app/components/application/application.component.ts +++ b/src/app/components/application/application.component.ts @@ -10,6 +10,8 @@ import { CommonModule } from '@angular/common'; import { environment } from '../../../environments/environment'; import { SocketIOService } from '../../services/socket-io.service'; import { MatSnackBar } from '@angular/material/snack-bar'; +import { trigger, transition } from '@angular/animations'; +import { slideLeft, slideRight } from './slide.animation'; @Component({ selector: 'app-application', @@ -21,10 +23,16 @@ import { MatSnackBar } from '@angular/material/snack-bar'; MatCardModule, MatChipsModule, CommonModule, - RouterLink + RouterLink, ], templateUrl: './application.component.html', - styleUrls: ['./application.component.scss'] + styleUrls: ['./application.component.scss'], + animations: [ + trigger('animSlider', [ + transition(':increment', slideRight), + transition(':decrement', slideLeft), + ]), + ], }) export class ApplicationComponent implements OnInit { dataService = inject(CandidateDataService); @@ -43,9 +51,6 @@ export class ApplicationComponent implements OnInit { return this.dataService.isApplicationDetailsLoading(); } - get hasApplicationData() { - return this.currentApplication() !== null; - } canGoToPrevious = computed(() => this.currentIndex() > 0); canGoToNext = computed(() => diff --git a/src/app/components/application/slide.animation.ts b/src/app/components/application/slide.animation.ts new file mode 100644 index 0000000..fe92fd8 --- /dev/null +++ b/src/app/components/application/slide.animation.ts @@ -0,0 +1,45 @@ +import { trigger, transition, query, style, animate, group } from '@angular/animations'; + +export const slideLeft = [ + group([ + query(':enter', + [ + style({ transform: 'translateX(-100%)' }), + animate('.6s ease-out', style({ transform: 'translateX(0%)' })) + ], + { + optional: true, + } + ), + query(':leave', + [ + animate('.6s ease-out', style({ transform: 'translateX(100%)' })) + ], + { + optional: true, + } + ), + ]), +]; + +export const slideRight = [ + group([ + query(':enter', + [ + style({ transform: 'translateX(100%)' }), + animate('.4s ease-out', style({ transform: 'translateX(0%)' })) + ], + { + optional: true, + } + ), + query(':leave', + [ + animate('.4s ease-out', style({ transform: 'translateX(-100%)' })) + ], + { + optional: true, + } + ), + ]), +]; \ No newline at end of file diff --git a/src/app/components/image-input/image-input.component.html b/src/app/components/image-input/image-input.component.html index 62a3ed5..2d812ca 100644 --- a/src/app/components/image-input/image-input.component.html +++ b/src/app/components/image-input/image-input.component.html @@ -3,7 +3,7 @@
- @if (value) { + @if (previewUrl) {
-

👀 Total Visits: {{ stats.totalVisits() }}

-

🖱️ Register Button Clicks: {{ stats.totalClicks() }}

+

Total Visits: {{ stats.totalVisits() }}

+

Register Button Clicks: {{ stats.totalClicks() }}

diff --git a/src/app/components/landing/landing.component.scss b/src/app/components/landing/landing.component.scss index 829c947..354dc93 100644 --- a/src/app/components/landing/landing.component.scss +++ b/src/app/components/landing/landing.component.scss @@ -7,7 +7,6 @@ margin: 0; padding: 2rem; background: radial-gradient(circle at top, #0a0f2c 0%, #000000 100%); - color: #e0e0ff; font-family: 'Orbitron', Arial, sans-serif; box-sizing: border-box; display: flex; diff --git a/src/app/components/registration/registration.component.html b/src/app/components/registration/registration.component.html index 18047e3..4f064f7 100644 --- a/src/app/components/registration/registration.component.html +++ b/src/app/components/registration/registration.component.html @@ -3,9 +3,9 @@
@if(editMode()){ - + }@else {