modal จองห้องประชุม

src/app/portal-manage/meeting-booking/meeting-booking.component.html

@@ -49,6 +49,11 @@
             </mat-form-field>
           </div>
 
+          <!-- Room Preview -->
+          <div class="form-row" *ngIf="getSelectedRoomImage() as img">
+            <img [src]="img" alt="room" style="width:100%;max-height:180px;object-fit:cover;border-radius:8px;border:1px solid #e9ecef;" />
+          </div>
+
           <div class="form-row">
             <mat-form-field appearance="outline" class="form-field">
               <mat-label>วันที่เริ่มต้น</mat-label>
@@ -77,16 +82,37 @@
             </mat-form-field>
           </div>
 
+          <!-- Attendees section -->
+          <div class="form-row">
+            <mat-form-field appearance="outline" class="form-field">
+              <mat-label>จำนวนผู้เข้าร่วม</mat-label>
+              <input matInput type="number" min="0" formControlName="attendeeCount" [value]="attendees.length" readonly>
+            </mat-form-field>
+
+            <mat-form-field appearance="outline" class="form-field">
+              <mat-label>เพิ่มผู้เข้าร่วม (พิมพ์อีเมลแล้วกด Enter)</mat-label>
+              <mat-chip-grid #chipList aria-label="Attendees">
+                <mat-chip-row *ngFor="let a of attendees" [removable]="true" (removed)="removeAttendee(a)">
+                  {{ a }}
+                  <button matChipRemove aria-label="remove">
+                    <mat-icon>cancel</mat-icon>
+                  </button>
+                </mat-chip-row>
+                <input
+                  placeholder="เพิ่มอีเมลผู้เข้าร่วม"
+                  [matChipInputFor]="chipList"
+                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                  (matChipInputTokenEnd)="addAttendee($event)" />
+              </mat-chip-grid>
+            </mat-form-field>
+          </div>
+
           <mat-form-field appearance="outline" class="form-field-full">
             <mat-label>รายละเอียด</mat-label>
             <textarea matInput formControlName="description" rows="3" placeholder="รายละเอียดเพิ่มเติม (ไม่บังคับ)"></textarea>
           </mat-form-field>
 
           <div class="form-actions">
-            <button mat-raised-button color="primary" type="submit" [disabled]="!bookingForm.valid">
-              <mat-icon>event</mat-icon>
-              จองห้องประชุม
-            </button>
             <button mat-button type="button" (click)="bookingForm.reset()">
               <mat-icon>refresh</mat-icon>
               รีเซ็ต
@@ -95,6 +121,10 @@
               <mat-icon>close</mat-icon>
               ยกเลิก
             </button>
+            <button mat-raised-button color="primary" type="submit" [disabled]="!bookingForm.valid">
+              <mat-icon>event</mat-icon>
+              จองห้องประชุม
+            </button>
           </div>
         </form>
       </div>
@@ -210,6 +240,7 @@
                      (click)="onEventClick({ event: e })">
                   <span class="time" *ngIf="e.StartTime && e.EndTime">{{ e.StartTime | date:'HH:mm' }}-{{ e.EndTime | date:'HH:mm' }}</span>
                   <span class="title">{{ e.Subject }}</span>
+                  <span class="count" *ngIf="e.AttendeesCount">({{ e.AttendeesCount }})</span>
                 </div>
               </div>
             </div>
@@ -258,6 +289,9 @@
                 </span>
               </div>
               <div class="quick-info-content">
+                <div class="info-item" *ngIf="getRoomImageByName(data.Location)">
+                  <img [src]="getRoomImageByName(data.Location)" alt="room" style="width:100%;max-height:140px;object-fit:cover;border-radius:8px;border:1px solid #e9ecef;" />
+                </div>
                 <div class="info-item">
                   <mat-icon>location_on</mat-icon>
                   <span>{{ data.Location }}</span>
@@ -276,7 +310,11 @@
                 </div>
                 <div class="info-item" *ngIf="data.Attendees">
                   <mat-icon>group</mat-icon>
-                  <span>{{ data.Attendees }}</span>
+                  <span>{{ data.Attendees }} ({{ data.AttendeesCount || (data.AttendeesList?.length || 0) }} คน)</span>
+                </div>
+                <div class="info-item" *ngIf="data.AttendeesList?.length">
+                  <mat-icon>badge</mat-icon>
+                  <span>{{ data.AttendeesList.join(', ') }}</span>
                 </div>
               </div>
               <div class="quick-info-actions">

src/app/portal-manage/meeting-booking/meeting-booking.component.ts

