crate task-faq dialog

src/features/main-screentable/main-screentable.component.html

@@ -1,7 +1,9 @@
 <div class="main-card">
   <header class="main-card-header">
     <div class="main-card-header__points">
-      <span class="main-card-header__points-text" matTooltip="Тип операции">Пошив манжет внутренний</span>
+      <span class="main-card-header__points-text" matTooltip="Тип операции"
+        >Пошив манжет внутренний</span
+      >
     </div>
 
     <div class="main-card-header__name"><h1>Сотрудник: 200341</h1></div>
@@ -32,7 +34,7 @@
   <mat-divider></mat-divider>
   <div class="main-card-footer">
     <div class="main-card-footer__faq">
-      <button  mat-button color="primary"><mat-icon>help</mat-icon> Справка</button>
+      <button mat-button color="primary" (click)="openFaq()"><mat-icon>help</mat-icon> Справка</button>
     </div>
     <div class="main-card-footer__money">
       <span>Заработано: <strong>405 ₽</strong></span>

src/features/main-screentable/main-screentable.component.scss

@@ -34,9 +34,9 @@
   }
 
   .main-card-body {
-    padding: 16px;
     flex: 1 0 auto;
     user-select: none;
+    padding: 16px 16px 0;
 
     &__counter {
       height: 100%;

src/features/main-screentable/main-screentable.component.ts

@@ -4,6 +4,8 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatDividerModule } from '@angular/material/divider';
+import {MatDialog} from "@angular/material/dialog";
+import {TaskFaqComponent} from "../task-faq/task-faq.component";
 
 @Component({
   selector: 'app-main-screentable',
@@ -12,4 +14,11 @@ import { MatDividerModule } from '@angular/material/divider';
   templateUrl: './main-screentable.component.html',
   styleUrl: './main-screentable.component.scss',
 })
-export class MainScreentableComponent {}
+export class MainScreentableComponent {
+
+  constructor(private dialog: MatDialog) {
+  }
+  openFaq() {
+    this.dialog.open(TaskFaqComponent);
+  }
+}

src/features/task-faq/task-faq.component.html

@@ -1 +1,36 @@
-<p>task-faq works!</p>
+<h2 mat-dialog-title>Справочная информация</h2>
+<mat-dialog-content>
+
+  <mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Операция "Пошив манжет внутренний"
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p>Learn one way to build applications with Angular and reuse your code and abilities to build
+        apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Как начисляются деньги?
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p>Learn one way to build applications with Angular and reuse your code and abilities to build
+        apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          Не успеваю в план
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p>Learn one way to build applications with Angular and reuse your code and abilities to build
+        apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>
+    </mat-expansion-panel>
+  </mat-accordion>
+</mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button color="primary" mat-dialog-close cdkFocusInitial>Закрыть</button>
+  </mat-dialog-actions>

src/features/task-faq/task-faq.component.ts

@@ -1,12 +1,22 @@
 import { Component } from '@angular/core';
+import {MatDialogActions, MatDialogClose, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
+import {MatButtonModule} from "@angular/material/button";
+import {MatIconModule} from "@angular/material/icon";
+import {MatExpansionModule} from "@angular/material/expansion";
 
 @Component({
   selector: 'app-task-faq',
   standalone: true,
-  imports: [],
+  imports: [
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatButtonModule,
+    MatIconModule,
+    MatExpansionModule,
+  ],
   templateUrl: './task-faq.component.html',
-  styleUrl: './task-faq.component.scss'
+  styleUrl: './task-faq.component.scss',
 })
-export class TaskFaqComponent {
-
-}
+export class TaskFaqComponent {}