diff --git a/src/app/components/dashboard/dashboard.css b/src/app/components/dashboard/dashboard.css index ef75673..ec09dd4 100644 --- a/src/app/components/dashboard/dashboard.css +++ b/src/app/components/dashboard/dashboard.css @@ -55,17 +55,6 @@ place-items: center; } -nav { - display: flex; - align-items: center; - gap: 20px; -} - -.workspace-card-link { - text-decoration: none; - color: inherit; -} - .logout-btn { border: 1px solid rgba(255, 255, 255, 0.24); background: transparent; @@ -158,6 +147,47 @@ nav { letter-spacing: 0.04em; } +.card-actions { + margin-top: 14px; + display: flex; + gap: 8px; +} + +.action-btn { + text-decoration: none; + display: inline-flex; + align-items: center; + border-radius: 8px; + border: 1px solid #d0d0d0; + padding: 7px 12px; + font-size: 13px; + cursor: pointer; + background: #fff; + color: #111; +} + +.open-btn { + background: #f3f3f3; +} + +.open-btn:hover { + background: #e9e9e9; +} + +.edit-btn:hover { + background: #f3f3f3; +} + +.delete-btn { + border-color: #2b2b2b; + background: #111; + color: #fff; +} + +.delete-btn:hover { + background: #000; +} + .empty-state { border: 1px dashed #bcbcbc; border-radius: 12px; diff --git a/src/app/components/dashboard/dashboard.html b/src/app/components/dashboard/dashboard.html index e624684..7da68ac 100644 --- a/src/app/components/dashboard/dashboard.html +++ b/src/app/components/dashboard/dashboard.html @@ -27,18 +27,17 @@

Your Workspaces

Create Workspace -
- -
-

{{ ws.name }}

-

{{ ws.description }}

- Created: {{ ws.createdDate | date }} +
- -
-

No workspaces found. Create one to get started!

+
diff --git a/src/app/components/dashboard/dashboard.ts b/src/app/components/dashboard/dashboard.ts index 453e81f..ccd9b38 100644 --- a/src/app/components/dashboard/dashboard.ts +++ b/src/app/components/dashboard/dashboard.ts @@ -25,6 +25,41 @@ export class Dashboard implements OnInit { }); } + editWorkspace(workspace: Workspace) { + const updatedName = window.prompt('Edit workspace name', workspace.name)?.trim(); + if (!updatedName) { + return; + } + + const updatedDescriptionInput = window.prompt('Edit workspace description', workspace.description ?? ''); + if (updatedDescriptionInput === null) { + return; + } + + const updatedDescription = updatedDescriptionInput.trim(); + + this.workspaceService.updateWorkspace(workspace.id, updatedName, updatedDescription).subscribe(updatedWorkspace => { + if (!updatedWorkspace) { + return; + } + this.workspaces = this.workspaces.map(ws => ws.id === updatedWorkspace.id ? updatedWorkspace : ws); + }); + } + + deleteWorkspace(workspace: Workspace) { + const confirmed = window.confirm(`Delete workspace "${workspace.name}"?`); + if (!confirmed) { + return; + } + + this.workspaceService.deleteWorkspace(workspace.id).subscribe(deleted => { + if (!deleted) { + return; + } + this.workspaces = this.workspaces.filter(ws => ws.id !== workspace.id); + }); + } + logout() { this.authService.logout(); this.router.navigate(['/login']); diff --git a/src/app/components/decision-form/decision-form.component.css b/src/app/components/decision-form/decision-form.component.css index 71e22d1..d4a3e61 100644 --- a/src/app/components/decision-form/decision-form.component.css +++ b/src/app/components/decision-form/decision-form.component.css @@ -1,12 +1,24 @@ .form-container { max-width: 600px; - margin: 20px auto; + margin: 8px auto 20px; padding: 20px; border: 1px solid #ddd; - border-radius: 4px; + border-radius: 12px; background-color: #fff; } +.form-header { + display: flex; + justify-content: space-between; + align-items: center; + gap: 12px; + margin-bottom: 16px; +} + +.form-header h2 { + margin: 0; +} + .form-group { margin-bottom: 15px; } @@ -19,9 +31,9 @@ .form-control { width: 100%; - padding: 8px; + padding: 10px 11px; border: 1px solid #ced4da; - border-radius: 4px; + border-radius: 8px; box-sizing: border-box; /* Ensures padding doesn't increase width */ } @@ -44,24 +56,35 @@ } .btn-primary { - background-color: #007bff; - color: white; - padding: 8px 16px; - border: none; - border-radius: 4px; + background-color: #111; + color: #fff; + padding: 8px 14px; + border: 1px solid #111; + border-radius: 8px; cursor: pointer; } .btn-primary:disabled { - background-color: #a0c4ff; + background-color: #888; + border-color: #888; cursor: not-allowed; } .btn-secondary { - background-color: #6c757d; - color: white; - padding: 8px 16px; - border: none; - border-radius: 4px; + background-color: #fff; + color: #111; + padding: 8px 14px; + border: 1px solid #cfcfcf; + border-radius: 8px; cursor: pointer; -} \ No newline at end of file +} + +.btn-ghost { + background: #fff; + color: #111; + padding: 8px 12px; + text-decoration: none; + border-radius: 8px; + border: 1px solid #cfcfcf; + font-size: 13px; +} diff --git a/src/app/components/decision-form/decision-form.component.html b/src/app/components/decision-form/decision-form.component.html index 68930f8..4467ca5 100644 --- a/src/app/components/decision-form/decision-form.component.html +++ b/src/app/components/decision-form/decision-form.component.html @@ -1,5 +1,8 @@
-

{{ isEditMode ? 'Edit Decision' : 'Create New Decision' }}

+
+

{{ isEditMode ? 'Edit Decision' : 'Create New Decision' }}

+ Back to Dashboard +
@@ -27,10 +30,10 @@

{{ isEditMode ? 'Edit Decision' : 'Create New Decision' }}

- +
-
\ No newline at end of file +
diff --git a/src/app/components/decision-form/decision-form.component.ts b/src/app/components/decision-form/decision-form.component.ts index 70adcba..c48d6a2 100644 --- a/src/app/components/decision-form/decision-form.component.ts +++ b/src/app/components/decision-form/decision-form.component.ts @@ -17,6 +17,7 @@ export class DecisionFormComponent implements OnInit { isEditMode = false; decisionId: string | null = null; isLoading = false; + workspaceId: string | null = null; constructor( private fb: FormBuilder, @@ -32,13 +33,7 @@ export class DecisionFormComponent implements OnInit { } ngOnInit(): void { - // Get workspaceId from parent - this.route.parent?.paramMap.subscribe(params => { - const workspaceId = params.get('id'); - if (workspaceId) { - this.decisionForm.patchValue({ workspaceId }); - } - }); + this.workspaceId = this.getWorkspaceIdFromRoute(); // Get decisionId from current route this.route.paramMap.subscribe(params => { @@ -78,11 +73,23 @@ export class DecisionFormComponent implements OnInit { this.router.navigate(['../../'], { relativeTo: this.route }); }); } else { - // Include workspaceId from parent route if available - const workspaceId = this.route.parent?.snapshot.paramMap.get('id'); - this.decisionService.createDecision({ ...formValue, workspaceId }).subscribe(() => { + if (!this.workspaceId) { + return; + } + + this.decisionService.createDecision({ ...formValue, workspaceId: this.workspaceId }).subscribe(() => { this.router.navigate(['../'], { relativeTo: this.route }); }); } } + + private getWorkspaceIdFromRoute(): string | null { + for (const route of this.route.pathFromRoot) { + const id = route.snapshot.paramMap.get('id'); + if (id) { + return id; + } + } + return null; + } } diff --git a/src/app/components/decision-list/decision-list.component.css b/src/app/components/decision-list/decision-list.component.css index 781008a..9cc4ed3 100644 --- a/src/app/components/decision-list/decision-list.component.css +++ b/src/app/components/decision-list/decision-list.component.css @@ -1,6 +1,6 @@ .decision-container { - padding: 20px; - max-width: 800px; + padding: 0 0 20px; + max-width: 920px; margin: 0 auto; } @@ -8,42 +8,69 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: 16px; + gap: 12px; +} + +.header h2 { + margin: 0; + font-size: 30px; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.header-actions { + display: flex; + gap: 8px; } .btn-primary { - background-color: #007bff; - color: white; - padding: 10px 15px; + background-color: #0a0a0a; + color: #fff; + padding: 9px 13px; text-decoration: none; - border-radius: 4px; + border-radius: 8px; + border: 1px solid #0a0a0a; + font-size: 13px; +} + +.btn-ghost { + background: #fff; + color: #111; + padding: 9px 13px; + text-decoration: none; + border-radius: 8px; + border: 1px solid #d2d2d2; + font-size: 13px; } .btn-secondary { - background-color: #6c757d; - color: white; - padding: 5px 10px; + background-color: #fff; + color: #111; + padding: 7px 11px; text-decoration: none; - border-radius: 4px; + border-radius: 8px; + border: 1px solid #d2d2d2; margin-right: 5px; cursor: pointer; - border: none; + font-size: 13px; } .btn-danger { - background-color: #dc3545; - color: white; - padding: 5px 10px; - border: none; - border-radius: 4px; + background-color: #111; + color: #fff; + padding: 7px 11px; + border: 1px solid #111; + border-radius: 8px; cursor: pointer; + font-size: 13px; } .decision-card { border: 1px solid #ddd; - padding: 15px; + padding: 16px; margin-bottom: 10px; - border-radius: 4px; + border-radius: 10px; background-color: #fff; } @@ -59,29 +86,31 @@ } .status-badge { - padding: 3px 8px; - border-radius: 12px; + padding: 3px 9px; + border-radius: 999px; font-size: 12px; - font-weight: bold; + font-weight: 600; + border: 1px solid #d5d5d5; } .status-badge.draft { - background-color: #e2e3e5; - color: #383d41; + background-color: #efefef; + color: #303030; } .status-badge.open { - background-color: #d4edda; - color: #155724; + background-color: #ffffff; + color: #111; } .status-badge.closed { - background-color: #d1ecf1; - color: #0c5460; + background-color: #111; + color: #fff; + border-color: #111; } .decision-meta { font-size: 12px; color: #666; margin-bottom: 10px; -} \ No newline at end of file +} diff --git a/src/app/components/decision-list/decision-list.component.html b/src/app/components/decision-list/decision-list.component.html index 4196208..926b067 100644 --- a/src/app/components/decision-list/decision-list.component.html +++ b/src/app/components/decision-list/decision-list.component.html @@ -1,7 +1,10 @@
@@ -24,4 +27,4 @@

{{ decision.title }}

- \ No newline at end of file + diff --git a/src/app/components/decision-list/decision-list.component.ts b/src/app/components/decision-list/decision-list.component.ts index 17b4681..13f6809 100644 --- a/src/app/components/decision-list/decision-list.component.ts +++ b/src/app/components/decision-list/decision-list.component.ts @@ -21,13 +21,10 @@ export class DecisionListComponent implements OnInit { ) { } ngOnInit(): void { - // Get workspaceId from the parent route (workspaces/:id) - this.route.parent?.paramMap.subscribe(params => { - const workspaceId = params.get('id'); - if (workspaceId) { - this.decisions$ = this.decisionService.getDecisions(workspaceId); - } - }); + const workspaceId = this.getWorkspaceIdFromRoute(); + if (workspaceId) { + this.decisions$ = this.decisionService.getDecisions(workspaceId); + } } deleteDecision(id: string): void { @@ -35,4 +32,14 @@ export class DecisionListComponent implements OnInit { this.decisionService.deleteDecision(id); } } + + private getWorkspaceIdFromRoute(): string | null { + for (const route of this.route.pathFromRoot) { + const id = route.snapshot.paramMap.get('id'); + if (id) { + return id; + } + } + return null; + } } diff --git a/src/app/components/workspace/create-workspace.css b/src/app/components/workspace/create-workspace.css index e8cdb50..4de2a73 100644 --- a/src/app/components/workspace/create-workspace.css +++ b/src/app/components/workspace/create-workspace.css @@ -28,10 +28,13 @@ label { font-weight: 600; } -input { +input, +textarea { padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 6px; + font: inherit; + resize: vertical; } .actions { diff --git a/src/app/components/workspace/create-workspace.html b/src/app/components/workspace/create-workspace.html index a02bd2e..b7725db 100644 --- a/src/app/components/workspace/create-workspace.html +++ b/src/app/components/workspace/create-workspace.html @@ -14,6 +14,16 @@

Create Workspace

placeholder="e.g. Product Team" /> + + +