Skip to content

Commit

Permalink
Replace tables with datatable component
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomodwyer
tomodwyer committed Sep 12, 2024
1 parent 321bc7b commit 05eedff
Show file tree
Hide file tree
Showing 5 changed files with 188 additions and 166 deletions.
130 changes: 55 additions & 75 deletions airlock/templates/activity.html
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,68 @@
{% load airlock %}
{% load django_vite %}
{% load static %}

<link rel="stylesheet" href="{% static 'assets/datatable.css' %}">

{% #card title="Recent activity" %}
{% #card title="Recent activity" class="mt-5" %}
{% if activity %}
<div id="airlock-table">
<p class="spinner">Loading table data...</p>
<table class="datatable hidden" id="customTable">
<thead>
{% #datatable paging per_page="25" column_filter searchable sortable %}
<thead>
<tr>
<th>
<div class="flex flex-row gap-2 items-center">
Time
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
<th>
<div class="flex flex-row gap-2 items-center">
User
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
<th>
<div class="flex flex-row gap-2 items-center">
Action
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
<th>
<div class="flex flex-row gap-2 items-center">
Details
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
</tr>
</thead>
<tbody>
{% for log in activity %}
<tr>
<th><div class="flex flex-row gap-2">Time{% datatable_sort_icon %}</div></th>
<th><div class="flex flex-row gap-2">User{% datatable_sort_icon %}</div></th>
<th><div class="flex flex-row gap-2">Action{% datatable_sort_icon %}</div></th>
<th><div class="flex flex-row gap-2">Details{% datatable_sort_icon %}</div></th>
<td>{{ log.created_at|date:'Y-m-d H:i' }}</td>
<td>{{ log.user }}</td>
<td>{{ log.description }}</td>
<td>
<ul>
{% if log.path %}<li><b>path:</b> {{ log.path }}</li>{% endif %}
{% for k,v in log.extra.items %}
<li><b>{{ k }}:</b> {{ v }}</li>
{% endfor %}
</ul>
</td>
</tr>
</thead>
<tbody>
{% for log in activity %}
<tr>
<td>{{ log.created_at|date:'Y-m-d H:i' }}</td>
<td>{{ log.user }}</td>
<td>{{ log.description }}</td>
<td>
<ul>
{% if log.path %}<li><b>path:</b> {{ log.path }}</li>{% endif %}
{% for k,v in log.extra.items %}
<li><b>{{ k }}:</b> {{ v }}</li>
{% endfor %}
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</table>

<nav id="pagination-nav" class="hidden flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3" aria-label="Pagination">
<div class="sm:block">
<p class="text-sm text-gray-700">
Page
<strong data-table-pagination="page-number">#</strong>
of
<strong data-table-pagination="total-pages">#</strong>
</p>
</div>
<div class="flex flex-1 justify-between gap-4 sm:justify-end">
<button
data-table-pagination="previous-page"
class="
px-4 py-2 text-sm font-medium
inline-flex items-center justify-center border rounded-md shadow-sm transition-buttons duration-200
border border-slate-400/75 text-slate-700 !shadow-none
hover:bg-slate-200
focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
hover:shadow-lg
focus:outline-none focus:ring-2 focus:ring-offset-2"
>
Previous
</button>
<button
data-table-pagination="next-page"
class="
px-4 py-2 text-sm font-medium
inline-flex items-center justify-center border rounded-md shadow-sm transition-buttons duration-200
border border-slate-400/75 text-slate-700 !shadow-none
hover:bg-slate-200
focus:bg-slate-200 focus:ring-slate-500 focus:ring-offset-white
hover:shadow-lg
focus:outline-none focus:ring-2 focus:ring-offset-2"
>
Next
</button>
</div>
</nav>
</div>
{% endfor %}
</tbody>
{% /datatable %}
{% else %}
{% #list_group %}
{% list_group_empty title="No activity" description="There has been no recent activity on this workspace" %}
{% /list_group %}
{% endif %}
{% /card %}

{% vite_asset "assets/src/scripts/components.js" app="job_server" %}
<script defer src="{% static 'assets/activity.js' %}"></script>
<script defer src="{% static 'assets/datatable-loader.js' %}"></script>
{% vite_asset "assets/src/datatable.js" %}
88 changes: 53 additions & 35 deletions airlock/templates/file_browser/file_content/csv.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,70 @@
{% load static %}

<!DOCTYPE html>
<html lang="en">
<html lang="en" class="min-h-screen">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

{% vite_hmr_client %}
{% vite_asset "assets/src/scripts/base.js" app="job_server" %}
{% vite_asset "assets/src/scripts/components.js" app="job_server" %}
<link rel="stylesheet" href="{% static 'assets/datatable.css' %}">
<link rel="stylesheet" href="{% static 'assets/icons.css' %}">
{% vite_asset "assets/src/scripts/main.js" %}
{% vite_asset "assets/src/datatable.js" %}
</head>

<body>

<div id="airlock-table">
{% if use_datatables %}
<p class="spinner">Loading table data...</p>
<table class="datatable hidden" id="customTable">
{% #datatable column_filter searchable sortable %}
<thead>
<tr>
{% for header in headers %}
<th>
<div class="flex flex-row gap-2 items-center">
{{ header }}
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
{% for cell in row %}
<td data-order="{{ cell }}">{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
{% /datatable %}
{% else %}
<table>
{% endif %}
<thead>
<tr>
{% for header in headers %}
<th>
<div class="flex flex-row gap-2">
{{ header }}
{% if use_datatables %}
<span class="sort-icon">{% datatable_sort_icon %}</span>
{% endif %}
</dir>
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
{% for cell in row %}
<td data-order="{{ cell }}">{{ cell }}</td>
<thead>
<tr>
{% for header in headers %}
<th>
{{ header }}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
{% for cell in row %}
<td>{{ cell }}</td>
{% endfor %}
</tr>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>

</div>
</tbody>
</table>
{% endif %}

<script src="{% static 'assets/datatable-loader.js' %}"></script>
</body>
</div>
</body>

</html>
29 changes: 14 additions & 15 deletions airlock/templates/file_browser/repo/dir.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,30 @@
{% load static %}
{% load airlock %}

{% block extra_styles %}
<link rel="stylesheet" href="{% static 'assets/file_browser/dir.css' %}">
{% endblock %}

{% #card title=path_item.name container=True %}

{% #table class="dir_table" id="customTable" %}
{% #table_head %}
{% #datatable column_filter searchable sortable %}
<thead>
<tr>
<th>
<div class="flex flex-row gap-2">File{% datatable_sort_icon %}</div>
<div class="flex flex-row gap-2 items-center">
File
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
</tr>
{% /table_head %}
</thead>
<tbody>
{% for path in path_item.children %}
<tr>
<td class="name"><a class="{{ path.html_classes }}" href="{{ path.url }}">{{ path.name }}</a></td>
</tr>
{% endfor %}
</tbody>
{% /table %}

{% vite_asset "assets/src/scripts/components.js" app="job_server" %}

<script src="{% static 'assets/file_browser/dir.js' %}"></script>

{% /datatable %}
{% /card %}

{% vite_hmr_client %}
{% vite_asset "assets/src/datatable.js" %}
<script src="{% static 'assets/file_browser/dir.js' %}"></script>
53 changes: 33 additions & 20 deletions airlock/templates/file_browser/request/dir.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
{% load static %}
{% load airlock %}

{% block extra_styles %}
<link rel="stylesheet" href="{% static 'assets/file_browser/dir.css' %}">
{% endblock %}

{% fragment as buttons %}
{% if content_buttons.multiselect_withdraw.show %}
<div class="div flex flex-col items-start gap-4">
Expand All @@ -17,7 +13,6 @@
{% endif %}
{% endfragment %}


{% #card title=path_item.name container=False custom_button=buttons %}
<form id="multiselect_form"
method="POST"
Expand All @@ -29,28 +24,48 @@
{% csrf_token %}
<input type=hidden name="next_url" value="{{ request.path }}"/>

{% #table class="dir_table" id="customTable" %}
{% #table_head %}
{% #datatable column_filter searchable sortable %}
<thead>
<tr>
<th>
<div class="flex flex-row gap-2">File{% datatable_sort_icon %}</div>
<div class="flex flex-row gap-2 items-center">
File
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
<th>
<div class="flex flex-row gap-2">File Type{% datatable_sort_icon %}</div>
<div class="flex flex-row gap-2 items-center">
File Type
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
<th>
<div class="flex flex-row gap-2">Size{% datatable_sort_icon %}</div>
<div class="flex flex-row gap-2 items-center">
Size
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
<th>
<div class="flex flex-row gap-2">Modified{% datatable_sort_icon %}</div>
<div class="flex flex-row gap-2 items-center">
Modified
<span class="sort-icon h-4 w-4 [&_img]:h-4 [&_img]:w-4">
{% datatable_sort_icon %}
</span>
</div>
</th>
{% if content_buttons.multiselect_withdraw.show %}
<th data-searchable="false" data-sortable="false">
<input class="selectall" type="checkbox" onchange="toggleSelectAll(this)" />
<input class="selectall ml-3" type="checkbox" onchange="toggleSelectAll(this)" />
</th>
{% endif %}
</tr>
{% /table_head %}
</thead>
<tbody>
{% for path in path_item.children %}
<tr>
Expand All @@ -68,12 +83,10 @@
</tr>
{% endfor %}
</tbody>
{% /table %}

{% /datatable %}
</form>

{% vite_asset "assets/src/scripts/components.js" app="job_server" %}

<script src="{% static 'assets/file_browser/dir.js' %}"></script>

{% /card %}

{% vite_hmr_client %}
{% vite_asset "assets/src/datatable.js" %}
<script src="{% static 'assets/file_browser/dir.js' %}"></script>
Loading

0 comments on commit 05eedff

Please sign in to comment.