feat: topic choose when create post

CodeURJC-DAW-2022-23 · Apr 23, 2023 · 0ef2a36 · 0ef2a36
1 parent 186a52a
commit 0ef2a36
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 10 deletions.
diff --git a/front/angular.json b/front/angular.json
@@ -19,7 +19,9 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
+
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
               "src/styles.css"
@@ -91,11 +93,17 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.css"],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "02793861-7d92-4f87-9a17-19e7af46740c"
   }
 }
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^14.0.0",
+    "@angular/cdk": "~13.0.4",
     "@angular/common": "^14.0.0",
     "@angular/compiler": "^14.0.0",
     "@angular/core": "^14.0.0",
     "@angular/forms": "^14.0.0",
+    "@angular/material": "~13.0.4",
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
@@ -39,4 +41,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~4.7.2"
   }
-}
+}
diff --git a/front/src/app/app.module.ts b/front/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { ProfileModule } from './profile/profile.module';
 import { PostModule } from './post/post.module';
 
 import { AppComponent } from './app.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
@@ -22,6 +23,7 @@ import { AppComponent } from './app.component';
     AdminModule,
     ProfileModule,
     PostModule,
+    NoopAnimationsModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/front/src/app/post/pages/create-post/create-post.component.html b/front/src/app/post/pages/create-post/create-post.component.html
@@ -2,12 +2,13 @@
   <h2 class="form-title" [ngStyle]="{'color': '#2d474f', 'text-align': 'center'}">Create a new Post</h2>
   <form id='createPostForm' [formGroup]='myForm' (ngSubmit)='onSubmit()'>
     <input class='title form-control mt-3 mb-2' id='topTitle' formControlName='title' placeholder='Write the title...'>
-    <select formControlName="selectedTopics" multiple (change)="onTopicsChange($event)">
-      <option *ngFor="let option of topics" [value]="option.name">{{ option.name }}</option>
-    </select>
-    <ul>
-      <li *ngFor="let selectedTopic of selectedTopics">{{ selectedTopic }}</li>
-    </ul>
+    <mat-form-field appearance="outline" class="mat-select-centered">
+      <mat-label>Choose the topics</mat-label>
+      <mat-select formControlName="selectedTopics" multiple>
+        <mat-option *ngFor="let option of topics" [value]="option.name">{{ option.name }}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
 
     <div formArrayName='descriptionsAndImages'>
       <ng-container *ngFor='let item of descriptionsAndImagesControls; let i = index;'>

diff --git a/front/src/app/post/post.module.ts b/front/src/app/post/post.module.ts
@@ -11,12 +11,13 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 
 @NgModule({
   declarations: [PostComponent, CommentComponent, TopComponent, FeedComponent, CreatePostComponent],
-  imports: [BrowserModule, HttpClientModule,FormsModule, CommonModule, SharedModule, ReactiveFormsModule],
+  imports: [MatFormFieldModule, MatSelectModule, BrowserModule, HttpClientModule,FormsModule, CommonModule, SharedModule, ReactiveFormsModule],
   exports: [FeedComponent, TopComponent],
 })
 export class PostModule {}
diff --git a/front/src/index.html b/front/src/index.html
@@ -7,6 +7,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <body>

diff --git a/front/src/styles.css b/front/src/styles.css
@@ -25,6 +25,8 @@ body {
   border: 0;
 }
 
+
+
 .btn-primary:hover,
 .btn-primary:active:focus {
   background-color: #63b1b1;
@@ -34,3 +36,6 @@ body {
 .btn-primary[disabled] {
   background-color: #1e2f34;
 }
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }