create-group.component.ts

import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem,
  CdkDrag,
  CdkDropList,
} from '@angular/cdk/drag-drop';
import { User } from '../../interfaces';
import { MiniUserComponent } from '../mini-user/mini-user.component';
import { MatButtonModule } from '@angular/material/button';
import { MatIcon } from '@angular/material/icon';
import { MatSnackBar } from '@angular/material/snack-bar';
import { GroupService } from '../../services/group.service';


@Component({
  selector: 'app-create-group',
  imports: [
    MiniUserComponent,

    // Angular material
    CdkDropList,
    CdkDrag,
    MatButtonModule,
    MatIcon
  ],
  templateUrl: './create-group.component.html',
  styleUrl: './create-group.component.less'
})
export class CreateGroupComponent {

  // Snackbar
  private snackbar = inject(MatSnackBar);

  // The assignment id to which the group belongs
  @Input() assignmentId?: string = "";

  // The members of the class that need to be devided into groups
  @Input() members: User[] = [];

  // We will let subscribers know when the groups are succesfully created.
  @Output() groupsCreated: EventEmitter<void> = new EventEmitter<void>();

  // The groups
  private _groups: User[][] = [];

  // Injected services
  public constructor(
    private groupService: GroupService
  ) { }

  public get groups() {
    return this._groups;
  }

  /**
   * Creates a new empty group.
   * Appends an empty list to the end of the groups list.
   */
  public newGroupList() {
    this._groups.push([]);
  }

  /**
   * Delete a group with the given index form the group list.
   * All users in the groups are placed back in the members list.
   * 
   * @param index The index of the group to be deleted
   */
  public deleteGroupList(index: number) {
    const group = this._groups[index];
    this._groups.splice(index, 1);
    this.members.push(...group);
  }

  /**
   * Handle a drag and drop event between the members list and the group lists.
   * If the user drops a user onto the create list it creates a new group.
   * 
   * @param event Drag and drop event generated by Angular CDK
   */
  public drop(event: CdkDragDrop<User[]>) {
    const from: CdkDropList<User[]> = event.previousContainer;
    const to: CdkDropList<User[]> = event.container;

    if (to.id === "new-group") {
      // Make a new group by dragging and dropping
      const memberIndex: number = event.previousIndex;
      const newGroup: User[] = [from.data[memberIndex]];

      // Delete from old list
      from.data.splice(memberIndex, 1);

      this._groups.push(newGroup);
    }
    else if (from === to) {
      moveItemInArray(to.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(
        from.data,
        to.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

  /**
   * Make a call to the API to create the made groups.
   */
  public createGroups(): void {
    const nonEmptyGroups = this.groups.filter(group => group.length > 0);

    console.log(nonEmptyGroups)

    this.groupService.createGroups(nonEmptyGroups, this.assignmentId!)
      .subscribe((response) => {
        if (response) {
          this.openSnackBar($localize`Groups created successfully.`);
          this.groupsCreated.emit();
        } else {
          this.openSnackBar($localize`Failed to create groups.`);
        }
      });
  }

  /**
   * Used by Angular to create the drag and drop lists.
   * @returns The list of connected drop lists
   */
  public get connectedDropLists(): string[] {
    return ['members-list', 'new-group', ...this.groups.map((_, i) => `group-list-${i}`)];
  }

  /**
   * Used in the html for making the "create" droplist which is always empty.
   */
  public get emptyGroup(): User[] {
    return [];
  }

  public partitionMembers(): void {
    this.members.forEach((member) => {
      this._groups.push([member]);
    });
    this.members = [];
  }

  private openSnackBar(message: string, action: string = "Ok") {
    this.snackbar.open(message, action, {
      duration: 2500
    });
  }

}