Add option to change label for paragraph

2020-06-15 18:30:29 +02:00 · 2020-06-15 18:30:29 +02:00 · b584298a26
commit b584298a26
parent f14b023c3a
8 changed files with 126 additions and 43 deletions
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -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"
 }
--- a/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
+++ b/frontend/src/app/main-view/discussion-viewer/discussion-viewer.component.html
@ -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>
--- a/frontend/src/app/main-view/main-view.component.html
+++ b/frontend/src/app/main-view/main-view.component.html
@ -1,5 +1,5 @@
 <nb-layout>
-  <nb-layout-header>
+  <nb-layout-header fixed>
    <div class="actions-container">
      <nb-actions>
        <nb-action
--- a/frontend/src/app/main-view/main-view.module.ts
+++ b/frontend/src/app/main-view/main-view.module.ts
@ -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],
 })
--- a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html
+++ b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.html
@ -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>
--- a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss
+++ b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.scss
@ -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;
+  }
+}
--- a/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts
+++ b/frontend/src/app/main-view/styled-paragraph/styled-paragraph.component.ts
@ -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);
  }
 }
--- a/frontend/tslint.json
+++ b/frontend/tslint.json
@ -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,