Update flare-ui/src/app/components/projects/projects.component.html

flare-ui/src/app/components/projects/projects.component.html

@@ -1,126 +1,179 @@
-    <div class="projects-container">
-      <div class="toolbar">
-        <h2>Projects</h2>
-        <div class="toolbar-actions">
-          <button class="btn btn-primary" (click)="createProject()">
-            New Project
-          </button>
-          <button class="btn btn-secondary" disabled>
-            Import Project
+<div class="projects-container">
+  <div class="toolbar">
+    <div class="toolbar-left">
+      <h2>Projects</h2>
+    </div>
+    <div class="toolbar-right">
+      <button class="btn btn-primary" (click)="createProject()">
+        New Project
+      </button>
+      <button class="btn btn-secondary" (click)="importProject()">
+        Import Project
+      </button>
+      <mat-form-field class="search-field" appearance="outline">
+        <mat-label>Search projects</mat-label>
+        <input matInput [(ngModel)]="searchTerm" (input)="filterProjects()" placeholder="Search...">
+        <mat-icon matSuffix>search</mat-icon>
+      </mat-form-field>
+      <mat-checkbox [(ngModel)]="showDeleted" (change)="loadProjects()">
+        Display Deleted
+      </mat-checkbox>
+      <mat-button-toggle-group class="view-toggle" [(ngModel)]="viewMode">
+        <mat-button-toggle value="card">
+          <mat-icon>view_module</mat-icon>
+        </mat-button-toggle>
+        <mat-button-toggle value="list">
+          <mat-icon>view_list</mat-icon>
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+  </div>
+
+  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
+
+  <div class="content" *ngIf="!loading">
+    <!-- Empty State -->
+    <div class="no-data" *ngIf="filteredProjects.length === 0">
+      <mat-icon>folder_open</mat-icon>
+      <p>No projects found.</p>
+      <button mat-raised-button color="primary" (click)="createProject()">
+        Create your first project
+      </button>
+    </div>
+
+    <!-- Card View -->
+    <div class="projects-grid" *ngIf="viewMode === 'card' && filteredProjects.length > 0">
+      <mat-card *ngFor="let project of filteredProjects; trackBy: trackByProjectId" 
+                class="project-card"
+                [class.disabled]="!project.enabled"
+                [class.deleted]="project.deleted">
+        <mat-card-header>
+          <div mat-card-avatar class="project-icon">
+            <mat-icon>flight_takeoff</mat-icon>
+          </div>
+          <mat-card-title>{{ project.name }}</mat-card-title>
+          <mat-card-subtitle>{{ project.caption || 'No description' }}</mat-card-subtitle>
+        </mat-card-header>
+        
+        <mat-card-content>
+          <div class="project-info">
+            <div class="info-item">
+              <mat-icon>layers</mat-icon>
+              <span>{{ project.versions?.length || 0 }} versions ({{ getPublishedCount(project) }} published)</span>
+            </div>
+            <div class="info-item">
+              <mat-icon>{{ project.enabled ? 'check_circle' : 'cancel' }}</mat-icon>
+              <span>{{ project.enabled ? 'Enabled' : 'Disabled' }}</span>
+            </div>
+            <div class="info-item">
+              <mat-icon>update</mat-icon>
+              <span>{{ getRelativeTime(project.last_update_date) }}</span>
+            </div>
+          </div>
+        </mat-card-content>
+        
+        <mat-card-actions>
+          <button mat-button (click)="editProject(project)">EDIT</button>
+          <button mat-button (click)="manageVersions(project)">VERSIONS</button>
+          <button mat-button (click)="exportProject(project)">EXPORT</button>
+          <button mat-button (click)="toggleProject(project)" color="warn">
+            {{ project.enabled ? 'DISABLE' : 'ENABLE' }}
           </button>
-          <input
-            type="text"
-            placeholder="Search projects..."
-            [(ngModel)]="searchTerm"
-            (input)="filterProjects()"
-            class="search-input"
-          >
-          <label class="checkbox-label">
-            <input
-              type="checkbox"
-              [(ngModel)]="showDeleted"
-              (change)="loadProjects()"
-            >
-            Display Deleted
-          </label>
-          <div class="view-toggle">
-            <button [class.active]="viewMode === 'card'" (click)="viewMode = 'card'">
-              Card
-            </button>
-            <button [class.active]="viewMode === 'list'" (click)="viewMode = 'list'">
-              List
+        </mat-card-actions>
+      </mat-card>
+    </div>
+
+    <!-- Table View -->
+    <div class="table-container" *ngIf="viewMode === 'list' && filteredProjects.length > 0">
+      <table mat-table [dataSource]="filteredProjects" class="projects-table">
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>Name</th>
+          <td mat-cell *matCellDef="let project">
+            {{ project.name }}
+            <mat-icon class="deleted-icon" *ngIf="project.deleted">delete</mat-icon>
+          </td>
+        </ng-container>
+
+        <!-- Caption Column -->
+        <ng-container matColumnDef="caption">
+          <th mat-header-cell *matHeaderCellDef>Caption</th>
+          <td mat-cell *matCellDef="let project">{{ project.caption || '-' }}</td>
+        </ng-container>
+
+        <!-- Versions Column -->
+        <ng-container matColumnDef="versions">
+          <th mat-header-cell *matHeaderCellDef>Versions</th>
+          <td mat-cell *matCellDef="let project">
+            <mat-chip-list>
+              <mat-chip>{{ project.versions?.length || 0 }} total</mat-chip>
+              <mat-chip color="primary" selected>{{ getPublishedCount(project) }} published</mat-chip>
+            </mat-chip-list>
+          </td>
+        </ng-container>
+
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef>Status</th>
+          <td mat-cell *matCellDef="let project">
+            <mat-icon *ngIf="project.enabled" color="primary">check_circle</mat-icon>
+            <mat-icon *ngIf="!project.enabled" color="warn">cancel</mat-icon>
+          </td>
+        </ng-container>
+
+        <!-- Last Update Column -->
+        <ng-container matColumnDef="lastUpdate">
+          <th mat-header-cell *matHeaderCellDef>Last Update</th>
+          <td mat-cell *matCellDef="let project">{{ getRelativeTime(project.last_update_date) }}</td>
+        </ng-container>
+
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef>Actions</th>
+          <td mat-cell *matCellDef="let project">
+            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Project actions">
+              <mat-icon>more_vert</mat-icon>
             </button>
