feat: add brand mark component and dashboard page
- Introduced a new `BrandMark` component for branding purposes. - Created a `DashboardPage` component with a responsive layout, including sections for user profile, apartment management, and API demo. - Added styles for the dashboard page to enhance user experience. - Implemented a settings page with theme preferences and session management features. - Developed a sign-in page with branding and user-friendly design. - Established a workspace navigation component for easy access to different sections of the application. - Implemented an `ApartmentService` for managing apartment data with corresponding unit tests. - Created a `ConfigService` for loading application configuration. - Added a `ThemeService` to manage user theme preferences dynamically.
This commit is contained in:
nessar committed
1 parent
3e552cad90
commit
26ab037084
37 files changed
+1877
-1650
No files matched your search
@@ -1,9 +1,14 @@
|
||||
import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideAppInitializer, inject } from '@angular/core';
|
||||
import {
|
||||
ApplicationConfig,
|
||||
provideBrowserGlobalErrorListeners,
|
||||
provideAppInitializer,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { provideHttpClient } from '@angular/common/http';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { ConfigService } from './config.service';
|
||||
import { ConfigService } from './services/config.service';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
@@ -13,6 +18,6 @@ export const appConfig: ApplicationConfig = {
|
||||
provideAppInitializer(() => {
|
||||
const configService = inject(ConfigService);
|
||||
return configService.loadConfig();
|
||||
})
|
||||
]
|
||||
}),
|
||||
],
|
||||
};
|
||||
+5
-935
@@ -4,198 +4,11 @@
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: 0 0 42px;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.primary-action.mat-mdc-unelevated-button {
|
||||
--mdc-filled-button-container-color: var(--accent);
|
||||
--mdc-filled-button-label-text-color: var(--accent-contrast);
|
||||
min-height: 44px;
|
||||
border-radius: 13px;
|
||||
padding-inline: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.context-label,
|
||||
.story-kicker,
|
||||
.property-label {
|
||||
margin-bottom: 8px;
|
||||
color: var(--accent);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Sign in */
|
||||
.sign-in-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.sign-in-panel {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
margin-bottom: clamp(64px, 14vh, 120px);
|
||||
}
|
||||
|
||||
.brand-lockup h1 {
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.02rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.brand-lockup p {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.sign-in-copy {
|
||||
max-width: 510px;
|
||||
}
|
||||
|
||||
.sign-in-copy h2 {
|
||||
max-width: 480px;
|
||||
margin-bottom: 18px;
|
||||
font-size: clamp(2.35rem, 9vw, 4.8rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.065em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
.sign-in-copy > p {
|
||||
max-width: 470px;
|
||||
margin-bottom: 30px;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.sign-in-action {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.sign-in-action svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.security-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 17px 0 0;
|
||||
color: var(--text-subtle);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.security-note span {
|
||||
color: var(--accent);
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
|
||||
.sign-in-story {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* App shell and navigation */
|
||||
.workspace-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--canvas);
|
||||
}
|
||||
|
||||
.app-navigation {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: calc(72px + env(safe-area-inset-bottom));
|
||||
padding: 6px 10px env(safe-area-inset-bottom);
|
||||
border-top: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--surface) 94%, transparent);
|
||||
box-shadow: 0 -10px 30px rgba(25, 40, 35, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.sidebar-brand,
|
||||
.sidebar-user {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-items {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navigation-item.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--text-muted);
|
||||
min-width: 0;
|
||||
height: 60px;
|
||||
border-radius: 14px;
|
||||
padding: 5px 4px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.navigation-item .mat-mdc-button-touch-target {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.navigation-item svg {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin: 0 auto 4px;
|
||||
}
|
||||
|
||||
.navigation-item span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 0.66rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navigation-item.active {
|
||||
--mdc-text-button-label-text-color: var(--accent);
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
|
||||
.workspace-main {
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
@@ -225,21 +38,17 @@ p {
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.compact-avatar,
|
||||
.large-avatar {
|
||||
.compact-avatar {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 34px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.compact-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 34px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
@@ -249,759 +58,20 @@ p {
|
||||
padding: 30px 20px 112px;
|
||||
}
|
||||
|
||||
.page-section {
|
||||
animation: page-in 180ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes page-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.page-heading h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
.page-heading > div > p:last-child,
|
||||
.page-heading > p {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.role-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
gap: 7px;
|
||||
margin-top: 18px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.status-pill span {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
/* Dashboard */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.feature-card,
|
||||
.apartment-card,
|
||||
.empty-state,
|
||||
.apartment-form,
|
||||
.settings-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.feature-card h2,
|
||||
.settings-card h2 {
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.feature-card p:not(.eyebrow),
|
||||
.settings-card p:not(.eyebrow) {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.feature-card-primary {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
border-color: transparent;
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
|
||||
.feature-card-primary .mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--accent-strong);
|
||||
width: fit-content;
|
||||
padding-inline: 0;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
.feature-icon,
|
||||
.settings-icon,
|
||||
.empty-illustration {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: var(--surface);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.feature-icon svg,
|
||||
.settings-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.large-avatar {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
flex: 0 0 58px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-details h3 {
|
||||
margin-bottom: 3px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
overflow: hidden;
|
||||
margin-bottom: 11px;
|
||||
font-size: 0.84rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.role-chip {
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.api-demo-section {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.api-actions .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--accent);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.api-response-wrapper {
|
||||
padding: 14px;
|
||||
border-radius: 13px;
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.api-response-wrapper > span {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: var(--text-subtle);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.api-response-code {
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.83rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* Apartments */
|
||||
.page-heading .primary-action {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.button-plus {
|
||||
margin-right: 4px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 46px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-illustration {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
margin: 0 auto 22px;
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
|
||||
.empty-illustration svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.empty-state > p:not(.eyebrow) {
|
||||
max-width: 440px;
|
||||
margin: 0 auto 22px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-state .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--accent);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.apartments-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.apartment-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.apartment-card-topline {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.property-label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.property-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.apt-info h2 {
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.apt-address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.apt-address svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
flex: 0 0 17px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.apt-desc {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.apt-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.apt-actions .mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--accent);
|
||||
}
|
||||
|
||||
.apt-actions .danger-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--danger);
|
||||
}
|
||||
|
||||
/* Apartment form */
|
||||
.back-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--text-muted);
|
||||
margin: 0 0 20px -16px;
|
||||
}
|
||||
|
||||
.apartment-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.form-grid mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
margin-bottom: 18px;
|
||||
padding: 13px 15px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
|
||||
border-radius: 12px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
font-size: 0.87rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Settings */
|
||||
.settings-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-copy {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
padding: 22px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
flex: 0 0 46px;
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
|
||||
.settings-copy h2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.settings-copy p:last-child {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.theme-options {
|
||||
display: grid;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.theme-options mat-radio-button {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.theme-options mat-radio-button:hover {
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.theme-option-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
.theme-option-copy strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.theme-option-copy small {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.session-settings {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.session-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.session-action > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.session-action strong,
|
||||
.session-action span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.session-action span {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.session-action .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--danger);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.page-container {
|
||||
padding: 42px 36px 116px;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.page-heading .primary-action {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.feature-card-primary,
|
||||
.api-demo-section {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.apartment-form {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 18px;
|
||||
}
|
||||
|
||||
.full-field {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.sign-in-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(520px, 0.92fr) minmax(480px, 1.08fr);
|
||||
}
|
||||
|
||||
.sign-in-panel {
|
||||
padding: 56px clamp(56px, 7vw, 112px);
|
||||
}
|
||||
|
||||
.sign-in-story {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
place-items: end start;
|
||||
padding: 64px;
|
||||
background:
|
||||
radial-gradient(circle at 75% 20%, rgba(99, 199, 188, 0.24), transparent 30%),
|
||||
linear-gradient(145deg, #153d38, #0e2925 55%, #0a1d1a);
|
||||
color: #effbf8;
|
||||
}
|
||||
|
||||
.story-card {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.story-kicker {
|
||||
color: #7ed6cc;
|
||||
}
|
||||
|
||||
.story-card h2 {
|
||||
margin-bottom: 42px;
|
||||
font-size: clamp(2.4rem, 4vw, 4.5rem);
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.story-list {
|
||||
display: grid;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.story-list > div {
|
||||
display: grid;
|
||||
grid-template-columns: 42px 1fr;
|
||||
gap: 12px;
|
||||
padding: 17px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
|
||||
.story-list span {
|
||||
color: #7ed6cc;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.story-list p {
|
||||
margin-bottom: 0;
|
||||
color: rgba(239, 251, 248, 0.76);
|
||||
}
|
||||
|
||||
.workspace-shell {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.app-navigation {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
width: 256px;
|
||||
height: 100vh;
|
||||
padding: 26px 18px;
|
||||
border-top: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 8px 32px;
|
||||
}
|
||||
|
||||
.sidebar-brand > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.sidebar-brand strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-brand span:last-child {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.navigation-item.mat-mdc-button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
justify-content: flex-start;
|
||||
border-radius: 13px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.navigation-item .mat-mdc-button-touch-target {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.navigation-item .mdc-button__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.navigation-item svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navigation-item span {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.sidebar-user {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 24px;
|
||||
left: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.sidebar-user > div:nth-child(2) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-user strong,
|
||||
.sidebar-user span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar-user strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.sidebar-user span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.69rem;
|
||||
}
|
||||
|
||||
.logout-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--text-muted);
|
||||
grid-column: 1 / -1;
|
||||
height: 34px;
|
||||
border-top: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.workspace-main {
|
||||
margin-left: 256px;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 64px clamp(48px, 6vw, 82px);
|
||||
}
|
||||
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.feature-card-primary {
|
||||
grid-column: span 2;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.api-demo-section {
|
||||
grid-column: span 3;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.api-response-wrapper {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
|
||||
}
|
||||
|
||||
.settings-copy {
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.session-action {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.form-page {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
+30
-446
@@ -1,152 +1,15 @@
|
||||
@if (!isLoggedIn) {
|
||||
<main class="sign-in-shell">
|
||||
<section class="sign-in-panel">
|
||||
<div class="brand-lockup">
|
||||
<app-brand-mark class="brand-mark" />
|
||||
<div>
|
||||
<h1>LMNP Organizer</h1>
|
||||
<p>Gestion locative & fiscalité</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sign-in-copy">
|
||||
<span class="context-label">Espace bailleur</span>
|
||||
<h2>Votre gestion locative, enfin lisible.</h2>
|
||||
<p>
|
||||
Pilotez vos appartements et gardez vos démarches LMNP au même endroit, sur mobile comme
|
||||
sur ordinateur.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button mat-flat-button class="primary-action sign-in-action" (click)="login()">
|
||||
Se connecter avec OIDC
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<p class="security-note">
|
||||
<span aria-hidden="true">●</span>
|
||||
Connexion sécurisée via OpenID Connect
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<aside class="sign-in-story" aria-label="Aperçu du produit">
|
||||
<div class="story-card">
|
||||
<p class="story-kicker">Pensé pour aller à l'essentiel</p>
|
||||
<h2>Un espace calme pour vos décisions de bailleur.</h2>
|
||||
<div class="story-list">
|
||||
<div>
|
||||
<span>01</span>
|
||||
<p>Vos biens accessibles en quelques gestes.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>02</span>
|
||||
<p>Une interface adaptée à chaque écran.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>03</span>
|
||||
<p>Vos outils LMNP réunis progressivement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
<app-sign-in-page (loginRequested)="login()" />
|
||||
} @else {
|
||||
<div class="workspace-shell">
|
||||
<aside class="app-navigation" data-testid="primary-navigation">
|
||||
<div class="sidebar-brand">
|
||||
<app-brand-mark class="brand-mark" />
|
||||
<div>
|
||||
<strong>LMNP</strong>
|
||||
<span>Organizer</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navigation-items" aria-label="Navigation principale">
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="navigation-item"
|
||||
[class.active]="activeTab() === 'dashboard'"
|
||||
[attr.aria-current]="activeTab() === 'dashboard' ? 'page' : null"
|
||||
(click)="activeTab.set('dashboard')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="3" y="3" width="7" height="7" rx="2" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="2" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="2" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="2" />
|
||||
</svg>
|
||||
<span>Tableau de bord</span>
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="navigation-item"
|
||||
[class.active]="activeTab() === 'apartments'"
|
||||
[attr.aria-current]="activeTab() === 'apartments' ? 'page' : null"
|
||||
(click)="activeTab.set('apartments')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16" />
|
||||
<path d="M2 21h20M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2" />
|
||||
</svg>
|
||||
<span>Appartements</span>
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="navigation-item"
|
||||
[class.active]="activeTab() === 'settings'"
|
||||
[attr.aria-current]="activeTab() === 'settings' ? 'page' : null"
|
||||
(click)="activeTab.set('settings')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path
|
||||
d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.16.38.37.72.6 1 .3.3.7.45 1.1.45h.09v4h-.09c-.4 0-.8.15-1.1.45-.23.28-.44.62-.6 1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Réglages</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-user">
|
||||
<div class="compact-avatar">{{ userInitial() }}</div>
|
||||
<div>
|
||||
<strong>{{ username }}</strong>
|
||||
<span>{{ email }}</span>
|
||||
</div>
|
||||
<button mat-button type="button" class="logout-action" (click)="logout()">
|
||||
Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<app-workspace-navigation
|
||||
[activeTab]="activeTab()"
|
||||
[username]="username"
|
||||
[email]="email"
|
||||
[userInitial]="userInitial()"
|
||||
(tabSelected)="activeTab.set($event)"
|
||||
(logoutRequested)="logout()"
|
||||
/>
|
||||
|
||||
<main class="workspace-main">
|
||||
<header class="mobile-header">
|
||||
@@ -159,310 +22,31 @@
|
||||
|
||||
<div class="page-container">
|
||||
@if (activeTab() === 'dashboard') {
|
||||
<section class="page-section dashboard-page">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Bonjour {{ username }}</p>
|
||||
<h1>Tableau de bord</h1>
|
||||
<p>Retrouvez rapidement les actions utiles à votre gestion locative.</p>
|
||||
</div>
|
||||
<span class="status-pill"><span></span>Espace sécurisé</span>
|
||||
</header>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<article class="feature-card feature-card-primary">
|
||||
<div class="feature-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16M2 21h20" />
|
||||
<path d="M8 8h8M8 12h8M8 16h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow">Votre portefeuille</p>
|
||||
<h2>
|
||||
{{ apartments().length }} appartement{{ apartments().length > 1 ? 's' : '' }}
|
||||
</h2>
|
||||
<p>Centralisez les informations essentielles de vos biens.</p>
|
||||
</div>
|
||||
<button mat-button type="button" (click)="activeTab.set('apartments')">
|
||||
Gérer mes appartements
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<article class="feature-card user-profile">
|
||||
<div class="large-avatar">{{ userInitial() }}</div>
|
||||
<div class="user-details">
|
||||
<p class="eyebrow">Compte actif</p>
|
||||
<h3>{{ username }}</h3>
|
||||
<p class="user-email">{{ email }}</p>
|
||||
<span class="role-chip">Bailleur connecté</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="feature-card api-demo-section">
|
||||
<div>
|
||||
<p class="eyebrow">État du service</p>
|
||||
<h2>Connexion au serveur</h2>
|
||||
<p>Vérifiez que votre espace communique correctement avec le service sécurisé.</p>
|
||||
</div>
|
||||
<div class="api-actions">
|
||||
<button mat-stroked-button type="button" (click)="callHelloApi()">
|
||||
Tester la connexion
|
||||
</button>
|
||||
</div>
|
||||
@if (helloMessage()) {
|
||||
<div class="api-response-wrapper">
|
||||
<span>Réponse du serveur</span>
|
||||
<code class="api-response-code">{{ helloMessage() }}</code>
|
||||
</div>
|
||||
}
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
<app-dashboard-page
|
||||
[username]="username"
|
||||
[email]="email"
|
||||
[userInitial]="userInitial()"
|
||||
[apartmentCount]="apartments().length"
|
||||
[helloMessage]="helloMessage()"
|
||||
(apartmentsRequested)="activeTab.set('apartments')"
|
||||
(connectionCheckRequested)="callHelloApi()"
|
||||
/>
|
||||
}
|
||||
|
||||
@if (activeTab() === 'apartments') {
|
||||
<section class="page-section apartments-page">
|
||||
@if (!showForm()) {
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Portefeuille</p>
|
||||
<h1>Mes appartements</h1>
|
||||
<p>Les biens rattachés à votre activité LMNP.</p>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
type="button"
|
||||
class="primary-action"
|
||||
(click)="openAddForm()"
|
||||
>
|
||||
<span class="button-plus" aria-hidden="true">+</span>
|
||||
Ajouter un appartement
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@if (apartments().length === 0) {
|
||||
<article class="empty-state">
|
||||
<div class="empty-illustration" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="m4 10 8-6 8 6v10H4z" />
|
||||
<path d="M9 20v-6h6v6" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="eyebrow">Commencez ici</p>
|
||||
<h2>Aucun appartement enregistré</h2>
|
||||
<p>Ajoutez votre premier bien pour construire votre portefeuille.</p>
|
||||
<button mat-stroked-button type="button" (click)="openAddForm()">
|
||||
Ajouter un appartement
|
||||
</button>
|
||||
</article>
|
||||
} @else {
|
||||
<div class="apartments-grid">
|
||||
@for (apt of apartments(); track apt.id) {
|
||||
<article class="apartment-card">
|
||||
<div class="apartment-card-topline">
|
||||
<span class="property-label">Bien immobilier</span>
|
||||
<span class="property-value"
|
||||
>{{ apt.purchasePrice.toLocaleString('fr-FR') }} €</span
|
||||
>
|
||||
</div>
|
||||
<div class="apt-info">
|
||||
<h2>{{ apt.name }}</h2>
|
||||
<p class="apt-address">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z" />
|
||||
<circle cx="12" cy="10" r="2.5" />
|
||||
</svg>
|
||||
{{ apt.address }}
|
||||
</p>
|
||||
@if (apt.description) {
|
||||
<p class="apt-desc">{{ apt.description }}</p>
|
||||
}
|
||||
</div>
|
||||
<div class="apt-actions">
|
||||
<button mat-button type="button" (click)="openEditForm(apt)">
|
||||
Modifier
|
||||
</button>
|
||||
@if (apt.id) {
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="danger-action"
|
||||
(click)="deleteApartment(apt.id)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} @else {
|
||||
<div class="form-page">
|
||||
<header class="page-heading form-heading">
|
||||
<div>
|
||||
<button mat-button type="button" class="back-action" (click)="closeForm()">
|
||||
← Retour
|
||||
</button>
|
||||
<p class="eyebrow">Portefeuille</p>
|
||||
<h1>
|
||||
{{ editingApartment() ? "Modifier l'appartement" : 'Ajouter un appartement' }}
|
||||
</h1>
|
||||
<p>Renseignez les informations principales du bien.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form (submit)="saveApartment(); $event.preventDefault()" class="apartment-form">
|
||||
@if (formError) {
|
||||
<div class="alert-error" role="alert">{{ formError }}</div>
|
||||
}
|
||||
|
||||
<div class="form-grid">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Nom de l'appartement</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
name="name"
|
||||
[(ngModel)]="formName"
|
||||
placeholder="T2 Paris 15"
|
||||
required
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Prix d'acquisition</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="number"
|
||||
name="purchasePrice"
|
||||
[(ngModel)]="formPurchasePrice"
|
||||
min="1"
|
||||
required
|
||||
/>
|
||||
<span matTextSuffix>€</span>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="full-field">
|
||||
<mat-label>Adresse complète</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
name="address"
|
||||
[(ngModel)]="formAddress"
|
||||
placeholder="45 rue des Entrepreneurs, 75015 Paris"
|
||||
required
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="full-field">
|
||||
<mat-label>Description ou notes</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
name="description"
|
||||
[(ngModel)]="formDescription"
|
||||
rows="4"
|
||||
placeholder="Étage, agencement, équipements…"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button mat-button type="button" (click)="closeForm()">Annuler</button>
|
||||
<button mat-flat-button type="submit" class="primary-action">
|
||||
Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
<app-apartments-page
|
||||
[apartments]="apartments()"
|
||||
(deleteRequested)="deleteApartment($event)"
|
||||
(apartmentSaved)="saveApartment($event)"
|
||||
/>
|
||||
}
|
||||
|
||||
@if (activeTab() === 'settings') {
|
||||
<section class="page-section settings-page">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Préférences</p>
|
||||
<h1>Réglages</h1>
|
||||
<p>Adaptez LMNP Organizer à votre façon de travailler.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article class="settings-card" aria-labelledby="appearance-heading">
|
||||
<div class="settings-copy">
|
||||
<span class="settings-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M12 3a9 9 0 1 0 9 9c0-.5-.04-1-.12-1.47A7 7 0 0 1 12 3Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<p class="eyebrow">Interface</p>
|
||||
<h2 id="appearance-heading">Apparence</h2>
|
||||
<p>Le réglage est mémorisé uniquement sur cet appareil.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-radio-group
|
||||
class="theme-options"
|
||||
aria-label="Thème de l'application"
|
||||
[value]="themePreference()"
|
||||
(change)="themeService.setPreference($event.value)"
|
||||
>
|
||||
<mat-radio-button value="light">
|
||||
<span class="theme-option-copy"
|
||||
><strong>Clair</strong><small>Une interface lumineuse et douce.</small></span
|
||||
>
|
||||
</mat-radio-button>
|
||||
<mat-radio-button value="dark">
|
||||
<span class="theme-option-copy"
|
||||
><strong>Sombre</strong
|
||||
><small>Un contraste réduit en faible lumière.</small></span
|
||||
>
|
||||
</mat-radio-button>
|
||||
<mat-radio-button value="system">
|
||||
<span class="theme-option-copy"
|
||||
><strong>Système</strong
|
||||
><small>Suit automatiquement votre appareil.</small></span
|
||||
>
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</article>
|
||||
|
||||
<article
|
||||
class="settings-card session-settings"
|
||||
data-testid="session-settings"
|
||||
aria-labelledby="session-heading"
|
||||
>
|
||||
<div class="settings-copy">
|
||||
<span class="settings-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M4 21a8 8 0 0 1 16 0" />
|
||||
</svg>
|
||||
</span>
|
||||
<div>
|
||||
<p class="eyebrow">Compte</p>
|
||||
<h2 id="session-heading">Session</h2>
|
||||
<p>Gérez la session ouverte sur cet appareil.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-action">
|
||||
<div>
|
||||
<strong>{{ username }}</strong>
|
||||
<span>{{ email }}</span>
|
||||
</div>
|
||||
<button mat-stroked-button type="button" (click)="logout()">Déconnexion</button>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<app-settings-page
|
||||
[username]="username"
|
||||
[email]="email"
|
||||
[themePreference]="themePreference()"
|
||||
(themePreferenceChanged)="themeService.setPreference($event)"
|
||||
(logoutRequested)="logout()"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { App } from './app';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ApartmentService } from './apartment.service';
|
||||
import { ApartmentService } from './services/apartment.service';
|
||||
import { of, throwError } from 'rxjs';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
@@ -21,24 +21,32 @@ describe('App', () => {
|
||||
return of(mockUserResponse);
|
||||
}
|
||||
return of('Hello from mocked API!');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
mockApartmentService = {
|
||||
getApartments: () => of([
|
||||
{ id: '1', name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' }
|
||||
]),
|
||||
getApartment: (id: string) => of({ id, name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' }),
|
||||
getApartments: () =>
|
||||
of([
|
||||
{
|
||||
id: '1',
|
||||
name: 'Apt 1',
|
||||
address: 'Addr 1',
|
||||
purchasePrice: 100000,
|
||||
description: 'Desc 1',
|
||||
},
|
||||
]),
|
||||
getApartment: (id: string) =>
|
||||
of({ id, name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' }),
|
||||
createApartment: (apt: any) => of({ id: '2', ...apt }),
|
||||
updateApartment: (id: string, apt: any) => of({ id, ...apt }),
|
||||
deleteApartment: () => of(undefined)
|
||||
deleteApartment: () => of(undefined),
|
||||
};
|
||||
|
||||
originalLocation = window.location;
|
||||
delete (window as any).location;
|
||||
locationMock = {
|
||||
href: '',
|
||||
origin: 'http://localhost'
|
||||
origin: 'http://localhost',
|
||||
};
|
||||
(window as any).location = locationMock;
|
||||
|
||||
@@ -46,8 +54,8 @@ describe('App', () => {
|
||||
imports: [App],
|
||||
providers: [
|
||||
{ provide: HttpClient, useValue: mockHttpClient },
|
||||
{ provide: ApartmentService, useValue: mockApartmentService }
|
||||
]
|
||||
{ provide: ApartmentService, useValue: mockApartmentService },
|
||||
],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
@@ -123,7 +131,7 @@ describe('App', () => {
|
||||
it('should render logged in state when user is authenticated', async () => {
|
||||
mockUserResponse = { authenticated: true, username: 'Alice', email: 'alice@example.com' };
|
||||
const fixture = TestBed.createComponent(App);
|
||||
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -136,7 +144,7 @@ describe('App', () => {
|
||||
mockUserResponse = { authenticated: true, username: 'Alice', email: 'alice@example.com' };
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -151,7 +159,9 @@ describe('App', () => {
|
||||
// Verify response message is shown
|
||||
expect(app.helloMessage()).toBe('Hello from mocked API!');
|
||||
fixture.detectChanges();
|
||||
expect(compiled.querySelector('.api-response-code')?.textContent).toContain('Hello from mocked API!');
|
||||
expect(compiled.querySelector('.api-response-code')?.textContent).toContain(
|
||||
'Hello from mocked API!',
|
||||
);
|
||||
});
|
||||
|
||||
// Apartment CRUD tests
|
||||
@@ -185,58 +195,6 @@ describe('App', () => {
|
||||
expect(app.activeTab()).toBe('apartments');
|
||||
});
|
||||
|
||||
it('should open add form and reset fields', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.openAddForm();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(app.showForm()).toBe(true);
|
||||
expect(app.editingApartment()).toBeNull();
|
||||
expect(app.formName).toBe('');
|
||||
expect(app.formPurchasePrice).toBe(0);
|
||||
});
|
||||
|
||||
it('should open edit form and populate fields', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
const apt = { id: '123', name: 'Apartment 123', address: 'Addr', purchasePrice: 90000, description: 'Test' };
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.openEditForm(apt);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
expect(app.showForm()).toBe(true);
|
||||
expect(app.editingApartment()).toEqual(apt);
|
||||
expect(app.formName).toBe('Apartment 123');
|
||||
expect(app.formPurchasePrice).toBe(90000);
|
||||
});
|
||||
|
||||
it('should display error if fields are invalid on save', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.openAddForm();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.saveApartment();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
expect(app.formError).toContain('Veuillez remplir tous les champs obligatoires');
|
||||
});
|
||||
|
||||
it('should save a new apartment successfully', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
@@ -245,16 +203,14 @@ describe('App', () => {
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.openAddForm();
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.formName = 'New Apt';
|
||||
app.formAddress = 'New Addr';
|
||||
app.formPurchasePrice = 200000;
|
||||
app.formDescription = 'New Desc';
|
||||
|
||||
app.saveApartment();
|
||||
app.saveApartment({
|
||||
apartment: {
|
||||
name: 'New Apt',
|
||||
address: 'New Addr',
|
||||
purchasePrice: 200000,
|
||||
description: 'New Desc',
|
||||
},
|
||||
});
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -262,30 +218,34 @@ describe('App', () => {
|
||||
name: 'New Apt',
|
||||
address: 'New Addr',
|
||||
purchasePrice: 200000,
|
||||
description: 'New Desc'
|
||||
description: 'New Desc',
|
||||
});
|
||||
expect(app.showForm()).toBe(false);
|
||||
});
|
||||
|
||||
it('should update an existing apartment successfully', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
const updateSpy = vi.spyOn(mockApartmentService, 'updateApartment');
|
||||
const apt = { id: '1', name: 'Old Apt', address: 'Old Addr', purchasePrice: 100000, description: 'Old Desc' };
|
||||
const apt = {
|
||||
id: '1',
|
||||
name: 'Old Apt',
|
||||
address: 'Old Addr',
|
||||
purchasePrice: 100000,
|
||||
description: 'Old Desc',
|
||||
};
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.openEditForm(apt);
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
app.formName = 'Updated Apt';
|
||||
app.formAddress = 'Updated Addr';
|
||||
app.formPurchasePrice = 110000;
|
||||
app.formDescription = 'Updated Desc';
|
||||
|
||||
app.saveApartment();
|
||||
app.saveApartment({
|
||||
apartmentId: apt.id,
|
||||
apartment: {
|
||||
name: 'Updated Apt',
|
||||
address: 'Updated Addr',
|
||||
purchasePrice: 110000,
|
||||
description: 'Updated Desc',
|
||||
},
|
||||
});
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
|
||||
@@ -293,9 +253,8 @@ describe('App', () => {
|
||||
name: 'Updated Apt',
|
||||
address: 'Updated Addr',
|
||||
purchasePrice: 110000,
|
||||
description: 'Updated Desc'
|
||||
description: 'Updated Desc',
|
||||
});
|
||||
expect(app.showForm()).toBe(false);
|
||||
});
|
||||
|
||||
it('should delete an apartment when confirmed', async () => {
|
||||
|
||||
+24
-76
@@ -1,23 +1,27 @@
|
||||
import { Component, computed, signal, inject, OnInit, effect } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { ApartmentService, Apartment } from './apartment.service';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { ThemeService } from './theme.service';
|
||||
import { BrandMark } from './brand-mark';
|
||||
import { ApartmentService, Apartment } from './services/apartment.service';
|
||||
import { ThemeService } from './services/theme.service';
|
||||
import { BrandMark } from './components/brand-mark';
|
||||
import { SignInPage } from './components/sign-in-page/sign-in-page';
|
||||
import {
|
||||
WorkspaceNavigation,
|
||||
WorkspaceTab,
|
||||
} from './components/workspace-navigation/workspace-navigation';
|
||||
import { DashboardPage } from './components/dashboard-page/dashboard-page';
|
||||
import { ApartmentsPage } from './components/apartments-page/apartments-page';
|
||||
import { ApartmentSaveRequest } from './components/apartments-page/apartments-page';
|
||||
import { SettingsPage } from './components/settings-page/settings-page';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [
|
||||
BrandMark,
|
||||
FormsModule,
|
||||
MatButtonModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatRadioModule,
|
||||
SignInPage,
|
||||
WorkspaceNavigation,
|
||||
DashboardPage,
|
||||
ApartmentsPage,
|
||||
SettingsPage,
|
||||
],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css',
|
||||
@@ -27,18 +31,8 @@ export class App implements OnInit {
|
||||
readonly helloMessage = signal<string>('');
|
||||
|
||||
// Tab & CRUD States
|
||||
readonly activeTab = signal<'dashboard' | 'apartments' | 'settings'>('dashboard');
|
||||
readonly activeTab = signal<WorkspaceTab>('dashboard');
|
||||
readonly apartments = signal<Apartment[]>([]);
|
||||
readonly showForm = signal<boolean>(false);
|
||||
readonly editingApartment = signal<Apartment | null>(null);
|
||||
|
||||
// Form Fields
|
||||
formName = '';
|
||||
formAddress = '';
|
||||
formPurchasePrice = 0;
|
||||
formDescription = '';
|
||||
formError = '';
|
||||
|
||||
private readonly _isLoggedIn = signal<boolean>(false);
|
||||
private readonly _username = signal<string>('');
|
||||
private readonly _email = signal<string>('');
|
||||
@@ -119,66 +113,20 @@ export class App implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
openAddForm() {
|
||||
this.editingApartment.set(null);
|
||||
this.formName = '';
|
||||
this.formAddress = '';
|
||||
this.formPurchasePrice = 0;
|
||||
this.formDescription = '';
|
||||
this.formError = '';
|
||||
this.showForm.set(true);
|
||||
}
|
||||
|
||||
openEditForm(apartment: Apartment) {
|
||||
this.editingApartment.set(apartment);
|
||||
this.formName = apartment.name;
|
||||
this.formAddress = apartment.address;
|
||||
this.formPurchasePrice = apartment.purchasePrice;
|
||||
this.formDescription = apartment.description;
|
||||
this.formError = '';
|
||||
this.showForm.set(true);
|
||||
}
|
||||
|
||||
closeForm() {
|
||||
this.showForm.set(false);
|
||||
this.editingApartment.set(null);
|
||||
}
|
||||
|
||||
saveApartment() {
|
||||
if (!this.formName.trim() || !this.formAddress.trim() || this.formPurchasePrice <= 0) {
|
||||
this.formError = 'Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).';
|
||||
return;
|
||||
}
|
||||
|
||||
const apartmentData: Apartment = {
|
||||
name: this.formName.trim(),
|
||||
address: this.formAddress.trim(),
|
||||
purchasePrice: this.formPurchasePrice,
|
||||
description: this.formDescription.trim(),
|
||||
};
|
||||
|
||||
const editMode = this.editingApartment();
|
||||
if (editMode && editMode.id) {
|
||||
this.apartmentService.updateApartment(editMode.id, apartmentData).subscribe({
|
||||
saveApartment({ apartment, apartmentId }: ApartmentSaveRequest): void {
|
||||
if (apartmentId) {
|
||||
this.apartmentService.updateApartment(apartmentId, apartment).subscribe({
|
||||
next: () => {
|
||||
this.loadApartments();
|
||||
this.closeForm();
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
this.formError = 'Erreur lors de la modification.';
|
||||
},
|
||||
error: (err) => console.error('Error updating apartment', err),
|
||||
});
|
||||
} else {
|
||||
this.apartmentService.createApartment(apartmentData).subscribe({
|
||||
this.apartmentService.createApartment(apartment).subscribe({
|
||||
next: () => {
|
||||
this.loadApartments();
|
||||
this.closeForm();
|
||||
},
|
||||
error: (err) => {
|
||||
console.error(err);
|
||||
this.formError = 'Erreur lors de la création.';
|
||||
},
|
||||
error: (err) => console.error('Error creating apartment', err),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.page-heading {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
.page-heading > div > p:last-child {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.back-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--text-muted);
|
||||
margin: 0 0 20px -16px;
|
||||
}
|
||||
.apartment-form {
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
.form-grid mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.alert-error {
|
||||
margin-bottom: 18px;
|
||||
padding: 13px 15px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
|
||||
border-radius: 12px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
font-size: 0.87rem;
|
||||
}
|
||||
.form-actions {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.form-actions button {
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
.apartment-form {
|
||||
padding: 30px;
|
||||
}
|
||||
.form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 18px;
|
||||
}
|
||||
.full-field {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.form-actions {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.form-actions button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1180px) {
|
||||
.form-page {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<div class="form-page">
|
||||
<header class="page-heading form-heading">
|
||||
<div>
|
||||
<button mat-button type="button" class="back-action" (click)="closed.emit()">← Retour</button>
|
||||
<p class="eyebrow">Portefeuille</p>
|
||||
<h1>{{ apartment() ? "Modifier l'appartement" : 'Ajouter un appartement' }}</h1>
|
||||
<p>Renseignez les informations principales du bien.</p>
|
||||
</div>
|
||||
</header>
|
||||
<form (submit)="save(); $event.preventDefault()" class="apartment-form">
|
||||
@if (error()) {
|
||||
<div class="alert-error" role="alert">{{ error() }}</div>
|
||||
}
|
||||
<div class="form-grid">
|
||||
<mat-form-field appearance="outline"
|
||||
><mat-label>Nom de l'appartement</mat-label
|
||||
><input
|
||||
matInput
|
||||
type="text"
|
||||
name="name"
|
||||
[ngModel]="name()"
|
||||
(ngModelChange)="name.set($event)"
|
||||
placeholder="T2 Paris 15"
|
||||
required
|
||||
/></mat-form-field>
|
||||
<mat-form-field appearance="outline"
|
||||
><mat-label>Prix d'acquisition</mat-label
|
||||
><input
|
||||
matInput
|
||||
type="number"
|
||||
name="purchasePrice"
|
||||
[ngModel]="purchasePrice()"
|
||||
(ngModelChange)="purchasePrice.set($event)"
|
||||
min="1"
|
||||
required
|
||||
/><span matTextSuffix>€</span></mat-form-field
|
||||
>
|
||||
<mat-form-field appearance="outline" class="full-field"
|
||||
><mat-label>Adresse complète</mat-label
|
||||
><input
|
||||
matInput
|
||||
type="text"
|
||||
name="address"
|
||||
[ngModel]="address()"
|
||||
(ngModelChange)="address.set($event)"
|
||||
placeholder="45 rue des Entrepreneurs, 75015 Paris"
|
||||
required
|
||||
/></mat-form-field>
|
||||
<mat-form-field appearance="outline" class="full-field"
|
||||
><mat-label>Description ou notes</mat-label
|
||||
><textarea
|
||||
matInput
|
||||
name="description"
|
||||
[ngModel]="description()"
|
||||
(ngModelChange)="description.set($event)"
|
||||
rows="4"
|
||||
placeholder="Étage, agencement, équipements…"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button mat-button type="button" (click)="closed.emit()">Annuler</button
|
||||
><button mat-flat-button type="submit" class="primary-action">Enregistrer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,53 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { vi } from 'vitest';
|
||||
import { ApartmentForm } from './apartment-form';
|
||||
|
||||
describe('ApartmentForm', () => {
|
||||
it('initializes its fields from the apartment being edited', () => {
|
||||
const fixture = TestBed.createComponent(ApartmentForm);
|
||||
fixture.componentRef.setInput('apartment', {
|
||||
id: 'apt-1',
|
||||
name: 'T2 Paris 15',
|
||||
address: '45 rue des Entrepreneurs, 75015 Paris',
|
||||
purchasePrice: 250000,
|
||||
description: 'Cinquième étage',
|
||||
});
|
||||
fixture.detectChanges();
|
||||
|
||||
const form = fixture.componentInstance;
|
||||
expect(form.name()).toBe('T2 Paris 15');
|
||||
expect(form.purchasePrice()).toBe(250000);
|
||||
});
|
||||
|
||||
it('shows a validation error instead of emitting an incomplete apartment', () => {
|
||||
const fixture = TestBed.createComponent(ApartmentForm);
|
||||
const form = fixture.componentInstance;
|
||||
const saved = vi.fn();
|
||||
form.saved.subscribe(saved);
|
||||
|
||||
form.save();
|
||||
|
||||
expect(form.error()).toContain('Veuillez remplir tous les champs obligatoires');
|
||||
expect(saved).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('emits a trimmed apartment draft when valid', () => {
|
||||
const fixture = TestBed.createComponent(ApartmentForm);
|
||||
const form = fixture.componentInstance;
|
||||
const saved = vi.fn();
|
||||
form.saved.subscribe(saved);
|
||||
form.name.set(' T2 Paris 15 ');
|
||||
form.address.set(' 45 rue des Entrepreneurs ');
|
||||
form.purchasePrice.set(250000);
|
||||
form.description.set(' Cinquième étage ');
|
||||
|
||||
form.save();
|
||||
|
||||
expect(saved).toHaveBeenCalledWith({
|
||||
name: 'T2 Paris 15',
|
||||
address: '45 rue des Entrepreneurs',
|
||||
purchasePrice: 250000,
|
||||
description: 'Cinquième étage',
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,50 @@
|
||||
import { Component, effect, input, output, signal } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { Apartment } from '../../services/apartment.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-apartment-form',
|
||||
imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
|
||||
templateUrl: './apartment-form.html',
|
||||
styleUrl: './apartment-form.css',
|
||||
})
|
||||
export class ApartmentForm {
|
||||
readonly apartment = input<Apartment | null>(null);
|
||||
readonly closed = output<void>();
|
||||
readonly saved = output<Apartment>();
|
||||
|
||||
readonly name = signal('');
|
||||
readonly address = signal('');
|
||||
readonly purchasePrice = signal(0);
|
||||
readonly description = signal('');
|
||||
readonly error = signal('');
|
||||
|
||||
constructor() {
|
||||
effect(() => this.resetForm(this.apartment()));
|
||||
}
|
||||
|
||||
save(): void {
|
||||
if (!this.name().trim() || !this.address().trim() || this.purchasePrice() <= 0) {
|
||||
this.error.set('Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).');
|
||||
return;
|
||||
}
|
||||
|
||||
this.saved.emit({
|
||||
name: this.name().trim(),
|
||||
address: this.address().trim(),
|
||||
purchasePrice: this.purchasePrice(),
|
||||
description: this.description().trim(),
|
||||
});
|
||||
}
|
||||
|
||||
private resetForm(apartment: Apartment | null): void {
|
||||
this.name.set(apartment?.name ?? '');
|
||||
this.address.set(apartment?.address ?? '');
|
||||
this.purchasePrice.set(apartment?.purchasePrice ?? 0);
|
||||
this.description.set(apartment?.description ?? '');
|
||||
this.error.set('');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.page-heading {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
.page-heading > div > p:last-child {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.page-heading .primary-action {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.button-plus {
|
||||
margin-right: 4px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.empty-state,
|
||||
.apartment-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.empty-state {
|
||||
padding: 46px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
.empty-illustration {
|
||||
display: grid;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
place-items: center;
|
||||
margin: 0 auto 22px;
|
||||
border-radius: 16px;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.empty-illustration svg {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.empty-state h2 {
|
||||
margin-bottom: 8px;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
.empty-state > p:not(.eyebrow) {
|
||||
max-width: 440px;
|
||||
margin: 0 auto 22px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.empty-state .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--accent);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.apartments-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.apartment-card {
|
||||
padding: 20px;
|
||||
}
|
||||
.apartment-card-topline {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.property-label {
|
||||
margin: 0;
|
||||
}
|
||||
.property-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.apt-info h2 {
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.apt-address {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.apt-address svg {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
flex: 0 0 17px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.apt-desc {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.apt-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.apt-actions .mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--accent);
|
||||
}
|
||||
.apt-actions .danger-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--danger);
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
.page-heading .primary-action {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (min-width: 1180px) {
|
||||
.apartments-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Portefeuille</p>
|
||||
<h1>Mes appartements</h1>
|
||||
<p>Les biens rattachés à votre activité LMNP.</p>
|
||||
</div>
|
||||
<button mat-flat-button type="button" class="primary-action" (click)="addRequested.emit()">
|
||||
<span class="button-plus" aria-hidden="true">+</span>Ajouter un appartement
|
||||
</button>
|
||||
</header>
|
||||
|
||||
@if (apartments().length === 0) {
|
||||
<article class="empty-state">
|
||||
<div class="empty-illustration" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||||
<path d="m4 10 8-6 8 6v10H4z" />
|
||||
<path d="M9 20v-6h6v6" />
|
||||
</svg>
|
||||
</div>
|
||||
<p class="eyebrow">Commencez ici</p>
|
||||
<h2>Aucun appartement enregistré</h2>
|
||||
<p>Ajoutez votre premier bien pour construire votre portefeuille.</p>
|
||||
<button mat-stroked-button type="button" (click)="addRequested.emit()">
|
||||
Ajouter un appartement
|
||||
</button>
|
||||
</article>
|
||||
} @else {
|
||||
<div class="apartments-grid">
|
||||
@for (apt of apartments(); track apt.id) {
|
||||
<article class="apartment-card">
|
||||
<div class="apartment-card-topline">
|
||||
<span class="property-label">Bien immobilier</span>
|
||||
<span class="property-value">{{ apt.purchasePrice.toLocaleString('fr-FR') }} €</span>
|
||||
</div>
|
||||
<div class="apt-info">
|
||||
<h2>{{ apt.name }}</h2>
|
||||
<p class="apt-address">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z" />
|
||||
<circle cx="12" cy="10" r="2.5" />
|
||||
</svg>
|
||||
{{ apt.address }}
|
||||
</p>
|
||||
@if (apt.description) {
|
||||
<p class="apt-desc">{{ apt.description }}</p>
|
||||
}
|
||||
</div>
|
||||
<div class="apt-actions">
|
||||
<button mat-button type="button" (click)="editRequested.emit(apt)">Modifier</button>
|
||||
@if (apt.id) {
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="danger-action"
|
||||
(click)="deleteRequested.emit(apt.id)"
|
||||
>
|
||||
Supprimer
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { Apartment } from '../../services/apartment.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-apartment-list',
|
||||
imports: [MatButtonModule],
|
||||
templateUrl: './apartment-list.html',
|
||||
styleUrl: './apartment-list.css',
|
||||
})
|
||||
export class ApartmentList {
|
||||
readonly apartments = input.required<Apartment[]>();
|
||||
readonly addRequested = output<void>();
|
||||
readonly editRequested = output<Apartment>();
|
||||
readonly deleteRequested = output<string>();
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<section class="page-section apartments-page">
|
||||
@if (!showForm()) {
|
||||
<app-apartment-list
|
||||
[apartments]="apartments()"
|
||||
(addRequested)="openAddForm()"
|
||||
(editRequested)="openEditForm($event)"
|
||||
(deleteRequested)="deleteRequested.emit($event)"
|
||||
/>
|
||||
} @else {
|
||||
<app-apartment-form
|
||||
[apartment]="editingApartment()"
|
||||
(closed)="closeForm()"
|
||||
(saved)="saveApartment($event)"
|
||||
/>
|
||||
}
|
||||
</section>
|
||||
@@ -0,0 +1,49 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
import { vi } from 'vitest';
|
||||
import { ApartmentsPage } from './apartments-page';
|
||||
|
||||
describe('ApartmentsPage', () => {
|
||||
it('opens the form for the apartment selected for editing', () => {
|
||||
const apartment = {
|
||||
id: 'apt-1',
|
||||
name: 'T2 Paris 15',
|
||||
address: '45 rue des Entrepreneurs, 75015 Paris',
|
||||
purchasePrice: 250000,
|
||||
description: '',
|
||||
};
|
||||
const fixture = TestBed.createComponent(ApartmentsPage);
|
||||
fixture.componentRef.setInput('apartments', [apartment]);
|
||||
fixture.detectChanges();
|
||||
|
||||
const page = fixture.componentInstance;
|
||||
page.openEditForm(apartment);
|
||||
|
||||
expect(page.showForm()).toBe(true);
|
||||
expect(page.editingApartment()).toEqual(apartment);
|
||||
});
|
||||
|
||||
it('emits the edited apartment together with its id', () => {
|
||||
const apartment = {
|
||||
id: 'apt-1',
|
||||
name: 'T2 Paris 15',
|
||||
address: '45 rue des Entrepreneurs, 75015 Paris',
|
||||
purchasePrice: 250000,
|
||||
description: '',
|
||||
};
|
||||
const fixture = TestBed.createComponent(ApartmentsPage);
|
||||
fixture.componentRef.setInput('apartments', [apartment]);
|
||||
fixture.detectChanges();
|
||||
const page = fixture.componentInstance;
|
||||
const apartmentSaved = vi.fn();
|
||||
page.apartmentSaved.subscribe(apartmentSaved);
|
||||
page.openEditForm(apartment);
|
||||
|
||||
page.saveApartment({ ...apartment, name: 'T2 rénové' });
|
||||
|
||||
expect(apartmentSaved).toHaveBeenCalledWith({
|
||||
apartment: { ...apartment, name: 'T2 rénové' },
|
||||
apartmentId: 'apt-1',
|
||||
});
|
||||
expect(page.showForm()).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,43 @@
|
||||
import { Component, input, output, signal } from '@angular/core';
|
||||
import { Apartment } from '../../services/apartment.service';
|
||||
import { ApartmentForm } from '../apartment-form/apartment-form';
|
||||
import { ApartmentList } from '../apartment-list/apartment-list';
|
||||
|
||||
export interface ApartmentSaveRequest {
|
||||
apartment: Apartment;
|
||||
apartmentId?: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-apartments-page',
|
||||
imports: [ApartmentForm, ApartmentList],
|
||||
templateUrl: './apartments-page.html',
|
||||
})
|
||||
export class ApartmentsPage {
|
||||
readonly apartments = input.required<Apartment[]>();
|
||||
readonly apartmentSaved = output<ApartmentSaveRequest>();
|
||||
readonly deleteRequested = output<string>();
|
||||
|
||||
readonly showForm = signal(false);
|
||||
readonly editingApartment = signal<Apartment | null>(null);
|
||||
|
||||
openAddForm(): void {
|
||||
this.editingApartment.set(null);
|
||||
this.showForm.set(true);
|
||||
}
|
||||
|
||||
openEditForm(apartment: Apartment): void {
|
||||
this.editingApartment.set(apartment);
|
||||
this.showForm.set(true);
|
||||
}
|
||||
|
||||
closeForm(): void {
|
||||
this.showForm.set(false);
|
||||
this.editingApartment.set(null);
|
||||
}
|
||||
|
||||
saveApartment(apartment: Apartment): void {
|
||||
this.apartmentSaved.emit({ apartment, apartmentId: this.editingApartment()?.id });
|
||||
this.closeForm();
|
||||
}
|
||||
}
|
||||
File renamed without changes.
@@ -0,0 +1,195 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.page-section {
|
||||
animation: page-in 180ms ease-out;
|
||||
}
|
||||
@keyframes page-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.page-heading {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
.page-heading > div > p:last-child {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.status-pill,
|
||||
.role-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
.status-pill {
|
||||
gap: 7px;
|
||||
margin-top: 18px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.status-pill span {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
}
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.feature-card {
|
||||
padding: 22px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.feature-card h2 {
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.feature-card p:not(.eyebrow) {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.feature-card-primary {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
border-color: transparent;
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
.feature-card-primary .mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--accent-strong);
|
||||
width: fit-content;
|
||||
padding-inline: 0;
|
||||
font-weight: 750;
|
||||
}
|
||||
.feature-icon {
|
||||
display: grid;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: var(--surface);
|
||||
color: var(--accent);
|
||||
}
|
||||
.feature-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.large-avatar {
|
||||
display: grid;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
flex: 0 0 58px;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.user-details {
|
||||
min-width: 0;
|
||||
}
|
||||
.user-details h3 {
|
||||
margin-bottom: 3px;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
.user-email {
|
||||
overflow: hidden;
|
||||
margin-bottom: 11px;
|
||||
font-size: 0.84rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.role-chip {
|
||||
padding: 5px 9px;
|
||||
}
|
||||
.api-demo-section {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
.api-actions .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--accent);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
.api-response-wrapper {
|
||||
padding: 14px;
|
||||
border-radius: 13px;
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
.api-response-wrapper > span {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: var(--text-subtle);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.api-response-code {
|
||||
color: var(--accent-strong);
|
||||
font-size: 0.83rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.feature-card-primary,
|
||||
.api-demo-section {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
.feature-card-primary {
|
||||
grid-column: span 2;
|
||||
min-height: 250px;
|
||||
}
|
||||
.user-profile {
|
||||
grid-column: span 1;
|
||||
}
|
||||
.api-demo-section {
|
||||
grid-column: span 3;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
}
|
||||
.api-response-wrapper {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<section class="page-section dashboard-page">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Bonjour {{ username() }}</p>
|
||||
<h1>Tableau de bord</h1>
|
||||
<p>Retrouvez rapidement les actions utiles à votre gestion locative.</p>
|
||||
</div>
|
||||
<span class="status-pill"><span></span>Espace sécurisé</span>
|
||||
</header>
|
||||
<div class="dashboard-grid">
|
||||
<article class="feature-card feature-card-primary">
|
||||
<div class="feature-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16M2 21h20" />
|
||||
<path d="M8 8h8M8 12h8M8 16h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="eyebrow">Votre portefeuille</p>
|
||||
<h2>{{ apartmentCount() }} appartement{{ apartmentCount() > 1 ? 's' : '' }}</h2>
|
||||
<p>Centralisez les informations essentielles de vos biens.</p>
|
||||
</div>
|
||||
<button mat-button type="button" (click)="apartmentsRequested.emit()">
|
||||
Gérer mes appartements
|
||||
</button>
|
||||
</article>
|
||||
<article class="feature-card user-profile">
|
||||
<div class="large-avatar">{{ userInitial() }}</div>
|
||||
<div class="user-details">
|
||||
<p class="eyebrow">Compte actif</p>
|
||||
<h3>{{ username() }}</h3>
|
||||
<p class="user-email">{{ email() }}</p>
|
||||
<span class="role-chip">Bailleur connecté</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="feature-card api-demo-section">
|
||||
<div>
|
||||
<p class="eyebrow">État du service</p>
|
||||
<h2>Connexion au serveur</h2>
|
||||
<p>Vérifiez que votre espace communique correctement avec le service sécurisé.</p>
|
||||
</div>
|
||||
<div class="api-actions">
|
||||
<button mat-stroked-button type="button" (click)="connectionCheckRequested.emit()">
|
||||
Tester la connexion
|
||||
</button>
|
||||
</div>
|
||||
@if (helloMessage()) {
|
||||
<div class="api-response-wrapper">
|
||||
<span>Réponse du serveur</span><code class="api-response-code">{{ helloMessage() }}</code>
|
||||
</div>
|
||||
}
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard-page',
|
||||
imports: [MatButtonModule],
|
||||
templateUrl: './dashboard-page.html',
|
||||
styleUrl: './dashboard-page.css',
|
||||
})
|
||||
export class DashboardPage {
|
||||
readonly username = input.required<string>();
|
||||
readonly email = input.required<string>();
|
||||
readonly userInitial = input.required<string>();
|
||||
readonly apartmentCount = input.required<number>();
|
||||
readonly helloMessage = input.required<string>();
|
||||
readonly apartmentsRequested = output<void>();
|
||||
readonly connectionCheckRequested = output<void>();
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.page-section {
|
||||
animation: page-in 180ms ease-out;
|
||||
}
|
||||
@keyframes page-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.page-heading {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.page-heading h1 {
|
||||
margin-bottom: 8px;
|
||||
font-size: clamp(2rem, 7vw, 3.2rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.055em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
.page-heading > div > p:last-child {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.settings-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
background: var(--surface);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.settings-card h2 {
|
||||
margin-bottom: 9px;
|
||||
font-size: 1.35rem;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
.settings-card p:not(.eyebrow) {
|
||||
color: var(--text-muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.settings-copy {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
padding: 22px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.settings-icon {
|
||||
display: grid;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
flex: 0 0 46px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: var(--surface-accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.settings-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.settings-copy h2 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.settings-copy p:last-child {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.theme-options {
|
||||
display: grid;
|
||||
padding: 8px;
|
||||
}
|
||||
.theme-options mat-radio-button {
|
||||
border-radius: 14px;
|
||||
}
|
||||
.theme-options mat-radio-button:hover {
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
.theme-option-copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
.theme-option-copy strong {
|
||||
color: var(--text);
|
||||
}
|
||||
.theme-option-copy small {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
white-space: normal;
|
||||
}
|
||||
.session-settings {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.session-action {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
}
|
||||
.session-action > div {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
.session-action strong,
|
||||
.session-action span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.session-action span {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.session-action .mat-mdc-outlined-button {
|
||||
--mdc-outlined-button-label-text-color: var(--danger);
|
||||
--mdc-outlined-button-outline-color: var(--border-strong);
|
||||
border-radius: 12px;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
.page-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 28px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.settings-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
|
||||
}
|
||||
.settings-copy {
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 0;
|
||||
}
|
||||
.session-action {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
<section class="page-section settings-page">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Préférences</p>
|
||||
<h1>Réglages</h1>
|
||||
<p>Adaptez LMNP Organizer à votre façon de travailler.</p>
|
||||
</div>
|
||||
</header>
|
||||
<article class="settings-card" aria-labelledby="appearance-heading">
|
||||
<div class="settings-copy">
|
||||
<span class="settings-icon" aria-hidden="true"
|
||||
><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<path d="M12 3a9 9 0 1 0 9 9c0-.5-.04-1-.12-1.47A7 7 0 0 1 12 3Z" /></svg
|
||||
></span>
|
||||
<div>
|
||||
<p class="eyebrow">Interface</p>
|
||||
<h2 id="appearance-heading">Apparence</h2>
|
||||
<p>Le réglage est mémorisé uniquement sur cet appareil.</p>
|
||||
</div>
|
||||
</div>
|
||||
<mat-radio-group
|
||||
class="theme-options"
|
||||
aria-label="Thème de l'application"
|
||||
[value]="themePreference()"
|
||||
(change)="themePreferenceChanged.emit($event.value)"
|
||||
>
|
||||
<mat-radio-button value="light"
|
||||
><span class="theme-option-copy"
|
||||
><strong>Clair</strong><small>Une interface lumineuse et douce.</small></span
|
||||
></mat-radio-button
|
||||
>
|
||||
<mat-radio-button value="dark"
|
||||
><span class="theme-option-copy"
|
||||
><strong>Sombre</strong><small>Un contraste réduit en faible lumière.</small></span
|
||||
></mat-radio-button
|
||||
>
|
||||
<mat-radio-button value="system"
|
||||
><span class="theme-option-copy"
|
||||
><strong>Système</strong><small>Suit automatiquement votre appareil.</small></span
|
||||
></mat-radio-button
|
||||
>
|
||||
</mat-radio-group>
|
||||
</article>
|
||||
<article
|
||||
class="settings-card session-settings"
|
||||
data-testid="session-settings"
|
||||
aria-labelledby="session-heading"
|
||||
>
|
||||
<div class="settings-copy">
|
||||
<span class="settings-icon" aria-hidden="true"
|
||||
><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M4 21a8 8 0 0 1 16 0" /></svg
|
||||
></span>
|
||||
<div>
|
||||
<p class="eyebrow">Compte</p>
|
||||
<h2 id="session-heading">Session</h2>
|
||||
<p>Gérez la session ouverte sur cet appareil.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-action">
|
||||
<div>
|
||||
<strong>{{ username() }}</strong
|
||||
><span>{{ email() }}</span>
|
||||
</div>
|
||||
<button mat-stroked-button type="button" (click)="logoutRequested.emit()">Déconnexion</button>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatRadioModule } from '@angular/material/radio';
|
||||
import { ThemePreference } from '../../services/theme.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings-page',
|
||||
imports: [MatButtonModule, MatRadioModule],
|
||||
templateUrl: './settings-page.html',
|
||||
styleUrl: './settings-page.css',
|
||||
})
|
||||
export class SettingsPage {
|
||||
readonly username = input.required<string>();
|
||||
readonly email = input.required<string>();
|
||||
readonly themePreference = input.required<ThemePreference>();
|
||||
readonly themePreferenceChanged = output<ThemePreference>();
|
||||
readonly logoutRequested = output<void>();
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.sign-in-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--canvas);
|
||||
}
|
||||
.sign-in-panel {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
.brand-lockup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
margin-bottom: clamp(64px, 14vh, 120px);
|
||||
}
|
||||
.brand-lockup h1 {
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.02rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.brand-lockup p {
|
||||
margin-bottom: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
.sign-in-copy {
|
||||
max-width: 510px;
|
||||
}
|
||||
.sign-in-copy h2 {
|
||||
max-width: 480px;
|
||||
margin-bottom: 18px;
|
||||
font-size: clamp(2.35rem, 9vw, 4.8rem);
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.065em;
|
||||
line-height: 0.98;
|
||||
}
|
||||
.sign-in-copy > p {
|
||||
max-width: 470px;
|
||||
margin-bottom: 30px;
|
||||
color: var(--text-muted);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.sign-in-action {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
.sign-in-action svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.security-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 17px 0 0;
|
||||
color: var(--text-subtle);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
.security-note span {
|
||||
color: var(--accent);
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
.sign-in-story {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.sign-in-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(520px, 0.92fr) minmax(480px, 1.08fr);
|
||||
}
|
||||
.sign-in-panel {
|
||||
padding: 56px clamp(56px, 7vw, 112px);
|
||||
}
|
||||
.sign-in-story {
|
||||
display: grid;
|
||||
min-height: 100vh;
|
||||
place-items: end start;
|
||||
padding: 64px;
|
||||
background:
|
||||
radial-gradient(circle at 75% 20%, rgba(99, 199, 188, 0.24), transparent 30%),
|
||||
linear-gradient(145deg, #153d38, #0e2925 55%, #0a1d1a);
|
||||
color: #effbf8;
|
||||
}
|
||||
.story-card {
|
||||
max-width: 560px;
|
||||
}
|
||||
.story-kicker {
|
||||
color: #7ed6cc;
|
||||
}
|
||||
.story-card h2 {
|
||||
margin-bottom: 42px;
|
||||
font-size: clamp(2.4rem, 4vw, 4.5rem);
|
||||
letter-spacing: -0.06em;
|
||||
line-height: 1;
|
||||
}
|
||||
.story-list {
|
||||
display: grid;
|
||||
}
|
||||
.story-list > div {
|
||||
display: grid;
|
||||
grid-template-columns: 42px 1fr;
|
||||
gap: 12px;
|
||||
padding: 17px 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
.story-list span {
|
||||
color: #7ed6cc;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
.story-list p {
|
||||
margin-bottom: 0;
|
||||
color: rgba(239, 251, 248, 0.76);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<main class="sign-in-shell">
|
||||
<section class="sign-in-panel">
|
||||
<div class="brand-lockup">
|
||||
<app-brand-mark class="brand-mark" />
|
||||
<div>
|
||||
<h1>LMNP Organizer</h1>
|
||||
<p>Gestion locative & fiscalité</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sign-in-copy">
|
||||
<span class="context-label">Espace bailleur</span>
|
||||
<h2>Votre gestion locative, enfin lisible.</h2>
|
||||
<p>
|
||||
Pilotez vos appartements et gardez vos démarches LMNP au même endroit, sur mobile comme sur
|
||||
ordinateur.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button mat-flat-button class="primary-action sign-in-action" (click)="loginRequested.emit()">
|
||||
Se connecter avec OIDC
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M5 12h14M13 6l6 6-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<p class="security-note">
|
||||
<span aria-hidden="true">●</span>
|
||||
Connexion sécurisée via OpenID Connect
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<aside class="sign-in-story" aria-label="Aperçu du produit">
|
||||
<div class="story-card">
|
||||
<p class="story-kicker">Pensé pour aller à l'essentiel</p>
|
||||
<h2>Un espace calme pour vos décisions de bailleur.</h2>
|
||||
<div class="story-list">
|
||||
<div>
|
||||
<span>01</span>
|
||||
<p>Vos biens accessibles en quelques gestes.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>02</span>
|
||||
<p>Une interface adaptée à chaque écran.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>03</span>
|
||||
<p>Vos outils LMNP réunis progressivement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component, output } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { BrandMark } from '../brand-mark';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sign-in-page',
|
||||
imports: [BrandMark, MatButtonModule],
|
||||
templateUrl: './sign-in-page.html',
|
||||
styleUrl: './sign-in-page.css',
|
||||
})
|
||||
export class SignInPage {
|
||||
readonly loginRequested = output<void>();
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
.app-navigation {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: calc(72px + env(safe-area-inset-bottom));
|
||||
padding: 6px 10px env(safe-area-inset-bottom);
|
||||
border-top: 1px solid var(--border);
|
||||
background: color-mix(in srgb, var(--surface) 94%, transparent);
|
||||
box-shadow: 0 -10px 30px rgba(25, 40, 35, 0.06);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
.sidebar-brand,
|
||||
.sidebar-user {
|
||||
display: none;
|
||||
}
|
||||
.navigation-items {
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 4px;
|
||||
}
|
||||
.navigation-item.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--text-muted);
|
||||
min-width: 0;
|
||||
height: 60px;
|
||||
border-radius: 14px;
|
||||
padding: 5px 4px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.navigation-item .mat-mdc-button-touch-target {
|
||||
height: 60px;
|
||||
}
|
||||
.navigation-item svg {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin: 0 auto 4px;
|
||||
}
|
||||
.navigation-item span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: 0.66rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.navigation-item.active {
|
||||
--mdc-text-button-label-text-color: var(--accent);
|
||||
background: var(--surface-accent);
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.app-navigation {
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
width: 256px;
|
||||
height: 100vh;
|
||||
padding: 26px 18px;
|
||||
border-top: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
box-shadow: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 8px 32px;
|
||||
}
|
||||
.sidebar-brand > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0.86rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.sidebar-brand strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.sidebar-brand span:last-child {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.navigation-items {
|
||||
display: flex;
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.navigation-item.mat-mdc-button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
justify-content: flex-start;
|
||||
border-radius: 13px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.navigation-item .mat-mdc-button-touch-target {
|
||||
height: 48px;
|
||||
}
|
||||
.navigation-item .mdc-button__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.navigation-item svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
.navigation-item span {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
.sidebar-user {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
bottom: 24px;
|
||||
left: 18px;
|
||||
display: grid;
|
||||
grid-template-columns: 36px minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
.sidebar-user > div:nth-child(2) {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.sidebar-user strong,
|
||||
.sidebar-user span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sidebar-user strong {
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.sidebar-user span {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.69rem;
|
||||
}
|
||||
.logout-action.mat-mdc-button {
|
||||
--mdc-text-button-label-text-color: var(--text-muted);
|
||||
grid-column: 1 / -1;
|
||||
height: 34px;
|
||||
border-top: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
<aside class="app-navigation" data-testid="primary-navigation">
|
||||
<div class="sidebar-brand">
|
||||
<app-brand-mark class="brand-mark" />
|
||||
<div><strong>LMNP</strong><span>Organizer</span></div>
|
||||
</div>
|
||||
|
||||
<nav class="navigation-items" aria-label="Navigation principale">
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="navigation-item"
|
||||
[class.active]="activeTab() === 'dashboard'"
|
||||
[attr.aria-current]="activeTab() === 'dashboard' ? 'page' : null"
|
||||
(click)="tabSelected.emit('dashboard')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<rect x="3" y="3" width="7" height="7" rx="2" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="2" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="2" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="2" />
|
||||
</svg>
|
||||
<span>Tableau de bord</span>
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="navigation-item"
|
||||
[class.active]="activeTab() === 'apartments'"
|
||||
[attr.aria-current]="activeTab() === 'apartments' ? 'page' : null"
|
||||
(click)="tabSelected.emit('apartments')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16" />
|
||||
<path d="M2 21h20M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2" />
|
||||
</svg>
|
||||
<span>Appartements</span>
|
||||
</button>
|
||||
<button
|
||||
mat-button
|
||||
type="button"
|
||||
class="navigation-item"
|
||||
[class.active]="activeTab() === 'settings'"
|
||||
[attr.aria-current]="activeTab() === 'settings' ? 'page' : null"
|
||||
(click)="tabSelected.emit('settings')"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.8"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path
|
||||
d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.16.38.37.72.6 1 .3.3.7.45 1.1.45h.09v4h-.09c-.4 0-.8.15-1.1.45-.23.28-.44.62-.6 1Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Réglages</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-user">
|
||||
<div class="compact-avatar">{{ userInitial() }}</div>
|
||||
<div>
|
||||
<strong>{{ username() }}</strong
|
||||
><span>{{ email() }}</span>
|
||||
</div>
|
||||
<button mat-button type="button" class="logout-action" (click)="logoutRequested.emit()">
|
||||
Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Component, input, output } from '@angular/core';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { BrandMark } from '../brand-mark';
|
||||
|
||||
export type WorkspaceTab = 'dashboard' | 'apartments' | 'settings';
|
||||
|
||||
@Component({
|
||||
selector: 'app-workspace-navigation',
|
||||
imports: [BrandMark, MatButtonModule],
|
||||
templateUrl: './workspace-navigation.html',
|
||||
styleUrl: './workspace-navigation.css',
|
||||
})
|
||||
export class WorkspaceNavigation {
|
||||
readonly activeTab = input.required<WorkspaceTab>();
|
||||
readonly username = input.required<string>();
|
||||
readonly email = input.required<string>();
|
||||
readonly userInitial = input.required<string>();
|
||||
readonly tabSelected = output<WorkspaceTab>();
|
||||
readonly logoutRequested = output<void>();
|
||||
}
|
||||
+26
-13
@@ -13,14 +13,11 @@ describe('ApartmentService', () => {
|
||||
get: vi.fn().mockReturnValue(of([])),
|
||||
post: vi.fn().mockReturnValue(of({})),
|
||||
put: vi.fn().mockReturnValue(of({})),
|
||||
delete: vi.fn().mockReturnValue(of({}))
|
||||
delete: vi.fn().mockReturnValue(of({})),
|
||||
};
|
||||
|
||||
TestBed.configureTestingModule({
|
||||
providers: [
|
||||
ApartmentService,
|
||||
{ provide: HttpClient, useValue: mockHttpClient }
|
||||
]
|
||||
providers: [ApartmentService, { provide: HttpClient, useValue: mockHttpClient }],
|
||||
});
|
||||
|
||||
service = TestBed.inject(ApartmentService);
|
||||
@@ -32,41 +29,57 @@ describe('ApartmentService', () => {
|
||||
|
||||
it('should call GET /api/apartments', () => {
|
||||
const mockApts: Apartment[] = [
|
||||
{ id: '1', name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' }
|
||||
{ id: '1', name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' },
|
||||
];
|
||||
mockHttpClient.get.mockReturnValue(of(mockApts));
|
||||
|
||||
service.getApartments().subscribe(data => {
|
||||
service.getApartments().subscribe((data) => {
|
||||
expect(data).toEqual(mockApts);
|
||||
});
|
||||
expect(mockHttpClient.get).toHaveBeenCalledWith('/api/apartments');
|
||||
});
|
||||
|
||||
it('should call GET /api/apartments/:id', () => {
|
||||
const mockApt: Apartment = { id: '1', name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' };
|
||||
const mockApt: Apartment = {
|
||||
id: '1',
|
||||
name: 'Apt 1',
|
||||
address: 'Addr 1',
|
||||
purchasePrice: 100000,
|
||||
description: 'Desc 1',
|
||||
};
|
||||
mockHttpClient.get.mockReturnValue(of(mockApt));
|
||||
|
||||
service.getApartment('1').subscribe(data => {
|
||||
service.getApartment('1').subscribe((data) => {
|
||||
expect(data).toEqual(mockApt);
|
||||
});
|
||||
expect(mockHttpClient.get).toHaveBeenCalledWith('/api/apartments/1');
|
||||
});
|
||||
|
||||
it('should call POST /api/apartments', () => {
|
||||
const mockApt: Apartment = { name: 'Apt 1', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' };
|
||||
const mockApt: Apartment = {
|
||||
name: 'Apt 1',
|
||||
address: 'Addr 1',
|
||||
purchasePrice: 100000,
|
||||
description: 'Desc 1',
|
||||
};
|
||||
mockHttpClient.post.mockReturnValue(of({ id: '2', ...mockApt }));
|
||||
|
||||
service.createApartment(mockApt).subscribe(data => {
|
||||
service.createApartment(mockApt).subscribe((data) => {
|
||||
expect(data.id).toBe('2');
|
||||
});
|
||||
expect(mockHttpClient.post).toHaveBeenCalledWith('/api/apartments', mockApt);
|
||||
});
|
||||
|
||||
it('should call PUT /api/apartments/:id', () => {
|
||||
const mockApt: Apartment = { name: 'Updated Apt', address: 'Addr 1', purchasePrice: 100000, description: 'Desc 1' };
|
||||
const mockApt: Apartment = {
|
||||
name: 'Updated Apt',
|
||||
address: 'Addr 1',
|
||||
purchasePrice: 100000,
|
||||
description: 'Desc 1',
|
||||
};
|
||||
mockHttpClient.put.mockReturnValue(of({ id: '1', ...mockApt }));
|
||||
|
||||
service.updateApartment('1', mockApt).subscribe(data => {
|
||||
service.updateApartment('1', mockApt).subscribe((data) => {
|
||||
expect(data.name).toBe('Updated Apt');
|
||||
});
|
||||
expect(mockHttpClient.put).toHaveBeenCalledWith('/api/apartments/1', mockApt);
|
||||
+1
-1
@@ -12,7 +12,7 @@ export interface Apartment {
|
||||
}
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ApartmentService {
|
||||
private readonly http = inject(HttpClient);
|
||||
+1
-1
@@ -6,7 +6,7 @@ describe('ConfigService', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [ConfigService]
|
||||
providers: [ConfigService],
|
||||
});
|
||||
|
||||
service = TestBed.inject(ConfigService);
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ConfigService {
|
||||
async loadConfig(): Promise<void> {
|
||||
File renamed without changes.
@@ -93,3 +93,56 @@ input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
flex: 0 0 42px;
|
||||
place-items: center;
|
||||
border-radius: 14px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.primary-action.mat-mdc-unelevated-button {
|
||||
--mdc-filled-button-container-color: var(--accent);
|
||||
--mdc-filled-button-label-text-color: var(--accent-contrast);
|
||||
min-height: 44px;
|
||||
border-radius: 13px;
|
||||
padding-inline: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eyebrow,
|
||||
.context-label,
|
||||
.story-kicker,
|
||||
.property-label {
|
||||
margin-bottom: 8px;
|
||||
color: var(--accent);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.11em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user