From 8d2b1f07f34796682fd93e50e7164fbd35cc54de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E9=B9=B0?= <17kungfuboy@gmail.com> Date: Thu, 13 Oct 2022 14:54:18 +0800 Subject: [PATCH] style: update UI --- src/workbench/browser/elements/canvas.ts | 1 + src/workbench/browser/elements/form/index.ts | 7 + src/workbench/browser/elements/input.ts | 6 + .../browser/elements/modal.service.ts | 100 ++++ src/workbench/browser/elements/modal.ts | 16 +- .../browser/elements/service/modalS.ts | 48 +- .../src/app/pages/account.component.ts | 8 +- .../browser/src/app/pages/member.component.ts | 30 +- .../browser/src/app/pages/member.module.ts | 2 +- .../src/app/pages/user-modal.component.ts | 448 ++++++++---------- .../src/app/pages/workspace.component.ts | 10 +- .../browser/src/app/pages/workspace.module.ts | 2 +- src/workbench/browser/views/user-modal.ts | 27 +- 13 files changed, 418 insertions(+), 287 deletions(-) create mode 100644 src/workbench/browser/elements/modal.service.ts diff --git a/src/workbench/browser/elements/canvas.ts b/src/workbench/browser/elements/canvas.ts index 34e9ff50..b3700645 100644 --- a/src/workbench/browser/elements/canvas.ts +++ b/src/workbench/browser/elements/canvas.ts @@ -15,6 +15,7 @@ export class Canvas extends Render { init: [...this.children.init], data: [...this.children.data], methods: [...this.children.methods], + resetFn: [...this.children.resetFn], }; } } diff --git a/src/workbench/browser/elements/form/index.ts b/src/workbench/browser/elements/form/index.ts index bd695d2b..fad46936 100644 --- a/src/workbench/browser/elements/form/index.ts +++ b/src/workbench/browser/elements/form/index.ts @@ -179,6 +179,13 @@ export class Form extends Render implements formType { const footer = footerRender(this.footer || []); const footerTemplate = footer?.length ? `${footer.map((it) => it.template).join('\n')}` : ''; return { + elementType: 'form', + resetFn: [ + ` + \/\/ * auto clear form + this.validate${this.id}Form.reset()`, + ...this.children.resetFn, + ], imports: [ { target: [ diff --git a/src/workbench/browser/elements/input.ts b/src/workbench/browser/elements/input.ts index 59e563e8..fb3d84ec 100644 --- a/src/workbench/browser/elements/input.ts +++ b/src/workbench/browser/elements/input.ts @@ -25,6 +25,12 @@ export class Input extends Render { render() { return { type: 'element', + resetFn: [ + ` + \/\/ * auto clear form + this.input${this.id}Value = ''`, + ...this.children.resetFn, + ], imports: [ { target: [{ name: 'NzInputModule', type: 'module' }], diff --git a/src/workbench/browser/elements/modal.service.ts b/src/workbench/browser/elements/modal.service.ts new file mode 100644 index 00000000..180c8962 --- /dev/null +++ b/src/workbench/browser/elements/modal.service.ts @@ -0,0 +1,100 @@ +import * as _ from 'lodash'; +import { Render } from 'ecode/dist/render'; +import { Button } from './button'; + +type modalType = { + footer?: { label: string; event: any; status: any; theme?: string[] }[] | null; + close: () => string; + // static close: () => string +}; + +const eventHash = new Map().set('open', 'nzAfterOpen').set('close', 'nzAfterClose'); + +const eventTranlate = (event) => + Object.entries(event).reduce((total, [e, cb]) => { + total[eventHash.get(e)] = cb; + return total; + }, {}); + +export class Modal extends Render implements modalType { + footer; + id = ''; + title; + width; + init; + constructor({ id = '', event = {}, width = null, title, children, footer = null }) { + super({ children, event: eventTranlate(event) }); + this.id = Render.toCamel(id); + this.title = title; + this.footer = footer; + this.width = width; + this.init = []; + } + + wakeUp() { + return ` + // * 唤起弹窗 + const ${this.id}ModalRef = this.modal.create({ + nzTitle: '${this.title}', + nzWidth: ${this.width}, + nzCloseable: true, + nzContent: this.modal${this.id}Tpl, + }) + `; + } + close() { + return ` + // * 关闭弹窗 + ${this.id}ModalRef.close() + `; + } + render() { + return { + template: `${this.children.template}`, + data: [...this.children.data], + init: [...this.children.init], + imports: [ + { + target: [ + { + name: 'NzModalService', + type: 'service', + inject: { name: 'modal' }, + }, + { name: 'NzModalModule', type: 'module' }, + ], + from: 'ng-zorro-antd/modal', + }, + { + target: [ + { + name: 'ViewChild', + type: 'base', + }, + ], + from: '@angular/core', + }, + { name: 'NzModalModule', type: 'module' }, + ...this.children.imports, + ], + methods: [...this.methods, ...this.children.methods], + }; + } + static wakeUp(id) { + return ` + // * 唤起弹窗 + const ${this.id}ModalRef = this.modal.create({ + nzTitle: '${this.title}', + nzWidth: ${this.width}, + nzCloseable: true, + nzContent: this.modal${this.id}Tpl, + }) + `; + } + static close(id) { + return ` + // * 关闭弹窗 + this.is${Render.toCamel(id)}ModalVisible = false + `; + } +} diff --git a/src/workbench/browser/elements/modal.ts b/src/workbench/browser/elements/modal.ts index 1ae7c97e..e1e0fc55 100644 --- a/src/workbench/browser/elements/modal.ts +++ b/src/workbench/browser/elements/modal.ts @@ -10,9 +10,10 @@ type modalType = { const eventHash = new Map().set('open', 'nzAfterOpen').set('close', 'nzAfterClose'); -const eventTranlate = (event) => - Object.entries(event).reduce((total, [e, cb]) => { - total[eventHash.get(e)] = cb; +const eventTranlate = (list) => + list.reduce((total, [e, cb]) => { + const key = eventHash.get(e); + total[key] = total[key] ? total[key].concat(cb) : [cb]; return total; }, {}); @@ -22,7 +23,14 @@ export class Modal extends Render implements modalType { title; width; constructor({ id = '', event = {}, width = null, title, children, footer = null }) { - super({ children, event: eventTranlate(event) }); + const close = children + .flat(Infinity) + .map((it) => it.render()) + .filter((it) => it.resetFn) + .map((it) => it.resetFn) + .flat(Infinity) + .filter((it) => it); + super({ children, event: eventTranlate([...Object.entries({ close }), ...Object.entries(event)]) }); this.id = Render.toCamel(id); this.title = title; this.footer = footer; diff --git a/src/workbench/browser/elements/service/modalS.ts b/src/workbench/browser/elements/service/modalS.ts index e6b94d3d..3af96524 100644 --- a/src/workbench/browser/elements/service/modalS.ts +++ b/src/workbench/browser/elements/service/modalS.ts @@ -1,8 +1,42 @@ -import { Render } from 'ecode/dist/render'; +import { Render, Component } from 'ecode/dist/render'; export class ModalS extends Render { + components; + template; constructor() { super({ children: [] }); + this.components = []; + this.template = ''; + } + wakeUp({ id, title, children, event = { open: null, close: null } }) { + this.template = ''; + } + component({ id, title, children, event = { open: null, close: null } }) { + const comp = new Component({ + id, + children, + imports: [...children.map((it) => it.render().imports)], + init: [], + }); + this.components.push(comp.render()); + const { open, close } = event; + return ` + const ${Render.toCamel(id)}Modal = this.modal.create({ + nzTitle: '${title}', + nzContent: ${Render.toCamel(id)}Component, + nzViewContainerRef: this.viewContainerRef, + nzComponentParams: {}, + nzOnOk: () => {}, + nzFooter: [] + }); + ${open ? `${Render.toCamel(id)}Modal.afterOpen.subscribe(() => { ${Render.callbackRender(open)} })` : ''} + ${close ? `${Render.toCamel(id)}Modal.afterClose.subscribe(result => { ${Render.callbackRender(close)} })` : ''} + `; + } + close(id) { + return ` + // * close the modal and clear data cache + ${Render.toCamel(id)}Modal.close()`; } danger({ title, content, okText = 'Delete' }) { return ` @@ -45,6 +79,7 @@ export class ModalS extends Render { imports: [ { target: [ + { name: 'NzModalRef', type: 'base' }, { name: 'NzModalService', type: 'service', @@ -54,10 +89,21 @@ export class ModalS extends Render { ], from: 'ng-zorro-antd/modal', }, + // { + // target: [ + // { + // name: 'ViewContainerRef', + // type: 'service', + // inject: { name: 'viewContainerRef' }, + // }, + // ], + // from: '@angular/core', + // }, ], template: ``, data: [], methods: [], + components: [...this.components], }; } } diff --git a/src/workbench/browser/src/app/pages/account.component.ts b/src/workbench/browser/src/app/pages/account.component.ts index 3e719871..1f3166a2 100644 --- a/src/workbench/browser/src/app/pages/account.component.ts +++ b/src/workbench/browser/src/app/pages/account.component.ts @@ -40,7 +40,7 @@ import { Component, OnInit } from '@angular/core' type="submit" class="w-[84px]" nzType="primary" - (click)="btngykhneCallback()" + (click)="btn5txtxwCallback()" i18n > Save @@ -123,7 +123,7 @@ import { Component, OnInit } from '@angular/core' type="submit" class="w-[84px]" nzType="primary" - (click)="btn12cjg5Callback()" + (click)="btnl3ugn7Callback()" i18n > Reset @@ -171,7 +171,7 @@ export class AccountComponent implements OnInit { username: this.user.userProfile?.username }) } - async btngykhneCallback() { + async btn5txtxwCallback() { // * click event callback const { username: user } = this.validateUsernameForm.value const [data, err]: any = await this.api.api_userUpdateUserProfile({ @@ -214,7 +214,7 @@ export class AccountComponent implements OnInit { } return {} } - async btn12cjg5Callback() { + async btnl3ugn7Callback() { // * click event callback const { oldPassword: oldPassword } = this.validatePasswordForm.value const { newPassword: newPassword } = this.validatePasswordForm.value diff --git a/src/workbench/browser/src/app/pages/member.component.ts b/src/workbench/browser/src/app/pages/member.component.ts index d794c590..fa5a89e3 100644 --- a/src/workbench/browser/src/app/pages/member.component.ts +++ b/src/workbench/browser/src/app/pages/member.component.ts @@ -1,4 +1,4 @@ -import { NzModalService } from 'ng-zorro-antd/modal' +import { NzModalService, NzModalRef } from 'ng-zorro-antd/modal' import { UserService } from 'eo/workbench/browser/src/app/shared/services/user/user.service' import { MessageService } from 'eo/workbench/browser/src/app/shared/services/message/message.service' import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/storage/remote.service' @@ -15,7 +15,7 @@ import { Component, OnInit } from '@angular/core' [nzFooter]="null" [(nzVisible)]="isInvateModalVisible" (nzOnCancel)="handleInvateModalCancel()" - (nzAfterClose)="eritvfsCallback()" + (nzAfterClose)="ejpi10eCallback()" nzTitle="Add people to the workspace" i18n-nzTitle > @@ -32,8 +32,8 @@ import { Component, OnInit } from '@angular/core' class="" nzType="primary" nzBlock - (click)="btnrzdn15Callback()" - [disabled]="btn193ksdStatus()" + (click)="btn7ty1q2Callback()" + [disabled]="btnvj7r3wStatus()" i18n > Select a member above @@ -47,8 +47,8 @@ import { Component, OnInit } from '@angular/core' nz-button class="" nzType="primary" - (click)="btnkjotm1Callback()" - [disabled]="btnuk14mmStatus()" + (click)="btnmlnjqqCallback()" + [disabled]="btnem7sukStatus()" i18n > Add people @@ -57,7 +57,7 @@ import { Component, OnInit } from '@angular/core'
` @@ -115,11 +115,15 @@ export class MemberComponent implements OnInit { // * 关闭弹窗 this.isInvateModalVisible = false } - async eritvfsCallback() { + async ejpi10eCallback() { // * nzAfterClose event callback + { + // * auto clear form + this.inputPersonValue = '' + } this.inputPersonValue = '' } - async btnrzdn15Callback() { + async btn7ty1q2Callback() { // * click event callback const username = this.inputPersonValue const [uData, uErr]: any = await this.api.api_userSearch({ username }) @@ -181,17 +185,17 @@ export class MemberComponent implements OnInit { const Member = wData.filter((it) => it.roleName !== 'Owner') this.memberList = Owner.concat(Member) } - btn193ksdStatus() { + btnvj7r3wStatus() { // * disabled status status return this.inputPersonValue === '' } - async btnkjotm1Callback() { + async btnmlnjqqCallback() { // * click event callback // * 唤起弹窗 this.isInvateModalVisible = true } - btnuk14mmStatus() { + btnem7sukStatus() { // * disabled status status return return ( @@ -199,7 +203,7 @@ export class MemberComponent implements OnInit { this.workspace.authEnum.canEdit ) } - async e006qnoCallback($event) { + async evqg0xcCallback($event) { // * eoOnRemove event callback const confirm = () => diff --git a/src/workbench/browser/src/app/pages/member.module.ts b/src/workbench/browser/src/app/pages/member.module.ts index 3095737d..ce5579d3 100644 --- a/src/workbench/browser/src/app/pages/member.module.ts +++ b/src/workbench/browser/src/app/pages/member.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' -import { NzModalService, NzModalModule } from 'ng-zorro-antd/modal' +import { NzModalService, NzModalModule, NzModalRef } from 'ng-zorro-antd/modal' import { NzInputModule } from 'ng-zorro-antd/input' import { FormsModule } from '@angular/forms' import { NzButtonModule } from 'ng-zorro-antd/button' diff --git a/src/workbench/browser/src/app/pages/user-modal.component.ts b/src/workbench/browser/src/app/pages/user-modal.component.ts index 6b7b2357..934c4b63 100644 --- a/src/workbench/browser/src/app/pages/user-modal.component.ts +++ b/src/workbench/browser/src/app/pages/user-modal.component.ts @@ -1,20 +1,15 @@ -import { UserService } from 'eo/workbench/browser/src/app/shared/services/user/user.service' -import { MessageService } from 'eo/workbench/browser/src/app/shared/services/message/message.service' -import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/storage/remote.service' -import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service' -import { ProjectService } from 'eo/workbench/browser/src/app/shared/services/project/project.service' -import { DataSourceService } from 'eo/workbench/browser/src/app/shared/services/data-source/data-source.service' -import { distinct } from 'rxjs/operators' -import { interval } from 'rxjs' -import { NzModalService } from 'ng-zorro-antd/modal' -import { - UntypedFormBuilder, - UntypedFormControl, - UntypedFormGroup, - Validators -} from '@angular/forms' -import { WorkspaceService } from 'eo/workbench/browser/src/app/shared/services/workspace/workspace.service' -import { Component, OnInit } from '@angular/core' +import { UserService } from 'eo/workbench/browser/src/app/shared/services/user/user.service'; +import { MessageService } from 'eo/workbench/browser/src/app/shared/services/message/message.service'; +import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/storage/remote.service'; +import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service'; +import { ProjectService } from 'eo/workbench/browser/src/app/shared/services/project/project.service'; +import { DataSourceService } from 'eo/workbench/browser/src/app/shared/services/data-source/data-source.service'; +import { distinct } from 'rxjs/operators'; +import { interval } from 'rxjs'; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms'; +import { WorkspaceService } from 'eo/workbench/browser/src/app/shared/services/workspace/workspace.service'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'eo-user-modal', @@ -22,13 +17,13 @@ import { Component, OnInit } from '@angular/core' [nzFooter]="modalSyncFooter" [(nzVisible)]="isSyncModalVisible" (nzOnCancel)="handleSyncModalCancel()" + (nzAfterClose)="eelsfnjCallback()" nzTitle="Do you want to upload local data to the cloud ?" i18n-nzTitle > - After confirmation, the system will create a cloud space to upload the - local data to the cloud. + After confirmation, the system will create a cloud space to upload the local data to the cloud. - - + + Can't connect right now, click to retry or - - config in the configuration - + config in the configuration - - + + @@ -125,13 +87,9 @@ import { Component, OnInit } from '@angular/core' i18n-placeholder /> - - Please input your password; - + Please input your password; - - Min length is 6; - + Min length is 6; @@ -142,7 +100,7 @@ import { Component, OnInit } from '@angular/core' class="h-10 mt-2" nzType="primary" nzBlock - (click)="btnmympi6Callback()" + (click)="btnfut4cnCallback()" i18n > Sign In/Up @@ -155,14 +113,13 @@ import { Component, OnInit } from '@angular/core' [nzFooter]="null" [(nzVisible)]="isOpenSettingModalVisible" (nzOnCancel)="handleOpenSettingModalCancel()" + (nzAfterClose)="ebfy6zcCallback()" nzTitle="Open setting" i18n-nzTitle > If you want to collaborate, please - - open the settings - + open the settings and fill in the configuration @@ -170,48 +127,27 @@ import { Component, OnInit } from '@angular/core' [nzFooter]="modalAddWorkspaceFooter" [(nzVisible)]="isAddWorkspaceModalVisible" (nzOnCancel)="handleAddWorkspaceModalCancel()" - (nzAfterClose)="ehr6ppmCallback()" + (nzAfterClose)="etuv4keCallback()" nzTitle="Add Workspace" i18n-nzTitle > - + - - + + - ` + `, }) export class UserModalComponent implements OnInit { - isSyncModalVisible - isCheckConnectModalVisible - isLoginModalVisible - validateLoginForm - isOpenSettingModalVisible - isAddWorkspaceModalVisible - inputWorkspaceNameValue + isSyncModalVisible; + isCheckConnectModalVisible; + isLoginModalVisible; + validateLoginForm; + isOpenSettingModalVisible; + isAddWorkspaceModalVisible; + inputWorkspaceNameValue; constructor( public user: UserService, public message: MessageService, @@ -223,13 +159,13 @@ export class UserModalComponent implements OnInit { public fb: UntypedFormBuilder, public workspace: WorkspaceService ) { - this.isSyncModalVisible = false - this.isCheckConnectModalVisible = false - this.isLoginModalVisible = false - this.validateLoginForm = UntypedFormGroup - this.isOpenSettingModalVisible = false - this.isAddWorkspaceModalVisible = false - this.inputWorkspaceNameValue = '' + this.isSyncModalVisible = false; + this.isCheckConnectModalVisible = false; + this.isLoginModalVisible = false; + this.validateLoginForm = UntypedFormGroup; + this.isOpenSettingModalVisible = false; + this.isAddWorkspaceModalVisible = false; + this.inputWorkspaceNameValue = ''; } async ngOnInit(): Promise { this.message @@ -238,346 +174,360 @@ export class UserModalComponent implements OnInit { .subscribe(async ({ type, data }) => { if (type === 'login') { // * 唤起弹窗 - this.isLoginModalVisible = true + this.isLoginModalVisible = true; - return + return; } if (type === 'clear-user') { - this.user.clearAuth() + this.user.clearAuth(); this.user.setUserProfile({ id: -1, password: '', username: '', - workspaces: [] - }) - return + workspaces: [], + }); + return; } if (type === 'http-401') { - const { id } = this.workspace.currentWorkspace + const { id } = this.workspace.currentWorkspace; if (id === -1) { - return + return; } // * 唤起弹窗 - this.isLoginModalVisible = true + this.isLoginModalVisible = true; - return + return; } if (type === 'logOut') { - this.workspace.setCurrentWorkspaceID(-1) + this.workspace.setCurrentWorkspaceID(-1); this.user.setUserProfile({ id: -1, password: '', username: '', - workspaces: [] - }) + workspaces: [], + }); { - this.workspace.setWorkspaceList([]) + this.workspace.setWorkspaceList([]); } - this.workspace.setCurrentWorkspace( - this.workspace.getLocalWorkspaceInfo() - ) - this.eMessage.success($localize`Successfully logged out !`) - const refreshToken = this.user.refreshToken - this.user.clearAuth() + this.workspace.setCurrentWorkspace(this.workspace.getLocalWorkspaceInfo()); + this.eMessage.success($localize`Successfully logged out !`); + const refreshToken = this.user.refreshToken; + this.user.clearAuth(); { const [data, err]: any = await this.api.api_authLogout({ - refreshToken - }) + refreshToken, + }); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } } - return + return; } if (type === 'ping-fail') { - this.eMessage.error($localize`Connect failed`) + this.eMessage.error($localize`Connect failed`); // * 唤起弹窗 - this.isCheckConnectModalVisible = true + this.isCheckConnectModalVisible = true; - return + return; } if (type === 'ping-success') { - this.eMessage.success($localize`Connect success`) - return + this.eMessage.success($localize`Connect success`); + return; } if (type === 'need-config-remote') { // * 唤起弹窗 - this.isOpenSettingModalVisible = true + this.isOpenSettingModalVisible = true; - return + return; } if (type === 'addWorkspace') { // * 唤起弹窗 - this.isAddWorkspaceModalVisible = true + this.isAddWorkspaceModalVisible = true; - return + return; } if (type === 'retry') { // * 唤起弹窗 - this.isCheckConnectModalVisible = true + this.isCheckConnectModalVisible = true; - return + return; } - }) + }); // * Init Login form this.validateLoginForm = this.fb.group({ username: [null, [Validators.required]], - password: [null, [Validators.required, Validators.minLength(6)]] - }) + password: [null, [Validators.required, Validators.minLength(6)]], + }); - const { id: workspaceID } = this.workspace.currentWorkspace - const [data, err]: any = await this.api.api_workspaceList({}) + const { id: workspaceID } = this.workspace.currentWorkspace; + const [data, err]: any = await this.api.api_workspaceList({}); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } - this.workspace.setWorkspaceList(data) + this.workspace.setWorkspaceList(data); if (workspaceID !== -1) { - const { projects } = await this.workspace.getWorkspaceInfo(workspaceID) - this.project.setCurrentProjectID(projects.at(0).uuid) + const { projects } = await this.workspace.getWorkspaceInfo(workspaceID); + this.project.setCurrentProjectID(projects.at(0).uuid); } - const url = this.dataSource.mockUrl + const url = this.dataSource.mockUrl; if (url === '') { // * 唤起弹窗 - this.isOpenSettingModalVisible = true + this.isOpenSettingModalVisible = true; - return + return; } - const { id: currentWorkspaceID } = this.workspace.currentWorkspace + const { id: currentWorkspaceID } = this.workspace.currentWorkspace; if (currentWorkspaceID === -1) { - return + return; } - const status = this.dataSource.isConnectRemote + const status = this.dataSource.isConnectRemote; if (!status) { // * 唤起弹窗 - this.isCheckConnectModalVisible = true + this.isCheckConnectModalVisible = true; - return + return; } } handleSyncModalCancel(): void { // * 关闭弹窗 - this.isSyncModalVisible = false + this.isSyncModalVisible = false; } - async btndym1alCallback() { + async eelsfnjCallback() { + // * nzAfterClose event callback + { + } + } + async btnp1daq9Callback() { // * click event callback // * 关闭弹窗 - this.isSyncModalVisible = false + this.isSyncModalVisible = false; } - async btnobcnblCallback() { + async btn94e09oCallback() { // * click event callback - const eData = await this.project.exportLocalProjectData() + const eData = await this.project.exportLocalProjectData(); - const [data, err]: any = await this.api.api_workspaceUpload(eData) + const [data, err]: any = await this.api.api_workspaceUpload(eData); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } - const { workspace } = data + const { workspace } = data; - const list = this.workspace.getWorkspaceList().filter((it) => it.id !== -1) - this.workspace.setWorkspaceList([...list, workspace]) - this.workspace.setCurrentWorkspaceID(workspace) + const list = this.workspace.getWorkspaceList().filter((it) => it.id !== -1); + this.workspace.setWorkspaceList([...list, workspace]); + this.workspace.setCurrentWorkspaceID(workspace); // * 关闭弹窗 - this.isSyncModalVisible = false + this.isSyncModalVisible = false; } handleCheckConnectModalCancel(): void { // * 关闭弹窗 - this.isCheckConnectModalVisible = false + this.isCheckConnectModalVisible = false; } - async btnev86beCallback() { + async e7v9f3eCallback() { + // * nzAfterClose event callback + { + } + } + async btnsxnnseCallback() { // * click event callback // * 关闭弹窗 - this.isCheckConnectModalVisible = false + this.isCheckConnectModalVisible = false; } - async btnuft0cqCallback() { + async btnx0y1pjCallback() { // * click event callback - this.dataSource.checkRemoteAndTipModal() + this.dataSource.checkRemoteAndTipModal(); // * 关闭弹窗 - this.isCheckConnectModalVisible = false + this.isCheckConnectModalVisible = false; } - async textx6e63wCallback() { + async text5jk0zaCallback() { // * click event callback // * 关闭弹窗 - this.isOpenSettingModalVisible = false + this.isOpenSettingModalVisible = false; } handleLoginModalCancel(): void { // * 关闭弹窗 - this.isLoginModalVisible = false + this.isLoginModalVisible = false; } - async e5l5t29Callback() { + async emvl4itCallback() { // * nzAfterClose event callback - - // * Clear Login form - this.validateLoginForm.reset() + { + // * auto clear form + this.validateLoginForm.reset(); + } } - async btnmympi6Callback() { + async btnfut4cnCallback() { // * click event callback - const isOk = this.validateLoginForm.valid + const isOk = this.validateLoginForm.valid; if (!isOk) { - this.eMessage.error($localize`Please check you username or password`) - return + this.eMessage.error($localize`Please check you username or password`); + return; } // * get login form values - const formData = this.validateLoginForm.value - const [data, err]: any = await this.api.api_authLogin(formData) + const formData = this.validateLoginForm.value; + const [data, err]: any = await this.api.api_authLogin(formData); if (err) { - this.eMessage.error($localize`Authentication failed !`) + this.eMessage.error($localize`Authentication failed !`); if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } - this.user.setLoginInfo(data) + this.user.setLoginInfo(data); // * 关闭弹窗 - this.isLoginModalVisible = false + this.isLoginModalVisible = false; { - const [data, err]: any = await this.api.api_userReadProfile(null) + const [data, err]: any = await this.api.api_userReadProfile(null); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } - this.user.setUserProfile(data) + this.user.setUserProfile(data); } { - const [data, err]: any = await this.api.api_workspaceList({}) + const [data, err]: any = await this.api.api_workspaceList({}); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } - this.workspace.setWorkspaceList(data) + this.workspace.setWorkspaceList(data); } if (!data.isFirstLogin) { - return + return; } // * 唤起弹窗 - this.isSyncModalVisible = true + this.isSyncModalVisible = true; } handleOpenSettingModalCancel(): void { // * 关闭弹窗 - this.isOpenSettingModalVisible = false + this.isOpenSettingModalVisible = false; } - async textkmcrwvCallback() { + async ebfy6zcCallback() { + // * nzAfterClose event callback + { + } + } + async text4fn9sfCallback() { // * click event callback - this.message.send({ type: 'open-setting', data: {} }) + this.message.send({ type: 'open-setting', data: {} }); // * 关闭弹窗 - this.isOpenSettingModalVisible = false + this.isOpenSettingModalVisible = false; } handleAddWorkspaceModalCancel(): void { // * 关闭弹窗 - this.isAddWorkspaceModalVisible = false + this.isAddWorkspaceModalVisible = false; } - async ehr6ppmCallback() { + async etuv4keCallback() { // * nzAfterClose event callback - this.inputWorkspaceNameValue = '' + { + // * auto clear form + this.inputWorkspaceNameValue = ''; + } } - async btn2op86eCallback() { + async btnua379iCallback() { // * click event callback // * 关闭弹窗 - this.isAddWorkspaceModalVisible = false - - this.inputWorkspaceNameValue = '' + this.isAddWorkspaceModalVisible = false; } - async btnv0jv0tCallback() { + async btn539vb6Callback() { // * click event callback - const title = this.inputWorkspaceNameValue + const title = this.inputWorkspaceNameValue; { - const [data, err]: any = await this.api.api_workspaceCreate({ title }) + const [data, err]: any = await this.api.api_workspaceCreate({ title }); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } } - this.eMessage.success($localize`Create new workspace successfully !`) + this.eMessage.success($localize`Create new workspace successfully !`); // * 关闭弹窗 - this.isAddWorkspaceModalVisible = false + this.isAddWorkspaceModalVisible = false; - this.inputWorkspaceNameValue = '' { - const [data, err]: any = await this.api.api_workspaceList({}) + const [data, err]: any = await this.api.api_workspaceList({}); if (err) { if (err.status === 401) { - this.message.send({ type: 'clear-user', data: {} }) + this.message.send({ type: 'clear-user', data: {} }); if (this.user.isLogin) { - return + return; } - this.message.send({ type: 'http-401', data: {} }) + this.message.send({ type: 'http-401', data: {} }); } - return + return; } - this.workspace.setWorkspaceList(data) + this.workspace.setWorkspaceList(data); } } } diff --git a/src/workbench/browser/src/app/pages/workspace.component.ts b/src/workbench/browser/src/app/pages/workspace.component.ts index 76d064c2..caeba537 100644 --- a/src/workbench/browser/src/app/pages/workspace.component.ts +++ b/src/workbench/browser/src/app/pages/workspace.component.ts @@ -1,4 +1,4 @@ -import { NzModalService } from 'ng-zorro-antd/modal' +import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal' import { WorkspaceService } from 'eo/workbench/browser/src/app/shared/services/workspace/workspace.service' import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service' import { UserService } from 'eo/workbench/browser/src/app/shared/services/user/user.service' @@ -48,7 +48,7 @@ import { Component, OnInit } from '@angular/core' nz-button class="" nzType="primary" - (click)="btnof6jmpCallback()" + (click)="btnfx9imhCallback()" i18n > Save @@ -68,7 +68,7 @@ import { Component, OnInit } from '@angular/core' class="" nzType="primary" nzDanger - (click)="btnmisciqCallback()" + (click)="btnw960jpCallback()" i18n > Delete @@ -102,7 +102,7 @@ export class WorkspaceComponent implements OnInit { workspace: currentWsp }) } - async btnof6jmpCallback() { + async btnfx9imhCallback() { // * click event callback const { id: currentWsp } = this.workspace.currentWorkspace const { workspace: title } = this.validateWspNameForm.value @@ -136,7 +136,7 @@ export class WorkspaceComponent implements OnInit { } this.workspace.setWorkspaceList(list) } - async btnmisciqCallback() { + async btnw960jpCallback() { // * click event callback const confirm = () => diff --git a/src/workbench/browser/src/app/pages/workspace.module.ts b/src/workbench/browser/src/app/pages/workspace.module.ts index 15133cd6..fdf30c70 100644 --- a/src/workbench/browser/src/app/pages/workspace.module.ts +++ b/src/workbench/browser/src/app/pages/workspace.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core' import { CommonModule } from '@angular/common' -import { NzModalService, NzModalModule } from 'ng-zorro-antd/modal' +import { NzModalRef, NzModalService, NzModalModule } from 'ng-zorro-antd/modal' import { WorkspaceService } from 'eo/workbench/browser/src/app/shared/services/workspace/workspace.service' import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service' import { UserService } from 'eo/workbench/browser/src/app/shared/services/user/user.service' diff --git a/src/workbench/browser/views/user-modal.ts b/src/workbench/browser/views/user-modal.ts index 06ea85d5..3d32c029 100644 --- a/src/workbench/browser/views/user-modal.ts +++ b/src/workbench/browser/views/user-modal.ts @@ -135,14 +135,11 @@ const addWorkspace = new Modal({ id: 'add-workspace', title: { text: 'Add Workspace' }, children: [newWorkspaceName], - event: { - close: [newWorkspaceName.reset()], - }, footer: [ { label: 'Cancel', type: 'default', - click: [Modal.close('add-workspace'), newWorkspaceName.reset()], + click: [Modal.close('add-workspace')], disabled: [], }, { @@ -153,7 +150,6 @@ const addWorkspace = new Modal({ [httpS.send('api_workspaceCreate', '{ title }')], messageS.success('Create new workspace successfully !'), Modal.close('add-workspace'), - newWorkspaceName.reset(), // * update workspace list [httpS.send('api_workspaceList', '{}'), workspaceS.setWorkspaceList('data')], ], @@ -176,12 +172,24 @@ const login = new Modal({ }), ], footer: [], - event: { - //!TODO modal control self status，no need to reset - close: [loginForm.reset()], - }, }); +// const login = modalS.component({ +// id: 'login', +// title: 'Sign In/Up', +// children: [ +// messageS, +// userS, +// httpS, +// workspaceS, +// new EventS({}), +// new Canvas({ +// class: ['my-3'], +// children: [loginForm], +// }), +// ], +// }); + const checkConnect = new Modal({ id: 'check-connect', title: { text: 'Check your connection' }, @@ -329,6 +337,7 @@ export default new Component({ messageS, eventS, sync, + // modalS, checkConnect, login, openSetting,