Skip to content

Commit

Permalink
Update jacob (#41)
Browse files Browse the repository at this point in the history 
* add loading spinner for loading reserved ticket

* update csv export at admin dashboard
  • Loading branch information
@everywherejacobkim
everywherejacobkim authored Oct 18, 2023
1 parent f8b2186 commit 93147bd
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 76 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"lodash": "^4.17.21",
"luxon": "^3.4.1",
"svelte-french-toast": "^1.2.0",
"tailwind-merge": "^1.14.0"
"tailwind-merge": "^1.14.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@smui/data-table": "^7.0.0-beta.15",
Expand Down
131 changes: 65 additions & 66 deletions src/lib/components/AdminTable.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<script lang="ts">
import DataTable, {Head, Body, Row, Cell} from '@smui/data-table'
import {activeTickets, cancelledTickets} from '$lib/store'
// import exportExcel from '$lib/exportExcel'
import exportExcel from '$lib/exportExcel'
import type {Table} from 'airtable'
import * as XLSX from 'xlsx'
export let events: DB.Event[]
let initBodyHtml: string | null = null
Expand All @@ -23,6 +27,15 @@
window.onbeforeprint = beforePrint
window.onafterprint = afterPrint
let ticketTable: HTMLTableElement
function exportData(type: string) {
const fileName = `${events[0].title}.` + type
const table = ticketTable
const wb = XLSX.utils.table_to_book(table)
XLSX.writeFile(wb, fileName)
}
</script>

<div>
Expand All @@ -32,71 +45,57 @@
Print
</button>
<button
class="hidden md:block absolute top-0 right-44 m-7 bg-amber-300/75 hover:bg-amber-400 text-white font-bold py-2 px-4 rounded-lg">
<!-- on:click={() => exportExcel(null, 'data.csv')} -->
class="hidden md:block absolute top-0 right-44 m-7 bg-amber-300/75 hover:bg-amber-400 text-white font-bold py-2 px-4 rounded-lg"
on:click={() => {
exportData('csv')
}}>
CSV
</button>
<DataTable stickyHeader aria-label="Ticket List" class="w-[180%] overflow-auto" id="print-area">
<Head class="w-full">
<Row class="border text-center bg-royalBlue-50 m-4">
<Cell class="w-[5%] md:w-[2%]">번호</Cell>
<Cell class="w-[15%] md:w-[5%]">신청일</Cell>
<Cell class="w-[15%] md:w-[8%]">이름</Cell>
<Cell class="w-[20%]">Email</Cell>
<Cell class="w-[10%] md:w-[4%]">직업</Cell>
<Cell class="w-[10%] md:w-[4%]">직장</Cell>
<Cell class="w-[10%] md:w-[4%]">거주지</Cell>
<Cell class="w-[10%] md:w-[4%]">처음 참여?</Cell>
<Cell class="text-left pl-4 w-[40%]">비고</Cell>
</Row>
</Head>
<Body class="w-full">
{#each $activeTickets as ticket, index (ticket.id)}
<Row class="border text-center">
<Cell class="w-[2%]">{index + 1}</Cell>
<Cell class="w-[5%]">{ticket.createdAt.toDate().toLocaleDateString()}</Cell>
<Cell class="w-[8%]">{ticket.name}</Cell>
<Cell class="w-[20%]">{ticket.email}</Cell>
<Cell>{ticket.occupation}</Cell>
<Cell class="">{ticket.work}</Cell>
<Cell class="">{ticket.location}</Cell>
<Cell class="w-[4%]">{ticket.firstTime}</Cell>
<Cell class="text-left pl-4 w-[40%]">{ticket.message}</Cell>
</Row>
{/each}
</Body>
</DataTable>
<div class="mt-8 mb-2">
<h1 class="text-lg font-semibold">Canceled Tickets</h1>
</div>
<DataTable stickyHeader aria-label="Cancelled Ticket List" class="w-[180%] overflow-auto">
<Head class="w-full">
<Row class="border text-center bg-radicalRed-50 m-4">
<Cell class="w-[5%] md:w-[2%]">번호</Cell>
<Cell class="w-[15%] md:w-[5%]">신청일</Cell>
<Cell class="w-[15%] md:w-[8%]">이름</Cell>
<Cell class="w-[20%]">Email</Cell>
<Cell class="w-[10%] md:w-[4%]">직업</Cell>
<Cell class="w-[10%] md:w-[4%]">직장</Cell>
<Cell class="w-[10%] md:w-[4%]">거주지</Cell>
<Cell class="w-[10%] md:w-[4%]">처음 참여?</Cell>
<Cell class="text-left pl-4 w-[40%]">비고</Cell>
</Row>
</Head>
<Body class="w-full">
{#each $cancelledTickets as ticket, index (ticket.id)}
<Row class="border text-center">
<Cell class="w-[2%]">{index + 1}</Cell>
<Cell class="w-[5%]">{ticket.createdAt.toDate().toLocaleDateString()}</Cell>
<Cell class="w-[8%]">{ticket.name}</Cell>
<Cell class="w-[20%]">{ticket.email}</Cell>
<Cell>{ticket.occupation}</Cell>
<Cell class="">{ticket.work}</Cell>
<Cell class="">{ticket.location}</Cell>
<Cell class="w-[4%]">{ticket.firstTime}</Cell>
<Cell class="text-left pl-4 w-[40%]">{ticket.message}</Cell>
</Row>
{/each}
</Body>
</DataTable>
<table aria-label="Ticket List" class="w-full" id="print-area" bind:this={ticketTable}>
<tr class="border text-center bg-royalBlue-50 m-4">
<th>번호</th>
<th>신청일</th>
<th>이름</th>
<th>Email</th>
<th>직업</th>
<th>직장</th>
<th>거주지</th>
<th>처음 참여?</th>
<th class="w-[40rem]">비고</th>
</tr>
{#each $activeTickets as ticket, index (ticket.id)}
<tr class="border text-center">
<td>{index + 1}</td>
<td>{ticket.createdAt.toDate().toLocaleDateString()}</td>
<td>{ticket.name}</td>
<td>{ticket.email}</td>
<td>{ticket.occupation}</td>
<td>{ticket.work}</td>
<td>{ticket.location}</td>
<td>{ticket.firstTime}</td>
<td>{ticket.message}</td>
</tr>
{/each}

<br />
<tr class="text-left">
<th class="text-base font-semibold text-radicalRed-600" colspan="3">Canceled Tickets</th>
<th class="text-lg font-semibold"></th>
<th class="text-lg font-semibold"></th>
</tr>

{#each $cancelledTickets as ticket, index (ticket.id)}
<tr class="border text-center">
<td>{index + 1}</td>
<td>{ticket.createdAt.toDate().toLocaleDateString()}</td>
<td>{ticket.name}</td>
<td>{ticket.email}</td>
<td>{ticket.occupation}</td>
<td>{ticket.work}</td>
<td>{ticket.location}</td>
<td>{ticket.firstTime}</td>
<td>{ticket.message}</td>
</tr>
{/each}
</table>
</div>
14 changes: 7 additions & 7 deletions src/lib/components/Drawer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
export let ticketValue: Map<string, DB.Ticket>
</script>

<div class="flex flex-col md:flex-row h-full border">
<div class="flex flex-col md:flex-row h-full">
<Drawer class="md:w-80 max-h-screen">
<Content class="h-full overflow-x-auto">
<Content class="h-full">
<List
class="flex-start flex-row md:flex-col gap-2 p-1 md:p-2 border bg-gray-50 h-full overflow-y-auto">
class="flex-start flex-row md:flex-col gap-2 p-1 md:p-2 bg-gray-50 h-full overflow-auto">
{#each events as event}
<button on:click={() => goto(`/admin/dashboard?eventId=${event.id}`)}>
<Item
Expand All @@ -30,11 +30,11 @@
</Content>
</Drawer>

<AppContent class="w-full flex-auto overflow-auto">
<main class="h-full">
<List class="flex-start flex-col gap-1 border h-full horizontal-overflow-auto p-2 pb-10">
<AppContent class="flex-auto pb-8">
<main class="h-full w-full">
<List class="flex-start flex-col gap-1 h-full horizontal-overflow-auto w-[150%] p-2">
{#if ticketValue && ticketValue.size > 0}
<AdminTable />
<AdminTable {events} />
{:else}
<p class="m-auto text-royalBlue-800">해당 이벤트에 대한 참여명부가 없습니다.</p>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/admin/dashboard/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<title>KDD Admin Page</title>
</svelte:head>

<section class="flex flex-col items-center gap-4 p-5 bg-gray-50 h-full relative">
<section class="flex flex-col items-center gap-4 p-5 h-full relative">
<div class="w-full flex justify-between p-2 items-center gap-8">
<h1 class="text-2xl font-semibold text-royalBlue-800">KDD Admin Dashboard</h1>
<button
Expand Down
55 changes: 54 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2392,6 +2392,11 @@ acorn@^8.10.0, acorn@^8.6.0, acorn@^8.9.0:
resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz"
integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==

adler-32@~1.3.0:
version "1.3.1"
resolved "https://registry.yarnpkg.com/adler-32/-/adler-32-1.3.1.tgz#1dbf0b36dda0012189a32b3679061932df1821e2"
integrity sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==

agent-base@6:
version "6.0.2"
resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
Expand Down Expand Up @@ -2714,6 +2719,14 @@ catharsis@^0.9.0:
dependencies:
lodash "^4.17.15"

cfb@~1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/cfb/-/cfb-1.2.2.tgz#94e687628c700e5155436dac05f74e08df23bc44"
integrity sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
dependencies:
adler-32 "~1.3.0"
crc-32 "~1.2.0"

chainsaw@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/chainsaw/-/chainsaw-0.1.0.tgz#5eab50b28afe58074d0d58291388828b5e5fbc98"
Expand Down Expand Up @@ -2774,6 +2787,11 @@ code-red@^1.0.3:
estree-walker "^3.0.3"
periscopic "^3.1.0"

codepage@~1.15.0:
version "1.15.0"
resolved "https://registry.yarnpkg.com/codepage/-/codepage-1.15.0.tgz#2e00519024b39424ec66eeb3ec07227e692618ab"
integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==

color-convert@^2.0.1:
version "2.0.1"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
Expand Down Expand Up @@ -2833,7 +2851,7 @@ core-util-is@~1.0.0:
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==

crc-32@^1.2.0:
crc-32@^1.2.0, crc-32@~1.2.0, crc-32@~1.2.1:
version "1.2.2"
resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
Expand Down Expand Up @@ -3372,6 +3390,11 @@ flatted@^3.1.0:
resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==

frac@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/frac/-/frac-1.1.2.tgz#3d74f7f6478c88a1b5020306d747dc6313c74d0b"
integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==

fraction.js@^4.2.0:
version "4.2.1"
resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.1.tgz"
Expand Down Expand Up @@ -4906,6 +4929,13 @@ source-map@~0.6.1:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

ssf@~0.11.2:
version "0.11.2"
resolved "https://registry.yarnpkg.com/ssf/-/ssf-0.11.2.tgz#0b99698b237548d088fc43cdf2b70c1a7512c06c"
integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
dependencies:
frac "~1.1.2"

stream-events@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/stream-events/-/stream-events-1.0.5.tgz#bbc898ec4df33a4902d892333d47da9bf1c406d5"
Expand Down Expand Up @@ -5422,11 +5452,21 @@ wide-align@^1.1.2:
dependencies:
string-width "^1.0.2 || 2 || 3 || 4"

wmf@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/wmf/-/wmf-1.0.2.tgz#7d19d621071a08c2bdc6b7e688a9c435298cc2da"
integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==

word-wrap@~1.2.3:
version "1.2.5"
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==

word@~0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/word/-/word-0.3.0.tgz#8542157e4f8e849f4a363a288992d47612db9961"
integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
Expand All @@ -5441,6 +5481,19 @@ wrappy@1:
resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==

xlsx@^0.18.5:
version "0.18.5"
resolved "https://registry.yarnpkg.com/xlsx/-/xlsx-0.18.5.tgz#16711b9113c848076b8a177022799ad356eba7d0"
integrity sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
dependencies:
adler-32 "~1.3.0"
cfb "~1.2.1"
codepage "~1.15.0"
crc-32 "~1.2.1"
ssf "~0.11.2"
wmf "~1.0.1"
word "~0.3.0"

xmlchars@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
Expand Down

0 comments on commit 93147bd

Please sign in to comment.