Project

General

Profile

1
<aside id="sidebar_main">
2
  <div *ngIf="stakeholder" class="sidebar_main_header uk-margin-remove-bottom">
3
    <div class="uk-padding-small">
4
      <img class="uk-margin-bottom" *ngIf="stakeholder.logoUrl" [src]="stakeholder.logoUrl">
5
      <h4 class="uk-text-bold uk-margin-remove">{{stakeholder.index_name}}</h4>
6
      <span class="uk-text-large">Admin Dashboard</span>
7
    </div>
8
  </div>
9
  <div *ngIf="stakeholder" class="menu_section">
10
    <ul>
11
      <li class="uk-margin-bottom md-bg-blue-900 uk-padding-small">
12
        <a [routerLink]="'../'" class="md-color-white">
13
          <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
14
          <div class="menu_title uk-width-expand">
15
            {{stakeholder.topics[topicIndex].name.toUpperCase()}}
16
          </div>
17
          <span class="uk-width-1-6 onHover"
18
                  (click)="$event.stopPropagation();editTopicOpen(editTopic);$event.preventDefault()">
19
            <i class="material-icons md-color-white">more_horiz</i>
20
          </span>
21
        </a>
22
        <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editTopic
23
             class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
24
          <div *ngIf="topicFb">
25
            <div class="md-card">
26
              <div class="md-card-content uk-position-relative">
27
                <a class="uk-position-top-right">
28
                  <i (click)="hide(editTopic)" class="material-icons">close</i>
29
                </a>
30
                <div class="uk-grid-small" uk-grid [formGroup]="topicFb">
31
                  <div class="uk-width-1-1">
32
                    <label class="uk-text-bold">Topic Settings</label>
33
                    <input class="uk-input uk-form-small" formControlName="name"
34
                           [class.uk-form-danger]="topicFb.get('name').dirty && topicFb.get('name').invalid"
35
                           type="text">
36
                  </div>
37
                  <div class="uk-width-1-1">
38
                    <label>Description</label>
39
                    <textarea class="uk-textarea" formControlName="description"
40
                              rows="3" type="text"></textarea>
41
                  </div>
42
                  <div dashboard-input [type]="'select'"
43
                       [formInput]="topicFb.get('isPublic')" [options]="indicatorUtils.isPublic"
44
                       label="Privacy" class="uk-width-1-2">
45
                  </div>
46
                  <div dashboard-input [type]="'select'"
47
                       [formInput]="topicFb.get('isActive')" [options]="indicatorUtils.isActive"
48
                       label="Status" class="uk-width-1-2">
49
                  </div>
50
                </div>
51
                <hr>
52
                <div class="uk-grid-small uk-child-width-1-2" uk-grid>
53
                  <div>
54
                    <button class="md-btn md-btn-small"
55
                            (click)="deleteTopicOpen(topicFb.value.name, editTopic)">Delete</button>
56
                  </div>
57
                  <div>
58
                    <button class="md-btn md-btn-small md-btn-primary uk-float-right"
59
                            [class.md-btn-primary]="topicFb.valid && topicFb.dirty"
60
                            [class.disabled]="topicFb.invalid || !topicFb.dirty"
61
                            (click)="saveTopic(editTopic)">Save
62
                    </button>
63
                  </div>
64
                </div>
65
              </div>
66
            </div>
67
          </div>
68
        </div>
69
      </li>
70
      <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories" let-category let-i="index">
71
        <li [class.current_section]="categoryIndex === i"
72
            [class.act_section]="selectedCategoryIndex === i && toggle"
73
            [title]="category.name"
74
            class="submenu_trigger">
75
          <a href="#" (click)="toggleCategory(i);hide(editCategory);$event.preventDefault()">
76
            <span *ngIf="category.icon" class="menu_icon"><i
77
              class="material-icons">{{category.icon}}</i></span>
78
            <div class="menu_title uk-width-expand">
79
              {{category.name}}
80
            </div>
81
            <span class="uk-width-1-6 onHover"
