Add option to change label for paragraph
This commit is contained in:
parent
f14b023c3a
commit
b584298a26
@ -12,7 +12,7 @@
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"prefix": "",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
@ -23,13 +23,8 @@
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"aot": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
@ -87,13 +82,8 @@
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"assets": ["src/favicon.ico", "src/assets"],
|
||||
"styles": ["src/styles.scss"],
|
||||
"scripts": []
|
||||
}
|
||||
},
|
||||
@ -105,9 +95,7 @@
|
||||
"tsconfig.spec.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
"exclude": ["**/node_modules/**"]
|
||||
}
|
||||
},
|
||||
"e2e": {
|
||||
@ -123,6 +111,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}},
|
||||
}
|
||||
},
|
||||
"defaultProject": "nkadf"
|
||||
}
|
||||
|
@ -4,11 +4,13 @@
|
||||
{{ item.author }}
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<app-styled-paragraph
|
||||
*ngFor="let paragraph of item.message; let i = index"
|
||||
[message]="paragraph"
|
||||
[label]="item.label[i]"
|
||||
></app-styled-paragraph>
|
||||
<div class="discussion-viewer__container">
|
||||
<app-styled-paragraph
|
||||
*ngFor="let paragraph of item.message; let i = index"
|
||||
[message]="paragraph"
|
||||
[loadedLabel]="item.label[i]"
|
||||
></app-styled-paragraph>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<nb-layout>
|
||||
<nb-layout-header>
|
||||
<nb-layout-header fixed>
|
||||
<div class="actions-container">
|
||||
<nb-actions>
|
||||
<nb-action
|
||||
|
@ -12,11 +12,14 @@ import {
|
||||
NbTooltipModule,
|
||||
NbCardModule,
|
||||
NbMenuModule,
|
||||
NbButtonModule,
|
||||
NbDialogModule,
|
||||
NbSelectModule,
|
||||
} from '@nebular/theme';
|
||||
import { DiscussionViewerComponent } from './discussion-viewer/discussion-viewer.component';
|
||||
import { GetDiscussionService } from '../_services/get-discussion.service';
|
||||
import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.component';
|
||||
|
||||
import { FormsModule } from '@angular/forms';
|
||||
@NgModule({
|
||||
declarations: [
|
||||
MainViewComponent,
|
||||
@ -33,6 +36,9 @@ import { StyledParagraphComponent } from './styled-paragraph/styled-paragraph.co
|
||||
NbTooltipModule,
|
||||
NbCardModule,
|
||||
NbMenuModule,
|
||||
NbButtonModule,
|
||||
NbDialogModule.forChild(),
|
||||
NbSelectModule,
|
||||
],
|
||||
providers: [GetDiscussionService],
|
||||
})
|
||||
|
@ -1,3 +1,48 @@
|
||||
<span class="border paragraph" [ngClass]="label" [nbTooltip]="label">{{
|
||||
message
|
||||
}}</span>
|
||||
<div class="discussion-viewer__paragraph">
|
||||
<span
|
||||
class="border paragraph"
|
||||
[ngClass]="loadedLabel"
|
||||
[nbTooltip]="loadedLabel"
|
||||
>
|
||||
{{ message }}
|
||||
</span>
|
||||
<button nbButton (click)="openDialog(editLabel)" size="small">
|
||||
Edytuj etykietę
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ng-template #editLabel>
|
||||
<nb-card class="dialog">
|
||||
<nb-card-header>Edytuj etykietę</nb-card-header>
|
||||
<nb-card-body class="dialog__body">
|
||||
<div class="dialog__element">
|
||||
<label class="label">Paragraf</label>
|
||||
<span class="paragraph dialog__message">{{ message }}</span>
|
||||
</div>
|
||||
<div class="dialog__element">
|
||||
<label class="label">Etykieta</label>
|
||||
<nb-select placeholder="Wybierz etykietę" [(selected)]="selectedLabel">
|
||||
<nb-option
|
||||
*ngFor="let _label of availableLabels"
|
||||
[value]="_label"
|
||||
[disabled]="loadedLabel === _label"
|
||||
>{{ _label }}</nb-option
|
||||
>
|
||||
</nb-select>
|
||||
</div>
|
||||
<div class="dialog__buttons">
|
||||
<button
|
||||
nbButton
|
||||
status="success"
|
||||
(click)="updateLabel($event, selectedLabel)"
|
||||
[disabled]="selectedLabel === loadedLabel || selectedLabel === ''"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
<button nbButton status="danger" (click)="closeDialog(editLabel)">
|
||||
Anuluj
|
||||
</button>
|
||||
</div>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</ng-template>
|
||||
|
@ -7,6 +7,8 @@
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
max-width: 100ch;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pozytywna {
|
||||
@ -28,3 +30,29 @@
|
||||
.nieistotna {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
&__element {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin: 1rem 0;
|
||||
max-width: 80ch;
|
||||
label {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
button {
|
||||
margin: 0.5rem 1rem 0.5rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.discussion-viewer {
|
||||
&__paragraph {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
@ -1,22 +1,35 @@
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Input,
|
||||
ChangeDetectionStrategy,
|
||||
} from '@angular/core';
|
||||
import { Component, Input, TemplateRef } from '@angular/core';
|
||||
import { NbDialogService, NbDialogRef } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'app-styled-paragraph',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
templateUrl: './styled-paragraph.component.html',
|
||||
styleUrls: ['./styled-paragraph.component.scss'],
|
||||
})
|
||||
export class StyledParagraphComponent implements OnInit {
|
||||
export class StyledParagraphComponent {
|
||||
@Input() message: string;
|
||||
@Input() label: string;
|
||||
constructor() {}
|
||||
ngOnInit(): void {}
|
||||
public getLabel() {
|
||||
return this.label;
|
||||
@Input() loadedLabel: string;
|
||||
availableLabels: string[] = [
|
||||
'pozytywna',
|
||||
'negatywna',
|
||||
'mieszana',
|
||||
'fakt',
|
||||
'nieistotna',
|
||||
];
|
||||
dialogRef: NbDialogRef<any>;
|
||||
selectedLabel = '';
|
||||
|
||||
constructor(private dialogService: NbDialogService) {}
|
||||
|
||||
public openDialog(ref: TemplateRef<any>) {
|
||||
this.dialogRef = this.dialogService.open(ref);
|
||||
}
|
||||
|
||||
public closeDialog(ref: TemplateRef<any>) {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
public updateLabel(event: any, label: string) {
|
||||
console.log(label);
|
||||
}
|
||||
}
|
||||
|
@ -14,7 +14,7 @@
|
||||
"contextual-lifecycle": true,
|
||||
"directive-class-suffix": true,
|
||||
"directive-selector": [true, "attribute", "app", "camelCase"],
|
||||
"component-selector": [true, "element", "app", "kebab-case"],
|
||||
"component-selector": [true, "element", "", "kebab-case"],
|
||||
"eofline": true,
|
||||
"import-blacklist": [true, "rxjs/Rx"],
|
||||
"import-spacing": true,
|
||||
|
Loading…
Reference in New Issue
Block a user