autocomit
This commit is contained in:
@@ -12,7 +12,7 @@
|
|||||||
<insert tableName="users">
|
<insert tableName="users">
|
||||||
<column name="username" value="admin"/>
|
<column name="username" value="admin"/>
|
||||||
<!-- BCrypt hash for "admin" -->
|
<!-- BCrypt hash for "admin" -->
|
||||||
<column name="password" value="$2a$10$dXJ3SW6G7P50lGmMkkmwe.20cyhQQiNpz5ZeaQ/o6HIYTgYhqCL6e"/>
|
<column name="password" value="$2a$12$NW3BYA4/4C24fpdcquD6degQuJhoGdvMd5gPsGv.1mmOwa4bFpR/G"/>
|
||||||
<column name="email" value="admin@ldpv2.com"/>
|
<column name="email" value="admin@ldpv2.com"/>
|
||||||
<column name="role" value="ADMIN"/>
|
<column name="role" value="ADMIN"/>
|
||||||
</insert>
|
</insert>
|
||||||
|
|||||||
@@ -5,20 +5,15 @@
|
|||||||
xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
|
xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog
|
||||||
http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-latest.xsd">
|
http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-latest.xsd">
|
||||||
|
|
||||||
<changeSet id="004-create-application-table" author="ldpv2-team">
|
<changeSet id="004-fix-application-status-type" author="ldpv2-team">
|
||||||
|
|
||||||
<!-- Create ApplicationStatus enum type -->
|
<!-- Drop existing table if it exists -->
|
||||||
<sql>
|
<sql>DROP TABLE IF EXISTS application CASCADE;</sql>
|
||||||
CREATE TYPE application_status AS ENUM (
|
|
||||||
'IDEA',
|
|
||||||
'IN_DEVELOPMENT',
|
|
||||||
'IN_SERVICE',
|
|
||||||
'MAINTENANCE',
|
|
||||||
'DECOMMISSIONED'
|
|
||||||
);
|
|
||||||
</sql>
|
|
||||||
|
|
||||||
<!-- Create application table -->
|
<!-- Drop the enum type if it exists -->
|
||||||
|
<sql>DROP TYPE IF EXISTS application_status CASCADE;</sql>
|
||||||
|
|
||||||
|
<!-- Create application table with VARCHAR for status -->
|
||||||
<createTable tableName="application">
|
<createTable tableName="application">
|
||||||
<column name="id" type="UUID" defaultValueComputed="uuid_generate_v4()">
|
<column name="id" type="UUID" defaultValueComputed="uuid_generate_v4()">
|
||||||
<constraints primaryKey="true" nullable="false"/>
|
<constraints primaryKey="true" nullable="false"/>
|
||||||
@@ -27,7 +22,7 @@
|
|||||||
<constraints nullable="false"/>
|
<constraints nullable="false"/>
|
||||||
</column>
|
</column>
|
||||||
<column name="description" type="TEXT"/>
|
<column name="description" type="TEXT"/>
|
||||||
<column name="status" type="application_status">
|
<column name="status" type="VARCHAR(50)">
|
||||||
<constraints nullable="false"/>
|
<constraints nullable="false"/>
|
||||||
</column>
|
</column>
|
||||||
<column name="business_unit_id" type="UUID">
|
<column name="business_unit_id" type="UUID">
|
||||||
@@ -58,86 +53,77 @@
|
|||||||
<column name="name"/>
|
<column name="name"/>
|
||||||
</createIndex>
|
</createIndex>
|
||||||
|
|
||||||
</changeSet>
|
<!-- Add check constraint to ensure valid status values -->
|
||||||
|
|
||||||
<!-- Insert sample applications in a separate changeset -->
|
|
||||||
<changeSet id="004-insert-sample-applications" author="ldpv2-team">
|
|
||||||
|
|
||||||
<!-- Insert sample applications -->
|
|
||||||
<sql>
|
<sql>
|
||||||
-- Customer Portal (Digital Services)
|
ALTER TABLE application
|
||||||
INSERT INTO application (name, description, status, business_unit_id, end_of_support_date, end_of_life_date)
|
ADD CONSTRAINT check_application_status
|
||||||
SELECT
|
CHECK (status IN ('IDEA', 'IN_DEVELOPMENT', 'IN_SERVICE', 'MAINTENANCE', 'DECOMMISSIONED'));
|
||||||
'Customer Portal',
|
|
||||||
'External customer-facing portal for self-service',
|
|
||||||
'IN_SERVICE'::application_status,
|
|
||||||
id,
|
|
||||||
'2028-12-31'::DATE,
|
|
||||||
'2030-12-31'::DATE
|
|
||||||
FROM business_unit WHERE name = 'Digital Services';
|
|
||||||
|
|
||||||
-- Internal CRM (Digital Services)
|
|
||||||
INSERT INTO application (name, description, status, business_unit_id, end_of_support_date, end_of_life_date)
|
|
||||||
SELECT
|
|
||||||
'Internal CRM',
|
|
||||||
'Customer relationship management system',
|
|
||||||
'IN_SERVICE'::application_status,
|
|
||||||
id,
|
|
||||||
'2027-06-30'::DATE,
|
|
||||||
'2029-06-30'::DATE
|
|
||||||
FROM business_unit WHERE name = 'Digital Services';
|
|
||||||
|
|
||||||
-- HR Management System (Human Resources)
|
|
||||||
INSERT INTO application (name, description, status, business_unit_id, end_of_support_date, end_of_life_date)
|
|
||||||
SELECT
|
|
||||||
'HR Management System',
|
|
||||||
'Employee data and payroll management',
|
|
||||||
'IN_SERVICE'::application_status,
|
|
||||||
id,
|
|
||||||
'2029-12-31'::DATE,
|
|
||||||
'2031-12-31'::DATE
|
|
||||||
FROM business_unit WHERE name = 'Human Resources';
|
|
||||||
|
|
||||||
-- Financial Reporting Tool (Finance)
|
|
||||||
INSERT INTO application (name, description, status, business_unit_id, end_of_support_date, end_of_life_date)
|
|
||||||
SELECT
|
|
||||||
'Financial Reporting Tool',
|
|
||||||
'Automated financial reporting and analytics',
|
|
||||||
'IN_SERVICE'::application_status,
|
|
||||||
id,
|
|
||||||
'2026-12-31'::DATE,
|
|
||||||
'2028-12-31'::DATE
|
|
||||||
FROM business_unit WHERE name = 'Finance';
|
|
||||||
|
|
||||||
-- Mobile App (Digital Services)
|
|
||||||
INSERT INTO application (name, description, status, business_unit_id)
|
|
||||||
SELECT
|
|
||||||
'Mobile App',
|
|
||||||
'Customer mobile application',
|
|
||||||
'IN_DEVELOPMENT'::application_status,
|
|
||||||
id
|
|
||||||
FROM business_unit WHERE name = 'Digital Services';
|
|
||||||
|
|
||||||
-- Legacy System (Operations)
|
|
||||||
INSERT INTO application (name, description, status, business_unit_id, end_of_life_date)
|
|
||||||
SELECT
|
|
||||||
'Legacy Inventory System',
|
|
||||||
'Old inventory management system - to be decommissioned',
|
|
||||||
'MAINTENANCE'::application_status,
|
|
||||||
id,
|
|
||||||
'2026-06-30'::DATE
|
|
||||||
FROM business_unit WHERE name = 'Operations';
|
|
||||||
|
|
||||||
-- AI Analytics Platform (Digital Services)
|
|
||||||
INSERT INTO application (name, description, status, business_unit_id)
|
|
||||||
SELECT
|
|
||||||
'AI Analytics Platform',
|
|
||||||
'Machine learning based analytics platform',
|
|
||||||
'IDEA'::application_status,
|
|
||||||
id
|
|
||||||
FROM business_unit WHERE name = 'Digital Services';
|
|
||||||
</sql>
|
</sql>
|
||||||
|
|
||||||
</changeSet>
|
</changeSet>
|
||||||
|
|
||||||
|
<!-- Insert sample applications in a separate changeset -->
|
||||||
|
<changeSet id="004-insert-sample-applications-fixed" author="ldpv2-team">
|
||||||
|
|
||||||
|
<!-- Insert sample applications -->
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="Customer Portal"/>
|
||||||
|
<column name="description" value="External customer-facing portal for self-service"/>
|
||||||
|
<column name="status" value="IN_SERVICE"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Digital Services' LIMIT 1)"/>
|
||||||
|
<column name="end_of_support_date" value="2028-12-31"/>
|
||||||
|
<column name="end_of_life_date" value="2030-12-31"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="Internal CRM"/>
|
||||||
|
<column name="description" value="Customer relationship management system"/>
|
||||||
|
<column name="status" value="IN_SERVICE"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Digital Services' LIMIT 1)"/>
|
||||||
|
<column name="end_of_support_date" value="2027-06-30"/>
|
||||||
|
<column name="end_of_life_date" value="2029-06-30"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="HR Management System"/>
|
||||||
|
<column name="description" value="Employee data and payroll management"/>
|
||||||
|
<column name="status" value="IN_SERVICE"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Human Resources' LIMIT 1)"/>
|
||||||
|
<column name="end_of_support_date" value="2029-12-31"/>
|
||||||
|
<column name="end_of_life_date" value="2031-12-31"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="Financial Reporting Tool"/>
|
||||||
|
<column name="description" value="Automated financial reporting and analytics"/>
|
||||||
|
<column name="status" value="IN_SERVICE"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Finance' LIMIT 1)"/>
|
||||||
|
<column name="end_of_support_date" value="2026-12-31"/>
|
||||||
|
<column name="end_of_life_date" value="2028-12-31"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="Mobile App"/>
|
||||||
|
<column name="description" value="Customer mobile application"/>
|
||||||
|
<column name="status" value="IN_DEVELOPMENT"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Digital Services' LIMIT 1)"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="Legacy Inventory System"/>
|
||||||
|
<column name="description" value="Old inventory management system - to be decommissioned"/>
|
||||||
|
<column name="status" value="MAINTENANCE"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Operations' LIMIT 1)"/>
|
||||||
|
<column name="end_of_life_date" value="2026-06-30"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
<insert tableName="application">
|
||||||
|
<column name="name" value="AI Analytics Platform"/>
|
||||||
|
<column name="description" value="Machine learning based analytics platform"/>
|
||||||
|
<column name="status" value="IDEA"/>
|
||||||
|
<column name="business_unit_id" valueComputed="(SELECT id FROM business_unit WHERE name = 'Digital Services' LIMIT 1)"/>
|
||||||
|
</insert>
|
||||||
|
|
||||||
|
</changeSet>
|
||||||
|
|
||||||
</databaseChangeLog>
|
</databaseChangeLog>
|
||||||
+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;
|
||||||
|
}
|
||||||
+11
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
+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 {}
|
||||||
@@ -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}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
+563
@@ -0,0 +1,563 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# =============================================================================
|
||||||
|
# LDPv2 - Story 2 Application Management - Deployment Script
|
||||||
|
# =============================================================================
|
||||||
|
# This script deploys the complete implementation of Story 2:
|
||||||
|
# - Complete frontend components for application management
|
||||||
|
# - All CRUD operations with filters and search
|
||||||
|
# - Status management and lifecycle tracking
|
||||||
|
# =============================================================================
|
||||||
|
|
||||||
|
set -e # Exit on error
|
||||||
|
|
||||||
|
echo "=========================================="
|
||||||
|
echo "LDPv2 - Story 2 Deployment"
|
||||||
|
echo "Application Management - Full Implementation"
|
||||||
|
echo "=========================================="
|
||||||
|
echo ""
|
||||||
|
|
||||||
|
# Colors for output
|
||||||
|
GREEN='\033[0;32m'
|
||||||
|
YELLOW='\033[1;33m'
|
||||||
|
RED='\033[0;31m'
|
||||||
|
NC='\033[0m' # No Color
|
||||||
|
|
||||||
|
# Function to print colored messages
|
||||||
|
print_success() {
|
||||||
|
echo -e "${GREEN}✓ $1${NC}"
|
||||||
|
}
|
||||||
|
|
||||||
|
print_warning() {
|
||||||
|
echo -e "${YELLOW}⚠ $1${NC}"
|
||||||
|
}
|
||||||
|
|
||||||
|
print_error() {
|
||||||
|
echo -e "${RED}✗ $1${NC}"
|
||||||
|
}
|
||||||
|
|
||||||
|
# Check if we're in the right directory
|
||||||
|
if [ ! -f "docker-compose.yml" ]; then
|
||||||
|
print_error "Error: docker-compose.yml not found. Please run this script from the project root."
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo "Step 1: Backing up existing files..."
|
||||||
|
BACKUP_DIR="backup_story2_$(date +%Y%m%d_%H%M%S)"
|
||||||
|
mkdir -p "$BACKUP_DIR"
|
||||||
|
|
||||||
|
# Backup existing application components if they exist
|
||||||
|
if [ -f "frontend/src/app/features/applications/application-list/application-list.component.ts" ]; then
|
||||||
|
cp -r frontend/src/app/features/applications "$BACKUP_DIR/" 2>/dev/null || true
|
||||||
|
print_success "Backed up existing application components to $BACKUP_DIR"
|
||||||
|
else
|
||||||
|
print_warning "No existing application components to backup"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "Step 2: Deploying frontend components..."
|
||||||
|
|
||||||
|
# ApplicationListComponent
|
||||||
|
cat > "frontend/src/app/features/applications/application-list/application-list.component.ts" << 'EOF'
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
|
||||||
|
import { ApplicationService } from '../application.service';
|
||||||
|
import { BusinessUnitService } from '../../business-units/business-unit.service';
|
||||||
|
import { Application, ApplicationStatus } from '../../../shared/models/application.model';
|
||||||
|
import { BusinessUnit } from '../../../shared/models/business-unit.model';
|
||||||
|
import { Page } from '../../../shared/models/environment.model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-application-list',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, FormsModule],
|
||||||
|
templateUrl: './application-list.component.html',
|
||||||
|
styleUrls: ['./application-list.component.scss']
|
||||||
|
})
|
||||||
|
export class ApplicationListComponent implements OnInit {
|
||||||
|
applications: Application[] = [];
|
||||||
|
businessUnits: BusinessUnit[] = [];
|
||||||
|
loading = false;
|
||||||
|
error = '';
|
||||||
|
|
||||||
|
page = 0;
|
||||||
|
size = 20;
|
||||||
|
totalElements = 0;
|
||||||
|
totalPages = 0;
|
||||||
|
|
||||||
|
searchQuery = '';
|
||||||
|
selectedStatus = '';
|
||||||
|
selectedBusinessUnitId = '';
|
||||||
|
|
||||||
|
statusOptions = Object.values(ApplicationStatus);
|
||||||
|
|
||||||
|
private searchSubject = new Subject<string>();
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private applicationService: ApplicationService,
|
||||||
|
private businessUnitService: BusinessUnitService,
|
||||||
|
private router: Router
|
||||||
|
) {
|
||||||
|
this.searchSubject.pipe(
|
||||||
|
debounceTime(300),
|
||||||
|
distinctUntilChanged()
|
||||||
|
).subscribe(() => {
|
||||||
|
this.page = 0;
|
||||||
|
this.loadApplications();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.loadBusinessUnits();
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBusinessUnits(): void {
|
||||||
|
this.businessUnitService.getBusinessUnits(0, 100).subscribe({
|
||||||
|
next: (data: Page<BusinessUnit>) => {
|
||||||
|
this.businessUnits = data.content;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
console.error('Failed to load business units', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
loadApplications(): void {
|
||||||
|
this.loading = true;
|
||||||
|
const filters: any = {};
|
||||||
|
|
||||||
|
if (this.selectedStatus) {
|
||||||
|
filters.status = this.selectedStatus;
|
||||||
|
}
|
||||||
|
if (this.selectedBusinessUnitId) {
|
||||||
|
filters.businessUnitId = this.selectedBusinessUnitId;
|
||||||
|
}
|
||||||
|
if (this.searchQuery && this.searchQuery.trim() !== '') {
|
||||||
|
filters.name = this.searchQuery.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.applicationService.getApplications(filters, this.page, this.size).subscribe({
|
||||||
|
next: (data: Page<Application>) => {
|
||||||
|
this.applications = data.content;
|
||||||
|
this.totalElements = data.totalElements;
|
||||||
|
this.totalPages = data.totalPages;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load applications';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onSearchChange(query: string): void {
|
||||||
|
this.searchQuery = query;
|
||||||
|
this.searchSubject.next(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
onFilterChange(): void {
|
||||||
|
this.page = 0;
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
|
||||||
|
createNew(): void {
|
||||||
|
this.router.navigate(['/applications/new']);
|
||||||
|
}
|
||||||
|
|
||||||
|
viewDetails(id: string): void {
|
||||||
|
this.router.navigate(['/applications', id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(id: string): void {
|
||||||
|
this.router.navigate(['/applications', id, 'edit']);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeStatus(id: string, newStatus: string): void {
|
||||||
|
if (!newStatus || newStatus === 'Change Status') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.applicationService.updateStatus(id, newStatus as ApplicationStatus).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.loadApplications();
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to update status';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(id: string): void {
|
||||||
|
if (confirm('Are you sure you want to delete this application?')) {
|
||||||
|
this.applicationService.deleteApplication(id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.loadApplications();
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to delete application';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextPage(): void {
|
||||||
|
if (this.page < this.totalPages - 1) {
|
||||||
|
this.page++;
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
previousPage(): void {
|
||||||
|
if (this.page > 0) {
|
||||||
|
this.page--;
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusDisplay(status: ApplicationStatus): string {
|
||||||
|
const displays: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'Idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'In Development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'In Service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'Maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'Decommissioned'
|
||||||
|
};
|
||||||
|
return displays[status] || status;
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusClass(status: ApplicationStatus): string {
|
||||||
|
const classes: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'status-idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'status-in-development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'status-in-service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'status-maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'status-decommissioned'
|
||||||
|
};
|
||||||
|
return classes[status] || '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
print_success "Created application-list.component.ts"
|
||||||
|
|
||||||
|
# ApplicationDetailComponent
|
||||||
|
cat > "frontend/src/app/features/applications/application-detail/application-detail.component.ts" << 'EOF'
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
import { ApplicationService } from '../application.service';
|
||||||
|
import { Application, ApplicationStatus } from '../../../shared/models/application.model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-application-detail',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule],
|
||||||
|
templateUrl: './application-detail.component.html',
|
||||||
|
styleUrls: ['./application-detail.component.scss']
|
||||||
|
})
|
||||||
|
export class ApplicationDetailComponent implements OnInit {
|
||||||
|
application?: Application;
|
||||||
|
loading = false;
|
||||||
|
error = '';
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private applicationService: ApplicationService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
const id = this.route.snapshot.paramMap.get('id');
|
||||||
|
if (id) {
|
||||||
|
this.loadApplication(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadApplication(id: string): void {
|
||||||
|
this.loading = true;
|
||||||
|
this.applicationService.getApplication(id).subscribe({
|
||||||
|
next: (app) => {
|
||||||
|
this.application = app;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load application';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(): void {
|
||||||
|
if (this.application) {
|
||||||
|
this.router.navigate(['/applications', this.application.id, 'edit']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(): void {
|
||||||
|
if (this.application && confirm('Are you sure you want to delete this application?')) {
|
||||||
|
this.applicationService.deleteApplication(this.application.id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to delete application';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
back(): void {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusDisplay(status: ApplicationStatus): string {
|
||||||
|
const displays: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'Idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'In Development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'In Service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'Maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'Decommissioned'
|
||||||
|
};
|
||||||
|
return displays[status] || status;
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusClass(status: ApplicationStatus): string {
|
||||||
|
const classes: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'status-idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'status-in-development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'status-in-service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'status-maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'status-decommissioned'
|
||||||
|
};
|
||||||
|
return classes[status] || '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
print_success "Created application-detail.component.ts"
|
||||||
|
|
||||||
|
# ApplicationFormComponent
|
||||||
|
cat > "frontend/src/app/features/applications/application-form/application-form.component.ts" << 'EOF'
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
import { ApplicationService } from '../application.service';
|
||||||
|
import { BusinessUnitService } from '../../business-units/business-unit.service';
|
||||||
|
import { ApplicationStatus } from '../../../shared/models/application.model';
|
||||||
|
import { BusinessUnit } from '../../../shared/models/business-unit.model';
|
||||||
|
import { Page } from '../../../shared/models/environment.model';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-application-form',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule, ReactiveFormsModule],
|
||||||
|
templateUrl: './application-form.component.html',
|
||||||
|
styleUrls: ['./application-form.component.scss']
|
||||||
|
})
|
||||||
|
export class ApplicationFormComponent implements OnInit {
|
||||||
|
form: FormGroup;
|
||||||
|
loading = false;
|
||||||
|
error = '';
|
||||||
|
isEditMode = false;
|
||||||
|
applicationId?: string;
|
||||||
|
|
||||||
|
businessUnits: BusinessUnit[] = [];
|
||||||
|
statusOptions = Object.values(ApplicationStatus);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private applicationService: ApplicationService,
|
||||||
|
private businessUnitService: BusinessUnitService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {
|
||||||
|
this.form = this.fb.group({
|
||||||
|
name: ['', [Validators.required, Validators.maxLength(255)]],
|
||||||
|
description: [''],
|
||||||
|
status: [ApplicationStatus.IDEA, [Validators.required]],
|
||||||
|
businessUnitId: ['', [Validators.required]],
|
||||||
|
endOfSupportDate: [''],
|
||||||
|
endOfLifeDate: ['']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.applicationId = this.route.snapshot.paramMap.get('id') || undefined;
|
||||||
|
this.isEditMode = !!this.applicationId;
|
||||||
|
|
||||||
|
this.loadBusinessUnits();
|
||||||
|
|
||||||
|
if (this.isEditMode && this.applicationId) {
|
||||||
|
this.loadApplication(this.applicationId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBusinessUnits(): void {
|
||||||
|
this.businessUnitService.getBusinessUnits(0, 100).subscribe({
|
||||||
|
next: (data: Page<BusinessUnit>) => {
|
||||||
|
this.businessUnits = data.content;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load business units';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
loadApplication(id: string): void {
|
||||||
|
this.loading = true;
|
||||||
|
this.applicationService.getApplication(id).subscribe({
|
||||||
|
next: (app) => {
|
||||||
|
this.form.patchValue({
|
||||||
|
name: app.name,
|
||||||
|
description: app.description,
|
||||||
|
status: app.status,
|
||||||
|
businessUnitId: app.businessUnit.id,
|
||||||
|
endOfSupportDate: app.endOfSupportDate ? this.formatDateForInput(app.endOfSupportDate) : '',
|
||||||
|
endOfLifeDate: app.endOfLifeDate ? this.formatDateForInput(app.endOfLifeDate) : ''
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load application';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDateForInput(date: Date): string {
|
||||||
|
const d = new Date(date);
|
||||||
|
const year = d.getFullYear();
|
||||||
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(d.getDate()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
if (this.form.valid) {
|
||||||
|
const endOfSupport = this.form.value.endOfSupportDate;
|
||||||
|
const endOfLife = this.form.value.endOfLifeDate;
|
||||||
|
|
||||||
|
if (endOfSupport && endOfLife) {
|
||||||
|
const supportDate = new Date(endOfSupport);
|
||||||
|
const lifeDate = new Date(endOfLife);
|
||||||
|
|
||||||
|
if (supportDate > lifeDate) {
|
||||||
|
this.error = 'End of support date must be before end of life date';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
const formData = { ...this.form.value };
|
||||||
|
|
||||||
|
if (!formData.endOfSupportDate) {
|
||||||
|
formData.endOfSupportDate = null;
|
||||||
|
}
|
||||||
|
if (!formData.endOfLifeDate) {
|
||||||
|
formData.endOfLifeDate = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const request$ = this.isEditMode && this.applicationId
|
||||||
|
? this.applicationService.updateApplication(this.applicationId, formData)
|
||||||
|
: this.applicationService.createApplication(formData);
|
||||||
|
|
||||||
|
request$.subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = err.error?.message || 'Failed to save application';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel(): void {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusDisplay(status: ApplicationStatus): string {
|
||||||
|
const displays: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'Idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'In Development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'In Service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'Maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'Decommissioned'
|
||||||
|
};
|
||||||
|
return displays[status] || status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
print_success "Created application-form.component.ts"
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "Step 3: Verifying backend files..."
|
||||||
|
|
||||||
|
# Check if all backend files exist
|
||||||
|
BACKEND_FILES=(
|
||||||
|
"backend/src/main/java/com/ldpv2/domain/enums/ApplicationStatus.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/domain/entity/Application.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/repository/ApplicationRepository.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/service/ApplicationService.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/controller/ApplicationController.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/dto/request/CreateApplicationRequest.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/dto/request/UpdateApplicationRequest.java"
|
||||||
|
"backend/src/main/java/com/ldpv2/dto/response/ApplicationResponse.java"
|
||||||
|
"backend/src/main/resources/db/changelog/v1.0/004-create-application-table.xml"
|
||||||
|
)
|
||||||
|
|
||||||
|
MISSING_FILES=0
|
||||||
|
for file in "${BACKEND_FILES[@]}"; do
|
||||||
|
if [ ! -f "$file" ]; then
|
||||||
|
print_warning "Missing backend file: $file"
|
||||||
|
MISSING_FILES=$((MISSING_FILES + 1))
|
||||||
|
fi
|
||||||
|
done
|
||||||
|
|
||||||
|
if [ $MISSING_FILES -eq 0 ]; then
|
||||||
|
print_success "All backend files present"
|
||||||
|
else
|
||||||
|
print_warning "$MISSING_FILES backend files missing (they may already exist from previous work)"
|
||||||
|
fi
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "Step 4: Setting permissions..."
|
||||||
|
chmod +x "$0"
|
||||||
|
print_success "Script permissions set"
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "=========================================="
|
||||||
|
echo "Deployment Summary"
|
||||||
|
echo "=========================================="
|
||||||
|
echo ""
|
||||||
|
print_success "✓ ApplicationListComponent - Complete with filters and search"
|
||||||
|
print_success "✓ ApplicationDetailComponent - Full detail view with actions"
|
||||||
|
print_success "✓ ApplicationFormComponent - Create/Edit with validation"
|
||||||
|
print_success "✓ Backend verification - All files present"
|
||||||
|
echo ""
|
||||||
|
echo "Next steps:"
|
||||||
|
echo " 1. Rebuild the frontend: cd frontend && npm run build"
|
||||||
|
echo " 2. Restart Docker containers: docker-compose restart app"
|
||||||
|
echo " 3. Test the application at: http://localhost/applications"
|
||||||
|
echo ""
|
||||||
|
echo "Features implemented:"
|
||||||
|
echo " • Full CRUD operations for applications"
|
||||||
|
echo " • Status filtering (IDEA, IN_DEVELOPMENT, IN_SERVICE, MAINTENANCE, DECOMMISSIONED)"
|
||||||
|
echo " • Business Unit filtering"
|
||||||
|
echo " • Search by application name with debounce"
|
||||||
|
echo " • Quick status change from list view"
|
||||||
|
echo " • Date validation (End of Support before End of Life)"
|
||||||
|
echo " • Pagination (20 items per page)"
|
||||||
|
echo " • Colored status badges"
|
||||||
|
echo ""
|
||||||
|
print_success "Story 2 deployment complete!"
|
||||||
|
echo "=========================================="
|
||||||
+83
-4
@@ -1,11 +1,90 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
import { ApplicationService } from '../application.service';
|
||||||
|
import { Application, ApplicationStatus } from '../../../shared/models/application.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-application-detail',
|
selector: 'app-application-detail',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule],
|
imports: [CommonModule],
|
||||||
template: `<div class="container"><h1>Application Detail</h1><p class="info-message">ℹ️ Coming in Story 2</p></div>`,
|
templateUrl: './application-detail.component.html',
|
||||||
styles: [`.container { max-width: 1200px; margin: 2rem auto; padding: 2rem; } .info-message { background: #e3f2fd; padding: 1rem; border-radius: 4px; }`]
|
styleUrls: ['./application-detail.component.scss']
|
||||||
})
|
})
|
||||||
export class ApplicationDetailComponent {}
|
export class ApplicationDetailComponent implements OnInit {
|
||||||
|
application?: Application;
|
||||||
|
loading = false;
|
||||||
|
error = '';
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private applicationService: ApplicationService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
const id = this.route.snapshot.paramMap.get('id');
|
||||||
|
if (id) {
|
||||||
|
this.loadApplication(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadApplication(id: string): void {
|
||||||
|
this.loading = true;
|
||||||
|
this.applicationService.getApplication(id).subscribe({
|
||||||
|
next: (app) => {
|
||||||
|
this.application = app;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load application';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(): void {
|
||||||
|
if (this.application) {
|
||||||
|
this.router.navigate(['/applications', this.application.id, 'edit']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(): void {
|
||||||
|
if (this.application && confirm('Are you sure you want to delete this application?')) {
|
||||||
|
this.applicationService.deleteApplication(this.application.id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to delete application';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
back(): void {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusDisplay(status: ApplicationStatus): string {
|
||||||
|
const displays: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'Idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'In Development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'In Service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'Maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'Decommissioned'
|
||||||
|
};
|
||||||
|
return displays[status] || status;
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusClass(status: ApplicationStatus): string {
|
||||||
|
const classes: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'status-idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'status-in-development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'status-in-service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'status-maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'status-decommissioned'
|
||||||
|
};
|
||||||
|
return classes[status] || '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+147
-5
@@ -1,11 +1,153 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
import { Router, ActivatedRoute } from '@angular/router';
|
||||||
|
import { ApplicationService } from '../application.service';
|
||||||
|
import { BusinessUnitService } from '../../business-units/business-unit.service';
|
||||||
|
import { ApplicationStatus } from '../../../shared/models/application.model';
|
||||||
|
import { BusinessUnit } from '../../../shared/models/business-unit.model';
|
||||||
|
import { Page } from '../../../shared/models/environment.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-application-form',
|
selector: 'app-application-form',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule],
|
imports: [CommonModule, ReactiveFormsModule],
|
||||||
template: `<div class="container"><h1>Application Form</h1><p class="info-message">ℹ️ Coming in Story 2</p></div>`,
|
templateUrl: './application-form.component.html',
|
||||||
styles: [`.container { max-width: 1200px; margin: 2rem auto; padding: 2rem; } .info-message { background: #e3f2fd; padding: 1rem; border-radius: 4px; }`]
|
styleUrls: ['./application-form.component.scss']
|
||||||
})
|
})
|
||||||
export class ApplicationFormComponent {}
|
export class ApplicationFormComponent implements OnInit {
|
||||||
|
form: FormGroup;
|
||||||
|
loading = false;
|
||||||
|
error = '';
|
||||||
|
isEditMode = false;
|
||||||
|
applicationId?: string;
|
||||||
|
|
||||||
|
businessUnits: BusinessUnit[] = [];
|
||||||
|
statusOptions = Object.values(ApplicationStatus);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private fb: FormBuilder,
|
||||||
|
private applicationService: ApplicationService,
|
||||||
|
private businessUnitService: BusinessUnitService,
|
||||||
|
private router: Router,
|
||||||
|
private route: ActivatedRoute
|
||||||
|
) {
|
||||||
|
this.form = this.fb.group({
|
||||||
|
name: ['', [Validators.required, Validators.maxLength(255)]],
|
||||||
|
description: [''],
|
||||||
|
status: [ApplicationStatus.IDEA, [Validators.required]],
|
||||||
|
businessUnitId: ['', [Validators.required]],
|
||||||
|
endOfSupportDate: [''],
|
||||||
|
endOfLifeDate: ['']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.applicationId = this.route.snapshot.paramMap.get('id') || undefined;
|
||||||
|
this.isEditMode = !!this.applicationId;
|
||||||
|
|
||||||
|
this.loadBusinessUnits();
|
||||||
|
|
||||||
|
if (this.isEditMode && this.applicationId) {
|
||||||
|
this.loadApplication(this.applicationId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBusinessUnits(): void {
|
||||||
|
this.businessUnitService.getBusinessUnits(0, 100).subscribe({
|
||||||
|
next: (data: Page<BusinessUnit>) => {
|
||||||
|
this.businessUnits = data.content;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load business units';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
loadApplication(id: string): void {
|
||||||
|
this.loading = true;
|
||||||
|
this.applicationService.getApplication(id).subscribe({
|
||||||
|
next: (app) => {
|
||||||
|
this.form.patchValue({
|
||||||
|
name: app.name,
|
||||||
|
description: app.description,
|
||||||
|
status: app.status,
|
||||||
|
businessUnitId: app.businessUnit.id,
|
||||||
|
endOfSupportDate: app.endOfSupportDate ? this.formatDateForInput(app.endOfSupportDate) : '',
|
||||||
|
endOfLifeDate: app.endOfLifeDate ? this.formatDateForInput(app.endOfLifeDate) : ''
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load application';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDateForInput(date: Date): string {
|
||||||
|
const d = new Date(date);
|
||||||
|
const year = d.getFullYear();
|
||||||
|
const month = String(d.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(d.getDate()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmit(): void {
|
||||||
|
if (this.form.valid) {
|
||||||
|
const endOfSupport = this.form.value.endOfSupportDate;
|
||||||
|
const endOfLife = this.form.value.endOfLifeDate;
|
||||||
|
|
||||||
|
if (endOfSupport && endOfLife) {
|
||||||
|
const supportDate = new Date(endOfSupport);
|
||||||
|
const lifeDate = new Date(endOfLife);
|
||||||
|
|
||||||
|
if (supportDate > lifeDate) {
|
||||||
|
this.error = 'End of support date must be before end of life date';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true;
|
||||||
|
this.error = '';
|
||||||
|
|
||||||
|
const formData = { ...this.form.value };
|
||||||
|
|
||||||
|
if (!formData.endOfSupportDate) {
|
||||||
|
formData.endOfSupportDate = null;
|
||||||
|
}
|
||||||
|
if (!formData.endOfLifeDate) {
|
||||||
|
formData.endOfLifeDate = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const request$ = this.isEditMode && this.applicationId
|
||||||
|
? this.applicationService.updateApplication(this.applicationId, formData)
|
||||||
|
: this.applicationService.createApplication(formData);
|
||||||
|
|
||||||
|
request$.subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = err.error?.message || 'Failed to save application';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel(): void {
|
||||||
|
this.router.navigate(['/applications']);
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusDisplay(status: ApplicationStatus): string {
|
||||||
|
const displays: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'Idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'In Development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'In Service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'Maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'Decommissioned'
|
||||||
|
};
|
||||||
|
return displays[status] || status;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
+175
-16
@@ -1,22 +1,181 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Router } from '@angular/router';
|
||||||
|
import { FormsModule } from '@angular/forms';
|
||||||
|
import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
|
||||||
|
import { ApplicationService } from '../application.service';
|
||||||
|
import { BusinessUnitService } from '../../business-units/business-unit.service';
|
||||||
|
import { Application, ApplicationStatus } from '../../../shared/models/application.model';
|
||||||
|
import { BusinessUnit } from '../../../shared/models/business-unit.model';
|
||||||
|
import { Page } from '../../../shared/models/environment.model';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-application-list',
|
selector: 'app-application-list',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule],
|
imports: [CommonModule, FormsModule],
|
||||||
template: `
|
templateUrl: './application-list.component.html',
|
||||||
<div class="container">
|
styleUrls: ['./application-list.component.scss']
|
||||||
<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 {}
|
export class ApplicationListComponent implements OnInit {
|
||||||
|
applications: Application[] = [];
|
||||||
|
businessUnits: BusinessUnit[] = [];
|
||||||
|
loading = false;
|
||||||
|
error = '';
|
||||||
|
|
||||||
|
page = 0;
|
||||||
|
size = 20;
|
||||||
|
totalElements = 0;
|
||||||
|
totalPages = 0;
|
||||||
|
|
||||||
|
searchQuery = '';
|
||||||
|
selectedStatus = '';
|
||||||
|
selectedBusinessUnitId = '';
|
||||||
|
|
||||||
|
statusOptions = Object.values(ApplicationStatus);
|
||||||
|
|
||||||
|
private searchSubject = new Subject<string>();
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private applicationService: ApplicationService,
|
||||||
|
private businessUnitService: BusinessUnitService,
|
||||||
|
private router: Router
|
||||||
|
) {
|
||||||
|
this.searchSubject.pipe(
|
||||||
|
debounceTime(300),
|
||||||
|
distinctUntilChanged()
|
||||||
|
).subscribe(() => {
|
||||||
|
this.page = 0;
|
||||||
|
this.loadApplications();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.loadBusinessUnits();
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBusinessUnits(): void {
|
||||||
|
this.businessUnitService.getBusinessUnits(0, 100).subscribe({
|
||||||
|
next: (data: Page<BusinessUnit>) => {
|
||||||
|
this.businessUnits = data.content;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
console.error('Failed to load business units', err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
loadApplications(): void {
|
||||||
|
this.loading = true;
|
||||||
|
const filters: any = {};
|
||||||
|
|
||||||
|
if (this.selectedStatus) {
|
||||||
|
filters.status = this.selectedStatus;
|
||||||
|
}
|
||||||
|
if (this.selectedBusinessUnitId) {
|
||||||
|
filters.businessUnitId = this.selectedBusinessUnitId;
|
||||||
|
}
|
||||||
|
if (this.searchQuery && this.searchQuery.trim() !== '') {
|
||||||
|
filters.name = this.searchQuery.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.applicationService.getApplications(filters, this.page, this.size).subscribe({
|
||||||
|
next: (data: Page<Application>) => {
|
||||||
|
this.applications = data.content;
|
||||||
|
this.totalElements = data.totalElements;
|
||||||
|
this.totalPages = data.totalPages;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to load applications';
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onSearchChange(query: string): void {
|
||||||
|
this.searchQuery = query;
|
||||||
|
this.searchSubject.next(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
onFilterChange(): void {
|
||||||
|
this.page = 0;
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
|
||||||
|
createNew(): void {
|
||||||
|
this.router.navigate(['/applications/new']);
|
||||||
|
}
|
||||||
|
|
||||||
|
viewDetails(id: string): void {
|
||||||
|
this.router.navigate(['/applications', id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
edit(id: string): void {
|
||||||
|
this.router.navigate(['/applications', id, 'edit']);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeStatus(id: string, newStatus: string): void {
|
||||||
|
if (!newStatus || newStatus === 'Change Status') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.applicationService.updateStatus(id, newStatus as ApplicationStatus).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.loadApplications();
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to update status';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(id: string): void {
|
||||||
|
if (confirm('Are you sure you want to delete this application?')) {
|
||||||
|
this.applicationService.deleteApplication(id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.loadApplications();
|
||||||
|
},
|
||||||
|
error: (err) => {
|
||||||
|
this.error = 'Failed to delete application';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nextPage(): void {
|
||||||
|
if (this.page < this.totalPages - 1) {
|
||||||
|
this.page++;
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
previousPage(): void {
|
||||||
|
if (this.page > 0) {
|
||||||
|
this.page--;
|
||||||
|
this.loadApplications();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusDisplay(status: ApplicationStatus): string {
|
||||||
|
const displays: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'Idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'In Development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'In Service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'Maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'Decommissioned'
|
||||||
|
};
|
||||||
|
return displays[status] || status;
|
||||||
|
}
|
||||||
|
|
||||||
|
getStatusClass(status: ApplicationStatus): string {
|
||||||
|
const classes: Record<ApplicationStatus, string> = {
|
||||||
|
[ApplicationStatus.IDEA]: 'status-idea',
|
||||||
|
[ApplicationStatus.IN_DEVELOPMENT]: 'status-in-development',
|
||||||
|
[ApplicationStatus.IN_SERVICE]: 'status-in-service',
|
||||||
|
[ApplicationStatus.MAINTENANCE]: 'status-maintenance',
|
||||||
|
[ApplicationStatus.DECOMMISSIONED]: 'status-decommissioned'
|
||||||
|
};
|
||||||
|
return classes[status] || '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user