autocomit
This commit is contained in:
+55
@@ -0,0 +1,55 @@
|
||||
<div class="container">
|
||||
<div *ngIf="loading" class="loading">Loading...</div>
|
||||
<div *ngIf="error" class="error">{{ error }}</div>
|
||||
|
||||
<div *ngIf="application && !loading" class="detail-card">
|
||||
<div class="header">
|
||||
<h1>{{ application.name }}</h1>
|
||||
<div class="actions">
|
||||
<button (click)="edit()" class="btn-primary">Edit</button>
|
||||
<button (click)="delete()" class="btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
<div class="detail-row">
|
||||
<label>Status:</label>
|
||||
<span class="status-badge" [ngClass]="getStatusClass(application.status)">
|
||||
{{ getStatusDisplay(application.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<label>Description:</label>
|
||||
<span>{{ application.description || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<label>Business Unit:</label>
|
||||
<span>{{ application.businessUnit.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<label>End of Support Date:</label>
|
||||
<span>{{ application.endOfSupportDate ? (application.endOfSupportDate | date:'mediumDate') : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<label>End of Life Date:</label>
|
||||
<span>{{ application.endOfLifeDate ? (application.endOfLifeDate | date:'mediumDate') : '-' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<label>Created:</label>
|
||||
<span>{{ application.createdAt | date:'medium' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<label>Last Updated:</label>
|
||||
<span>{{ application.updatedAt | date:'medium' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button (click)="back()" class="btn-secondary">Back to List</button>
|
||||
</div>
|
||||
</div>
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.loading, .error {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid #f5f5f5;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
width: 250px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-idea {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.status-in-development {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
&.status-in-service {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
&.status-maintenance {
|
||||
background-color: #fff9c4;
|
||||
color: #f57f17;
|
||||
}
|
||||
|
||||
&.status-decommissioned {
|
||||
background-color: #f5f5f5;
|
||||
color: #616161;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary, .btn-danger {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #303f9f;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-application-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `<div class="container"><h1>Application Detail</h1><p class="info-message">ℹ️ Coming in Story 2</p></div>`,
|
||||
styles: [`.container { max-width: 1200px; margin: 2rem auto; padding: 2rem; } .info-message { background: #e3f2fd; padding: 1rem; border-radius: 4px; }`]
|
||||
})
|
||||
export class ApplicationDetailComponent {}
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
<div class="container">
|
||||
<h1>{{ isEditMode ? 'Edit Application' : 'Create New Application' }}</h1>
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<div class="form-group">
|
||||
<label for="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
formControlName="name"
|
||||
[class.error]="form.get('name')?.invalid && form.get('name')?.touched"
|
||||
/>
|
||||
<div class="error-message" *ngIf="form.get('name')?.invalid && form.get('name')?.touched">
|
||||
<span *ngIf="form.get('name')?.errors?.['required']">Name is required</span>
|
||||
<span *ngIf="form.get('name')?.errors?.['maxlength']">Name must not exceed 255 characters</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
formControlName="description"
|
||||
rows="4"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="status">Status *</label>
|
||||
<select
|
||||
id="status"
|
||||
formControlName="status"
|
||||
[class.error]="form.get('status')?.invalid && form.get('status')?.touched"
|
||||
>
|
||||
<option *ngFor="let status of statusOptions" [value]="status">
|
||||
{{ getStatusDisplay(status) }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="error-message" *ngIf="form.get('status')?.invalid && form.get('status')?.touched">
|
||||
Status is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="businessUnitId">Business Unit *</label>
|
||||
<select
|
||||
id="businessUnitId"
|
||||
formControlName="businessUnitId"
|
||||
[class.error]="form.get('businessUnitId')?.invalid && form.get('businessUnitId')?.touched"
|
||||
>
|
||||
<option value="">Select a business unit</option>
|
||||
<option *ngFor="let bu of businessUnits" [value]="bu.id">
|
||||
{{ bu.name }}
|
||||
</option>
|
||||
</select>
|
||||
<div class="error-message" *ngIf="form.get('businessUnitId')?.invalid && form.get('businessUnitId')?.touched">
|
||||
Business unit is required
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="endOfSupportDate">End of Support Date</label>
|
||||
<input
|
||||
id="endOfSupportDate"
|
||||
type="date"
|
||||
formControlName="endOfSupportDate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="endOfLifeDate">End of Life Date</label>
|
||||
<input
|
||||
id="endOfLifeDate"
|
||||
type="date"
|
||||
formControlName="endOfLifeDate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-message" *ngIf="error">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" (click)="cancel()" class="btn-secondary">Cancel</button>
|
||||
<button type="submit" [disabled]="form.invalid || loading" class="btn-primary">
|
||||
{{ loading ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
+98
@@ -0,0 +1,98 @@
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="date"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #3f51b5;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: #f44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #303f9f;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #f44336;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-application-form',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `<div class="container"><h1>Application Form</h1><p class="info-message">ℹ️ Coming in Story 2</p></div>`,
|
||||
styles: [`.container { max-width: 1200px; margin: 2rem auto; padding: 2rem; } .info-message { background: #e3f2fd; padding: 1rem; border-radius: 4px; }`]
|
||||
})
|
||||
export class ApplicationFormComponent {}
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Applications</h1>
|
||||
<button (click)="createNew()" class="btn-primary">Create New Application</button>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<div class="filter-row">
|
||||
<div class="filter-group">
|
||||
<label>Search by name:</label>
|
||||
<input
|
||||
type="text"
|
||||
[(ngModel)]="searchQuery"
|
||||
(ngModelChange)="onSearchChange($event)"
|
||||
placeholder="Search applications..."
|
||||
class="search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>Status:</label>
|
||||
<select [(ngModel)]="selectedStatus" (ngModelChange)="onFilterChange()" class="filter-select">
|
||||
<option value="">All Statuses</option>
|
||||
<option *ngFor="let status of statusOptions" [value]="status">
|
||||
{{ getStatusDisplay(status) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<label>Business Unit:</label>
|
||||
<select [(ngModel)]="selectedBusinessUnitId" (ngModelChange)="onFilterChange()" class="filter-select">
|
||||
<option value="">All Business Units</option>
|
||||
<option *ngFor="let bu of businessUnits" [value]="bu.id">
|
||||
{{ bu.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="loading" class="loading">Loading...</div>
|
||||
<div *ngIf="error" class="error">{{ error }}</div>
|
||||
|
||||
<div *ngIf="!loading && applications.length > 0" class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Status</th>
|
||||
<th>Business Unit</th>
|
||||
<th>End of Life</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let app of applications">
|
||||
<td><strong>{{ app.name }}</strong></td>
|
||||
<td>
|
||||
<span class="status-badge" [ngClass]="getStatusClass(app.status)">
|
||||
{{ getStatusDisplay(app.status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ app.businessUnit.name }}</td>
|
||||
<td>{{ app.endOfLifeDate ? (app.endOfLifeDate | date:'mediumDate') : '-' }}</td>
|
||||
<td class="actions">
|
||||
<button (click)="viewDetails(app.id)" class="btn-sm">View</button>
|
||||
<button (click)="edit(app.id)" class="btn-sm">Edit</button>
|
||||
<select
|
||||
(change)="changeStatus(app.id, $any($event.target).value)"
|
||||
class="btn-sm status-select"
|
||||
[value]="app.status">
|
||||
<option disabled selected>Change Status</option>
|
||||
<option *ngFor="let status of statusOptions" [value]="status">
|
||||
{{ getStatusDisplay(status) }}
|
||||
</option>
|
||||
</select>
|
||||
<button (click)="delete(app.id)" class="btn-sm btn-danger">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!loading && applications.length === 0" class="empty">
|
||||
No applications found. Click "Create New Application" to get started.
|
||||
</div>
|
||||
|
||||
<div *ngIf="totalPages > 1" class="pagination">
|
||||
<button (click)="previousPage()" [disabled]="page === 0">Previous</button>
|
||||
<span>Page {{ page + 1 }} of {{ totalPages }} ({{ totalElements }} total)</span>
|
||||
<button (click)="nextPage()" [disabled]="page >= totalPages - 1">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
+203
@@ -0,0 +1,203 @@
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #3f51b5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #303f9f;
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .error, .empty {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
|
||||
&.status-idea {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.status-in-development {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
&.status-in-service {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
&.status-maintenance {
|
||||
background-color: #fff9c4;
|
||||
color: #f57f17;
|
||||
}
|
||||
|
||||
&.status-decommissioned {
|
||||
background-color: #f5f5f5;
|
||||
color: #616161;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
background-color: #2196f3;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:hover {
|
||||
background-color: #1976d2;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background-color: #f44336;
|
||||
|
||||
&:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-select {
|
||||
background-color: #9c27b0;
|
||||
|
||||
&:hover {
|
||||
background-color: #7b1fa2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-application-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="container">
|
||||
<h1>Applications</h1>
|
||||
<p class="info-message">
|
||||
ℹ️ Application management will be implemented in Story 2.
|
||||
</p>
|
||||
<p>Coming soon: Create and manage applications, track lifecycle status, and link to business units.</p>
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container { max-width: 1200px; margin: 2rem auto; padding: 2rem; }
|
||||
.info-message { background: #e3f2fd; padding: 1rem; border-radius: 4px; border-left: 4px solid #2196f3; }
|
||||
`]
|
||||
})
|
||||
export class ApplicationListComponent {}
|
||||
@@ -0,0 +1,71 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HttpClient, HttpParams } from '@angular/common/http';
|
||||
import { Observable } from 'rxjs';
|
||||
import {
|
||||
Application,
|
||||
ApplicationStatus,
|
||||
CreateApplicationRequest,
|
||||
UpdateApplicationRequest
|
||||
} from '../../shared/models/application.model';
|
||||
import { Page } from '../../shared/models/environment.model';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ApplicationService {
|
||||
private readonly API_URL = '/api/applications';
|
||||
|
||||
constructor(private http: HttpClient) {}
|
||||
|
||||
getApplications(
|
||||
filters?: {
|
||||
status?: ApplicationStatus;
|
||||
businessUnitId?: string;
|
||||
name?: string;
|
||||
},
|
||||
page: number = 0,
|
||||
size: number = 20,
|
||||
sortBy: string = 'name',
|
||||
sortDirection: string = 'asc'
|
||||
): Observable<Page<Application>> {
|
||||
let params = new HttpParams()
|
||||
.set('page', page.toString())
|
||||
.set('size', size.toString())
|
||||
.set('sortBy', sortBy)
|
||||
.set('sortDirection', sortDirection);
|
||||
|
||||
if (filters?.status) {
|
||||
params = params.set('status', filters.status);
|
||||
}
|
||||
if (filters?.businessUnitId) {
|
||||
params = params.set('businessUnitId', filters.businessUnitId);
|
||||
}
|
||||
if (filters?.name) {
|
||||
params = params.set('name', filters.name);
|
||||
}
|
||||
|
||||
return this.http.get<Page<Application>>(this.API_URL, { params });
|
||||
}
|
||||
|
||||
getApplication(id: string): Observable<Application> {
|
||||
return this.http.get<Application>(`${this.API_URL}/${id}`);
|
||||
}
|
||||
|
||||
createApplication(data: CreateApplicationRequest): Observable<Application> {
|
||||
return this.http.post<Application>(this.API_URL, data);
|
||||
}
|
||||
|
||||
updateApplication(id: string, data: UpdateApplicationRequest): Observable<Application> {
|
||||
return this.http.put<Application>(`${this.API_URL}/${id}`, data);
|
||||
}
|
||||
|
||||
updateStatus(id: string, status: ApplicationStatus): Observable<Application> {
|
||||
return this.http.patch<Application>(`${this.API_URL}/${id}/status`, null, {
|
||||
params: { status }
|
||||
});
|
||||
}
|
||||
|
||||
deleteApplication(id: string): Observable<void> {
|
||||
return this.http.delete<void>(`${this.API_URL}/${id}`);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
<div class="dashboard">
|
||||
<header class="dashboard-header">
|
||||
<div class="container">
|
||||
<div class="header-content">
|
||||
<div class="branding">
|
||||
<h1>LDPv2</h1>
|
||||
<p class="subtitle">Lifecycle Data Platform</p>
|
||||
</div>
|
||||
<div class="user-menu">
|
||||
<span class="user-info" *ngIf="currentUser">
|
||||
<span class="user-icon">👤</span>
|
||||
<span class="username">{{ currentUser.username }}</span>
|
||||
<span class="role-badge">{{ currentUser.role }}</span>
|
||||
</span>
|
||||
<button (click)="logout()" class="btn-logout">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="dashboard-main">
|
||||
<div class="container">
|
||||
<section class="welcome-section">
|
||||
<h2>Welcome back, {{ currentUser?.username }}! 👋</h2>
|
||||
<p>Manage your applications, environments, and business units from one place.</p>
|
||||
</section>
|
||||
|
||||
<section class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card" *ngFor="let stat of stats">
|
||||
<div class="stat-icon">{{ stat.icon }}</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ stat.value }}</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-section">
|
||||
<h3>Quick Access</h3>
|
||||
<div class="features-grid">
|
||||
<div
|
||||
class="feature-card"
|
||||
*ngFor="let feature of features"
|
||||
(click)="navigate(feature.route)"
|
||||
[style.border-left-color]="feature.color">
|
||||
<div class="feature-icon">{{ feature.icon }}</div>
|
||||
<div class="feature-content">
|
||||
<h4>{{ feature.title }}</h4>
|
||||
<p>{{ feature.description }}</p>
|
||||
</div>
|
||||
<div class="feature-arrow">→</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="getting-started">
|
||||
<h3>Getting Started</h3>
|
||||
<div class="steps-grid">
|
||||
<div class="step-card">
|
||||
<div class="step-number">1</div>
|
||||
<h4>Create Business Units</h4>
|
||||
<p>Organize your applications by business units</p>
|
||||
<button (click)="navigate('/business-units')" class="btn-link">
|
||||
Go to Business Units →
|
||||
</button>
|
||||
</div>
|
||||
<div class="step-card">
|
||||
<div class="step-number">2</div>
|
||||
<h4>Add Applications</h4>
|
||||
<p>Register your applications and track their lifecycle</p>
|
||||
<button (click)="navigate('/applications')" class="btn-link">
|
||||
Go to Applications →
|
||||
</button>
|
||||
</div>
|
||||
<div class="step-card">
|
||||
<div class="step-number">3</div>
|
||||
<h4>Configure Environments</h4>
|
||||
<p>Set up deployment environments</p>
|
||||
<button (click)="navigate('/environments')" class="btn-link">
|
||||
Go to Environments →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="dashboard-footer">
|
||||
<div class="container">
|
||||
<p>LDPv2 - Lifecycle Data Platform v2 | © 2026</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -0,0 +1,280 @@
|
||||
.dashboard {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1.5rem 0;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.branding h1 {
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.branding .subtitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.user-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: white;
|
||||
|
||||
.user-icon { font-size: 1.5rem; }
|
||||
.username { font-weight: 500; }
|
||||
.role-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
flex: 1;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
margin: 0 0 1rem 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover { transform: translateY(-5px); }
|
||||
|
||||
.stat-icon { font-size: 3rem; }
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
.stat-label {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.features-section {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.feature-icon { font-size: 3rem; }
|
||||
.feature-content {
|
||||
flex: 1;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
color: #333;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-arrow {
|
||||
font-size: 1.5rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
h3 {
|
||||
color: white;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.step-number {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #333;
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667eea;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #764ba2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-footer {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-top: auto;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-header .header-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.welcome-section h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
.features-grid,
|
||||
.steps-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Router } from '@angular/router';
|
||||
import { AuthService } from '../../core/auth/auth.service';
|
||||
import { User } from '../../shared/models/user.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
currentUser: User | null = null;
|
||||
|
||||
features = [
|
||||
{
|
||||
title: 'Business Units',
|
||||
description: 'Manage organizational business units',
|
||||
icon: '🏢',
|
||||
route: '/business-units',
|
||||
color: '#3f51b5'
|
||||
},
|
||||
{
|
||||
title: 'Applications',
|
||||
description: 'Manage applications and their lifecycle',
|
||||
icon: '📱',
|
||||
route: '/applications',
|
||||
color: '#009688'
|
||||
},
|
||||
{
|
||||
title: 'Environments',
|
||||
description: 'Manage deployment environments',
|
||||
icon: '🌍',
|
||||
route: '/environments',
|
||||
color: '#ff9800'
|
||||
}
|
||||
];
|
||||
|
||||
stats = [
|
||||
{ label: 'Business Units', value: '4', icon: '🏢' },
|
||||
{ label: 'Applications', value: '7', icon: '📱' },
|
||||
{ label: 'Environments', value: '4', icon: '🌍' }
|
||||
];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private authService: AuthService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.currentUser = this.authService.getCurrentUser();
|
||||
}
|
||||
|
||||
navigate(route: string): void {
|
||||
this.router.navigate([route]);
|
||||
}
|
||||
|
||||
logout(): void {
|
||||
this.authService.logout();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user