From 59166677f5161303643797840cf6bd842d0ed131 Mon Sep 17 00:00:00 2001
From: enya-yy <enya.jump@gmail.com>
Date: Tue, 17 Oct 2023 23:00:51 +0800
Subject: [PATCH] feat: add team ModalInvite component

---
 components/ModalInvite.vue       | 95 ++++++++++++++++++++++++++++++++
 components/TeamMembers.vue       | 14 +++--
 layouts/entrySidebar.vue         |  2 +-
 server/trpc/routers/protected.ts | 40 ++++++++++++++
 4 files changed, 146 insertions(+), 5 deletions(-)
 create mode 100644 components/ModalInvite.vue

diff --git a/components/ModalInvite.vue b/components/ModalInvite.vue
new file mode 100644
index 0000000..dc06e2e
--- /dev/null
+++ b/components/ModalInvite.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { User } from '@prisma/client'
+
+const props = withDefaults(defineProps<{
+  teamId?: string
+}>(), {
+  teamId: '',
+})
+const emit = defineEmits(['success'])
+const { $client } = useNuxtApp()
+const toast = useToast()
+
+const modelValue = defineModel<boolean>({ default: false })
+const loading = ref(false)
+
+const users = ref<Array<User>>([])
+const selected = ref([])
+
+function onInput(e: Event) {
+  const value = (e.target as HTMLInputElement).value
+  if (!value)
+    return
+  fetchUserList(value)
+}
+
+async function fetchUserList(keyword: string) {
+  if (!keyword)
+    return
+
+  try {
+    loading.value = true
+    const data = await $client.protected.userList.query({
+      teamId: props.teamId,
+      keyword,
+    })
+    users.value = data
+  }
+  catch (error) {
+    if (error instanceof Error) {
+      toast.add({ title: error.message, color: 'red' })
+      return
+    }
+    console.error(error)
+    toast.add({ title: 'Unknown error', color: 'red' })
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+function onInvite() {
+  // TODO: send email
+  modelValue.value = false
+  users.value = []
+  emit('success')
+}
+</script>
+
+<template>
+  <div class="w-28">
+    <UModal v-model="modelValue" class="text-red" prevent-close>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Invite member
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modelValue = false" />
+          </div>
+        </template>
+        <UCommandPalette
+          v-model="selected"
+          placeholder="Search by username or email address"
+          multiple
+          nullable
+          :autoclear="false"
+          :autoselect="false"
+          group-attribute="username"
+          command-attribute="username"
+          :groups="[{ key: 'users', commands: users }]"
+          :fuse="{ resultLimit: 6, fuseOptions: { threshold: 0.1 } }"
+          @input="onInput"
+        />
+        <div class="mt-4 text-right">
+          <UButton class="" :disabled="!selected.length" @click="onInvite">
+            Invite
+          </UButton>
+          <UButton variant="outline" class="ml-4" @click="modelValue = false">
+            Cancel
+          </UButton>
+        </div>
+      </UCard>
+    </UModal>
+  </div>
+</template>
diff --git a/components/TeamMembers.vue b/components/TeamMembers.vue
index 8ed9964..3071172 100644
--- a/components/TeamMembers.vue
+++ b/components/TeamMembers.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-interface ProjectListProp {
+const props = withDefaults(defineProps<{
   teamId: string
-}
-const props = withDefaults(defineProps<ProjectListProp>(), {
+}>(), {
   teamId: '',
 })
 const { $client } = useNuxtApp()
@@ -10,12 +9,19 @@ const { $client } = useNuxtApp()
 const { pending, error, data: members } = $client.protected.teamMembers.useQuery({
   teamId: props.teamId,
 })
+
+const modalInvite = ref(false)
+
+function inviteMembers() {
+  modalInvite.value = true
+}
 </script>
 
 <template>
+  <ModalInvite v-model="modalInvite" :team-id="props.teamId" />
   <div class="flex items-center my-8">
     <UInput class="w-44 mr-4" icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
-    <UButton @click="() => {}">
+    <UButton @click="inviteMembers">
       Invite Members
     </UButton>
   </div>
diff --git a/layouts/entrySidebar.vue b/layouts/entrySidebar.vue
index 7c6a342..910c518 100644
--- a/layouts/entrySidebar.vue
+++ b/layouts/entrySidebar.vue
@@ -67,8 +67,8 @@ async function onTeamDelete(id: string) {
 </script>
 
 <template>
+  <ModalTeamCreate v-model="modalTeamCreate" @success="naviteToTeam" />
   <div class="flex w-screen h-screen overflow-hidden">
-    <ModalTeamCreate v-model="modalTeamCreate" @success="naviteToTeam" />
     <div class="relative w-[280px] h-screen px-4 py-8 border-r border-gray-200 dark:border-gray-800">
       <!-- logo -->
       <div class="flex items-center">
diff --git a/server/trpc/routers/protected.ts b/server/trpc/routers/protected.ts
index 9f1c69b..bc81e31 100644
--- a/server/trpc/routers/protected.ts
+++ b/server/trpc/routers/protected.ts
@@ -12,6 +12,46 @@ export const protectedRouter = router({
     .mutation(async (event) => {
       await event.ctx.session.clear()
     }),
+  userList: protectedProcedure
+    .input(
+      z.object({
+        teamId: z.string(),
+        keyword: z.string(),
+      }),
+    )
+    .query(async (event) => {
+      const { ctx, input } = event
+      const users = await ctx.prisma.user.findMany({
+        where: {
+          AND: [
+            {
+              OR: [
+                {
+                  username: {
+                    contains: input.keyword,
+                  },
+                },
+                {
+                  email: {
+                    contains: input.keyword,
+                  },
+                },
+              ],
+            },
+            {
+              NOT: {
+                TeamMember: {
+                  some: {
+                    teamId: input.teamId,
+                  },
+                },
+              },
+            },
+          ],
+        },
+      })
+      return users
+    }),
   // TODO: pagination
   projectList: protectedProcedure
     .input(