Hospital_Management/angular/src/app/departments/department-dialog.component.html

<div
  class="modal fade show d-block"
  tabindex="-1"
  role="dialog"
  style="background: rgba(0, 0, 0, 0.5)"
  *ngIf="visible"
  aria-label="l('name')"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header py-4">
        <h4 class="text-success mb-0 fs-3 fw-normal">
          {{ isEditMode ? 'Edit ' : 'Create ' }}{{name}}
        </h4>
                <button
          tabindex="0"
          type="button"
          (click)="onClose()"
          class="btn-close"
          aria-label="Close"
        ></button>
      </div>
      <form #departmentForm="ngForm" (ngSubmit)="saveDepartment(departmentForm)">
        <div class="p-fluid grid justify-content-center">
          <div class="field col-md-5">
            <label for="departmentNo">Department No <span class="text-danger">*</span></label>
            <span class="p-input-icon-left p-input-icon-right">
              <i class="pi pi-hashtag"></i>
              <input 
                pInputText 
                id="departmentNo" 
                name="departmentNo" 
                [(ngModel)]="department.departmentNo" 
                #departmentNoCtrl="ngModel" 
                required 
                [ngClass]="{ 'is-valid': departmentNoCtrl.valid && departmentNoCtrl.touched, 'is-invalid': departmentNoCtrl.invalid && departmentNoCtrl.touched }"
              />
              <i *ngIf="departmentNoCtrl.valid && departmentNoCtrl.touched" class="pi pi-check text-success"></i>
              <i *ngIf="departmentNoCtrl.invalid && departmentNoCtrl.touched" class="pi pi-times text-danger"></i>
            </span>
            <small class="text-danger" *ngIf="departmentNoCtrl.invalid && departmentNoCtrl.touched">
              <span *ngIf="departmentNoCtrl.errors?.required">Department No is required.</span>
            </small>
          </div>
          <div class="field col-md-1"></div>
      
          <div class="field col-md-5">
            <label for="departmentName">Department Name <span class="text-danger">*</span></label>
            <span class="p-input-icon-left p-input-icon-right">
              <i class="pi pi-building"></i>
              <input 
                pInputText 
                id="departmentName" 
                name="departmentName" 
                [(ngModel)]="department.departmentName" 
                #departmentNameCtrl="ngModel" 
                required 
              />
            </span>
            <small class="text-danger" *ngIf="departmentNameCtrl.invalid && departmentNameCtrl.touched">
              <span *ngIf="departmentNameCtrl.errors?.required">Department Name is required.</span>
            </small>
          </div>
      
          <div class="field col-md-5">
            <label for="departmentDate">Department Date</label>
            <p-calendar 
              id="departmentDate" 
              name="departmentDate" 
              [(ngModel)]="Departmentdate" 
              [showIcon]="true">
            </p-calendar>
          </div>
          <div class="field col-md-1"></div>
      
          <div class="field col-md-5">
            <label for="departmentHead">Department Head</label>
            <span class="p-input-icon-left">
              <i class="pi pi-user"></i>
              <input 
                pInputText 
                id="departmentHead" 
                name="departmentHead" 
                [(ngModel)]="department.departmentHead" 
              />
            </span>
          </div>
          <div class="field col-md-5">
            <label>Status</label>
            <div class="flex align-items-center p-input-icon-right">
              <p-radioButton
                name="status"
                value="Active"
                [(ngModel)]="department.status"
                inputId="active"
              ></p-radioButton>
              <label for="active" class="ml-2 mr-3">Active</label>
          
              <p-radioButton
                name="status"
                value="Inactive"
                [(ngModel)]="department.status"
                inputId="inactive"
              ></p-radioButton>
              <label for="inactive" class="ml-2">Inactive</label>
            </div>
          </div>
          <div class="field col-md-6"></div>

          
      
          <div class="field col-11">
            <label for="description">Description</label>
            <textarea 
              id="description" 
              name="description" 
              [(ngModel)]="department.description" 
              rows="5" 
              cols="30" 
              pInputTextarea>
            </textarea>
          </div>
      
          <div class="field col-11 flex justify-content-end">
            <button 
              pButton 
              type="submit" 
              label="Save" 
              class="p-button-success" 
              [disabled]="departmentForm.invalid">
            </button>
            <button 
              pButton 
              type="button" 
              label="Cancel" 
              class="p-button-secondary ml-2" 
              (click)="onClose()">
            </button>
          </div>
        </div>
      </form>
      
    </div>
  </div>
</div>