82
                    (click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
83
              <i class="material-icons">more_horiz</i>
84
            </span>
85
          </a>
86
          <div uk-drop="mode: none; offset: -2; delay-hide: 0;" #editCategory
87
               class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
88
            <div *ngIf="categoryFb">
89
              <div class="md-card">
90
                <div class="md-card-content uk-position-relative">
91
                  <a class="uk-position-top-right">
92
                    <i (click)="hide(editCategory)" class="material-icons">close</i>
93
                  </a>
94
                  <div class="uk-grid-small" uk-grid [formGroup]="categoryFb">
95
                    <div class="uk-width-1-1">
96
                      <label class="uk-text-bold">Category Settings</label>
97
                      <input class="uk-input uk-form-small" formControlName="name"
98
                             [class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
99
                             type="text">
100
                    </div>
101
                    <div class="uk-width-1-1">
102
                      <label>Description</label>
103
                      <textarea class="uk-textarea" formControlName="description"
104
                                rows="3" type="text"></textarea>
105
                    </div>
106
                    <div dashboard-input [type]="'select'"
107
                         [formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
108
                         label="Privacy" class="uk-width-1-2">
109
                    </div>
110
                    <div dashboard-input [type]="'select'"
111
                         [formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
112
                         label="Status" class="uk-width-1-2">
113
                    </div>
114
                  </div>
115
                  <hr>
116
                  <div class="uk-grid-small uk-child-width-1-2" uk-grid>
117
                    <div>
118
                      <button class="md-btn md-btn-small"
119
                              (click)="deleteCategoryOpen(categoryFb.value.name, editCategory, i)">Delete
120
                      </button>
121
                    </div>
122
                    <div>
123
                      <button class="md-btn md-btn-small md-btn-primary uk-float-right"
124
                              [class.md-btn-primary]="categoryFb.valid && categoryFb.dirty"
125
                              [class.disabled]="categoryFb.invalid || !categoryFb.dirty"
126
                              (click)="saveCategory(editCategory, i)">Save
127
                      </button>
128
                    </div>
129
                  </div>
130
                </div>
131
              </div>
132
            </div>
133
          </div>
134
          <ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
135
            <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
136
                         let-subcategory let-j="index">
137
              <li [class.act_item]="categoryIndex === i && subCategoryIndex === j">
138
                <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
139
                <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
140
                  class="material-icons">{{subcategory.icon}}</i></span>
141
                  <div class="menu_title uk-width-expand">
142
                    {{subcategory.name}}
143
                  </div>
144
                  <span class="uk-width-1-6 onHover"
145
                          (click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
146
                    <i class="material-icons">more_horiz</i>
147
                  </span>
148
                </a>
149
                <div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
150
                     class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
151
                  <div *ngIf="subcategoryFb">
152
                    <div class="md-card">
153
                      <div class="md-card-content uk-position-relative">
154
                        <a class="uk-position-top-right">
155
                          <i (click)="hide(editSubCategory)" class="material-icons">close</i>
156
                        </a>
157
                        <div class="uk-grid-small" uk-grid [formGroup]="subcategoryFb">
158
                          <div class="uk-width-1-1">
159
                            <label class="uk-text-bold">Subcategory Settings</label>
160
                            <input class="uk-input uk-form-small" formControlName="name"
161
                                   [class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
162
                                   type="text">
163
                          </div>
164
                          <div class="uk-width-1-1">
165
                            <label>Description</label>
166
                            <textarea class="uk-textarea" formControlName="description"
167
                                      rows="3" type="text"></textarea>
168
                          </div>
169
                          <div dashboard-input [type]="'select'"
170
                               [formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
171
                               label="Privacy" class="uk-width-1-2">
172
                          </div>
173
                          <div dashboard-input [type]="'select'"
174
                               [formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
175
                               label="Status" class="uk-width-1-2">
176
                          </div>
177
                        </div>
178
                        <hr>
179
                        <div class="uk-grid-small uk-child-width-1-2" uk-grid>
180
                          <div>
181
                            <button class="md-btn md-btn-small"
182
                                    (click)="deleteSubcategoryOpen(subcategoryFb.value.name, editSubCategory, j)">Delete
183
                            </button>
184
                          </div>
185
                          <div>
186
                            <button class="md-btn md-btn-small md-btn-primary uk-float-right"
187
                                    [class.md-btn-primary]="subcategoryFb.valid && subcategoryFb.dirty"
188
                                    [class.disabled]="subcategoryFb.invalid || !subcategoryFb.dirty"
189
                                    (click)="saveSubCategory(editSubCategory, j)">Save
190
                            </button>
191
                          </div>
192
                        </div>
193
                      </div>
194
                    </div>
195
                  </div>
196
                </div>
197
              </li>
198
            </ng-template>
199
            <li>
200
              <a href="#" (click)="editSubCategoryOpen(newSubCategory);$event.preventDefault()">
201
                <span class="menu_icon"><i class="material-icons">add</i></span>
202
                <span class="menu_title">Create new Subcategory</span>
203
              </a>
204
              <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newSubCategory
205
                   class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
206
                <div *ngIf="subcategoryFb">
207
                  <div class="md-card">
208
                    <div class="md-card-content uk-position-relative">
209
                      <a class="uk-position-top-right">
210
                        <i (click)="hide(newSubCategory)" class="material-icons">close</i>
211
                      </a>
212
                      <div class="uk-grid-small" uk-grid [formGroup]="subcategoryFb">
213
                        <div class="uk-width-1-1">
214
                          <label class="uk-text-bold">New Subcategory</label>
215
                          <input class="uk-input uk-form-small" formControlName="name"
216
                                 [class.uk-form-danger]="subcategoryFb.get('name').dirty && subcategoryFb.get('name').invalid"
217
                                 type="text">
218
                        </div>
219
                        <div class="uk-width-1-1">
220
                          <label>Description</label>
221
                          <textarea class="uk-textarea" formControlName="description"
222
                                    rows="3" type="text"></textarea>
223
                        </div>
224
                        <div dashboard-input [type]="'select'"
225
                             [formInput]="subcategoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
226
                             label="Privacy" class="uk-width-1-2">
227
                        </div>
228
                        <div dashboard-input [type]="'select'"
229
                             [formInput]="subcategoryFb.get('isActive')" [options]="indicatorUtils.isActive"
230
                             label="Status" class="uk-width-1-2">
231
                        </div>
232
                      </div>
233
                      <hr>
234
                      <div class="uk-grid-small uk-child-width-1-2" uk-grid>
235
                        <div>
236
                          <button class="md-btn md-btn-small" (click)="hide(newSubCategory)">Cancel</button>
237
                        </div>
238
                        <div>
239
                          <button class="md-btn md-btn-small md-btn-primary uk-float-right"
240
                                  [class.md-btn-primary]="subcategoryFb.valid && subcategoryFb.dirty"
241
                                  [class.disabled]="subcategoryFb.invalid || !subcategoryFb.dirty"
242
                                  (click)="saveSubCategory(newSubCategory)">Create
243
                          </button>
244
                        </div>
245
                      </div>
246
                    </div>
247
                  </div>
248
                </div>
249
              </div>
250
            </li>
251
          </ul>
252
        </li>
253
      </ng-template>
254
      <li>
255
        <a href="#" (click)="editCategoryOpen(newCategory);$event.preventDefault()">
256
          <span class="menu_icon"><i class="material-icons">add</i></span>
257
          <span class="menu_title">Create new Category</span>
258
        </a>
259
        <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newCategory
260
             class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
261
          <div *ngIf="categoryFb">
262
            <div class="md-card">
263
              <div class="md-card-content uk-position-relative">
264
                <a class="uk-position-top-right">
265
                  <i (click)="hide(newCategory)" class="material-icons">close</i>
266
                </a>
267
                <div class="uk-grid-small" uk-grid [formGroup]="categoryFb">
268
                  <div class="uk-width-1-1">
269
                    <label class="uk-text-bold">New Category</label>
270
                    <input class="uk-input uk-form-small" formControlName="name"
271
                           [class.uk-form-danger]="categoryFb.get('name').dirty && categoryFb.get('name').invalid"
272
                           type="text">
273
                  </div>
274
                  <div class="uk-width-1-1">
275
                    <label>Description</label>
276
                    <textarea class="uk-textarea" formControlName="description"
277
                              rows="3" type="text"></textarea>
278
                  </div>
279
                  <div dashboard-input [type]="'select'"
280
                       [formInput]="categoryFb.get('isPublic')" [options]="indicatorUtils.isPublic"
281
                       label="Privacy" class="uk-width-1-2">
282
                  </div>
283
                  <div dashboard-input [type]="'select'"
284
                       [formInput]="categoryFb.get('isActive')" [options]="indicatorUtils.isActive"
285
                       label="Status" class="uk-width-1-2">
286
                  </div>
287
                </div>
288
                <hr>
289
                <div class="uk-grid-small uk-child-width-1-2" uk-grid>
290
                  <div>
291
                    <button class="md-btn md-btn-small" (click)="hide(newCategory)">Cancel</button>
292
                  </div>
293
                  <div>
294
                    <button class="md-btn md-btn-small md-btn-primary uk-float-right"
295
                            [class.md-btn-primary]="categoryFb.valid && categoryFb.dirty"
296
                            [class.disabled]="categoryFb.invalid || !categoryFb.dirty"
297
                            (click)="saveCategory(newCategory)">Create
298
                    </button>
299
                  </div>
300
                </div>
301
              </div>
302
            </div>
303
          </div>
304
        </div>
305
      </li>
306
    </ul>
307
  </div>
308
</aside>
309
<indicators [properties]="properties"
310
            [stakeholder]="stakeholder"
311
            [topicIndex]="topicIndex"
312
            [categoryIndex]="categoryIndex"
313
            [subcategoryIndex]="subCategoryIndex"></indicators>
314
<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
315
<modal-alert #deleteCategoryModal (alertOutput)="deleteCategory()"></modal-alert>
316
<modal-alert #deleteSubcategoryModal (alertOutput)="deleteSubcategory()"></modal-alert>
317

    
(4-4/6)