From c1b316bee52296c3921dd00e17a05ddd062201f7 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Mon, 9 Dec 2019 10:52:17 +0000
Subject: [PATCH] [Monitor Dashboard]: Indicator components: Make width of card
 base on indicator width(small, medium, large)

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57840 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/topic/indicators.component.html | 512 ++++++++++++------------
 1 file changed, 260 insertions(+), 252 deletions(-)

diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 9e647bc..766b9b3 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -1,296 +1,304 @@
 <div id="page_content" click-outside-or-esc targetId="page_content" [escClose]="false"
      (clickOutside)="toggleOpen($event)">
-  <div class="uk-padding-small md-bg-white" uk-grid>
-    <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
-      <div>
-        <div dashboard-input [formInput]="filters.get('chartType')"
-             type="select" [options]="[all].concat(indicatorUtils.chartTypes)"
-             label="Chart Type"></div>
-      </div>
-      <div>
-        <div dashboard-input [formInput]="filters.get('privacy')"
-             type="select" [options]="[all].concat(indicatorUtils.isPublic)"
-             label="Privacy"></div>
-      </div>
-      <div>
-        <div dashboard-input [formInput]="filters.get('status')"
-             type="select" [options]="[all].concat(indicatorUtils.isActive)"
-             label="Status"></div>
-      </div>
+    <div class="uk-padding-small md-bg-white" uk-grid>
+        <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
+            <div>
+                <div dashboard-input [formInput]="filters.get('chartType')"
+                     type="select" [options]="[all].concat(indicatorUtils.chartTypes)"
+                     label="Chart Type"></div>
+            </div>
+            <div>
+                <div dashboard-input [formInput]="filters.get('privacy')"
+                     type="select" [options]="[all].concat(indicatorUtils.isPublic)"
+                     label="Privacy"></div>
+            </div>
+            <div>
+                <div dashboard-input [formInput]="filters.get('status')"
+                     type="select" [options]="[all].concat(indicatorUtils.isActive)"
+                     label="Status"></div>
+            </div>
+        </div>
+        <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
+            <div class="uk-inline uk-width-medium">
+                <span class="uk-position-center-right"><i class="material-icons">search</i></span>
+                <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
+            </div>
+            <div [class.uk-active]="grid" class="uk-margin-small-left">
+                <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
+                        class="material-icons">view_module</i></a>
+            </div>
+            <div [class.uk-active]="!grid" class="uk-margin-small-left">
+                <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
+            </div>
+        </div>
     </div>
-    <div class="uk-width-expand@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-right">
-      <div class="uk-inline uk-width-medium">
-        <span class="uk-position-center-right"><i class="material-icons">search</i></span>
-        <div dashboard-input [formInput]="filters.get('keyword')" label="Locate indicator"></div>
-      </div>
-      <div [class.uk-active]="grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(true)"><i
-          class="material-icons">view_module</i></a>
-      </div>
-      <div [class.uk-active]="!grid" class="uk-margin-small-left">
-        <a [routerLink]="" class="uk-icon-button" (click)="changeGrid(false)"><i class="material-icons">list</i></a>
-      </div>
-    </div>
-  </div>
-  <div *ngIf="stakeholder && canEdit" id="page_content_inner">
-    <div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
-      <div>
-        <ul id="breadcrumbs">
-          <li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
-          <li>
-            <span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
-          <li>
+    <div *ngIf="stakeholder && canEdit" id="page_content_inner">
+        <div class="uk-child-width-1-2 uk-flex-middle" uk-grid>
+            <div>
+                <ul id="breadcrumbs">
+                    <li><span>{{stakeholder.topics[topicIndex].name}}</span></li>
+                    <li>
+                        <span>{{stakeholder.topics[topicIndex].categories[categoryIndex].name}}</span></li>
+                    <li>
             <span class="md-color-blue-900 uk-text-bold">
               {{stakeholder.topics[topicIndex].categories[categoryIndex].subCategories[subcategoryIndex].name}}
             </span>
