init page projet
This commit is contained in:
Cédric OLIVIER
@@ -0,0 +1,36 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 0.5rem 0 1.5rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
<header class="page-header">
|
||||
<h1>Accueil</h1>
|
||||
<p>Bienvenue sur Bonsai Webapp.</p>
|
||||
</header>
|
||||
|
||||
<section class="cards">
|
||||
<article class="card">
|
||||
<h2>Statistiques</h2>
|
||||
<p>Resume rapide des activites recentes.</p>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h2>Notifications</h2>
|
||||
<p>Consultez les dernieres mises a jour de l'equipe.</p>
|
||||
</article>
|
||||
|
||||
<article class="card">
|
||||
<h2>Taches en cours</h2>
|
||||
<p>Suivi des priorites de la semaine.</p>
|
||||
</article>
|
||||
</section>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Home } from './home';
|
||||
|
||||
describe('Home', () => {
|
||||
let component: Home;
|
||||
let fixture: ComponentFixture<Home>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Home],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Home);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
imports: [],
|
||||
templateUrl: './home.html',
|
||||
styleUrl: './home.css',
|
||||
})
|
||||
export class Home {}
|
||||
@@ -0,0 +1,52 @@
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #111827;
|
||||
color: #f9fafb;
|
||||
padding: 1.5rem 1rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.65rem 0.75rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #1f2937;
|
||||
}
|
||||
|
||||
.menu-item.active {
|
||||
background-color: #2563eb;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<aside class="sidebar" aria-label="Menu principal">
|
||||
<h2 class="sidebar-title">Menu</h2>
|
||||
|
||||
<nav>
|
||||
<ul class="menu-list">
|
||||
@for (item of menuItems; track item.path) {
|
||||
<li>
|
||||
<a
|
||||
class="menu-item"
|
||||
[routerLink]="item.path"
|
||||
routerLinkActive="active"
|
||||
[routerLinkActiveOptions]="{ exact: true }"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Menu } from './menu';
|
||||
|
||||
describe('Menu', () => {
|
||||
let component: Menu;
|
||||
let fixture: ComponentFixture<Menu>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Menu],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Menu);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { RouterLink, RouterLinkActive } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-menu',
|
||||
imports: [RouterLink, RouterLinkActive],
|
||||
templateUrl: './menu.html',
|
||||
styleUrl: './menu.css',
|
||||
})
|
||||
export class Menu {
|
||||
protected readonly menuItems = [
|
||||
{ label: 'Accueil', path: '/home' },
|
||||
{ label: 'Projet', path: '/project' },
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
margin: 0.5rem 0 1.5rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #2563eb;
|
||||
color: #ffffff;
|
||||
padding: 0.65rem 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.create-button:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.85rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: #6b7280;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<h1>Projets</h1>
|
||||
<p>Vue d'ensemble des projets actifs.</p>
|
||||
</div>
|
||||
<button type="button" class="create-button" (click)="createProject()">
|
||||
Nouveau projet
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section class="table-wrapper" aria-label="Tableau des projets">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Responsable</th>
|
||||
<th>Statut</th>
|
||||
<th>Progression</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (project of projects(); track project.id) {
|
||||
<tr>
|
||||
<td>{{ project.name }}</td>
|
||||
<td>{{ project.owner }}</td>
|
||||
<td>{{ project.status }}</td>
|
||||
<td>{{ project.progress }}%</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Projects } from './projects';
|
||||
|
||||
describe('Projects', () => {
|
||||
let component: Projects;
|
||||
let fixture: ComponentFixture<Projects>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Projects],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Projects);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Component, signal } from '@angular/core';
|
||||
|
||||
type Project = {
|
||||
id: number;
|
||||
name: string;
|
||||
owner: string;
|
||||
status: 'Actif' | 'En attente' | 'Nouveau';
|
||||
progress: number;
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: 'app-projects',
|
||||
imports: [],
|
||||
templateUrl: './projects.html',
|
||||
styleUrl: './projects.css',
|
||||
})
|
||||
export class Projects {
|
||||
protected readonly projects = signal<Project[]>([
|
||||
{ id: 1, name: 'Refonte Interface', owner: 'Marie', status: 'Actif', progress: 70 },
|
||||
{ id: 2, name: 'API Inventaire', owner: 'Nabil', status: 'En attente', progress: 45 },
|
||||
{ id: 3, name: 'Pipeline CI', owner: 'Sonia', status: 'Actif', progress: 90 },
|
||||
]);
|
||||
|
||||
private nextId = 4;
|
||||
|
||||
protected createProject(): void {
|
||||
const newProject: Project = {
|
||||
id: this.nextId,
|
||||
name: `Nouveau projet ${this.nextId}`,
|
||||
owner: 'A definir',
|
||||
status: 'Nouveau',
|
||||
progress: 0,
|
||||
};
|
||||
|
||||
this.projects.update((currentProjects) => [...currentProjects, newProject]);
|
||||
this.nextId += 1;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user