109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
|
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
|
import {Category, Tag} from '../../../../class/Tag';
|
|
|
|
@Component({
|
|
selector: 'c-publish-form',
|
|
templateUrl: './publish-form.component.html',
|
|
styleUrls: ['./publish-form.component.less']
|
|
})
|
|
export class PublishFormComponent implements OnInit {
|
|
|
|
constructor(private fb: FormBuilder) {
|
|
}
|
|
|
|
@ViewChild('inputElement', {static: false}) tagInputElement: ElementRef;
|
|
|
|
@Input() tagNacList: { name: string, size: number }[];
|
|
@Input() categoryList: Category[];
|
|
@Input() primaryData: { id: number, type: boolean, tags: string[], category: string, url?: string };
|
|
@Output() submitEvent = new EventEmitter<{ id: number, type: boolean, tags: string[], category: string, url?: string }>();
|
|
|
|
formGroup: FormGroup;
|
|
tagTmpList: string[] = [];
|
|
tagInputVisible: boolean = false;
|
|
tagListTouched: boolean = false;
|
|
|
|
ngOnInit(): void {
|
|
this.formGroup = this.fb.group({
|
|
isUpdate: [true, Validators.required],
|
|
type: [true, Validators.required],
|
|
tagList: [null, Validators.required],
|
|
tags: [null],
|
|
category: [null, Validators.required],
|
|
url: [null]
|
|
});
|
|
if (this.primaryData) {
|
|
this.formGroup.get('type').setValue(this.primaryData.type);
|
|
const tags = this.primaryData.tags;
|
|
this.formGroup.get('tagList').setValue(tags);
|
|
this.tagTmpList = tags;
|
|
this.formGroup.get('category').setValue(this.primaryData.category);
|
|
this.formGroup.get('url').setValue(this.primaryData.url);
|
|
}
|
|
}
|
|
|
|
publishArticle() {
|
|
const formData = {
|
|
id: this.formGroup.value.isUpdate ? this.primaryData.id : null,
|
|
type: this.formGroup.value.type,
|
|
tags: this.formGroup.value.tagList,
|
|
category: this.formGroup.value.category,
|
|
url: this.formGroup.value.type ? null : this.formGroup.value.url
|
|
};
|
|
this.submitEvent.emit(formData);
|
|
}
|
|
|
|
// 点击New Tag 显示输入框
|
|
showTagInput() {
|
|
this.tagInputVisible = true;
|
|
setTimeout(() => {
|
|
this.tagInputElement.nativeElement.focus();
|
|
}, 10);
|
|
}
|
|
|
|
// 点击标签右侧的x
|
|
handleClose(t: string) {
|
|
this.tagTmpList = this.tagTmpList.filter(tag => tag !== t);
|
|
this.formGroup.get('tagList').setValue(this.tagTmpList);
|
|
}
|
|
|
|
// 输入框输入完成
|
|
handleTagInputConfirm() {
|
|
this.tagListTouched = true;
|
|
const tmpTag = this.formGroup.get('tags').value;
|
|
if (tmpTag && this.tagTmpList.indexOf(tmpTag) === -1) {
|
|
this.tagTmpList = [...this.tagTmpList, tmpTag];
|
|
}
|
|
this.formGroup.get('tags').setValue('');
|
|
this.formGroup.get('tagList').setValue(this.tagTmpList.length ? this.tagTmpList : null);
|
|
this.formGroup.get('tagList').updateValueAndValidity();
|
|
this.tagInputVisible = false;
|
|
}
|
|
|
|
// 点击tag切换
|
|
tagChange($event: boolean, name: string) {
|
|
this.tagListTouched = true;
|
|
if (this.tagTmpList.indexOf(name) > -1) {
|
|
this.tagTmpList = this.tagTmpList.filter(v => v !== name);
|
|
} else {
|
|
this.tagTmpList.push(name);
|
|
}
|
|
this.formGroup.get('tagList').setValue(this.tagTmpList.length ? this.tagTmpList : null);
|
|
this.formGroup.get('tagList').updateValueAndValidity();
|
|
}
|
|
|
|
// 清除url内容
|
|
clearInput() {
|
|
this.formGroup.get('url').setValue('');
|
|
}
|
|
|
|
// 点选了文章类型
|
|
articleTypeChanged() {
|
|
this.formGroup.get(`url`).clearValidators();
|
|
const type = this.formGroup.get(`type`).value;
|
|
this.formGroup.get(`url`).setValidators(type ? null : [Validators.required, Validators.pattern('^(https:\/\/|http:\/\/|)([\\w-]+\\.)+[\\w-]+(\\/[\\w-./?%&=]*)?$')]);
|
|
this.formGroup.get(`url`).updateValueAndValidity();
|
|
}
|
|
}
|