(F) Add medicines

Clinics.Frontend/src/app/app.module.ts

@@ -51,6 +51,7 @@ import { AskForSerialNumberComponent } from './components/doctor/ask-for-serial-
 import { HistoryComponent } from './components/doctor/history/history.component';
 import { VisitComponent } from './components/doctor/visit/visit.component';
 import { CreateVisitComponent } from './components/doctor/create-visit/create-visit.component';
+import { MedicinesComponent } from './components/doctor/medicines/medicines.component';
 
 
 @NgModule({
@@ -120,6 +121,7 @@ import { CreateVisitComponent } from './components/doctor/create-visit/create-vi
     HistoryComponent,
     VisitComponent,
     CreateVisitComponent,
+    MedicinesComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/doctor/ask-for-serial-number/ask-for-serial-number.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { EmployeesDataService } from '../../../services/employees/employees-data.service';
 import { Router } from '@angular/router';
+import { NgForm } from '@angular/forms';
 
 @Component({
   selector: 'app-ask-for-serial-number',
@@ -16,18 +17,24 @@ export class AskForSerialNumberComponent {
   @Input("parentModal") parentModal: any;
   @Input("type") type: 'query' | 'command';
 
+  @ViewChild("form") form: NgForm;
+
   isFailure: boolean = false;
   errorMessage: string = 'الموظف غير موجود';
 
   serialNumber: string;
 
   onSubmit(): void {
+    this.isFailure = false;
+    this.errorMessage = '';
+    
     var id: number;
     this.employeeDataService.getBySerialNumber(this.serialNumber)
     .subscribe(result => {
       if (result.status === false) {
         this.isFailure = true;
         this.errorMessage = result.errorMessage!;
+        this.form.form.markAsPristine();
       }
       else {
         id = result.employeeData!.id;

Clinics.Frontend/src/app/components/doctor/medicines/medicines.component.css

+.table {
+    --mdb-table-bg: var(--heading-color);
+    --mdb-table-accent-bg: var(--accent-color);
+    font-weight: 800;
+}
+
+.table thead th {
+    background-color: var(--heading-color);
+    color: #fff;
+}
+
+.table tbody tr td,  .table tbody tr th{
+    color: var(--heading-color);
+}
\ No newline at end of file

Clinics.Frontend/src/app/components/doctor/medicines/medicines.component.html

+<div class="custom-child" dir="rtl">
+    <div class="container text-center">
+        <table class="table">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">اسم الدواء</th>
+                <th scope="col">سعة العلبة</th>
+                <th scope="col">العيار</th>
+                <th scope="col">الكمية</th>
+              </tr>
+            </thead>
+            
+            <tbody>
+              <tr>
+                <th scope="row">1</th>
+                <td>أسبيرين</td>
+                <td>100 ملج</td>
+                <td>مرتين في اليوم</td>
+                <td>30</td>
+              </tr>
+              <tr>
+                <th scope="row">2</th>
+                <td>باراسيتامول</td>
+                <td>500 ملج</td>
+                <td>مرة واحدة في اليوم</td>
+                <td>20</td>
+              </tr>
+              <tr>
+                <th scope="row">3</th>
+                <td>فيتامين سي</td>
+                <td>200 ملج</td>
+                <td>ثلاث مرات في اليوم</td>
+                <td>40</td>
+              </tr>
+            </tbody>
+          </table>
+    </div>
+
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/doctor/medicines/medicines.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-medicines',
+  templateUrl: './medicines.component.html',
+  styleUrl: './medicines.component.css'
+})
+export class MedicinesComponent {
+
+}