Step by step module creation (#78)

Author: mohamedalaaser

.example.env

@@ -19,6 +19,18 @@ APP_PORT=4200
 API_PORT=8080
 AUTH_PORT=8081
 
+# EMAIL SENDING
+MAIL_ENABLED=true
+MAIL_SENDER=module-test@local.aet.cit.tum.de
+POSTFIX_HOST=localhost
+POSTFIX_PORT=1025
+POSTFIX_USERNAME=
+POSTFIX_PASSWORD=
+MAIL_STARTTLS_ENABLE=false
+MAIL_STARTTLS_REQUIRED=false
+# Public URL of the Angular app (used in email links)
+CLIENT_HOST=http://localhost:4200
+
 # AI Service
 AZURE_ENDPOINT=https://your-azure-endpoint.openai.azure.com/
 AZURE_DEPLOYMENT_NAME=your-deployment-name

Client/client.Dockerfile

@@ -1,7 +1,7 @@
 FROM node:24-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
-RUN npm install --legacy-peer-deps
+RUN npm install
 
 COPY . .
 RUN npm run build

Client/src/app/app.routes.ts

@@ -25,10 +25,10 @@ export const routes: Routes = [
     children: [
       { path: '', component: ProfessorHomePageComponent },
       { path: 'create', component: ProposalCreateComponent },
-      { path: 'view/:id', component: ProposalViewComponent },
-      { path: 'view/:id/version/:versionId', component: ModuleVersionViewComponent },
-      { path: 'view/:id/version/:versionId/edit', component: ModuleVersionEditComponent },
-      { path: 'view/:id/version/:versionId/overlap', component: SimilarModulesPage }
+      { path: ':id', component: ProposalViewComponent },
+      { path: ':id/version/:versionId', component: ModuleVersionViewComponent },
+      { path: ':id/version/:versionId/edit', component: ModuleVersionEditComponent },
+      { path: ':id/version/:versionId/overlap', component: SimilarModulesPage }
     ]
   },
   {

Client/src/app/components/breadcrumb/breadcrumb.component.ts

@@ -85,37 +85,38 @@ export class BreadcrumbComponent {
       return items;
     }
 
-    if (segments[1] === 'view' && segments[2]) {
-      const proposalId = segments[2];
-      const proposalLabel = (this.breadcrumbLabels.proposalTitle() ?? '').trim() || `Proposal ${proposalId}`;
+    // segments[1] is proposal id (e.g. /proposals/123 or /proposals/123/version/456/edit)
+    const proposalId = segments[1];
+    if (!proposalId) return items;
+
+    const proposalLabel = (this.breadcrumbLabels.proposalTitle() ?? '').trim() || `Proposal ${proposalId}`;
+    items.push({
+      label: proposalLabel,
+      routerLink: ['/proposals', proposalId]
+    });
+
+    if (segments.length <= 2) return items;
+
+    if (segments[2] === 'version' && segments[3]) {
+      const versionId = segments[3];
+      const versionSegmentLabel = (this.breadcrumbLabels.versionLabel() ?? '').trim() || `Version ${versionId}`;
       items.push({
-        label: proposalLabel,
-        routerLink: ['/proposals/view', proposalId]
+        label: versionSegmentLabel,
+        routerLink: ['/proposals', proposalId, 'version', versionId]
       });
 
-      if (segments.length <= 3) return items;
+      if (segments.length <= 4) return items;
 
-      if (segments[3] === 'version' && segments[4]) {
-        const versionId = segments[4];
-        const versionSegmentLabel = (this.breadcrumbLabels.versionLabel() ?? '').trim() || `Version ${versionId}`;
+      if (segments[4] === 'edit') {
+        items.push({ label: 'Edit', routerLink: ['/proposals', proposalId, 'version', versionId, 'edit'] });
+        return items;
+      }
+      if (segments[4] === 'overlap') {
         items.push({
-          label: versionSegmentLabel,
-          routerLink: ['/proposals/view', proposalId, 'version', versionId]
+          label: 'Similar Modules',
+          routerLink: ['/proposals', proposalId, 'version', versionId, 'overlap']
         });
-
-        if (segments.length <= 5) return items;
-
-        if (segments[5] === 'edit') {
-          items.push({ label: 'Edit', routerLink: ['/proposals/view', proposalId, 'version', versionId, 'edit'] });
-          return items;
-        }
-        if (segments[5] === 'overlap') {
-          items.push({
-            label: 'Similar Modules',
-            routerLink: ['/proposals/view', proposalId, 'version', versionId, 'overlap']
-          });
-          return items;
-        }
+        return items;
       }
     }
 

Client/src/app/components/create-edit-base/create-edit-base-layout.css

@@ -0,0 +1,23 @@
+.module-edit-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 2rem;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .module-edit-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.module-edit-stepper-column {
+  position: sticky;
+  top: 1rem;
+  align-self: start;
+}
+
+.module-edit-form-column {
+  min-width: 0;
+}
+