Merge branch 'dev'

src/api/form.ts

@@ -0,0 +1,21 @@
+import { api, apiAuth } from './instance'
+
+export const sendJoinSZTeamForm = async ({
+  discordId,
+  joinTeam,
+  content,
+}: {
+  discordId: string
+  joinTeam: string
+  content: string
+}) => {
+  return await apiAuth({
+    method: 'POST',
+    url: `/website/joinSZTeamForm`,
+    data: {
+      discordId,
+      joinTeam,
+      content,
+    },
+  })
+}

src/components/BaseButton.vue

@@ -1,36 +1,43 @@
 <template>
-    <n-button class="base-button" secondary :style="computedStyle">
-        <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
-            <slot :name="slot"></slot>
-        </template>
-    </n-button>
+  <n-button
+    class="base-button"
+    secondary
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(slot, index) of Object.keys($slots)"
+      :key="index"
+      v-slot:[slot]
+    >
+      <slot :name="slot"></slot>
+    </template>
+  </n-button>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { NButton } from 'naive-ui'
 
-
 export interface BaseButtonProps {
-    border?: boolean,
-    borderColor?: string,
+  border?: boolean
+  borderColor?: string
 }
 
 const props = withDefaults(defineProps<BaseButtonProps>(), {
-    border: false,
-    borderColor: 'var(--base)',
+  border: false,
+  borderColor: 'var(--base)',
 })
 
 const computedStyle = computed(() => {
-    return {
-        border: props.border ? `1px solid ${props.borderColor}` : undefined,
-    }
+  return {
+    border: props.border ? `1px solid ${props.borderColor}` : undefined,
+  }
 })
-
 </script>
 
 <style scoped lang="postcss">
 .base-button {
-    @apply rounded-normal;
+  @apply rounded-normal;
 }
-</style>
+</style>

src/utils/helper.ts

@@ -1,7 +1,7 @@
 import { get } from 'lodash-es'
 import { useAppStore } from '@/stores/app'
 import dayjs from 'dayjs'
-import { h } from 'vue'
+import { h, type Component, type Ref } from 'vue'
 import { NIcon } from 'naive-ui'
 
 export const getHost = (hostName: string) => {
@@ -31,3 +31,12 @@ export const renderIcon = (icon: Component, props: any = null) => {
     })
   }
 }
+
+export const checkForm = async (formRef: any) => {
+  return new Promise((resolve) => {
+    formRef.validate((errors: any) => {
+      if (errors) return resolve(false)
+      resolve(true)
+    })
+  })
+}

src/views/Home/Home.vue

@@ -31,6 +31,6 @@ import Topic from './components/Topic/Topic.vue'
 }
 
 .section-max-w {
-  @apply max-w-[800px] px-[50px] m-auto;
+  @apply max-w-[800px] viewPx m-auto;
 }
 </style>

src/views/Home/components/TeamIntro/TeamIntro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tram-intro">
+  <div class="team-intro">
     <SectionTitle title="Development Team">
       <template #prefix>💻</template>
     </SectionTitle>
@@ -10,8 +10,6 @@
 <script setup lang="ts">
 import SectionTitle from '@/components/Title/SectionTitle.vue'
 import TeamMembers from './components/TeamMembers.vue'
-
-import { Code } from '@vicons/carbon'
 </script>
 
 <style scoped lang="postcss"></style>

src/views/SZTeam/components/JoinTeamForm.vue

@@ -1,69 +1,140 @@
 <template>
-    <section>
-        <n-form class="text-left" @submit.prevent @keypress.self.enter.prevent>
-            <n-form-item label="申請加入團隊">
-                <n-select :options="teamOptions" :render-label="renderLabel" />
-            </n-form-item>
-            <n-form-item label="自我介紹 (可使用 discord 語法)">
-                <n-input type="textarea" :autosize="{ minRows: 5 }" :placeholder="introPlaceholder" />
+  <section>
+    <n-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      class="text-left"
+      @submit.prevent
+      @keypress.self.enter.prevent
+    >
+      <n-form-item label="申請加入團隊" path="joinTeam">
+        <n-select
+          v-model:value="formData.joinTeam"
+          :options="teamOptions"
+          :render-label="renderLabel"
+        />
+      </n-form-item>
+      <n-form-item label="自我介紹 (可使用 discord 語法)" path="content">
+        <n-input
+          v-model:value="formData.content"
+          type="textarea"
+          :autosize="{ minRows: 5 }"
+          :placeholder="introPlaceholder"
+        />
+      </n-form-item>
+    </n-form>
 