-          </div>
-        </div>
-      </div>
+            <mat-menu #menu="matMenu">
+              <button mat-menu-item (click)="editProject(project)">
+                <mat-icon>edit</mat-icon>
+                <span>Edit</span>
+              </button>
+              <button mat-menu-item (click)="manageVersions(project)">
+                <mat-icon>layers</mat-icon>
+                <span>Manage Versions</span>
+              </button>
+              <button mat-menu-item (click)="exportProject(project)">
+                <mat-icon>download</mat-icon>
+                <span>Export</span>
+              </button>
+              <button mat-menu-item (click)="toggleProject(project)">
+                <mat-icon>{{ project.enabled ? 'block' : 'check_circle' }}</mat-icon>
+                <span>{{ project.enabled ? 'Disable' : 'Enable' }}</span>
+              </button>
+              <mat-divider *ngIf="!project.deleted"></mat-divider>
+              <button mat-menu-item (click)="deleteProject(project)" *ngIf="!project.deleted">
+                <mat-icon color="warn">delete</mat-icon>
+                <span>Delete</span>
+              </button>
+            </mat-menu>
+          </td>
+        </ng-container>
 
-      @if (loading) {
-        <div class="loading">
-          <span class="spinner"></span> Loading projects...
-        </div>
-      } @else if (filteredProjects.length === 0) {
-        <div class="empty-state">
-          <p>No projects found.</p>
-          <button class="btn btn-primary" (click)="createProject()">
-            Create your first project
-          </button>
-        </div>
-      } @else {
-        @if (viewMode === 'card') {
-          <div class="project-cards">
-            @for (project of filteredProjects; track project.id) {
-              <div class="project-card" [class.disabled]="!project.enabled" [class.deleted]="project.deleted">
-                <div class="project-icon">🛩️</div>
-                <h3>{{ project.name }}</h3>
-                <p>{{ project.caption || 'No description' }}</p>
-                <div class="project-meta">
-                  <span>Versions: {{ project.versions.length || 0 }} ({{ getPublishedCount(project) }} published)</span>
-                  <span>Status: {{ project.enabled ? '✓ Enabled' : '✗ Disabled' }}</span>
-                  <span>Last update: {{ getRelativeTime(project.last_update_date) }}</span>
-                </div>
-                <div class="project-actions">
-                  <button class="btn btn-secondary" (click)="editProject(project)">Edit</button>
-                  <button class="btn btn-secondary" (click)="manageVersions(project)">Versions</button>
-                  <button class="btn btn-secondary" (click)="exportProject(project)">Export</button>
-                  <button class="btn btn-secondary" (click)="toggleProject(project)">
-                    {{ project.enabled ? 'Disable' : 'Enable' }}
-                  </button>
-                </div>
-              </div>
-            }
-          </div>
-        } @else {
-          <table class="table">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Caption</th>
-                <th>Versions</th>
-                <th>Enabled</th>
-                <th>Deleted</th>
-                <th>Last Update</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              @for (project of filteredProjects; track project.id) {
-                <tr [class.deleted]="project.deleted">
-                  <td>{{ project.name }}</td>
-                  <td>{{ project.caption || '-' }}</td>
-                  <td>{{ project.versions.length || 0 }} ({{ getPublishedCount(project) }} published)</td>
-                  <td>
-                    @if (project.enabled) {
-                      <span class="status-badge enabled">✓</span>
-                    } @else {
-                      <span class="status-badge">✗</span>
-                    }
-                  </td>
-                  <td>
-                    @if (project.deleted) {
-                      <span class="status-badge deleted">✓</span>
-                    } @else {
-                      <span class="status-badge">✗</span>
-                    }
-                  </td>
-                  <td>{{ getRelativeTime(project.last_update_date) }}</td>
-                  <td class="actions">
-                    <button class="action-btn" title="Edit" (click)="editProject(project)">🖊️</button>
-                    <button class="action-btn" title="Versions" (click)="manageVersions(project)">📋</button>
-                    <button class="action-btn" title="Export" (click)="exportProject(project)">📤</button>
-                    @if (!project.deleted) {
-                      <button class="action-btn danger" title="Delete" (click)="deleteProject(project)">🗑️</button>
-                    }
-                  </td>
-                </tr>
-              }
-            </tbody>
-          </table>
-        }
-      }
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+            [class.deleted-row]="row.deleted"></tr>
+      </table>
+    </div>
+  </div>
 
-      @if (message) {
-        <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
-          {{ message }}
-        </div>
-      }
-    </div>
+  <!-- Message Snackbar -->
+  <div class="message-container" *ngIf="message">
+    <mat-card [class.success]="!isError" [class.error]="isError">
+      <mat-card-content>
+        <mat-icon>{{ isError ? 'error' : 'check_circle' }}</mat-icon>
+        {{ message }}
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>