Class BreakoutRoomsModal

BreakoutRoomsModal component manages the creation, modification, and assignment of breakout rooms.

Selector

app-breakout-rooms-modal

Inputs

  • isVisible (boolean): Controls the visibility of the breakout rooms modal. Default is false.
  • parameters (BreakoutRoomsModalParameters): Parameters for managing breakout room settings and behavior.
  • position (string): Position of the modal on the screen. Default is 'topRight'.
  • backgroundColor (string): Background color of the modal. Default is '#83c0e9'.
  • onBreakoutRoomsClose (function): Callback function triggered when the modal is closed.

Methods

  • ngOnInit(): Lifecycle hook to initialize modal width and breakout rooms.
  • ngOnChanges(changes: SimpleChanges): Lifecycle hook called when any data-bound input properties change.
  • calculateModalWidth(): Dynamically calculates and sets modal width based on screen width.
  • modalContainerStyle(): Returns style object for modal container.
  • modalContentStyle(): Returns style object for modal content.
  • initializeBreakoutRooms(): Initializes the breakout rooms based on the current participants and parameters.
  • handleRandomAssign(): Randomly assigns participants to breakout rooms.
  • handleManualAssign(): Initializes manual room assignment by setting empty breakout rooms.
  • handleAddRoom(): Adds a new breakout room.
  • handleSaveRooms(): Validates and saves breakout room configurations.
  • validateRooms(): Validates room configurations and participants' uniqueness and quantity.
  • checkCanStartBreakout(): Checks conditions to enable the start of breakout rooms.
  • handleStartBreakout(): Starts the breakout session if conditions are met.
  • handleStopBreakout(): Stops the breakout session and reverts to the initial meeting display type.
  • handleEditRoom(roomIndex: number): Opens the modal to edit the specified breakout room.
  • handleDeleteRoom(roomIndex: number): Deletes a breakout room and updates participants' room assignments.
  • handleAddParticipant(event): Adds a participant to a specified breakout room.
  • handleRemoveParticipant(event): Removes a participant from a specified breakout room.

Dependencies

  • CommonModule: Angular's common directives.
  • FormsModule: Angular's forms module for form handling.
  • FontAwesomeModule: Font Awesome icons for UI elements.
  • RoomListComponent: Component for listing rooms.
  • EditRoomModalComponent: Component for editing room participants.

Example

<app-breakout-rooms-modal
 [isVisible]="isBreakoutRoomsModalVisible"
[parameters]="breakoutRoomsParams"
[position]="modalPosition"
[backgroundColor]="modalBgColor"
[onBreakoutRoomsClose]="onCloseBreakoutRooms">
</app-breakout-rooms-modal>

Implements

  • OnChanges
  • OnInit

Constructors

constructor

Methods

calculateModalWidth modalContainerStyle modalContentStyle ngOnChanges ngOnInit initializeBreakoutRooms handleRandomAssign handleManualAssign handleAddRoom handleSaveRooms validateRooms checkCanStartBreakout handleStartBreakout handleStopBreakout handleEditRoom handleDeleteRoom handleAddParticipant handleRemoveParticipant

Properties

isVisible parameters position backgroundColor onBreakoutRoomsClose roomsContainerRef faDoorOpen faTimes faRandom faHandPointer faPlus faSave faPlay faSyncAlt faStop faUsers participantsRef breakoutRoomsRef numRooms newParticipantAction currentRoom editRoomModalVisible startBreakoutButtonVisible stopBreakoutButtonVisible modalWidth

Constructors

constructor

Methods

calculateModalWidth

modalContainerStyle

  • modalContainerStyle(): {
        display: string;
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: string;
        zIndex: string;
    }

  • Returns {
        display: string;
        position: string;
        top: string;
        left: string;
        width: string;
        height: string;
        backgroundColor: string;
        zIndex: string;
    }

    • display: string
    • position: string
    • top: string
    • left: string
    • width: string
    • height: string
    • backgroundColor: string
    • zIndex: string

modalContentStyle

  • modalContentStyle(): {
        backgroundColor: string;
        borderRadius: string;
        padding: string;
        width: string;
        maxHeight: string;
        overflowX: string;
        overflowY: string;
        position: string;
        top: string;
        bottom: string;
        left: string;
        right: string;
    }

  • Returns {
        backgroundColor: string;
        borderRadius: string;
        padding: string;
        width: string;
        maxHeight: string;
        overflowX: string;
        overflowY: string;
        position: string;
        top: string;
        bottom: string;
        left: string;
        right: string;
    }

    • backgroundColor: string
    • borderRadius: string
    • padding: string
    • width: string
    • maxHeight: string
    • overflowX: string
    • overflowY: string
    • position: string
    • top: string
    • bottom: string
    • left: string
    • right: string

ngOnChanges

  • ngOnChanges(changes): void

  • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

    Parameters

    • changes: SimpleChanges

      The changed properties.

    Returns void

ngOnInit

  • ngOnInit(): void

  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

    Returns void

initializeBreakoutRooms

handleRandomAssign

handleManualAssign

handleAddRoom

handleSaveRooms

validateRooms

checkCanStartBreakout

handleStartBreakout

handleStopBreakout

handleEditRoom

handleDeleteRoom

handleAddParticipant

handleRemoveParticipant

Properties

isVisible

isVisible: boolean = false

parameters

parameters: BreakoutRoomsModalParameters

position

position: string = 'topRight'

backgroundColor

backgroundColor: string = '#83c0e9'

onBreakoutRoomsClose

onBreakoutRoomsClose: (() => void) = ...

roomsContainerRef

roomsContainerRef: ElementRef<any>

faDoorOpen

faDoorOpen: IconDefinition = faDoorOpen

faTimes

faTimes: IconDefinition = faTimes

faRandom

faRandom: IconDefinition = faRandom

faHandPointer

faHandPointer: IconDefinition = faHandPointer

faPlus

faPlus: IconDefinition = faPlus

faSave

faSave: IconDefinition = faSave

faPlay

faPlay: IconDefinition = faPlay

faSyncAlt

faSyncAlt: IconDefinition = faSyncAlt

faStop

faStop: IconDefinition = faStop

faUsers

faUsers: IconDefinition = faUsers

participantsRef

participantsRef: Participant[] = []

breakoutRoomsRef

breakoutRoomsRef: BreakoutParticipant[][] = []

numRooms

numRooms: string = ''

newParticipantAction

newParticipantAction: string = 'autoAssignNewRoom'

currentRoom

currentRoom: null | BreakoutParticipant[] = null

editRoomModalVisible

editRoomModalVisible: boolean = false

startBreakoutButtonVisible

startBreakoutButtonVisible: boolean = false

stopBreakoutButtonVisible

stopBreakoutButtonVisible: boolean = false

modalWidth

modalWidth: number = 400

Settings

Member Visibility

On This Page

Constructors
Methods
Properties