conditions-details.component.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!-- DESCRIPTION -->
  2. <div class="title">{{ "conditions.label" | translate }}</div>
  3. <div class="content">
  4. {{ "conditions.description" | translate }}
  5. </div>
  6. <div class="condition-handling">
  7. <!-- CURRENTLY ACTIVE CONDITIONS -->
  8. <div>
  9. <div class="heading left t-0 b-075">
  10. {{ "conditions.currentConditions" | translate }}
  11. </div>
  12. <mat-accordion>
  13. @for (condition of conditions; let index = $index; track condition) {
  14. <mat-expansion-panel>
  15. <mat-expansion-panel-header>
  16. <mat-panel-title>{{
  17. "conditions." + condition | translate
  18. }}</mat-panel-title>
  19. </mat-expansion-panel-header>
  20. <ul>
  21. @for (
  22. description of "conditions.conditionDescriptions." + condition
  23. | translate;
  24. track description
  25. ) {
  26. <li>{{ description }}</li>
  27. }
  28. </ul>
  29. <icon-button
  30. [icon]="'delete'"
  31. style="margin: auto"
  32. (click)="removeCondition(index)"
  33. ></icon-button>
  34. </mat-expansion-panel>
  35. } @empty {
  36. <div class="empty-list">
  37. {{ "conditions.noConditions" | translate }}
  38. </div>
  39. }
  40. </mat-accordion>
  41. </div>
  42. <!-- ADD CONDITIONS -->
  43. <div class="heading left">{{ "conditions.addCondition" | translate }}</div>
  44. <div>
  45. <mat-form-field appearance="outline" class="t-075">
  46. <mat-label>{{ "conditions.label" | translate }}</mat-label>
  47. <mat-select [(ngModel)]="currentCondition">
  48. @for (condition of notUsedConditions(); track condition) {
  49. <mat-option [value]="condition">{{
  50. "conditions." + condition | translate
  51. }}</mat-option>
  52. }
  53. </mat-select>
  54. </mat-form-field>
  55. @if (currentCondition !== "") {
  56. <icon-button
  57. style="display: inline; margin-left: 0.25rem"
  58. [icon]="'add'"
  59. (click)="addCondition()"
  60. ></icon-button>
  61. <div>
  62. <ul>
  63. @for (
  64. description of "conditions.conditionDescriptions." +
  65. currentCondition | translate;
  66. track description
  67. ) {
  68. <li>{{ description }}</li>
  69. }
  70. </ul>
  71. </div>
  72. }
  73. </div>
  74. </div>
  75. <!-- NAVIGATION BUTTONS -->
  76. <div class="vertical-buttons bottom">
  77. <ui-button
  78. [color]="'green'"
  79. [type]="'edit'"
  80. [width]="'w20'"
  81. (click)="close('update')"
  82. >
  83. </ui-button>
  84. <ui-button
  85. [color]="'red'"
  86. [type]="'delete'"
  87. [width]="'w20'"
  88. (click)="close('cancel')"
  89. >
  90. </ui-button>
  91. </div>