From b8208937cefdb5e8c0c7c8a1d4d7793fe221a2ff Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Mon, 23 Dec 2019 16:15:52 +0800 Subject: [PATCH 1/2] feat: support note scope dynamaic forms --- .../interfaces/message-notebook.interface.ts | 1 + .../interfaces/message-paragraph.interface.ts | 1 + .../note-form-block.component.html | 14 +++++ .../note-form-block.component.less | 16 +++++ .../note-form-block.component.ts | 32 ++++++++++ .../notebook/notebook.component.html | 8 +++ .../workspace/notebook/notebook.component.ts | 42 ++++++++++++- .../workspace/notebook/notebook.module.ts | 4 +- .../elastic-input.component.html | 2 +- .../elastic-input/elastic-input.component.ts | 3 +- .../dynamic-forms.component.html | 62 +++++++++++-------- .../dynamic-forms.component.less | 24 ++++++- .../dynamic-forms/dynamic-forms.component.ts | 6 ++ 13 files changed, 185 insertions(+), 30 deletions(-) create mode 100644 zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html create mode 100644 zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.less create mode 100644 zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.ts diff --git a/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-notebook.interface.ts b/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-notebook.interface.ts index f7b22de6daf..649a312561a 100644 --- a/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-notebook.interface.ts +++ b/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-notebook.interface.ts @@ -197,6 +197,7 @@ export interface NotesInfoItem extends ID { export interface NoteConfig { cron?: string; releaseresource: boolean; + noteFormTitle?: string; cronExecutingRoles?: string; cronExecutingUser?: string; isZeppelinNotebookCronEnable: boolean; diff --git a/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-paragraph.interface.ts b/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-paragraph.interface.ts index bcc01995892..2e04b225adb 100644 --- a/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-paragraph.interface.ts +++ b/zeppelin-web-angular/projects/zeppelin-sdk/src/interfaces/message-paragraph.interface.ts @@ -23,6 +23,7 @@ export interface DynamicFormsItem { defaultValue: string | string[]; hidden: boolean; name: string; + displayName?: string; type: DynamicFormsType; argument?: string; options?: Array<{ value: string; displayName?: string }>; diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html new file mode 100644 index 00000000000..4dc39c836f4 --- /dev/null +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html @@ -0,0 +1,14 @@ +
+ + + +
diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.less b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.less new file mode 100644 index 00000000000..f71118f9c60 --- /dev/null +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.less @@ -0,0 +1,16 @@ +@import "theme-mixin"; + +:host { + display: block; + padding: 0 4px; +} + +.themeMixin({ + .forms-wrap { + background: @component-background; + border: 1px solid @border-color-split; + box-shadow: @card-shadow; + padding: 12px; + position: relative; + } +}); diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.ts new file mode 100644 index 00000000000..807a57525bd --- /dev/null +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.ts @@ -0,0 +1,32 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { DynamicForms, DynamicFormParams } from '@zeppelin/sdk'; + +@Component({ + selector: 'zeppelin-note-form-block', + templateUrl: './note-form-block.component.html', + styleUrls: ['./note-form-block.component.less'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class NoteFormBlockComponent implements OnInit { + @Input() noteTitle: string; + @Input() formDefs: DynamicForms; + @Input() paramDefs: DynamicFormParams; + @Output() readonly noteTitleChange = new EventEmitter(); + @Output() readonly noteFormChange = new EventEmitter(); + @Output() readonly noteFormNameRemove = new EventEmitter(); + constructor() {} + + ngOnInit() {} + + onFormRemove({ name }) { + this.noteFormNameRemove.emit(name); + } + + onFormChange() { + this.noteFormChange.emit(this.paramDefs); + } + + setTitle(title: string) { + this.noteTitleChange.emit(title); + } +} diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html index c447a59c39d..d9574db30cd 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.component.html @@ -34,6 +34,14 @@
+ +
p.setEditorHide(editorHide)); } + onNoteFormChange(noteParams: DynamicFormParams) { + this.messageService.saveNoteForms({ + noteParams, + id: this.note.id + }); + } + + onFormNameRemove(formName: string) { + this.messageService.removeNoteForms(this.note, formName); + } + + onNoteTitleChange(noteFormTitle: string) { + this.messageService.updateNote(this.note.id, this.note.name, { + ...this.note.config, + noteFormTitle + }); + } + + setNoteFormsStatus() { + this.isShowNoteForms = this.note && this.note.noteForms && Object.keys(this.note.noteForms).length !== 0; + this.cdr.markForCheck(); + } + constructor( private activatedRoute: ActivatedRoute, public messageService: MessageService, diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts index 4b71d3d8ac8..49a6230e22c 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/notebook.module.ts @@ -48,6 +48,7 @@ import { NotebookRevisionsComparatorComponent } from './revisions-comparator/rev import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { WorkspaceShareModule } from '../../workspace/share/share.module'; import { NotebookActionBarComponent } from './action-bar/action-bar.component'; +import { NoteFormBlockComponent } from './note-form-block/note-form-block.component'; import { NotebookRoutingModule } from './notebook-routing.module'; import { NotebookComponent } from './notebook.component'; import { NotebookShareModule } from './share/share.module'; @@ -64,7 +65,8 @@ import { NotebookShareModule } from './share/share.module'; NotebookParagraphCodeEditorComponent, NotebookParagraphProgressComponent, NotebookParagraphFooterComponent, - NotebookParagraphControlComponent + NotebookParagraphControlComponent, + NoteFormBlockComponent ], imports: [ CommonModule, diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html index c605d28771b..aa7b5e777b5 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.html @@ -19,5 +19,5 @@ (keydown.esc)="cancelEdit()" (keydown.enter)="setEditorState(false)" (input)="updateInputWidth()"> -

{{value || 'Untitled'}}

+

{{value || defaultTitle}}

diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.ts b/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.ts index ef4dce4e988..2057a875cf1 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.ts +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/share/elastic-input/elastic-input.component.ts @@ -33,6 +33,7 @@ export class ElasticInputComponent implements OnChanges { @Input() value: string; @Input() readonly = false; @Input() min = false; + @Input() defaultTitle = 'Untitled'; @Output() readonly valueUpdate = new EventEmitter(); @ViewChild('inputElement', { read: ElementRef, static: false }) inputElement: ElementRef; @ViewChild('pElement', { read: ElementRef, static: false }) pElement: ElementRef; @@ -47,7 +48,7 @@ export class ElasticInputComponent implements OnChanges { updateValue(value: string) { const trimmedNewName = value.trim(); - if (trimmedNewName.length > 0 && this.value !== trimmedNewName) { + if (typeof value === 'string') { this.editValue = trimmedNewName; } } diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html index 3a4cfdd5ff0..330b3e82220 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html +++ b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.html @@ -20,32 +20,44 @@ nzLg="8" nzMd="12" nzSm="24"> - - - - + +
+ + - - - - - - + + + + + + + + + +
+
diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.less b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.less index 060b2f8485d..a9a4b889420 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.less +++ b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.less @@ -10,15 +10,37 @@ * limitations under the License. */ +@import "theme-mixin"; + :host { display: block; +} + +.themeMixin({ + .control-wrap { + display: flex; + } .form-item { margin-bottom: 24px; + .item-label { + font-weight: 700; + } nz-select { width: 100%; } ::ng-deep .ant-checkbox-wrapper { margin-left: 0; + line-height: 32px; + } + &:hover { + .remove-button { + color: @text-color-danger; + } + } + .remove-button { + margin: 0 4px; + transition: color ease-in-out .3s; + color: @text-color-secondary; } } -} +}); diff --git a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.ts b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.ts index 338a43416f7..b6eb9f9bb73 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.ts +++ b/zeppelin-web-angular/src/app/pages/workspace/share/dynamic-forms/dynamic-forms.component.ts @@ -42,7 +42,9 @@ export class NotebookParagraphDynamicFormsComponent implements OnInit, OnChanges @Input() paramDefs: DynamicFormParams; @Input() runOnChange = false; @Input() disable = false; + @Input() removable = false; @Output() readonly formChange = new EventEmitter(); + @Output() readonly formRemove = new EventEmitter(); formChange$ = new Subject(); forms: DynamicFormsItem[] = []; @@ -97,6 +99,10 @@ export class NotebookParagraphDynamicFormsComponent implements OnInit, OnChanges } } + remove(item: DynamicFormsItem) { + this.formRemove.emit(item); + } + constructor() {} ngOnInit() { From 342aecfd8d4a055b5be32e80ce2612afe22b8679 Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Tue, 24 Dec 2019 10:06:54 +0800 Subject: [PATCH 2/2] chore: add component modules in share --- .../note-form-block/note-form-block.component.html | 11 +++++++++++ .../note-form-block/note-form-block.component.less | 11 +++++++++++ .../note-form-block/note-form-block.component.ts | 11 +++++++++++ .../src/app/pages/workspace/share/share.module.ts | 8 ++++---- 4 files changed, 37 insertions(+), 4 deletions(-) diff --git a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html index 4dc39c836f4..2ca58518f71 100644 --- a/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html +++ b/zeppelin-web-angular/src/app/pages/workspace/notebook/note-form-block/note-form-block.component.html @@ -1,3 +1,14 @@ +