-            </n-form-item>
-        </n-form>
-
-
-
-        <!-- <n-button secondary type="info">送出申請</n-button> -->
-        <BaseButton type="info" border>
-            <template #icon>
-                <MailAll />
-            </template>
-            送出申請
-        </BaseButton>
-    </section>
+    <BaseButton type="info" border @click="onSubmit" :disabled="!user.sz">
+      <template #icon v-if="user.sz">
+        <MailAll />
+      </template>
+      {{ user.sz ? '送出申請' : '請先登入' }}
+    </BaseButton>
+  </section>
 </template>
 
 <script setup lang="ts">
-import { NInput, NSelect, NForm, NFormItem, NIcon, } from 'naive-ui'
-import { teamTypesConfig, teamTypeIconConfig, teamTypeColorConfig } from '@/configs/team'
+import {
+  NInput,
+  NSelect,
+  NForm,
+  NFormItem,
+  NIcon,
+  useMessage,
+  type FormRules,
+} from 'naive-ui'
+import {
+  teamTypesConfig,
+  teamTypeIconConfig,
+  teamTypeColorConfig,
+} from '@/configs/team'
 import { map, find, get } from 'lodash-es'
 import BaseButton from '@/components/BaseButton.vue'
-import { h, type Component, type VNodeChild } from 'vue';
-
+import {
+  h,
+  type Component,
+  type VNodeChild,
+  computed,
+  ref,
+  reactive,
+} from 'vue'
+import { sendJoinSZTeamForm } from '@/api/form'
+import { storeToRefs } from 'pinia'
 import { MailAll } from '@vicons/carbon'
+import { useOauthStore } from '@/stores/oauth'
+import { checkForm } from '@/utils/helper'
 
 interface TeamOption {
-    label: string
-    value: string
-    icon: Component
-    color: string
+  label: string
+  value: string
+  icon: Component
+  color: string
 }
 
+const oauthStore = useOauthStore()
+const message = useMessage()
+
+const formData = reactive({
+  joinTeam: null,
+  content: null,
+})
+const { user } = storeToRefs(oauthStore)
+const formRules = computed(() => {
+  const rules = {
+    joinTeam: { required: true, trigger: ['change'] },
+    content: { required: true, trigger: ['input'] },
+  }
+  return rules
+})
+
+const formRef = ref<HTMLElement | null>(null)
 
 const teamOptions: TeamOption[] = map(teamTypesConfig, (item) => ({
-    label: item.label, value: item.value,
-    icon: get(teamTypeIconConfig, item.value),
-    color: get(teamTypeColorConfig, item.value)
+  label: item.label,
+  value: item.value,
+  icon: get(teamTypeIconConfig, item.value),
+  color: get(teamTypeColorConfig, item.value),
 }))
 
 const renderLabel = (option: TeamOption): VNodeChild => {
-    return [
-        h(
-            NIcon,
-            {
-                style: {
-                    verticalAlign: '-0.15em',
-                    marginRight: '4px'
-                }
-            },
-            {
-                default: () => h(option.icon, { color: option.color })
-            }
-        ),
-        option.label as string
-    ]
+  return [
+    h(
+      NIcon,
+      {
+        style: {
+          verticalAlign: '-0.15em',
+          marginRight: '4px',
+        },
+      },
+      {
+        default: () => h(option.icon, { color: option.color }),
+      },
+    ),
+    option.label as string,
+  ]
 }
 
 const introPlaceholder = '請輸入自我介紹，'
+
+const submitData = computed(() => {
+  return {
+    // discordId: get(user.value, 'sz.discordId'),
+    joinTeam: formData.joinTeam,
+    content: formData.content,
+  }
+})
+
+const onSubmit = async () => {
+  if (!(await checkForm(formRef.value))) return
+  const [, errMsg]: any = await sendJoinSZTeamForm(submitData.value)
+  if (errMsg) {
+    console.log(errMsg.message || errMsg)
+    message.error(errMsg.message || errMsg)
+    return
+  }
+  message.success('✅ 送出申請成功！')
+}
 </script>
 
-<style scoped lang="postcss"></style>
+<style scoped lang="postcss"></style>