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

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

@@ -0,0 +1,126 @@
+    <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
+          </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
+            </button>
+          </div>
+        </div>
+      </div>
+
+      @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>
+        }
+      }
+
+      @if (message) {
+        <div class="alert" [class.alert-success]="!isError" [class.alert-danger]="isError">
+          {{ message }}
+        </div>
+      }
+    </div>