Project

General

Profile

« Previous | Next » 

Revision 57639

[Monitor Dashboard]: 1. Create indicator Modal 2. Add new fields on stakeholder elements. 3. Add getFullUrl on indicatorUtils.

View differences:

indicators.component.html
73 73
    <div [class.uk-child-width-1-3@m]="grid"
74 74
         [class.uk-child-width-1-2@s]="grid"
75 75
         [class.uk-child-width-1-1]="!grid"
76
         class="uk-grid-match"
76
         class="uk-grid-match uk-grid-small"
77
         [class.list]="!grid"
77 78
         uk-grid>
78 79
      <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
79 80
        <div>
80
          <div class="md-card" [class.uk-width-4-5@xl]="!grid">
81
          <div class="md-card">
81 82
            <div class="md-card-toolbar">
82 83
              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
83 84
                <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
......
118 119
    <div [class.uk-child-width-1-3@m]="grid"
119 120
         [class.uk-child-width-1-2@s]="grid"
120 121
         [class.uk-child-width-1-1]="!grid"
121
         uk-height-match="target: .md-card"
122
         [class.list]="!grid"
123
         class="uk-grid-match uk-grid-small"
122 124
         uk-grid>
123 125
      <ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
124 126
        <div>
125
          <div class="md-card" [class.uk-width-4-5@xl]="!grid">
127
          <div class="md-card">
126 128
            <div class="md-card-toolbar">
127 129
              <div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
128 130
                <ng-template [ngIf]="!grid">
......
154 156
            <div *ngIf="grid" class="md-card-content">
155 157
              <div class="uk-flex uk-flex-center" uk-grid>
156 158
                <div class="uk-width-1-1">
157
                  {{indicator.description}}
159
                  {{indicator.description ? indicator.description : ''}}
158 160
                </div>
159 161
                <div class="uk-width-1-3 uk-text-center"
160 162
                     [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
......
182 184
          </div>
183 185
        </div>
184 186
      </ng-template>
187
      <div>
188
        <div class="md-card clickable" (click)="createIndicatorOpen()">
189
          <div class="md-card-toolbar">
190
            <div class="md-card-toolbar-heading-text"
191
                 [class.uk-flex-middle]="!grid"
192
                 [class.uk-flex]="!grid"
193
                 [class.uk-flex-center]="!grid">
194
              <i *ngIf="!grid" class="material-icons md-36">add</i>
195
              <span>Create a custom Indicator</span>
196
            </div>
197
          </div>
198
          <div *ngIf="grid" class="md-card-content">
199
            <div class="uk-flex uk-flex-center" uk-grid>
200
              <div class="uk-width-1-1">
201
                Use our advance tool to create a custom Indicator that suit the needs of your funding KPI's.
202
              </div>
203
            </div>
204
            <div class="uk-flex uk-flex-center uk-margin-top">
205
              <i class="material-icons md-48">add</i>
206
            </div>
207
          </div>
208
        </div>
209
      </div>
185 210
    </div>
186 211
  </div>
187 212
</div>
213
<modal-alert #createIndicatorModal
214
             (alertOutput)="createIndicator()"
215
             [okDisabled]="indicatorFb && indicatorFb.invalid">
216
  <div *ngIf="indicatorFb" class="uk-form-stacked" [formGroup]="indicatorFb">
217
    <label class="uk-form-label">Name</label>
218
    <div class="uk-form-controls" formArrayName="name">
219
      <input class="uk-input"
220
             [class.uk-form-danger]="indicatorFb.get('name').invalid && indicatorFb.get('name').dirty"
221
             [formControl]="indicatorFb.get('name')">
222
    </div>
223
    <label class="uk-form-label">Description</label>
224
    <div class="uk-form-controls" formArrayName="urls">
225
      <textarea class="uk-textarea" rows="3"
226
                [formControl]="indicatorFb.get('description')"></textarea>
227
    </div>
228
    <label class="uk-form-label">Chart url</label>
229
    <div class="uk-form-controls" formArrayName="urls">
230
      <input class="uk-input"
231
             [class.uk-form-danger]="chartUrl.invalid && chartUrl.dirty"
232
             *ngFor="let chartUrl of urls.controls;"
233
             [formControl]="chartUrl">
234
    </div>
235
  </div>
236
</modal-alert>
237
<!--<modal-alert #editIndicatorModal
238
             (alertOutput)="saveIndicator()"
239
             [okDisabled]="editIndicatorFb && (editIndicatorFb.invalid || !editIndicatorFb.dirty)">
240
  <div *ngIf="editIndicatorFb" class="uk-form-stacked" [formGroup]="editIndicatorFb">
241
    <label class="uk-form-label">Name</label>
242
    <div class="uk-form-controls" formArrayName="name">
243
      <input class="uk-input"
244
             [class.uk-form-danger]="indicatorFb.get('name').status === 'INVALID' && indicatorFb.get('name').dirty"
245
             [formControl]="indicatorFb.get('name')">
246
    </div>
247
    <label class="uk-form-label">Description</label>
248
    <div class="uk-form-controls" formArrayName="urls">
249
      <textarea class="uk-textarea" rows="3"
250
                [formControl]="indicatorFb.get('description')"></textarea>
251
    </div>
252
    <label class="uk-form-label">Chart url</label>
253
    <div class="uk-form-controls" formArrayName="urls">
254
      <input class="uk-input"
255
             [class.uk-form-danger]="chartUrl.status === 'INVALID' && chartUrl.dirty"
256
             *ngFor="let chartUrl of urls.controls;"
257
             [formControl]="chartUrl">
258
    </div>
259
  </div>
260
</modal-alert>-->

Also available in: Unified diff