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 uk-flex uk-flex-middle">
13
          <span class="menu_icon"><i class="material-icons md-color-white">arrow_back</i></span>
14
          <div class="menu_title uk-inline">
15
            {{stakeholder.topics[topicIndex].name.toUpperCase()}}
16
            <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
17
                    (click)="$event.stopPropagation();editTopicOpen(editTopic);$event.preventDefault()">
18
              <i class="material-icons md-color-white">more_horiz</i>
19
            </button>
20
          </div>
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="topic">
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>
31
                  <div class="uk-width-1-1">
32
                    <label class="uk-text-bold">Topic Settings</label>
33
                    <input class="uk-input uk-form-small" [(ngModel)]="topic.name"
34
                           [class.uk-form-danger]="!valid && !topic.name" type="text">
35
                  </div>
36
                  <div class="uk-width-1-1">
37
                    <label>Description</label>
38
                    <textarea class="uk-textarea" [(ngModel)]="topic.description"
39
                              rows="3" type="text"></textarea>
40
                  </div>
41
                  <div class="uk-width-1-2">
42
                    <select class="uk-select uk-form-small" [(ngModel)]="topic.isPublic">
43
                      <option [value]="true">Public</option>
44
                      <option [value]="false">Private</option>
45
                    </select>
46
                  </div>
47
                  <div class="uk-width-1-2">
48
                    <select class="uk-select uk-form-small" [(ngModel)]="topic.isActive">
49
                      <option [value]="true">Active</option>
50
                      <option [value]="false">Inactive</option>
51
                    </select>
52
                  </div>
53
                </div>
54
                <hr>
55
                <div class="uk-grid-small uk-child-width-1-2" uk-grid>
56
                  <div>
57
                    <button class="md-btn md-btn-small" (click)="deleteTopicOpen(topic.name, editTopic)">Delete</button>
58
                  </div>
59
                  <div>
60
                    <button class="md-btn md-btn-small md-btn-primary uk-float-right"
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-inline">
79
              {{category.name}}
80
              <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
81
                      (click)="$event.stopPropagation();editCategoryOpen(editCategory, i);$event.preventDefault()">
82
                <i class="material-icons">more_horiz</i>
83
              </button>
84
            </div>
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="copyCategory">
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>
95
                    <div class="uk-width-1-1">
96
                      <label class="uk-text-bold">Category Settings</label>
97
                      <input class="uk-input uk-form-small"
98
                             [(ngModel)]="copyCategory.name"
99
                             [class.uk-form-danger]="!valid && !copyCategory.name" type="text">
100
                    </div>
101
                    <div class="uk-width-1-2">
102
                      <select class="uk-select uk-form-small" [(ngModel)]="copyCategory.isPublic">
103
                        <option [value]="true">Public</option>
104
                        <option [value]="false">Private</option>
105
                      </select>
106
                    </div>
107
                    <div class="uk-width-1-2">
108
                      <select class="uk-select uk-form-small" [(ngModel)]="copyCategory.isActive">
109
                        <option [value]="true">Active</option>
110
                        <option [value]="false">Inactive</option>
111
                      </select>
112
                    </div>
113
                  </div>
114
                  <hr>
115
                  <div class="uk-grid-small uk-child-width-1-2" uk-grid>
116
                    <div>
117
                      <button class="md-btn md-btn-small"
118
                              (click)="deleteCategoryOpen(copyCategory.name, editCategory, i)">Delete
119
                      </button>
120
                    </div>
121
                    <div>
122
                      <button class="md-btn md-btn-small md-btn-primary uk-float-right"
123
                              (click)="saveCategory(editCategory, i)">Save
124
                      </button>
125
                    </div>
126
                  </div>
127
                </div>
128
              </div>
129
            </div>
130
          </div>
131
          <ul [style.display]="((selectedCategoryIndex === i && toggle)?'block':'none')">
132
            <ng-template ngFor [ngForOf]="stakeholder.topics[topicIndex].categories[i].subCategories"
