(add): Sheets, Ticket Search
This commit is contained in:
dbob16 committed
1 parent
cdbac0e69a
commit
76040c1f91
23 files changed
+735
-179
No files matched your search
@@ -0,0 +1,10 @@
|
||||
export const load = async ({ fetch }) => {
|
||||
const prefix = {
|
||||
prefix: '',
|
||||
color: 'gray',
|
||||
weight: 0
|
||||
};
|
||||
const res = await fetch('/api/prefixes');
|
||||
const prefixes = await res.json();
|
||||
return { prefix, prefixes };
|
||||
};
|
||||
@@ -0,0 +1,233 @@
|
||||
<script>
|
||||
import { browser } from '$app/environment';
|
||||
import { bS, iS, rBS, tS } from '$lib/client/styles';
|
||||
import HeaderBar from '$lib/client/components/HeaderBar.svelte';
|
||||
import CommandBar from '$lib/client/components/CommandBar.svelte';
|
||||
import TicketSearchBar from '$lib/client/components/TicketSearchBar.svelte';
|
||||
|
||||
let { data } = $props();
|
||||
let { prefix, prefixes } = $derived(data);
|
||||
|
||||
let pageTitle = 'Ticket Search | TAM';
|
||||
|
||||
let curIdx = $state(0),
|
||||
nextIdx = $derived(curIdx + 1),
|
||||
prevIdx = $derived(curIdx - 1);
|
||||
const changeIdx = (idx) => {
|
||||
curIdx = idx;
|
||||
};
|
||||
const focusIdx = (idx) => {
|
||||
curIdx = idx;
|
||||
const elemIdx = document.getElementById(`${idx}_first`);
|
||||
if (elemIdx) {
|
||||
elemIdx.select();
|
||||
}
|
||||
};
|
||||
|
||||
let colorMap = $derived.by(() => {
|
||||
const mapData = {};
|
||||
[...prefixes].forEach((p) => (mapData[p.prefix] = p.color));
|
||||
return mapData;
|
||||
});
|
||||
|
||||
let searchForm = $state({ first_name: '', last_name: '', phone_number: '' });
|
||||
let items = $state([]);
|
||||
let itemsBuffer = $derived(items.filter((i) => i.changed));
|
||||
const functions = {
|
||||
search: async () => {
|
||||
const searchParams = new URLSearchParams({ ...searchForm });
|
||||
const res = await fetch(`/api/search/tickets?${searchParams.toString()}`);
|
||||
if (res.ok) {
|
||||
const resData = await res.json();
|
||||
items = [...resData];
|
||||
setTimeout(() => focusIdx(0), 1);
|
||||
}
|
||||
},
|
||||
save: async () => {
|
||||
if (itemsBuffer.length > 0) {
|
||||
const res = await fetch('/api/search/tickets', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(itemsBuffer)
|
||||
});
|
||||
if (res.ok) {
|
||||
itemsBuffer.forEach((i) => (i.changed = false));
|
||||
} else {
|
||||
alert('Error saving items.');
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
focusIdx(0);
|
||||
}, 1);
|
||||
},
|
||||
nextLine: () => {
|
||||
if (items[nextIdx]) {
|
||||
setTimeout(() => {
|
||||
focusIdx(nextIdx);
|
||||
}, 1);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
focusIdx(curIdx);
|
||||
}, 1);
|
||||
}
|
||||
},
|
||||
prevLine: () => {
|
||||
if (curIdx > 0) {
|
||||
setTimeout(() => {
|
||||
focusIdx(prevIdx);
|
||||
}, 1);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
focusIdx(curIdx);
|
||||
}, 1);
|
||||
}
|
||||
},
|
||||
dupDown: () => {
|
||||
if (items[nextIdx]) {
|
||||
const buffer = { ...items[curIdx] };
|
||||
['prefix', 't_id'].forEach((key) => delete buffer[key]);
|
||||
items[nextIdx] = { ...items[nextIdx], ...buffer, changed: true };
|
||||
functions.nextLine();
|
||||
} else {
|
||||
focusIdx(curIdx);
|
||||
}
|
||||
},
|
||||
dupUp: () => {
|
||||
if (curIdx > 0) {
|
||||
const buffer = { ...items[curIdx] };
|
||||
['prefix', 't_id'].forEach((key) => delete buffer[key]);
|
||||
items[prevIdx] = { ...items[prevIdx], ...buffer, changed: true };
|
||||
functions.prevLine();
|
||||
} else {
|
||||
focusIdx(curIdx);
|
||||
}
|
||||
},
|
||||
copy: () => {
|
||||
if (items[curIdx]) {
|
||||
const buffer = { ...items[curIdx] };
|
||||
['prefix', 't_id'].forEach((key) => delete buffer[key]);
|
||||
window.localStorage.setItem('tam-ticket', JSON.stringify(buffer));
|
||||
}
|
||||
setTimeout(() => focusIdx(curIdx), 1);
|
||||
},
|
||||
paste: () => {
|
||||
if (items[curIdx]) {
|
||||
const buffer = JSON.parse(window.localStorage.getItem('tam-ticket'));
|
||||
items[curIdx] = { ...items[curIdx], ...buffer, changed: true };
|
||||
}
|
||||
setTimeout(() => focusIdx(curIdx), 1);
|
||||
}
|
||||
};
|
||||
const headers = [
|
||||
'Prefix',
|
||||
'Ticket ID',
|
||||
'First Name',
|
||||
'Last Name',
|
||||
'Phone Number',
|
||||
'Pref',
|
||||
'Save?'
|
||||
];
|
||||
|
||||
if (browser) {
|
||||
window.addEventListener('beforeunload', (e) => {
|
||||
if (itemsBuffer.length > 0) e.preventDefault();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle}</title>
|
||||
</svelte:head>
|
||||
|
||||
<table class="w-full box-border border-separate p-1">
|
||||
<thead class="sticky top-1 bg-white">
|
||||
<tr>
|
||||
<td colspan="50">
|
||||
<HeaderBar></HeaderBar>
|
||||
<h1 class="text-xl font-bold p-1">{pageTitle}</h1>
|
||||
<TicketSearchBar {prefix} {functions} bind:searchForm />
|
||||
<CommandBar {prefix} {functions} /></td
|
||||
>
|
||||
</tr>
|
||||
<tr>
|
||||
{#each headers as header (header)}
|
||||
<th class="border text-left p-0.5">{header}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each items as item, idx (item.t_id)}
|
||||
<tr
|
||||
class="{tS[colorMap[item.prefix]]} focus-within:font-bold {rBS[prefix.color]}"
|
||||
onfocusin={(e) => {
|
||||
changeIdx(idx);
|
||||
e.target.scrollIntoView({ block: 'center' });
|
||||
}}
|
||||
>
|
||||
<td class="p-0.5 border">{item.prefix}</td>
|
||||
<td class="p-0.5 border">{item.t_id}</td>
|
||||
<td class="p-0.5 border"
|
||||
><input
|
||||
type="text"
|
||||
class="{iS.normal} w-full"
|
||||
id="{idx}_first"
|
||||
onchangecapture={() => (item.changed = true)}
|
||||
bind:value={item.first_name}
|
||||
/></td
|
||||
>
|
||||
<td class="p-0.5 border"
|
||||
><input
|
||||
type="text"
|
||||
class="{iS.normal} w-full"
|
||||
id="{idx}_second"
|
||||
onchangecapture={() => (item.changed = true)}
|
||||
bind:value={item.last_name}
|
||||
/></td
|
||||
>
|
||||
<td class="p-0.5 border"
|
||||
><input
|
||||
type="text"
|
||||
class="{iS.normal} w-full"
|
||||
id="{idx}_third"
|
||||
onchangecapture={() => (item.changed = true)}
|
||||
bind:value={item.phone_number}
|
||||
/></td
|
||||
>
|
||||
<td class="p-0.5 border"
|
||||
><button
|
||||
class={bS[prefix.color]}
|
||||
onclick={() => {
|
||||
item.pref == 'CALL' ? (item.pref = 'TEXT') : (item.pref = 'CALL');
|
||||
item.changed = true;
|
||||
}}
|
||||
onkeydown={(e) => {
|
||||
if (e.key == 't') {
|
||||
if (item.pref != 'TEXT') item.changed = true;
|
||||
item.pref = 'TEXT';
|
||||
} else if (e.key == 'c') {
|
||||
if (item.pref != 'CALL') item.changed = true;
|
||||
item.pref = 'CALL';
|
||||
}
|
||||
}}>{item.pref}</button
|
||||
></td
|
||||
>
|
||||
<td class="p-0.5 border"
|
||||
><button
|
||||
class={bS[prefix.color]}
|
||||
tabindex="-1"
|
||||
onclick={() => {
|
||||
item.changed ? (item.changed = false) : (item.changed = true);
|
||||
}}>{item.changed ? 'Yes' : 'No'}</button
|
||||
></td
|
||||
>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td class="p-0.5 border text-center" colspan="50">
|
||||
No rows loaded. Please use the pager at the top to put in the first, then last number on
|
||||
the sheet, click Go, and that should load in the sheet.
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in new issue
Block a user