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

    
(4-4/6)