make admin table resizable
This commit is contained in:
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -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';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -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)) {
|
||||
|
Reference in New Issue
Block a user