133
                         let-subcategory let-j="index">
134
              <li [class.act_item]="categoryIndex === i && subCategoryIndex === j">
135
                <a href="#" (click)="chooseSubcategory(i, j);$event.preventDefault()">
136
                <span *ngIf="subcategory.icon" class="menu_icon uk-margin-small-right"><i
137
                  class="material-icons">{{subcategory.icon}}</i></span>
138
                  <div class="menu_title uk-inline">
139
                    {{subcategory.name}}
140
                    <button class="uk-position-center-right-out uk-margin-right uk-button uk-button-link onHover"
141
                            (click)="$event.stopPropagation();editSubCategoryOpen(editSubCategory, j);$event.preventDefault()">
142
                      <i class="material-icons">more_horiz</i>
143
                    </button>
144
                  </div>
145
                </a>
146
                <div uk-drop="mode: none; offset: -2; delay-hide: 0" #editSubCategory
147
                     class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
148
                  <div *ngIf="copySubCategory">
149
                    <div class="md-card">
150
                      <div class="md-card-content uk-position-relative">
151
                        <a class="uk-position-top-right">
152
                          <i (click)="hide(editSubCategory)" class="material-icons">close</i>
153
                        </a>
154
                        <div class="uk-grid-small" uk-grid>
155
                          <div class="uk-width-1-1">
156
                            <label class="uk-text-bold">Subcategory Settings</label>
157
                            <input class="uk-input uk-form-small" [(ngModel)]="copySubCategory.name"
158
                                   [class.uk-form-danger]="!valid && !copySubCategory.name" type="text">
159
                          </div>
160
                          <div class="uk-width-1-2">
161
                            <select class="uk-select uk-form-small" [(ngModel)]="copySubCategory.isPublic">
162
                              <option [value]="true">Public</option>
163
                              <option [value]="false">Private</option>
164
                            </select>
165
                          </div>
166
                          <div class="uk-width-1-2">
167
                            <select class="uk-select uk-form-small" [(ngModel)]="copySubCategory.isActive">
168
                              <option [value]="true">Active</option>
169
                              <option [value]="false">Inactive</option>
170
                            </select>
171
                          </div>
172
                        </div>
173
                        <hr>
174
                        <div class="uk-grid-small uk-child-width-1-2" uk-grid>
175
                          <div>
176
                            <button class="md-btn md-btn-small"
177
                                    (click)="deleteSubcategoryOpen(copySubCategory.name, editSubCategory, j)">Delete
178
                            </button>
179
                          </div>
180
                          <div>
181
                            <button class="md-btn md-btn-small md-btn-primary uk-float-right"
182
                                    (click)="saveSubCategory(editSubCategory, j)">Save
183
                            </button>
184
                          </div>
185
                        </div>
186
                      </div>
187
                    </div>
188
                  </div>
189
                </div>
190
              </li>
191
            </ng-template>
192
            <li>
193
              <a href="#" (click)="editSubCategoryOpen(newSubCategory);$event.preventDefault()">
194
                <span class="menu_icon"><i class="material-icons">add</i></span>
195
                <span class="menu_title">Create new Subcategory</span>
196
              </a>
197
              <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newSubCategory
198
                   class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
199
                <div *ngIf="copySubCategory">
200
                  <div class="md-card">
201
                    <div class="md-card-content uk-position-relative">
202
                      <a class="uk-position-top-right">
203
                        <i (click)="hide(newSubCategory)" class="material-icons">close</i>
204
                      </a>
205
                      <div class="uk-grid-small" uk-grid>
206
                        <div class="uk-width-1-1">
207
                          <label class="uk-text-bold">New Subcategory</label>
208
                          <input class="uk-input uk-form-small" [(ngModel)]="copySubCategory.name"
209
                                 [class.uk-form-danger]="!valid && !copySubCategory.name" type="text">
210
                        </div>
211
                        <div class="uk-width-1-2">
212
                          <select class="uk-select uk-form-small" [(ngModel)]="copySubCategory.isPublic">
