make admin table resizable

This commit is contained in:
2023-08-29 00:43:15 +02:00
parent 3e259872b3
commit 1fb71fe899
11 changed files with 148 additions and 34 deletions

View File

@ -28,7 +28,11 @@
<div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
{#if type === 'submit'}
<input
class={`btn btn-${size}`}
class="btn"
class:btn-xs={size === 'xs'}
class:btn-sm={size === 'sm'}
class:btn-md={size === 'md'}
class:btn-lg={size === 'lg'}
{id}
type="submit"
{disabled}
@ -49,9 +53,16 @@
{/if}
<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
<input
class={type === 'checkbox' ? `checkbox-${size}` : `input-${size}`}
class:checkbox={type === 'checkbox'}
class:input,input-bordered,w-[100%]={type !== 'checkbox'}
class:checkbox-xs={type === 'checkbox' && size === 'xs'}
class:checkbox-sm={type === 'checkbox' && size === 'sm'}
class:checkbox-md={type === 'checkbox' && size === 'md'}
class:checkbox-lg={type === 'checkbox' && size === 'lg'}
class:input,input-bordered,w-full={type !== 'checkbox'}
class:input-xs={type !== 'checkbox' && size === 'xs'}
class:input-sm={type !== 'checkbox' && size === 'sm'}
class:input-md={type !== 'checkbox' && size === 'md'}
class:input-lg={type !== 'checkbox' && size === 'lg'}
class:pr-11={initialType === 'password'}
{id}
{name}

View File

@ -6,6 +6,7 @@
export let notice: string | null = null;
export let required = false;
export let disabled = false;
export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
</script>
<div>
@ -20,7 +21,11 @@
</label>
{/if}
<select
class="input input-bordered w-[100%] sm:max-w-[16rem]"
class="select select-bordered w-[100%] sm:max-w-[16rem]"
class:select-xs={size === 'xs'}
class:select-sm={size === 'sm'}
class:select-md={size === 'md'}
class:select-lg={size === 'lg'}
{id}
{name}
{required}

View File

@ -3,3 +3,52 @@ export async function buttonTriggeredRequest<T>(e: MouseEvent, promise: Promise<
await promise;
(e.target as HTMLButtonElement).disabled = false;
}
export function resizeTableColumn(event: MouseEvent, dragOffset: number) {
const element = event.target as HTMLTableCellElement;
const rect = element.getBoundingClientRect();
const posX = event.clientX - rect.left;
const offset = rect.width - event.clientX;
if (posX <= dragOffset || posX >= rect.width - dragOffset) {
// do not resize if resize request is on the table left or right
if (
(posX <= dragOffset && !element.previousElementSibling) ||
(posX >= rect.width - dragOffset && !element.nextElementSibling)
) {
return;
}
const table = element.parentElement!.parentElement!.parentElement as HTMLTableElement;
let resizeRow: HTMLTableRowElement;
if (table.tBodies[0].rows[0].hidden) {
resizeRow = table.rows[0];
} else {
resizeRow = table.tBodies[0].insertRow(0);
resizeRow.hidden = true;
for (let i = 0; i < table.rows[0].cells.length; i++) {
resizeRow.insertCell();
}
// insert an additional to keep the zebra in place pattern which might be applied
const zebraGhostRow = table.tBodies[0].insertRow(0);
zebraGhostRow.hidden = true;
}
const resizeElement =
resizeRow.cells[element.cellIndex - ((posX <= dragOffset) as unknown as number)];
// eslint-disable-next-line svelte/no-inner-declarations,no-inner-declarations
function resize(e: MouseEvent) {
document.body.style.cursor = 'col-resize';
resizeElement.style.width = `${offset + e.clientX}px`;
}
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', resize);
document.body.style.cursor = 'initial';
});
}
}

View File

@ -6,9 +6,11 @@ export class Permissions {
readonly value: number;
constructor(value: number | number[]) {
constructor(value: number | number[] | null) {
if (typeof value == 'number') {
this.value = value;
} else if (value == null) {
this.value = 0;
} else {
let finalValue = 0;
for (const v of Object.values(value)) {