Skip to content

Commit 986f416

Browse files
committed
fix the display of the reindexing pane and annotate html file for clarity
1 parent 1f70b32 commit 986f416

File tree

2 files changed

+148
-49
lines changed

2 files changed

+148
-49
lines changed

sde_indexing_helper/static/js/collection_list.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ let table = $("#collection_table").DataTable({
170170
searchPanes: {
171171
show: false,
172172
},
173-
targets: [7, 8, 9], // Added 9 for reindexing status ID
173+
targets: [8, 9, 10], // this hides the id columns for reindexing status and some other one
174174
},
175175
{
176176
searchPanes: {
@@ -205,6 +205,7 @@ $("#collection-dropdown-5").on("change", function () {
205205
.draw();
206206
});
207207

208+
208209
$("#nameFilter").on("keyup", function () {
209210
table.columns(0).search(this.value).draw();
210211
});
@@ -340,16 +341,16 @@ function handleReindexingStatusSelect() {
340341
$button.addClass(color_choices[parseInt(reindexing_status)]);
341342
var row = table.row("#" + collection_id);
342343
let index = row.index();
343-
var $html = $("<div />", { html: table.data()[index][9] }); // Assuming this is column index 9
344+
var $html = $("<div />", { html: table.data()[index][7] }); // Assuming this is column index 7
344345
$html.find("button").html(reindexing_status_text);
345346
$html
346347
.find("button")
347348
.removeClass(
348349
"btn-light btn-danger btn-warning btn-info btn-success btn-primary btn-secondary"
349350
);
350351
$html.find("button").addClass(color_choices[parseInt(reindexing_status)]);
351-
table.data()[index][9] = $html.html();
352-
$("#collection_table").DataTable().searchPanes.rebuildPane(9);
352+
table.data()[index][7] = $html.html();
353+
$("#collection_table").DataTable().searchPanes.rebuildPane(7);
353354

354355
postReindexingStatus(collection_id, reindexing_status);
355356
});

sde_indexing_helper/templates/sde_collections/collection_list.html

Lines changed: 143 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -11,137 +11,231 @@
1111
{% block content %}
1212
{% csrf_token %}
1313
<br>
14-
<h2 class="title">Welcome back!</h2>
15-
<table id="collection_table" class="table table-striped" style="width:100%" >
16-
<thead class="tableHeader">
17-
<tr>
18-
<th class="text-center noBorder" style="padding-right:25px !important">Name</th>
19-
<th class="text-center noBorder url-th" style="padding-right:25px !important">Url</th>
20-
<th class="text-center noBorder" style="padding-right:25px !important">Division</th>
21-
<th class="text-center noBorder" style="padding-right:25px !important">Delta Urls</th>
22-
<th class="text-center noBorder" style="padding-right:25px !important">Workflow Status</th>
23-
<th class="text-center noBorder" style="padding-right:25px !important">Curator</th>
24-
<th class="text-center noBorder" style="padding-right:25px !important">Connector Type</th>
25-
<th class="text-center noBorder" style="padding-right:25px !important">Reindexing Status</th>
26-
<th class="hideDisplay"></th>
27-
<th class="hideDisplay"></th>
28-
<th class="hideDisplay"></th>
29-
</tr>
30-
<tr>
31-
<td class="filterRowBottom" ><input class="table_filter_row_input textBoxStyling" type="text" id="nameFilter" placeholder="Name" /></td>
32-
<td class="filterRowBottom url-td"><input class="table_filter_row_input textBoxStyling" type="text" id="urlFilter" placeholder="URL" /></td>
33-
<td class="filterRowBottom"><input class="table_filter_row_input textBoxStyling" type="text" id="divisionFilter" placeholder="Division" /></td>
34-
<td class="filterRowBottom"></td>
35-
<td class="filterRowBottom"><select id="collection-dropdown-4" class="select-dropdown selectStyling">
14+
<!-- Page Title -->
15+
<h2 class="title">Welcome back!</h2>
16+
17+
<!-- Main Collections Table -->
18+
<table id="collection_table" class="table table-striped" style="width:100%">
19+
<thead class="tableHeader">
20+
<!-- Column Headers Row -->
21+
<tr>
22+
<!-- Visible Columns -->
23+
<th class="text-center noBorder" style="padding-right:25px !important">Name</th>
24+
<th class="text-center noBorder url-th" style="padding-right:25px !important">Url</th>
25+
<th class="text-center noBorder" style="padding-right:25px !important">Division</th>
26+
<th class="text-center noBorder" style="padding-right:25px !important">Delta Urls</th>
27+
<th class="text-center noBorder" style="padding-right:25px !important">Workflow Status</th>
28+
<th class="text-center noBorder" style="padding-right:25px !important">Curator</th>
29+
<th class="text-center noBorder" style="padding-right:25px !important">Connector Type</th>
30+
<th class="text-center noBorder" style="padding-right:25px !important">Reindexing Status</th>
31+
32+
<!-- Hidden Columns - Used for internal data storage -->
33+
<th class="hideDisplay"></th>
34+
<th class="hideDisplay"></th>
35+
<th class="hideDisplay"></th>
36+
</tr>
37+
38+
<!-- Filter Row - Contains inputs and dropdowns for filtering table data -->
39+
<tr>
40+
<!-- Text input filter for Name -->
41+
<td class="filterRowBottom">
42+
<input class="table_filter_row_input textBoxStyling"
43+
type="text"
44+
id="nameFilter"
45+
placeholder="Name" />
46+
</td>
47+
48+
<!-- Text input filter for URL -->
49+
<td class="filterRowBottom url-td">
50+
<input class="table_filter_row_input textBoxStyling"
51+
type="text"
52+
id="urlFilter"
53+
placeholder="URL" />
54+
</td>
55+
56+
<!-- Text input filter for Division -->
57+
<td class="filterRowBottom">
58+
<input class="table_filter_row_input textBoxStyling"
59+
type="text"
60+
id="divisionFilter"
61+
placeholder="Division" />
62+
</td>
63+
64+
<!-- Empty cell for Delta Urls (no filter) -->
65+
<td class="filterRowBottom"></td>
66+
67+
<!-- Dropdown filter for Workflow Status -->
68+
<td class="filterRowBottom">
69+
<select id="collection-dropdown-4" class="select-dropdown selectStyling">
3670
<option value="">SELECT</option>
37-
{% for choice in workflow_status_choices %}
38-
<option value="{{ choice }}" data-collection-id={{ collection.id }}>{{ choice.label }}</option>
39-
{% endfor %}
40-
</select></td>
41-
<td class="filterRowBottom"><select id="collection-dropdown-5" class="select-dropdown selectStyling">
71+
{% for choice in workflow_status_choices %}
72+
<option value="{{ choice }}"
73+
data-collection-id={{ collection.id }}>{{ choice.label }}</option>
74+
{% endfor %}
75+
</select>
76+
</td>
77+
78+
<!-- Dropdown filter for Curator -->
79+
<td class="filterRowBottom">
80+
<select id="collection-dropdown-5" class="select-dropdown selectStyling">
4281
<option value="">SELECT</option>
4382
{% for curator in curators %}
44-
<option value="{{ curator.pk }}" data-collection-id={{ collection.id }}>{{ curator.username }}</option>
45-
{% endfor %}
46-
</select></td>
47-
<td class="filterRowBottom"><input class="table_filter_row_input textBoxStyling" type="text" id="connectorTypeFilter" placeholder="Connector Type" /></td>
48-
<td class="filterRowBottom"><select id="collection-dropdown-6" class="select-dropdown selectStyling">
83+
<option value="{{ curator.pk }}"
84+
data-collection-id={{ collection.id }}>{{ curator.username }}</option>
85+
{% endfor %}
86+
</select>
87+
</td>
88+
89+
<!-- Text input filter for Connector Type -->
90+
<td class="filterRowBottom">
91+
<input class="table_filter_row_input textBoxStyling"
92+
type="text"
93+
id="connectorTypeFilter"
94+
placeholder="Connector Type" />
95+
</td>
96+
97+
<!-- Dropdown filter for Reindexing Status -->
98+
<td class="filterRowBottom">
99+
<select id="collection-dropdown-6" class="select-dropdown selectStyling">
49100
<option value="">SELECT</option>
50101
{% for choice in reindexing_status_choices %}
51-
<option value="{{ choice }}" data-collection-id={{ collection.id }}>{{ choice.label }}</option>
102+
<option value="{{ choice }}"
103+
data-collection-id={{ collection.id }}>{{ choice.label }}</option>
52104
{% endfor %}
53-
</select></td>
54-
<td class="hideDisplay"></td>
55-
<td class="hideDisplay"></td>
56-
<th class="hideDisplay"></th>
57-
</tr>
58-
</thead>
105+
</select>
106+
</td>
59107

108+
<!-- Hidden cells corresponding to hidden columns -->
109+
<td class="hideDisplay"></td> <!-- Stores raw workflow_status value (number) -->
110+
<td class="hideDisplay"></td> <!-- Stores raw curated_by_id value -->
111+
<td class="hideDisplay"></td> <!-- Stores raw reindexing_status value (number) -->
112+
</tr>
113+
</thead>
60114
<tbody>
115+
<!-- Universal search bar above the table -->
61116
<div class="search-container">
62117
<label for="collectionSearch">Universal Search</label>
63118
<input type="text" id="collectionSearch" placeholder="Type to search..." class="table_filter_row_input textBoxStyling">
64119
</div>
120+
121+
<!-- Iterate through each collection to create table rows -->
65122
{% for collection in collections %}
66123
<tr id="{{ collection.id }}" data-config-folder="{{ collection.config_folder }}">
124+
<!-- Name Column with Link -->
67125
<td class="noBorder">
68-
<a class="nameStyling" href="{% url 'sde_collections:detail' collection.pk %}">{{ collection.name }} <i class="material-icons">chevron_right</i></a>
126+
<a class="nameStyling" href="{% url 'sde_collections:detail' collection.pk %}">
127+
{{ collection.name }}
128+
<i class="material-icons">chevron_right</i>
129+
</a>
69130
</td>
131+
132+
<!-- URL Column with External Link -->
70133
<td class="url-td whiteText noBorder">
71134
{% if collection.url %}
72135
<div class="url-cell">
136+
<!-- URL text with tooltip -->
73137
<span class="url" title="{{collection.url}}">{{ collection.url }}</span>
74-
<a class="url-link" target="_blank" href=" {{ collection.url }} "> <i class="material-icons urlIcon">open_in_new</i></a></div>
138+
<!-- External link icon -->
139+
<a class="url-link" target="_blank" href=" {{ collection.url }} ">
140+
<i class="material-icons urlIcon">open_in_new</i>
141+
</a>
142+
</div>
75143
{% endif %}
76144
</td>
145+
146+
<!-- Division Column -->
77147
<td class="whiteText noBorder">{{ collection.get_division_display }}</td>
148+
149+
<!-- Delta URLs Column - Shows count and links if > 0 -->
78150
<td class="noBorder centerAlign">
79151
<a href=" {% if collection.num_delta_urls > 0 %} {% url 'sde_collections:delta_urls' collection.pk %} {% endif %} "
80152
class="btn btn-sm {% if collection.num_delta_urls > 0 %}btn-primary {% else %}disabled{% endif %}candidateCount"
81153
role="button">{{ collection.num_delta_urls|intcomma }}</a>
82154
</td>
155+
156+
<!-- Workflow Status Dropdown -->
83157
<td class="noBorder">
84158
<div class="dropdown workflow_status_dropdown"
85159
data-match-pattern
86160
remove_protocol
87161
row
88162
url>
163+
<!-- Workflow status button with dynamic color -->
89164
<button class="btn {{ collection.workflow_status_button_color }} btn-sm dropdown-toggle"
90165
type="button"
91166
id="workflow-status-button-{{ collection.id }}"
92167
data-toggle="dropdown"
93168
aria-haspopup="true"
94169
aria-expanded="false">{{ collection.get_workflow_status_display }}</button>
170+
<!-- Dropdown menu with all possible workflow statuses -->
95171
<div class="dropdown-menu"
96172
aria-labelledby="workflow-status-button-{{ collection.id }}">
97173
{% for choice in workflow_status_choices %}
98-
<a class="dropdown-item workflow_status_select" value="{{ choice }}" data-collection-id={{ collection.id }} >{{ choice.label }}</a>
174+
<a class="dropdown-item workflow_status_select"
175+
value="{{ choice }}"
176+
data-collection-id={{ collection.id }}>{{ choice.label }}</a>
99177
{% endfor %}
100178
</div>
101179
</div>
102180
</td>
181+
182+
<!-- Curator Dropdown -->
103183
<td class="noBorder">
104184
<div class="dropdown curator_dropdown"
105185
data-match-pattern
106186
remove_protocol
107187
row
108188
url>
189+
<!-- Curator button - green if assigned, dark if not -->
109190
<button class="btn {% if collection.curated_by %} btn-success {% else %} btn-dark {% endif %} btn-sm dropdown-toggle"
110191
type="button"
111192
id="curator-button-{{ collection.id }}"
112193
data-toggle="dropdown"
113194
aria-haspopup="true"
114195
aria-expanded="false">{{ collection.curated_by }}</button>
196+
<!-- Dropdown menu with all possible curators -->
115197
<div class="dropdown-menu"
116198
aria-labelledby="curator-button-{{ collection.id }}">
117199
{% for curator in curators %}
118-
<a key="{{ curator.pk }}" class="dropdown-item curator_select" value="{{ curator.pk }}" data-collection-id={{ collection.id }}
119-
>{{ curator.username }}</a>
200+
<a key="{{ curator.pk }}"
201+
class="dropdown-item curator_select"
202+
value="{{ curator.pk }}"
203+
data-collection-id={{ collection.id }}>{{ curator.username }}</a>
120204
{% endfor %}
121205
</div>
122206
</div>
123207
</td>
208+
209+
<!-- Connector Type Column -->
124210
<td class="whiteText noBorder">{{ collection.get_connector_display }}</td>
211+
212+
<!-- Reindexing Status Dropdown -->
125213
<td class="noBorder">
126214
<div class="dropdown reindexing_status_dropdown"
127215
data-match-pattern
128216
remove_protocol
129217
row
130218
url>
219+
<!-- Reindexing status button with dynamic color -->
131220
<button class="btn {{ collection.reindexing_status_button_color }} btn-sm dropdown-toggle"
132221
type="button"
133222
id="reindexing-status-button-{{ collection.id }}"
134223
data-toggle="dropdown"
135224
aria-haspopup="true"
136225
aria-expanded="false">{{ collection.get_reindexing_status_display }}</button>
226+
<!-- Dropdown menu with all possible reindexing statuses -->
137227
<div class="dropdown-menu"
138228
aria-labelledby="reindexing-status-button-{{ collection.id }}">
139229
{% for choice in reindexing_status_choices %}
140-
<a class="dropdown-item reindexing_status_select" value="{{ choice }}" data-collection-id={{ collection.id }} >{{ choice.label }}</a>
230+
<a class="dropdown-item reindexing_status_select"
231+
value="{{ choice }}"
232+
data-collection-id={{ collection.id }}>{{ choice.label }}</a>
141233
{% endfor %}
142234
</div>
143235
</div>
144236
</td>
237+
238+
<!-- Hidden columns for internal use -->
145239
<td class="hideDisplay">{{ collection.workflow_status }}</td>
146240
<td class="hideDisplay">{{ collection.curated_by_id }}</td>
147241
<td class="hideDisplay">{{ collection.reindexing_status }}</td>
@@ -150,15 +244,19 @@ <h2 class="title">Welcome back!</h2>
150244
</tbody>
151245
</table>
152246

247+
<!-- Column Customization Modal -->
153248
<div id="hideShowColumnsModal" class="modal pr-4 pl-4 pt-4 customizeColumnContainer">
154249
<div class="modalDialog">
155250
<div class="modalContent">
251+
<!-- Modal Header -->
156252
<div class="modalHeader ">
157253
<h5 class="modalTitle whiteText" id="hideShowColumnsModalTitle">Customize Columns</h5>
158254
<p id="subTitle" class="whiteText">Attributes marked with a checkbox will be displayed in the table.</p>
159255
</div>
256+
<!-- Modal Form -->
160257
<form id="hide_show_columns_form">
161258
<div class="modalBody whiteText" id="modalBody">
259+
<!-- Checkboxes are dynamically inserted here by JavaScript -->
162260
</div>
163261
<div class="modalFooter customizeColumnContainer">
164262
<div type="submit" class="btn-prime hideShowSubmitButton" id="hideShowSubmitButton">Confirm</div>

0 commit comments

Comments
 (0)