feat: basic table on feeds view
This commit is contained in:
parent
fa872e9899
commit
78ab28e73c
62
src/client/typescript/guild/feeds.ts
Normal file
62
src/client/typescript/guild/feeds.ts
Normal file
@ -0,0 +1,62 @@
|
||||
import $ from "jquery";
|
||||
import HSDropdown from "@preline/dropdown";
|
||||
import HSDataTable, { IDataTableOptions } from "@preline/datatable";
|
||||
import { ConfigColumnDefs, AjaxSettings } from "datatables.net-dt";
|
||||
|
||||
const emptyTableHtml: string = `
|
||||
<div class="max-w-md w-full min-h-[400px] flex flex-col justify-center mx-auto px-6 py-4">
|
||||
<div class="flex justify-center items-center size-[46px] bg-gray-100 rounded-lg dark:bg-neutral-800">
|
||||
<svg class="shrink-0 size-6 text-gray-600 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
|
||||
</div>
|
||||
<h2 class="mt-5 font-semibold text-gray-800 dark:text-white">
|
||||
No results found
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-neutral-400">
|
||||
Create a subscription and it will appear here.
|
||||
</p>
|
||||
|
||||
<div class="mt-5 flex flex-col sm:flex-row gap-2">
|
||||
<button type="button" class="openSubModal-js py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#subModal">
|
||||
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
|
||||
Create a subscription
|
||||
</button>
|
||||
<button type="button" onclick="alert('not implemented');" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-xs hover:bg-gray-50 focus:outline-hidden focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
|
||||
Use a Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const columnDefs: ConfigColumnDefs[] = [];
|
||||
|
||||
const ajaxSettings: AjaxSettings = {
|
||||
url: ``,
|
||||
dataSrc: "data",
|
||||
data: (data: unknown) => {
|
||||
if (data === undefined) return;
|
||||
// TODO
|
||||
}
|
||||
};
|
||||
|
||||
const tableOptions: IDataTableOptions = {
|
||||
ajax: ajaxSettings,
|
||||
serverSide: true,
|
||||
processing: true,
|
||||
columnDefs: columnDefs,
|
||||
pagingOptions: { pageBtnClasses: "hidden" },
|
||||
rowSelectingOptions: { selectAllSelector: "#selectAllBox" },
|
||||
language: {
|
||||
zeroRecords: emptyTableHtml,
|
||||
emptyTable: emptyTableHtml,
|
||||
loadingRecords: "Placeholder loading message..."
|
||||
},
|
||||
drawCallback: () => HSDropdown.autoInit(),
|
||||
rowCallback: (row: HTMLTableRowElement) => {
|
||||
$(row).addClass("bg-white dark:bg-neutral-900");
|
||||
}
|
||||
};
|
||||
|
||||
const table: HSDataTable = new HSDataTable(
|
||||
$("#table").get(0),
|
||||
tableOptions
|
||||
);
|
||||
@ -1,3 +1,4 @@
|
||||
import $ from "jquery";
|
||||
$(document).ready(() => {
|
||||
console.log("ready!");
|
||||
});
|
||||
@ -2,4 +2,109 @@
|
||||
|
||||
<%- include("header") -%>
|
||||
|
||||
Feeds page placeholder
|
||||
<div id="table" class="--prevent-on-load-init max-w-full overflow-hidden px-4 sm:px-6">
|
||||
<div class="flex flex-col">
|
||||
<div class="-m-1.5">
|
||||
<div class="max-w-full min-w-full p-1.5 inline-block align-middle">
|
||||
<div class="bg-white border border-gray-200 rounded-lg shadow-xs overflow-hidden dark:bg-neutral-900 dark:border-neutral-700">
|
||||
|
||||
<!-- Header -->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="min-w-full overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
|
||||
<thead class="border-none bg-gray-50 dark:bg-neutral-800">
|
||||
<tr>
|
||||
<th scope="col" class="ps-6 py-3 text-start --exclude-from-ordering">
|
||||
<label for="selectAllBox" class="">
|
||||
<input type="checkbox" id="selectAllBox" class="form-checkbox shrink-0 border-gray-300 rounded-sm text-blue-600 focus:ring-blue-500 disabled:opacity-50 dark:bg-neutral-800 dark:border-neutral-600 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
|
||||
<span class="sr-only">Checkbox</span>
|
||||
</label>
|
||||
</th>
|
||||
<th scope="col" data-dt-column="name" class="px-6 py-3 text-start">
|
||||
<div class="flex justify-between item-center gap-x-2 cursor-pointer">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
|
||||
Name
|
||||
</span>
|
||||
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
|
||||
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-start">
|
||||
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
|
||||
URL
|
||||
</span>
|
||||
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
|
||||
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
|
||||
<div class="flex justify-between items-center gap-x-2">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
|
||||
Channels
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-start --exclude-from-ordering">
|
||||
<div class="flex justify-between items-center gap-x-2">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
|
||||
Filters
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-start">
|
||||
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
|
||||
Style
|
||||
</span>
|
||||
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
|
||||
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-start">
|
||||
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200 text-nowrap">
|
||||
Created at
|
||||
</span>
|
||||
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
|
||||
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-start">
|
||||
<div class="flex justify-between items-center gap-x-2 cursor-pointer">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-neutral-200">
|
||||
Status
|
||||
</span>
|
||||
<svg class="size-3.5 ms-1 -me-0.5 text-gray-400 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path class="hs-datatable-ordering-desc:text-blue-600 dark:hs-datatable-ordering-desc:text-blue-500" d="m7 15 5 5 5-5"></path>
|
||||
<path class="hs-datatable-ordering-asc:text-blue-600 dark:hs-datatable-ordering-asc:text-blue-500" d="m7 9 5-5 5 5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% block("scripts").append('<script src="/static/bundles/guild/feeds.js"></script>'); %>
|
||||
Loading…
x
Reference in New Issue
Block a user