Spaces:
Building
Building
File size: 7,817 Bytes
9f79da5 065ced2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
<div class="projects-container">
<div class="toolbar">
<div class="toolbar-left">
<h2>Projects</h2>
</div>
<div class="toolbar-right">
<button mat-raised-button color="primary" (click)="createProject()">
<mat-icon>add</mat-icon>
New Project
</button>
<button mat-button (click)="importProject()">
<mat-icon>upload</mat-icon>
Import Project
</button>
<mat-form-field appearance="outline" class="search-field">
<mat-label>Search projects</mat-label>
<input matInput [(ngModel)]="searchTerm" (input)="filterProjects()">
<mat-icon matSuffix>search</mat-icon>
</mat-form-field>
<mat-checkbox [(ngModel)]="showDeleted" (change)="loadProjects()">
Display Deleted
</mat-checkbox>
<mat-button-toggle-group [(ngModel)]="viewMode" class="view-toggle">
<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>{{ project.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>
</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">
<div class="name-with-icon">
<mat-icon class="project-table-icon">{{ project.icon || 'flight_takeoff' }}</mat-icon>
{{ project.name }}
<mat-icon class="deleted-icon" *ngIf="project.deleted">delete</mat-icon>
</div>
</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-listbox>
<mat-chip-option>{{ project.versions?.length || 0 }} total</mat-chip-option>
<mat-chip-option selected>{{ getPublishedCount(project) }} published</mat-chip-option>
</mat-chip-listbox>
</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>
<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>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
[class.deleted-row]="row.deleted"></tr>
</table>
</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> |