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(() => {
|
$(document).ready(() => {
|
||||||
console.log("ready!");
|
console.log("ready!");
|
||||||
});
|
});
|
||||||
@ -2,4 +2,109 @@
|
|||||||
|
|
||||||
<%- include("header") -%>
|
<%- 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