feat(maimai2): user can create their circle

Author: MikiraSora

src/app/sega/maimai2/maimai2-circle/maimai2-circle.component.html

@@ -2,7 +2,7 @@ <h1 class="page-heading">{{ "Maimai2.CirclePage.Title" | translate }}</h1>
 
 <h3 class="page-heading">已加入的Circle信息</h3>
 <div class="alert alert-info" *ngIf="!userCircleInfo?.joinedCircle">
-  你目前还没有加入任何Circle
+  你目前还没有加入任何Circle, 或者你可以新建Circle
 </div>
 <div *ngIf="userCircleInfo?.joinedCircle">
   <div class="card mb-4">
@@ -289,7 +289,69 @@ <h5 class="page-heading mt-5">申请加入Circle列表</h5>
   </div>
 </div>
 
+<ng-template #content let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">新建Circle</h4>
+    <button
+      type="button"
+      class="btn-close"
+      aria-label="Close"
+      (click)="modal.dismiss('Cross click')"
+    ></button>
+  </div>
+
+  <div class="modal-body">
+    <label for="userInput" class="form-label">Circle名称:</label>
+    <input
+      id="userInput"
+      type="text"
+      class="form-control"
+      [(ngModel)]="createUserCircle.circleName"
+    />
+    <label for="userInput" class="form-label mt-2">Comment:</label>
+    <textarea
+      id="userInput"
+      type="text"
+      rows="5"
+      class="form-control multi-line-ellipsis"
+      [(ngModel)]="createUserCircle.comment"
+    ></textarea>
+    <div class="form-check mt-2">
+      <input
+        class="form-check-input"
+        type="checkbox"
+        [(ngModel)]="createUserCircle.isPublic"
+        id="checkDefault"
+      />
+      <label class="form-check-label" for="checkDefault"> 是否公开 </label>
+    </div>
+  </div>
+
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-secondary"
+      (click)="modal.close('cancel')"
+    >
+      取消
+    </button>
+    <button
+      type="button"
+      class="btn btn-success"
+      (click)="createCircle(); modal.close('ok')"
+    >
+      提交
+    </button>
+  </div>
+</ng-template>
+
 <h3 class="page-heading mt-4">公开的用户Circle列表</h3>
+<button
+  class="btn-sm btn btn-primary mb-4"
+  (click)="openCreateCircleDialog(content)"
+>
+  新建Circle
+</button>
 <div class="mb-4" *ngIf="publicUserCircleListTotalCount > 0">
   <div class="row">
     <div *ngFor="let circle of publicUserCircleList" class="col-md-6 mb-3">

src/app/sega/maimai2/maimai2-circle/maimai2-circle.component.ts

@@ -6,7 +6,7 @@ import { NgxIndexedDBService } from 'ngx-indexed-db';
 import { environment } from '../../../../environments/environment';
 import { catchError, map, tap } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
-import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal, NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
 import { UserService } from 'src/app/user.service';
 import { Maimai2Circle } from '../model/Maimai2Circle';
 import { Page } from 'src/app/model/Page';
@@ -30,6 +30,7 @@ export class Maimai2CircleComponent implements OnInit {
     private api: ApiService,
     private userService: UserService,
     private messageService: MessageService,
+    private modalService: NgbModal,
     protected clipboard: Clipboard
   ) {
   }
@@ -57,6 +58,8 @@ export class Maimai2CircleComponent implements OnInit {
 
   pageSize: number = 10
 
+  createUserCircle: Maimai2Circle;
+
   ngOnInit() {
     this.aimeId = String(this.userService.currentUser.defaultCard.extId);
     this.load();
@@ -297,6 +300,32 @@ export class Maimai2CircleComponent implements OnInit {
     );
   }
 
+  openCreateCircleDialog(content: any) {
+    if (!this.createUserCircle)
+      this.createUserCircle = {} as any;
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' });
+  }
+
+  createCircle() {
+    const param = new HttpParams().set('aimeId', this.aimeId);
+    this.api.post('api/game/maimai2/createCircle', this.createUserCircle, param).pipe().subscribe(
+      (data: ApiResponse<boolean>) => {
+        if (data.data) {
+          this.messageService.toastService.show("新建Circle成功");
+          this.loadUserCircleInfo(); // refresh
+        }
+        else
+          this.messageService.toastService.show("新建Circle失败");
+      }
+      ,
+      (error: string) => {
+        this.messageService.notice(error);
+        console.error(`createCircle() failed, error = ${error}`);
+        return of({ data: [], error: true });
+      }
+    );
+  }
+
   exitCircle() {
     const param = new HttpParams().set('aimeId', this.aimeId);
     this.api.post('api/game/maimai2/exitCircle', param).pipe().subscribe(