From 7a20c6a18779bf1081544975a7b1154de0614878 Mon Sep 17 00:00:00 2001 From: Wroud Date: Thu, 28 May 2020 15:48:35 +0300 Subject: [PATCH] chore(authenctication): user create item sub --- .../Users/CreateUser/CreateUser.tsx | 103 ++++++++++++++++++ .../Users/CreateUser/CreateUserController.ts | 58 ++++++++++ .../Users/UsersAdministrationService.ts | 26 ++++- 3 files changed, 186 insertions(+), 1 deletion(-) create mode 100644 webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUser.tsx create mode 100644 webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUserController.ts diff --git a/webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUser.tsx b/webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUser.tsx new file mode 100644 index 0000000000..708caf9bcd --- /dev/null +++ b/webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUser.tsx @@ -0,0 +1,103 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import { observer } from 'mobx-react'; +import { useCallback } from 'react'; +import styled, { css } from 'reshadow'; + +import { + InputField, SubmittingForm, ErrorMessage, Button +} from '@dbeaver/core/blocks'; +import { useController } from '@dbeaver/core/di'; +import { useTranslate } from '@dbeaver/core/localization'; +import { useStyles, composes } from '@dbeaver/core/theming'; + +import { CreateUserController } from './CreateUserController'; + +const styles = composes( + css` + `, + css` + SubmittingForm { + display: flex; + flex: 1; + } + create-form { + flex: 1; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + } + group { + box-sizing: border-box; + display: flex; + margin: 0 12px; + } + controls { + display: flex; + align-items: center; + justify-content: flex-end; + } + item-title { + composes: theme-typography--headline5 from global; + padding: 16px; + } + ` +); + +export const CreateUser = observer(function CreateUser() { + const controller = useController(CreateUserController); + const translate = useTranslate(); + const handleChange = useCallback( + (value: string) => controller.login = value, + [] + ); + + return styled(useStyles(styles))( + <> + + User creation + + + + + + {translate('User name')} + + + + + + + + + {controller.error.responseMessage && ( + + )} + + ); +}); diff --git a/webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUserController.ts b/webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUserController.ts new file mode 100644 index 0000000000..450848c16e --- /dev/null +++ b/webapp/packages/authentication/src/Administration/Users/CreateUser/CreateUserController.ts @@ -0,0 +1,58 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import { observable } from 'mobx'; + +import { AdministrationScreenService } from '@dbeaver/administration'; +import { ErrorDetailsDialog } from '@dbeaver/core/app'; +import { injectable } from '@dbeaver/core/di'; +import { CommonDialogService } from '@dbeaver/core/dialogs'; +import { NotificationService } from '@dbeaver/core/eventsLog'; +import { GQLErrorCatcher } from '@dbeaver/core/sdk'; + +import { UsersManagerService } from '../../UsersManagerService'; + + +@injectable() +export class CreateUserController { + @observable isCreating = false; + @observable login = ''; + + readonly error = new GQLErrorCatcher(); + + constructor( + private notificationService: NotificationService, + private administrationScreenService: AdministrationScreenService, + private usersManagerService: UsersManagerService, + private commonDialogService: CommonDialogService, + ) { } + + create = async () => { + if (this.isCreating) { + return; + } + + this.isCreating = true; + try { + await this.usersManagerService.create(this.login); + this.administrationScreenService.navigateToItem('users'); + } catch (exception) { + if (!this.error.catch(exception)) { + this.notificationService.logException(exception, 'User create failed'); + } + } finally { + this.isCreating = false; + } + } + + showDetails = () => { + if (this.error.exception) { + this.commonDialogService.open(ErrorDetailsDialog, this.error.exception); + } + } +} diff --git a/webapp/packages/authentication/src/Administration/Users/UsersAdministrationService.ts b/webapp/packages/authentication/src/Administration/Users/UsersAdministrationService.ts index de06d296e1..698e378eea 100644 --- a/webapp/packages/authentication/src/Administration/Users/UsersAdministrationService.ts +++ b/webapp/packages/authentication/src/Administration/Users/UsersAdministrationService.ts @@ -6,10 +6,11 @@ * you may not use this file except in compliance with the License. */ -import { AdministrationItemService } from '@dbeaver/administration'; +import { AdministrationItemService, AdministrationScreenService } from '@dbeaver/administration'; import { injectable, Bootstrap } from '@dbeaver/core/di'; import { UsersManagerService } from '../UsersManagerService'; +import { CreateUser } from './CreateUser/CreateUser'; import { UsersAdministration } from './UsersAdministration'; import { UsersDrawerItem } from './UsersDrawerItem'; @@ -17,6 +18,7 @@ import { UsersDrawerItem } from './UsersDrawerItem'; export class UsersAdministrationService extends Bootstrap { constructor( private administrationItemService: AdministrationItemService, + private administrationScreenService: AdministrationScreenService, private usersManagerService: UsersManagerService, ) { super(); @@ -25,12 +27,34 @@ export class UsersAdministrationService extends Bootstrap { bootstrap() { this.administrationItemService.create({ name: 'users', + sub: [ + { + name: 'create', + getComponent: () => CreateUser, + }, + { + name: 'edit', + getComponent: () => UsersAdministration, + }, + ], getContentComponent: () => UsersAdministration, getDrawerComponent: () => UsersDrawerItem, onActivate: this.loadUsers.bind(this), }); } + navToRoot() { + this.administrationScreenService.navigateToItem('users'); + } + + navToCreate() { + this.administrationScreenService.navigateToItemSub('users', 'create'); + } + + navToEdit(userId: string) { + this.administrationScreenService.navigateToItemSub('users', 'edit', userId); + } + private async loadUsers() { await this.usersManagerService.users.load(); }