213
                            <option [value]="true">Public</option>
214
                            <option [value]="false">Private</option>
215
                          </select>
216
                        </div>
217
                        <div class="uk-width-1-2">
218
                          <select class="uk-select uk-form-small" [(ngModel)]="copySubCategory.isActive">
219
                            <option [value]="true">Active</option>
220
                            <option [value]="false">Inactive</option>
221
                          </select>
222
                        </div>
223
                      </div>
224
                      <hr>
225
                      <div class="uk-grid-small uk-child-width-1-2" uk-grid>
226
                        <div>
227
                          <button class="md-btn md-btn-small" (click)="hide(newSubCategory)">Cancel</button>
228
                        </div>
229
                        <div>
230
                          <button class="md-btn md-btn-small md-btn-primary uk-float-right"
231
                                  (click)="saveSubCategory(newSubCategory)">Create
232
                          </button>
233
                        </div>
234
                      </div>
235
                    </div>
236
                  </div>
237
                </div>
238
              </div>
239
            </li>
240
          </ul>
241
        </li>
242
      </ng-template>
243
      <li>
244
        <a href="#" (click)="editCategoryOpen(newCategory);$event.preventDefault()">
245
          <span class="menu_icon"><i class="material-icons">add</i></span>
246
          <span class="menu_title">Create new Category</span>
247
        </a>
248
        <div uk-drop="mode: none; offset: -2; delay-hide: 0" #newCategory
249
             class="uk-padding-large uk-padding-remove-vertical uk-padding-remove-right uk-drop">
250
          <div *ngIf="copyCategory">
251
            <div class="md-card">
252
              <div class="md-card-content uk-position-relative">
253
                <a class="uk-position-top-right">
254
                  <i (click)="hide(newCategory)" class="material-icons">close</i>
255
                </a>
256
                <div class="uk-grid-small" uk-grid>
257
                  <div class="uk-width-1-1">
258
                    <label class="uk-text-bold">New Category</label>
259
                    <input class="uk-input uk-form-small" [(ngModel)]="copyCategory.name"
260
                           [class.uk-form-danger]="!valid && !copyCategory.name" type="text">
261
                  </div>
262
                  <div class="uk-width-1-2">
263
                    <select class="uk-select uk-form-small" [(ngModel)]="copyCategory.isPublic">
264
                      <option [value]="true">Public</option>
265
                      <option [value]="false">Private</option>
266
                    </select>
267
                  </div>
268
                  <div class="uk-width-1-2">
269
                    <select class="uk-select uk-form-small" [(ngModel)]="copyCategory.isActive">
270
                      <option [value]="true">Active</option>
271
                      <option [value]="false">Inactive</option>
272
                    </select>
273
                  </div>
274
                </div>
275
                <hr>
276
                <div class="uk-grid-small uk-child-width-1-2" uk-grid>
277
                  <div>
278
                    <button class="md-btn md-btn-small" (click)="hide(newCategory)">Cancel</button>
279
                  </div>
280
                  <div>
281
                    <button class="md-btn md-btn-small md-btn-primary uk-float-right"
282
                            (click)="saveCategory(newCategory)">Create
283
                    </button>
284
                  </div>
285
                </div>
286
              </div>
287
            </div>
288
          </div>
289
        </div>
290
      </li>
291
    </ul>
292
  </div>
293
</aside>
294
<indicators [properties]="properties"
295
            [stakeholder]="stakeholder"
296
            [topicIndex]="topicIndex"
297
            [categoryIndex]="categoryIndex"
298
            [subcategoryIndex]="subCategoryIndex"></indicators>
299
<modal-alert #deleteTopicModal (alertOutput)="deleteTopic()"></modal-alert>
300
<modal-alert #deleteCategoryModal (alertOutput)="deleteCategory()"></modal-alert>
301
<modal-alert #deleteSubcategoryModal (alertOutput)="deleteSubcategory()"></modal-alert>
302

    
(4-4/6)