Как создать новый блок с группой людей, если в группе больше трёх человек(angular)

Vahan_Muradyan · 20.Апрель.2020 14:50:05

Есть таблица со списком людей,у каждого рядом есть кнопка, при нажатии на которого человек добавляется в группу а кнопка исчезает(код ниже). После идёт задача с которой не могу справиться։ Если в группе больше трёх человек, нужно для последующих людей создать новую группу и т.д.

то что у меня получилось:

пример результата:

вот код в скринах:

вот собственно и сам код:

//data.service.ts
import { Injectable } from '@angular/core';
import {Student} from '../lib/students'
@Injectable({
  providedIn: 'root'
})
export class DataService {
  group:object[]=[]

  student:object[]=[
    new Student('name1','surname1',false),
    new Student('name2','surname2',false),
    new Student('name3','surname3',false),
    new Student('name4','surname4',false),
    new Student('name5','surname5',false)
  ]                                              
                                                   
  moveToGroup(obj){
    obj.ingroup=true                                             
    this.group.push(obj)                                        
   }                                                     
  constructor() {}
} 

//group.components.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/service/data.service';

@Component({
  selector: 'app-group',
  templateUrl: './group.component.html',
  styleUrls: ['./group.component.css']
})
export class GroupComponent implements OnInit {

  constructor(public element:DataService) { }

  ngOnInit(): void {
  }

}

//student.components.ts
import { Component, OnInit } from '@angular/core';
import{ DataService} from '../../service/data.service'
@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
  constructor(public element:DataService) { }

  ngOnInit(): void {
  }

}

//student.ts
export class Student{
    name:string
    surname:string
    ingroup:boolean
    constructor(name,surname,ingroup){
        this.name=name;
        this.surname=surname;
        this.ingroup=ingroup

    }
}

/*<!--group.component.css*/
.groups{
    background: yellowgreen;
    width: 200px;
    height: 300px;
    padding: 80px 2px ;
    list-style: none;
}

<!--index.html -->
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tsdas</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html>

<!--app.component.html -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <app-group></app-group>
    </div>
    <div class="col-md-6">
      <app-student></app-student>
    </div>
  </div>
</div>

<!--student.component.html -->
<table class="table table-dark">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>actions</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of element.student">
      <td>{{item.name}}</td>
      <td>{{item.surname}}</td>
      <td><button class="btn btn-success" (click)="element.moveToGroup(item)" *ngIf="!item.ingroup">Add to group</button></td>
    </tr>
  </tbody>
</table>

<!--group.component.html -->
<div class="groups">
  <p *ngFor="let grs of element.group">{{grs.name}} {{grs.surname}}</p>
</div>

kprudnikov · 20.Апрель.2020 15:31:50

Мне кажется, что сюда просится разделение логики группы, как хранилища студентов, и отдельной сущности, которая будет раскидывать студентов по группам и создавать группы:

export class Group {
	constructor(maxStudents = 3) {
		this.maxStudents = maxStudents;
		this.students = []
	}

	add(student) {
		if(this.isFull()) {
			return false;
		}

		this.students.push(student);
		return true;
	}

	remove(student) {
		// TODO
	}

	isFull() {
		return this.students.length >= this.maxStudents;
	}
}

export class GroupAdder {
	constructor(groups = [], GroupConstructor = Group) {
		this.groups = groups;
		this.GroupConstructor = GroupConstructor;
		this.currentGroup = null;
	}

	add(student) {
		if(!this.currentGroup || this.currentGroup.isFull()) {
			this.currentGroup = new this.GroupConstructor();
		}

		this.currentGroup.add(student);
		this.groups.push(this.currentGroup);
	}
}