mirror of https://github.com/Squidex/squidex.git
Sebastian Stehle
11 months ago
16 changed files with 238 additions and 87 deletions
@ -1,30 +1,28 @@ |
|||
<div class="card"> |
|||
<div class="card-body"> |
|||
<h5 class="card-title">{{ "roles.add.title" | sqxTranslate }}</h5> |
|||
<div class="card card-body card-create mb-4"> |
|||
<h5 class="card-title">{{ "roles.add.title" | sqxTranslate }}</h5> |
|||
|
|||
<form [formGroup]="addRoleForm.form" (ngSubmit)="addRole()"> |
|||
<div class="row gx-2"> |
|||
<div class="col"> |
|||
<sqx-control-errors for="name" /> |
|||
<input |
|||
class="form-control" |
|||
autocomplete="off" |
|||
formControlName="name" |
|||
maxlength="40" |
|||
placeholder="{{ 'roles.roleNamePlaceholder' | sqxTranslate }}" /> |
|||
</div> |
|||
<form [formGroup]="addRoleForm.form" (ngSubmit)="addRole()"> |
|||
<div class="row gx-2"> |
|||
<div class="col"> |
|||
<sqx-control-errors for="name" /> |
|||
<input |
|||
class="form-control" |
|||
autocomplete="off" |
|||
formControlName="name" |
|||
maxlength="40" |
|||
placeholder="{{ 'roles.roleNamePlaceholder' | sqxTranslate }}" /> |
|||
</div> |
|||
|
|||
<div class="col-auto"> |
|||
<button class="btn btn-success" [disabled]="addRoleForm.hasNoName | async" type="submit"> |
|||
{{ "roles.add" | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button class="btn btn-success" [disabled]="addRoleForm.hasNoName | async" type="submit"> |
|||
{{ "roles.add" | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="col-auto"> |
|||
<button class="btn btn-text-secondary" (click)="cancel()" type="button">{{ "common.cancel" | sqxTranslate }}</button> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button class="btn btn-text-secondary" (click)="cancel()" type="button">{{ "common.cancel" | sqxTranslate }}</button> |
|||
</div> |
|||
</form> |
|||
<sqx-form-hint> {{ "roles.add.description" | sqxTranslate }} </sqx-form-hint> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<sqx-form-hint> {{ "roles.add.description" | sqxTranslate }} </sqx-form-hint> |
|||
</div> |
|||
|
|||
@ -1,30 +1,28 @@ |
|||
<div class="card mt-4"> |
|||
<div class="card-body"> |
|||
<h5 class="card-title">{{ "workflows.add.title" | sqxTranslate }}</h5> |
|||
<div class="card card-body card-create mb-4"> |
|||
<h5 class="card-title">{{ "workflows.add.title" | sqxTranslate }}</h5> |
|||
|
|||
<form [formGroup]="addWorkflowForm.form" (ngSubmit)="addWorkflow()"> |
|||
<div class="row gx-2"> |
|||
<div class="col"> |
|||
<sqx-control-errors for="name" /> |
|||
<input |
|||
class="form-control" |
|||
autocomplete="off" |
|||
formControlName="name" |
|||
maxlength="40" |
|||
placeholder="{{ 'workflows.workflowNamePlaceholder' | sqxTranslate }}" /> |
|||
</div> |
|||
<form [formGroup]="addWorkflowForm.form" (ngSubmit)="addWorkflow()"> |
|||
<div class="row gx-2"> |
|||
<div class="col"> |
|||
<sqx-control-errors for="name" /> |
|||
<input |
|||
class="form-control" |
|||
autocomplete="off" |
|||
formControlName="name" |
|||
maxlength="40" |
|||
placeholder="{{ 'workflows.workflowNamePlaceholder' | sqxTranslate }}" /> |
|||
</div> |
|||
|
|||
<div class="col-auto"> |
|||
<button class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async" type="submit"> |
|||
{{ "workflows.add" | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button class="btn btn-success" [disabled]="addWorkflowForm.hasNoName | async" type="submit"> |
|||
{{ "workflows.add" | sqxTranslate }} |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="col-auto"> |
|||
<button class="btn btn-text-secondary" (click)="cancel()" type="reset">{{ "common.cancel" | sqxTranslate }}</button> |
|||
</div> |
|||
<div class="col-auto"> |
|||
<button class="btn btn-text-secondary" (click)="cancel()" type="reset">{{ "common.cancel" | sqxTranslate }}</button> |
|||
</div> |
|||
</form> |
|||
<sqx-form-hint> {{ "workflows.add.description" | sqxTranslate }} </sqx-form-hint> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
<sqx-form-hint> {{ "workflows.add.description" | sqxTranslate }} </sqx-form-hint> |
|||
</div> |
|||
|
|||
@ -0,0 +1,139 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
|||
*/ |
|||
|
|||
import { Component, inject, Input } from '@angular/core'; |
|||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; |
|||
import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; |
|||
import { ConfirmClickDirective, DialogRendererComponent, DialogService, ErrorDto, LocalizerService, RootViewComponent, TooltipDirective } from '@app/framework'; |
|||
|
|||
type TestMode = 'ErrorText' | 'ErrorDetails' | 'Info'; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-test', |
|||
template: ` |
|||
<button class="btn btn-primary" (click)="test()"> |
|||
Show {{ mode }} |
|||
</button> |
|||
`,
|
|||
imports: [ |
|||
DialogRendererComponent, |
|||
], |
|||
}) |
|||
class TestComponent { |
|||
public readonly dialogs = inject(DialogService); |
|||
|
|||
@Input() |
|||
public mode: TestMode = 'Info'; |
|||
|
|||
public test() { |
|||
if (this.mode === 'ErrorDetails') { |
|||
const error = new ErrorDto(500, |
|||
'Error in Server', |
|||
'Error Code', |
|||
[ |
|||
'Details 1', |
|||
'Details 2', |
|||
'Details 3', |
|||
'Details 4', |
|||
], |
|||
); |
|||
|
|||
this.dialogs.notifyError(error); |
|||
} else if (this.mode === 'ErrorText') { |
|||
this.dialogs.notifyError('Error'); |
|||
} else { |
|||
this.dialogs.notifyInfo('Info'); |
|||
} |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
title: 'Framework/Dialogs', |
|||
component: DialogRendererComponent, |
|||
decorators: [ |
|||
moduleMetadata({ |
|||
imports: [ |
|||
BrowserAnimationsModule, |
|||
ConfirmClickDirective, |
|||
RootViewComponent, |
|||
TestComponent, |
|||
TooltipDirective, |
|||
], |
|||
providers: [ |
|||
DialogService, |
|||
{ |
|||
provide: LocalizerService, |
|||
useValue: new LocalizerService({ |
|||
'common.no': 'No', |
|||
'common.remember': 'Remember', |
|||
'common.yes': 'Yes', |
|||
}), |
|||
}, |
|||
], |
|||
}), |
|||
], |
|||
render: args => ({ |
|||
props: args, |
|||
template: ` |
|||
<sqx-root-view> |
|||
<div class="p-4"> |
|||
<h3>Dialogs</h3> |
|||
<div class="p-2 d-flex gap-2"> |
|||
<sqx-test [mode]="'ErrorText'" /> |
|||
<sqx-test [mode]="'ErrorDetails'" /> |
|||
<sqx-test [mode]="'Info'" /> |
|||
</div> |
|||
|
|||
<h3 class="mt-4">Tooltips</h3> |
|||
<div class="p-2 d-flex gap-2"> |
|||
<button class="btn btn-secondary" title="Tooltip" titlePosition="top">Top</button> |
|||
<button class="btn btn-secondary" title="Tooltip" titlePosition="left">Left</button> |
|||
<button class="btn btn-secondary" title="Tooltip" titlePosition="right">Right</button> |
|||
<button class="btn btn-secondary" title="Tooltip" titlePosition="bottom">Bottom</button> |
|||
</div> |
|||
|
|||
<h3 class="mt-4">Immediate Tooltips</h3> |
|||
<div class="p-2 d-flex gap-2"> |
|||
<button class="btn btn-secondary" [titleDelay]="0" title="Tooltip" titlePosition="top">Top</button> |
|||
<button class="btn btn-secondary" [titleDelay]="0" title="Tooltip" titlePosition="left">Left</button> |
|||
<button class="btn btn-secondary" [titleDelay]="0" title="Tooltip" titlePosition="right">Right</button> |
|||
<button class="btn btn-secondary" [titleDelay]="0" title="Tooltip" titlePosition="bottom">Bottom</button> |
|||
</div> |
|||
|
|||
<h3 class="mt-4">Confirm</h3> |
|||
<div class="p-2 d-flex gap-2"> |
|||
<button |
|||
class="btn btn-secondary" |
|||
confirmTitle="Show alert?" |
|||
confirmText="Really?" |
|||
(sqxConfirmClick)="alert('Click')"> |
|||
Confirm |
|||
</button> |
|||
|
|||
<button |
|||
class="btn btn-secondary" |
|||
confirmTitle="Show alert?" |
|||
confirmText="Really?" |
|||
confirmRememberKey="test" |
|||
(sqxConfirmClick)="alert('Click')"> |
|||
Confirm Remember |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<sqx-dialog-renderer /> |
|||
</sqx-root-view> |
|||
`,
|
|||
}), |
|||
} as Meta; |
|||
|
|||
type Story = StoryObj<DialogRendererComponent & { mode: TestMode }>; |
|||
|
|||
export const Primary: Story = { |
|||
args: { |
|||
}, |
|||
}; |
|||
Loading…
Reference in new issue