-          </li>
-        </ul>
-      </div>
-      <div class="uk-flex uk-flex-right">
-        <button class="md-btn md-btn-primary">Preview</button>
-      </div>
-    </div>
-    <h4 class="uk-text-bold">Number Indicators</h4>
-    <div [class.uk-child-width-1-3@m]="grid"
-         [class.uk-child-width-1-2@s]="grid"
-         [class.uk-child-width-1-1]="!grid"
-         [class.max-width-large]="!grid" id="number"
-         class="uk-grid-match uk-grid-small"
-         uk-sortable uk-grid>
-      <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
-        <div *ngIf="indicator" [id]="indicator._id">
-          <div class="md-card" [class.uk-sortable-nodrag]="!canNumbersReorder">
-            <div class="md-card-toolbar">
-              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+                    </li>
+                </ul>
+            </div>
+            <div class="uk-flex uk-flex-right">
+                <button class="md-btn md-btn-primary">Preview</button>
+            </div>
+        </div>
+        <h4 class="uk-text-bold">Number Indicators</h4>
+        <div [class.max-width-large]="!grid" id="number"
+             class="uk-grid-match uk-grid-small"
+             uk-sortable uk-grid>
+            <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
+                <div *ngIf="indicator" [id]="indicator._id"
+                     [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
+                     [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
+                     [class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
+                    <div class="md-card" [class.uk-sortable-nodrag]="!canNumbersReorder">
+                        <div class="md-card-toolbar">
+                            <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i
-                    class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
-                  {{(indicator.isPublic) ? 'Public' : 'Private'}}
+                          class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                    {{(indicator.isPublic) ? 'Public' : 'Private'}}
                 </span>
-                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right"
                      [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
-                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
+                                    {{(indicator.isActive) ? 'Active' : 'Inactive'}}
                 </span>
-                <div class="md-card-dropdown uk-inline">
-                  <i class="md-icon material-icons">more_vert</i>
-                  <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
-                    <ul class="uk-nav uk-dropdown-nav">
-                      <li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>
-                      <li><a (click)="deleteIndicatorOpen(indicator._id, 'number')">Delete</a></li>
-                    </ul>
-                  </div>
+                                <div class="md-card-dropdown uk-inline">
+                                    <i class="md-icon material-icons">more_vert</i>
+                                    <div uk-dropdown="mode: click; pos: bottom-right"
+                                         class="uk-padding-remove-horizontal">
+                                        <ul class="uk-nav uk-dropdown-nav">
+                                            <li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>
+                                            <li><a (click)="deleteIndicatorOpen(indicator._id, 'number')">Delete</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
+                        </div>
+                        <div *ngIf="grid" class="md-card-content">
+                            <div class="uk-flex uk-flex-center" uk-grid>
+                                <div class="uk-width-1-1">
+                                    {{indicator.description}}
+                                </div>
+                                <div class="uk-width-1-2 uk-text-center">
+                                    <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                                    <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
+                                </div>
+                                <div class="uk-width-1-2 uk-text-center">
+                                    <i class="material-icons md-24"
+                                       [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                                    <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
-            </div>
-            <div *ngIf="grid" class="md-card-content">
-              <div class="uk-flex uk-flex-center" uk-grid>
-                <div class="uk-width-1-1">
-                  {{indicator.description}}
-                </div>
-                <div class="uk-width-1-2 uk-text-center">
-                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
-                  <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
-                </div>
-                <div class="uk-width-1-2 uk-text-center">
-                  <i class="material-icons md-24"
-                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
-                  <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
+            </ng-template>
         </div>
-      </ng-template>
-    </div>
-    <h4 class="uk-text-bold">Chart Indicators</h4>
-    <div [class.uk-child-width-1-3@m]="grid"
-         [class.uk-child-width-1-2@s]="grid"
-         [class.uk-child-width-1-1]="!grid"
-         [class.max-width-large]="!grid" id="chart"
-         class="uk-grid-match uk-grid-small uk-grid"
-         uk-sortable uk-grid>
-      <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
-        <div *ngIf="indicator" [id]="indicator._id">
-          <div class="md-card" [class.uk-sortable-nodrag]="!canChartsReorder">
-            <div class="md-card-toolbar">
-              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
-                <ng-template [ngIf]="!grid">
+        <h4 class="uk-text-bold">Chart Indicators</h4>
+        <div [class.max-width-large]="!grid" id="chart"
+             class="uk-grid-match uk-grid-small uk-grid"
+             uk-sortable uk-grid>
+            <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
+                <div *ngIf="indicator" [id]="indicator._id"
+                     [class.uk-width-1-3@m]="grid && indicator.width === 'small'"
+                     [class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
+                     [class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
+                    <div class="md-card" [class.uk-sortable-nodrag]="!canChartsReorder">
+                        <div class="md-card-toolbar">
+                            <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
+                                <ng-template [ngIf]="!grid">
                   <span *ngFor="let indicatorPath of indicator.indicatorPaths"
                         class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
                     <i class="material-icons md-24 uk-margin-small-right">
                       {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
                     </i>
-                    {{indicatorPath.type + ' Chart'}}
+                      {{indicatorPath.type + ' Chart'}}
                   </span>
-                </ng-template>
-                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                                </ng-template>
+                                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right">
                     {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
                   </i>
-                  {{(indicator.isPublic) ? 'Public' : 'Private'}}
+                                    {{(indicator.isPublic) ? 'Public' : 'Private'}}
                 </span>
-                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
+                                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right"
                      [class.md-color-green-300]="indicator.isActive">
                     {{indicatorUtils.isActiveIcon}}
                   </i>
-                  {{(indicator.isActive) ? 'Active' : 'Inactive'}}
+                                    {{(indicator.isActive) ? 'Active' : 'Inactive'}}
                 </span>
-                <div class="md-card-dropdown uk-inline">
-                  <i class="md-icon material-icons">more_vert</i>
-                  <div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
-                    <ul class="uk-nav uk-dropdown-nav">
-                      <li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>
-                      <li><a (click)="deleteIndicatorOpen(indicator._id)">Delete</a></li>
-                    </ul>
-                  </div>
+                                <div class="md-card-dropdown uk-inline">
+                                    <i class="md-icon material-icons">more_vert</i>
+                                    <div uk-dropdown="mode: click; pos: bottom-right"
+                                         class="uk-padding-remove-horizontal">
+                                        <ul class="uk-nav uk-dropdown-nav">
+                                            <li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>
+                                            <li><a (click)="deleteIndicatorOpen(indicator._id)">Delete</a></li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
+                        </div>
+                        <div *ngIf="grid" class="md-card-content">
+                            <div class="uk-flex uk-flex-center" uk-grid>
+                                <div class="uk-width-1-1">
+                                    {{indicator.description ? indicator.description : ''}}
+                                </div>
+                                <div class="uk-width-1-3 uk-text-center"
+                                     [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
+                                    <div *ngFor="let indicatorPath of indicator.indicatorPaths">
+                                        <i class="material-icons md-24">
+                                            {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
+                                        </i>
+                                        <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
+                                    </div>
+                                </div>
+                                <div class="uk-width-1-3 uk-text-center">
+                                    <i class="material-icons md-24">
+                                        {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
+                                    </i>
+                                    <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
+                                </div>
+                                <div class="uk-width-1-3 uk-text-center">
+                                    <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
+                                        {{indicatorUtils.isActiveIcon}}
+                                    </i>
+                                    <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </ng-template>
+            <div class="disable-sortable"
+                 [class.uk-width-1-3@m]="grid"
+                 [class.uk-width-1-1@m]="!grid">
+                <div class="md-card clickable uk-sortable-nodrag" (click)="createIndicatorOpen()">
+                    <div class="md-card-toolbar">
+                        <div class="md-card-toolbar-heading-text"
+                             [class.uk-flex-middle]="!grid"
+                             [class.uk-flex]="!grid"
+                             [class.uk-flex-center]="!grid">
+                            <i *ngIf="!grid" class="material-icons md-36">add</i>
+                            <span>Create a custom Indicator</span>
+                        </div>
+                    </div>
+                    <div *ngIf="grid" class="md-card-content">
+                        <div uk-grid>
+                            <div class="uk-width-1-1">
+                                Use our advance tool to create a custom Indicator that suit the needs of your funding
+                                KPI's.
+                            </div>
+                            <div class="uk-width-1-1 uk-flex uk-flex-center">
+                                <i class="material-icons md-48">add</i>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-              </div>
-              <div class="md-card-toolbar-heading-text">{{indicator.name}}</div>
             </div>
-            <div *ngIf="grid" class="md-card-content">
-              <div class="uk-flex uk-flex-center" uk-grid>
-                <div class="uk-width-1-1">
-                  {{indicator.description ? indicator.description : ''}}
-                </div>
-                <div class="uk-width-1-3 uk-text-center"
-                     [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
-                  <div *ngFor="let indicatorPath of indicator.indicatorPaths">
-                    <i class="material-icons md-24">
-                      {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
-                    </i>
-                    <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
-                  </div>
-                </div>
-                <div class="uk-width-1-3 uk-text-center">
-                  <i class="material-icons md-24">
-                    {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
-                  </i>
-                  <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
-                </div>
-                <div class="uk-width-1-3 uk-text-center">
-                  <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
-                    {{indicatorUtils.isActiveIcon}}
-                  </i>
-                  <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
-      </ng-template>
-      <div class="disable-sortable">
-        <div class="md-card clickable uk-sortable-nodrag" (click)="createIndicatorOpen()">
-          <div class="md-card-toolbar">
-            <div class="md-card-toolbar-heading-text"
-                 [class.uk-flex-middle]="!grid"
-                 [class.uk-flex]="!grid"
-                 [class.uk-flex-center]="!grid">
-              <i *ngIf="!grid" class="material-icons md-36">add</i>
-              <span>Create a custom Indicator</span>
-            </div>
-          </div>
-          <div *ngIf="grid" class="md-card-content">
-            <div uk-grid>
-              <div class="uk-width-1-1">
-                Use our advance tool to create a custom Indicator that suit the needs of your funding KPI's.
-              </div>
-              <div class="uk-width-1-1 uk-flex uk-flex-center">
-                <i class="material-icons md-48">add</i>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
-  </div>
 </div>
 <modal-alert #editIndicatorModal
              [classBody]="'large-modal'"
              (alertOutput)="saveIndicator()"
              [okDisabled]="indicatorFb && (indicatorFb.invalid ||(!indicatorFb.dirty && index !==-1))">
-  <div *ngIf="indicatorFb" class="uk-padding-small" [formGroup]="indicatorFb">
-    <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('name')" label="Title"></div>
-    <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('description')"
-         label="Description" type="textarea">
-    </div>
-    <div class="uk-form-row uk-flex uk-flex-middle">
-      <div dashboard-input class="uk-width-small" [formInput]="indicatorFb.get('isPublic')"
-           label="Accessibility" [options]="indicatorUtils.isPublic" type="select">
-      </div>
-      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('isActive')"
-           label="Visibility" [options]="indicatorUtils.isActive" type="select">
-      </div>
-      <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('width')"
-           type="select" [options]="indicatorUtils.chartSizes"
-           label="Chart Size">
-      </div>
-    </div>
-    <hr class="uk-margin-large-top uk-margin-large-bottom">
-    <div *ngIf="urls" formArrayName="urls">
-      <div dashboard-input class="uk-form-row" *ngFor="let chartUrl of urls.controls;"
-           [formInput]="chartUrl"
-           label="Chart Url"></div>
-    </div>
-    <div *ngIf="indicatorPaths" formArrayName="indicatorPaths">
-      <div *ngFor="let indicatorPath of indicatorPaths.controls; let i=index"
-           [formGroup]="indicatorPath">
-        <div formArrayName="parameters">
-          <div *ngIf="getParameter(i, 'title')" class="uk-form-row">
-            <div dashboard-input
-                 [formInput]="getParameter(i, 'title').get('value')"
-                 label="Chart Title"></div>
-          </div>
-          <div *ngIf="getParameter(i, 'subtitle')" class="uk-form-row">
-            <div dashboard-input
-                 [formInput]="getParameter(i, 'subtitle').get('value')"
-                 label="Chart Subtitle"></div>
-          </div>
-          <div class="uk-grid-medium uk-form-row" uk-grid>
-            <div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
-              <div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
-                   type="select" [options]="indicatorUtils.chartTypes"
-                   label="Chart Type"></div>
-            </div>
-            <div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
-              <div dashboard-input [formInput]="getParameter(i, 'xAxisTitle').get('value')"
-                   label="X-Axis Title"></div>
-            </div>
-            <div *ngIf="getParameter(i, 'yAxisTitle')" class="uk-width-1-3@s">
-              <div dashboard-input [formInput]="getParameter(i, 'yAxisTitle').get('value')"
-                   label="Y-Axis Title"></div>
-            </div>
-            <div *ngIf="getParameter(i, 'start_year')" class="uk-width-1-3@s">
-              <div dashboard-input [formInput]="getParameter(i, 'start_year').get('value')"
-                   label="Year (From)"></div>
-            </div>
-            <div *ngIf="getParameter(i, 'end_year')" class="uk-width-1-3@s">
-              <div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
-                   label="Year (To)"></div>
-            </div>
-          </div>
+    <div *ngIf="indicatorFb" class="uk-padding-small" [formGroup]="indicatorFb">
+        <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('name')" label="Title"></div>
+        <div dashboard-input class="uk-form-row" [formInput]="indicatorFb.get('description')"
+             label="Description" type="textarea">
         </div>
-        <div *ngIf="indicator.indicatorPaths[i].safeResourceUrl" class="uk-margin-medium-top uk-position-relative">
-          <div *ngIf="hasDifference(i) && !indicatorPath.invalid"
-               class="uk-width-1-1 uk-height-medium refresh-iframe">
-            <div class="uk-position-relative uk-height-1-1">
-              <div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator()">
-                <div><i class="material-icons md-color-white">refresh</i></div>
-                <span>Click to refresh the graph view</span>
-              </div>
+        <div class="uk-form-row uk-flex uk-flex-middle">
+            <div dashboard-input class="uk-width-small" [formInput]="indicatorFb.get('isPublic')"
+                 label="Accessibility" [options]="indicatorUtils.isPublic" type="select">
+            </div>
+            <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('isActive')"
+                 label="Visibility" [options]="indicatorUtils.isActive" type="select">
+            </div>
+            <div dashboard-input class="uk-margin-small-left uk-width-small" [formInput]="indicatorFb.get('width')"
+                 type="select" [options]="indicatorUtils.chartSizes"
+                 label="Chart Size">
+            </div>
+        </div>
+        <hr class="uk-margin-large-top uk-margin-large-bottom">
+        <div *ngIf="urls" formArrayName="urls">
+            <div dashboard-input class="uk-form-row" *ngFor="let chartUrl of urls.controls;"
+                 [formInput]="chartUrl"
+                 label="Chart Url"></div>
+        </div>
+        <div *ngIf="indicatorPaths" formArrayName="indicatorPaths">
+            <div *ngFor="let indicatorPath of indicatorPaths.controls; let i=index"
+                 [formGroup]="indicatorPath">
+                <div formArrayName="parameters">
+                    <div *ngIf="getParameter(i, 'title')" class="uk-form-row">
+                        <div dashboard-input
+                             [formInput]="getParameter(i, 'title').get('value')"
+                             label="Chart Title"></div>
+                    </div>
+                    <div *ngIf="getParameter(i, 'subtitle')" class="uk-form-row">
+                        <div dashboard-input
+                             [formInput]="getParameter(i, 'subtitle').get('value')"
+                             label="Chart Subtitle"></div>
+                    </div>
+                    <div class="uk-grid-medium uk-form-row" uk-grid>
+                        <div *ngIf="getParameter(i, 'type')" class="uk-width-1-3@s">
+                            <div dashboard-input [formInput]="getParameter(i, 'type').get('value')"
+                                 type="select" [options]="indicatorUtils.chartTypes"
+                                 label="Chart Type"></div>
+                        </div>
+                        <div *ngIf="getParameter(i, 'xAxisTitle')" class="uk-width-1-3@s">
+                            <div dashboard-input [formInput]="getParameter(i, 'xAxisTitle').get('value')"
+                                 label="X-Axis Title"></div>
+                        </div>
+                        <div *ngIf="getParameter(i, 'yAxisTitle')" class="uk-width-1-3@s">
+                            <div dashboard-input [formInput]="getParameter(i, 'yAxisTitle').get('value')"
+                                 label="Y-Axis Title"></div>
+                        </div>
+                        <div *ngIf="getParameter(i, 'start_year')" class="uk-width-1-3@s">
+                            <div dashboard-input [formInput]="getParameter(i, 'start_year').get('value')"
+                                 label="Year (From)"></div>
+                        </div>
+                        <div *ngIf="getParameter(i, 'end_year')" class="uk-width-1-3@s">
+                            <div dashboard-input [formInput]="getParameter(i, 'end_year').get('value')"
+                                 label="Year (To)"></div>
+                        </div>
+                    </div>
+                </div>
+                <div *ngIf="indicator.indicatorPaths[i].safeResourceUrl"
+                     class="uk-margin-medium-top uk-position-relative">
+                    <div *ngIf="hasDifference(i) && !indicatorPath.invalid"
+                         class="uk-width-1-1 uk-height-medium refresh-iframe">
+                        <div class="uk-position-relative uk-height-1-1">
+                            <div class="uk-position-center md-color-white uk-text-center clickable"
+                                 (click)="refreshIndicator()">
+                                <div><i class="material-icons md-color-white">refresh</i></div>
+                                <span>Click to refresh the graph view</span>
+                            </div>
+                        </div>
+                    </div>
+                    <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
+                            [src]="indicator.indicatorPaths[i].safeResourceUrl"
+                            class="uk-width-1-1 uk-height-medium"></iframe>
+                    <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
+                        <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url">
+                    </div>
+                </div>
             </div>
-          </div>
-          <iframe *ngIf="indicator.indicatorPaths[i].source !== 'image'"
-                  [src]="indicator.indicatorPaths[i].safeResourceUrl"
-                  class="uk-width-1-1 uk-height-medium"></iframe>
-          <div *ngIf="indicator.indicatorPaths[i].source === 'image'">
-            <img class="uk-width-1-1 uk-height-medium" [src]="indicator.indicatorPaths[i].url">
-          </div>
         </div>
-      </div>
     </div>
-  </div>
 </modal-alert>
 <modal-alert #deleteIndicatorModal (alertOutput)="deleteIndicator()"></modal-alert>