From 49064711b20799cb14d953fb78f70075218e002b Mon Sep 17 00:00:00 2001
From: jiyuujin <jiyuujinunite@gmail.com>
Date: Wed, 3 Jul 2024 23:14:14 +0900
Subject: [PATCH] feat: export csv - for admin

---
 apps/web/app/components/admin/Page.vue     | 30 +++++++++++++++++++++-
 apps/web/app/composables/useSupabaseCsv.ts | 30 ++++++++++++++++++++++
 apps/web/app/pages/staff/console.vue       |  3 +++
 packages/composable/index.ts               |  1 +
 packages/composable/lib/useCsv.ts          | 17 ++++++++++++
 packages/model/lib/admin.ts                |  1 +
 packages/ui/components/tab/Tab.vue         |  7 ++---
 7 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/app/composables/useSupabaseCsv.ts
 create mode 100644 packages/composable/lib/useCsv.ts

diff --git a/apps/web/app/components/admin/Page.vue b/apps/web/app/components/admin/Page.vue
index 9ec1e61d..27d63b2c 100644
--- a/apps/web/app/components/admin/Page.vue
+++ b/apps/web/app/components/admin/Page.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { useAsyncData } from '#imports'
 import type { AdminPage } from '@vuejs-jp/model'
+import { match } from 'ts-pattern'
 import { ref } from 'vue'
+import { useCsv } from '@vuejs-jp/composable'
 import { useSupabase } from '~/composables/useSupabase'
