autocomit
This commit is contained in:
+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;
|
||||
}
|
||||
}
|
||||
+22
@@ -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 {}
|
||||
Reference in New Issue
Block a user