ucap-doc/documents/업무/5월/2째주/0514.txt

<ng-template ucapGroupExpansionBuddyHeader let-node>
      <span
        class="header-buddy"
        *ngIf="
          !curGroup || (!!curGroup && curGroup.seq !== node.groupDetail.seq)
        "
      >
        <span>{{ node.groupDetail.name }}</span>
        <span>
          {{ node.children?.length }}
        </span>
      </span>
      <span
        class="header-buddy"
        *ngIf="!!curGroup && curGroup.seq === node.groupDetail.seq"
        (click)="$event.stopPropagation()"
      >
        <mat-form-field>
          <input
            matInput
            #groupInput
            placeholder=""
            [value]="node.groupDetail.name"
          />
          <button
            mat-button
            matSuffix
            mat-icon-button
            aria-label="Clear"
            (click)="groupInput.value = ''"
          >
            <mat-icon>close</mat-icon>
          </button>
          <button
            mat-button
            mat-icon-button
            aria-label="Done"
            (click)="onModifyGroupName(groupInput.value, node.groupDetail)"
          >
            <mat-icon>done</mat-icon>
          </button>
        </mat-form-field>
      </span>
    </ng-template>


    <button mat-button (click)="onCancel()">취소</button>
      <button mat-button (click)="onConfirm()">
        완료
      </button>
      <button mat-button (click)="onCompleteConfirm()">
        그룹지정후 완료
      </button>

  <form name="inputForm" [formGroup]="inputForm" novalidate>
    <mat-form-field
      hintLabel="금지단어[-,_]"
      style="display: block; margin-bottom: 10px;"
    >
      <input
        matInput
        #input
        maxlength="20"
        placeholder="{{ inputPlacholder }}"
        formControlName="groupName"
        (keyup)="onKeyupGroupName()"
      />
      <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
      <!-- <mat-error *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"> -->
      <!-- {{
          'group.errors.bannedWords'
            | translate: { bannedWords: appService.bannedGroupNames.join(',') }
        }} -->
      <!-- 금지단어[-,_] -->
      <!-- </mat-error> -->
      <!-- <mat-error *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"> -->
      <!-- {{ 'group.errors.sameNameExist' | translate }} -->
      <!-- 이미 존재하는 그룹명입니다. -->
      <!-- </mat-error> -->
    </mat-form-field>
    
  </form>


@Component({
  selector: 'app-group-input',
  templateUrl: './group-input.component.html',
  styleUrls: ['./group-input.component.scss'],

  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GroupInputComponent implements OnInit, OnDestroy {
  private ngOnDestroySubject = new Subject<boolean>();

  @Input()
  set groupName(g: string) {
    this._groupName = g;
  }
  get groupName(): string {
    return this._groupName;
  }
  _groupName: string;

  @Input()
  inputPlacholder: string;

  @Input()
  dialogType: SelectUserDialogType;

  @Input()
  componentSeq: number;

  @Input()
  groupList?: GroupDetailData[];

  @Output()
  cancel = new EventEmitter();

  @Output()
  confirm = new EventEmitter();

  @Output()
  completeConfirm = new EventEmitter();

  constructor(
    private formBuilder: FormBuilder,
    private i18nService: I18nService
  ) {}

  inputForm: FormGroup;

  ngOnInit(): void {
    this.inputForm = this.formBuilder.group({
      groupName: [
        this.groupName,
        [
          Validators.required
          // StringUtil.includes(, CharactorType.Special),
          // this.checkBanWords(),
          // this.checkSameName()
        ]
      ]
    });
  }

  ngOnDestroy(): void {
    if (!!this.ngOnDestroySubject) {
      this.ngOnDestroySubject.complete();
    }
  }

  getGroupName(): string {
    return this.inputForm.get('groupName').value;
  }

  onKeyupGroupName() {
    this.inputForm.get('groupName').markAsTouched();
  }

  checkSameName(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      if (
        !control ||
        !control.value ||
        !this.groupList ||
        0 === this.groupList.length
      ) {
        return null;
      }
      const v = (control.value as string).trim();
      const ban = -1 < this.groupList.findIndex((g) => g.name === v);
      return ban ? { groupNameSamed: { value: control.value } } : null;
    };
  }

  onCancel() {
    this.cancel.emit();
  }

  onConfirm() {
    this.confirm.emit();
  }

  onCompleteConfirm() {
    this.completeConfirm.emit();
  }
}