+import { useSupabaseCsv } from '~/composables/useSupabaseCsv'
 import type AdminUserList from './AdminUserList.vue'
 
 interface ListProps {
@@ -10,6 +13,8 @@ interface ListProps {
 }
 
 const { fetchData } = useSupabase()
+const { exportSpeaker, exportSponsor, exportStaff } = useSupabaseCsv()
+const { write } = useCsv()
 const { data: speakers } = await useAsyncData('speakers', async () => {
   return await fetchData('speakers')
 })
@@ -28,6 +33,18 @@ const props = defineProps<ListProps>()
 const showDialog = ref(false)
 const handleDialog = () => showDialog.value = !showDialog.value
 
+const handleCsv = async () => {
+  const res = await match(props.page)
+    .with('speaker', () => exportSpeaker('speakers'))
+    .with('sponsor', () => exportSponsor('sponsors'))
+    .with('adminUser', () => exportStaff('staffs'))
+    .with('namecard', () => null)
+    .exhaustive()
+  if (!res) return
+
+  write(res)
+}
+
 const pageText = props.page.replace(/^[a-z]/g, function (val) {
   return val.toUpperCase()
 })
@@ -40,6 +57,7 @@ const pageText = props.page.replace(/^[a-z]/g, function (val) {
       <div>
         <VFLinkButton
           is="button"
+          v-if="page !== 'namecard'"
           class="action"
           background-color="white"
           color="vue-blue"
@@ -47,6 +65,16 @@ const pageText = props.page.replace(/^[a-z]/g, function (val) {
         >
           {{ `Add ${pageText === 'AdminUser' ? 'staff' : pageText}` }}
         </VFLinkButton>
+        <VFLinkButton
+          is="button"
+          v-if="page !== 'namecard'"
+          class="action"
+          background-color="white"
+          color="vue-blue"
+          @click="handleCsv"
+        >
+          {{ `Export ${pageText === 'AdminUser' ? 'staff' : pageText}` }}
+        </VFLinkButton>
         <VFLinkButton
           v-if="page === 'adminUser'"
           href="/staff/invite"
@@ -88,7 +116,7 @@ const pageText = props.page.replace(/^[a-z]/g, function (val) {
   width: 144px;
 }
 .tab-content-header button {
-  width: 144px;
+  width: 184px;
 }
 .tab-content-admin {
   display: grid;
diff --git a/apps/web/app/composables/useSupabaseCsv.ts b/apps/web/app/composables/useSupabaseCsv.ts
new file mode 100644
index 00000000..305fe86a
--- /dev/null
+++ b/apps/web/app/composables/useSupabaseCsv.ts
@@ -0,0 +1,30 @@
+import { useSupabaseClient } from '#imports'
+import { type Table } from '@vuejs-jp/model'
+import type { Database } from '~/types/generated/supabase'
+
+export function useSupabaseCsv() {
+  const client = useSupabaseClient<Database>()
+
+  async function exportSpeaker(table: Extract<Table, 'speakers'>) {
+    const { data, error } = await client.from(table).select().csv()
+    if (error) return
+
+    return data
+  }
+
+  async function exportSponsor(table: Extract<Table, 'sponsors'>) {
+    const { data, error } = await client.from(table).select().csv()
+    if (error) return
+
+    return data
+  }
+
+  async function exportStaff(table: Extract<Table, 'staffs'>) {
+    const { data, error } = await client.from(table).select().csv()
+    if (error) return
+
+    return data
+  }
+
+  return { exportSpeaker, exportSponsor, exportStaff }
+}
diff --git a/apps/web/app/pages/staff/console.vue b/apps/web/app/pages/staff/console.vue
index 8192318a..598e9ef9 100644
--- a/apps/web/app/pages/staff/console.vue
+++ b/apps/web/app/pages/staff/console.vue
@@ -54,6 +54,9 @@ const { hasAuth } = useAuthSession()
             <AdminPage page="sponsor" />
           </template>
           <template #tab_content_2>
+            <AdminPage page="namecard" />
+          </template>
+          <template #tab_content_3>
             <AdminPage page="adminUser" />
           </template>
         </VFTab>
diff --git a/packages/composable/index.ts b/packages/composable/index.ts
index 5a822858..95e9f7f6 100644
--- a/packages/composable/index.ts
+++ b/packages/composable/index.ts
@@ -1,5 +1,6 @@
 export * from './lib/useArray'
 export * from './lib/useColor'
+export * from './lib/useCsv'
 export * from './lib/useHeader'
 export * from './lib/useToast'
 export * from './lib/useTypography'
diff --git a/packages/composable/lib/useCsv.ts b/packages/composable/lib/useCsv.ts
new file mode 100644
index 00000000..ffe41ebd
--- /dev/null
+++ b/packages/composable/lib/useCsv.ts
@@ -0,0 +1,17 @@
+export function useCsv() {
+  function write(data: any) {
+    const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' })
+    const link = document.createElement('a')
+    if (link.download !== undefined) {
+      const url = URL.createObjectURL(blob)
+      link.setAttribute('href', url)
+      link.setAttribute('download', 'data.csv')
+      link.style.visibility = 'hidden'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  }
+
+  return { write }
+}
diff --git a/packages/model/lib/admin.ts b/packages/model/lib/admin.ts
index 2b747849..b18e2800 100644
--- a/packages/model/lib/admin.ts
+++ b/packages/model/lib/admin.ts
@@ -1,6 +1,7 @@
 export const AdminPageMap = {
   speaker: 'speaker',
   sponsor: 'sponsor',
+  namecard: 'namecard',
   adminUser: 'adminUser',
 } as const
 
diff --git a/packages/ui/components/tab/Tab.vue b/packages/ui/components/tab/Tab.vue
index d5bef609..1d4de28c 100644
--- a/packages/ui/components/tab/Tab.vue
+++ b/packages/ui/components/tab/Tab.vue
@@ -15,9 +15,11 @@ function clickItem(index: number) {
 
 <template>
   <div class="tab">
-    <div v-for="(tab, index) in 3" :key="index">
+    <div v-for="(tab, index) in labels.length" :key="index">
       <input :id="`tab_item_${index}`" type="radio" name="tab-item" :checked="selectedIndex === index" @change="clickItem(index)" />
-      <label class="tab-item" :for="`tab_item_${index}`">{{ labels[index] }}</label>
+      <label class="tab-item" :for="`tab_item_${index}`" :style="{ width: `calc(100% / ${labels.length})` }">
+        {{ labels[index] }}
+      </label>
     </div>
     <slot :name="`tab_content_${selectedIndex}`" />
   </div>
@@ -32,7 +34,6 @@ function clickItem(index: number) {
   margin: 0 auto;
 }
 .tab-item {
-  width: calc(100%/3);
   height: calc(var(--unit) * 6.25);
   border-bottom: 3px solid var(--color-vue-green);
   background-color: var(--color-white);