@@ -72,6 +72,7 @@ import { MeetingRoom, MeetingBooking, BookingTimeSlot, BookingStatistics } from
 })
 export class MeetingBookingComponent implements OnInit {
   rooms$: Observable<MeetingRoom[]>;
+  private roomsSnapshot: MeetingRoom[] = [];
   bookings$: Observable<MeetingBooking[]>;
   statistics$: Observable<BookingStatistics>;
 
@@ -110,6 +111,7 @@ export class MeetingBookingComponent implements OnInit {
     private snackBar: MatSnackBar
   ) {
     this.rooms$ = this.meetingBookingService.rooms$;
+    this.rooms$.subscribe(r => this.roomsSnapshot = r || []);
     this.bookings$ = this.meetingBookingService.bookings$;
 
     this.bookingForm = this.fb.group({
@@ -118,7 +120,8 @@ export class MeetingBookingComponent implements OnInit {
       description: [''],
       startDateTime: ['', Validators.required],
       endDateTime: ['', Validators.required],
-      attendees: [[]]
+      attendees: [[]],
+      attendeeCount: [0, [Validators.min(0)]]
     });
 
     this.statistics$ = this.meetingBookingService.getBookingStatistics(
@@ -180,7 +183,7 @@ export class MeetingBookingComponent implements OnInit {
     const value = (event.value || '').trim();
     if (value) {
       this.attendees.push(value);
-      this.bookingForm.patchValue({ attendees: this.attendees });
+      this.bookingForm.patchValue({ attendees: this.attendees, attendeeCount: this.attendees.length });
     }
     event.chipInput!.clear();
   }
@@ -189,7 +192,7 @@ export class MeetingBookingComponent implements OnInit {
     const index = this.attendees.indexOf(attendee);
     if (index >= 0) {
       this.attendees.splice(index, 1);
-      this.bookingForm.patchValue({ attendees: this.attendees });
+      this.bookingForm.patchValue({ attendees: this.attendees, attendeeCount: this.attendees.length });
     }
   }
 
@@ -287,7 +290,9 @@ export class MeetingBookingComponent implements OnInit {
             CategoryColor: this.getStatusColor(booking.status),
             Status: booking.status,
             Organizer: booking.organizerName,
-            Attendees: booking.attendees.map(a => a.userName).join(', ')
+            Attendees: booking.attendees.map(a => a.userName).join(', '),
+            AttendeesList: booking.attendees.map(a => a.userName),
+            AttendeesCount: booking.attendees.length
           }));
         } else {
           // ถ้าไม่มีข้อมูลจาก service ให้ใช้ข้อมูลตัวอย่าง
@@ -384,7 +389,9 @@ export class MeetingBookingComponent implements OnInit {
         CategoryColor: 'success',
         Status: 'confirmed',
         Organizer: 'John Doe',
-        Attendees: 'Jane Smith, Bob Johnson'
+        Attendees: 'Jane Smith, Bob Johnson',
+        AttendeesList: ['Jane Smith', 'Bob Johnson'],
+        AttendeesCount: 2
       },
       {
         Id: 2,
@@ -397,7 +404,9 @@ export class MeetingBookingComponent implements OnInit {
         CategoryColor: 'info',
         Status: 'pending',
         Organizer: 'Alice Brown',
-        Attendees: 'Charlie Wilson, Diana Lee'
+        Attendees: 'Charlie Wilson, Diana Lee',
+        AttendeesList: ['Charlie Wilson', 'Diana Lee'],
+        AttendeesCount: 2
       },
       {
         Id: 3,
@@ -410,7 +419,9 @@ export class MeetingBookingComponent implements OnInit {
         CategoryColor: 'warning',
         Status: 'confirmed',
         Organizer: 'Tech Lead',
-        Attendees: 'ทีมพัฒนา'
+        Attendees: 'ทีมพัฒนา',
+        AttendeesList: ['ทีมพัฒนา'],
+        AttendeesCount: 1
       }
     ];
 
@@ -512,6 +523,16 @@ export class MeetingBookingComponent implements OnInit {
     return items;
   }
 
+  public getRoomImageByName(roomName: string): string | undefined {
+    const room = this.roomsSnapshot.find(r => r.name === roomName);
+    return room?.imageUrl;
+  }
+
+  public getSelectedRoomImage(): string | undefined {
+    const room = this.roomsSnapshot.find(r => r.id === this.bookingForm?.value?.roomId);
+    return room?.imageUrl;
+  }
+
   public monthLabel(): string {
     const d = this.selectedDate_schedule;
     return `${d.toLocaleString('th-TH', { month: 'long' })} ${d.getFullYear()}`;