stable after blogs

2024-08-31 19:39:59 +05:30
parent 7b153f4cf6
commit 9c6c3abc32
52 changed files with 10990 additions and 5416 deletions
@@ -0,0 +1,118 @@
+<app-menu></app-menu>
+<div class="container mt-4">
+    <div class="d-flex justify-content-between mb-3">
+        <!-- Button to Toggle to Blog Form -->
+        <button *ngIf="!isShowForm" class="btn btn-primary" (click)="showForm()">New Blog</button>
+        <!-- Button to Toggle to Blog List -->
+        <button *ngIf="isShowForm" class="btn btn-secondary" (click)="showTable()">Back to List</button>
+    </div>
+
+    <!-- Blog Form -->
+    <div *ngIf="isShowForm" class="mb-4">
+        <form [formGroup]="blogForm" (ngSubmit)="saveBlog()">
+            <div class="container">
+                <button type="submit" class="btn btn-primary mx-2">{{ editing ? 'Update Blog' : 'Create Blog' }}</button>
+                <button type="button" class="btn btn-secondary ml-2" (click)="resetForm()">Cancel</button>
+            </div>
+
+            <div class="form-group m-2 ">
+                <label class="text-primary" for="title">Title</label>
+                <input type="text" id="title" class="form-control" formControlName="title" placeholder="Enter blog title">
+                <div *ngIf="blogForm?.get('title')?.invalid && blogForm.get('title')?.touched" class="text-danger">
+                    Title is required.
+                </div>
+            </div>
+
+            <div class="form-group m-2">
+                <label class="text-primary" for="professors">Professors</label>
+                <select id="professors" formControlName="professors" class="form-control" multiple>
+                  <option *ngFor="let professor of allProfessors" [value]="professor.id">
+                    {{ professor.firstName }}
+                  </option>
+                </select>
+                <div *ngIf="blogForm.get('professors')?.invalid && blogForm.get('professors')?.touched" class="text-danger mt-1">
+                  At least one professor must be selected.
+                </div>
+              </div>
+              
+              <div class="form-group m-2">
+                <label class="text-primary" for="tags">Tags</label>
+                <input type="text" id="tags" class="form-control" formControlName="tags" placeholder="Enter tags separated by commas">
+                <div *ngIf="blogForm.get('tags')?.invalid && blogForm.get('tags')?.touched" class="text-danger mt-1">
+                  Tags are required.
+                </div>
+              </div>
+              
+              <div class="form-group m-2">
+                  <input type="checkbox" class="mx-2" id="posted" formControlName="posted">
+                  <label class="text-primary" for="posted">Posted</label>
+              </div>
+              
+
+
+            <div class="form-group m-2">
+                <label class="text-primary m-1" for="content">Content</label>
+                <angular-editor  [config]="editorConfig"  [placeholder]="'Enter text here...'" formControlName="content"></angular-editor>
+                <div *ngIf="blogForm.get('content')?.invalid && blogForm.get('content')?.touched" class="text-danger mt-1">
+                    Content is required.
+                </div>
+            </div>
+
+            <div class="result-container mt-4">
+                <h4 class="text-primary">Preview</h4>
+                <div [innerHTML]="blogForm.get('content')?.value || ''"></div>
+            </div>
+
+
+
+
+        </form>
+    </div>
+
+<!-- Blog List -->
+<div *ngIf="!isShowForm">
+    <div *ngIf="blogs.length > 0">
+        <table class="table table-striped">
+            <thead>
+                <tr>
+                    <th>Title</th>
+                    <!-- <th>Content</th> -->
+                    <th>Authors</th>
+                    <th>Tags</th>
+                    <th>Posted</th> <!-- New column for posted status -->
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let blog of blogs">
+                    <td>{{ blog.title }}</td>
+                    <!-- <td>{{ blog.content | slice:0:50 }}...</td> -->
+                    <td>
+                        <span *ngFor="let professor of blog.professors">{{ professor.firstName }}<br></span>
+                    </td>
+                    <td>
+                        <span *ngFor="let tag of blog.tags">{{ tag }}<br></span>
+                    </td>
+                    <td>
+                        <span *ngIf="blog.posted" class="text-success">&#10003;</span> <!-- Check mark for posted -->
+                        <span *ngIf="!blog.posted" class="text-danger">&#10007;</span> <!-- Cross mark for not posted -->
+                    </td>
+                    <td>
+                        <button class="btn btn-info btn-sm mr-2" (click)="editBlog(blog)"> <!-- Added margin-right for spacing -->
+                            Edit
+                        </button>
+                        <button class="btn btn-danger btn-sm" (click)="deleteBlog(blog)">
+                            Delete
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        
+    </div>
+    <div *ngIf="blogs.length === 0" class="alert alert-info">
+        No blogs available. Please create a new blog.
+    </div>
+</div>
+
+</div>