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