From 44300bc8ad4da44e91eb4ab038930e4887fb0c1e Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 4 Oct 2023 23:39:36 +0900
Subject: [PATCH 1/2] =?UTF-8?q?contest=20team=20new=E3=81=AE=E3=83=9A?=
 =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=82=92=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ContestTeamEdit.vue |   4 +
 src/pages/ContestTeamNew.vue  | 145 ++++++++++++++++++++++++++++++++++
 src/router/index.ts           |   6 ++
 3 files changed, 155 insertions(+)
 create mode 100644 src/pages/ContestTeamNew.vue

diff --git a/src/pages/ContestTeamEdit.vue b/src/pages/ContestTeamEdit.vue
index 97c656fa..26e05e44 100644
--- a/src/pages/ContestTeamEdit.vue
+++ b/src/pages/ContestTeamEdit.vue
@@ -88,6 +88,10 @@ const deleteContestTeam = async () => {
         :header-texts="[
           { title: 'Contests', url: '/contests' },
           { title: contest.name, url: `/contests/${contestId}` },
+          {
+            title: 'Teams',
+            url: `/contests/${contestId}`
+          },
           {
             title: contestTeam.name,
             url: `/contests/${contestId}/teams/${contestTeamId}`
diff --git a/src/pages/ContestTeamNew.vue b/src/pages/ContestTeamNew.vue
new file mode 100644
index 00000000..73d94cb2
--- /dev/null
+++ b/src/pages/ContestTeamNew.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+import apis from '/@/lib/apis'
+import type { AddContestTeamRequest, ContestDetail, User } from '/@/lib/apis'
+import { RouterLink, useRouter } from 'vue-router'
+import useParam from '/@/use/param'
+import MemberInput from '/@/components/UI/MemberInput.vue'
+import FormTextArea from '/@/components/UI/FormTextArea.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
+import { computed, ref } from 'vue'
+import LabeledForm from '/@/components/Form/LabeledForm.vue'
+import { isValidLength, isValidUrl } from '/@/use/validate'
+import { useToast } from 'vue-toastification'
+
+const router = useRouter()
+const toast = useToast()
+
+const contestId = useParam('contestId')
+const contest: ContestDetail = (await apis.getContest(contestId.value)).data
+
+const formValues = ref<Required<AddContestTeamRequest>>({
+  name: '',
+  result: '',
+  link: '',
+  description: ''
+})
+const members = ref<User[]>([])
+
+const isSending = ref(false)
+const canSubmit = computed(
+  () =>
+    !isSending.value &&
+    isValidLength(formValues.value.name, 1, 32) &&
+    isValidLength(formValues.value.result, 0, 32) &&
+    (formValues.value.link !== '' ? isValidUrl(formValues.value.link) : true) &&
+    isValidLength(formValues.value.description, 1, 256) &&
+    members.value.length > 0
+)
+
+const createContestTeam = async () => {
+  isSending.value = true
+  try {
+    const requestData: AddContestTeamRequest = {
+      ...formValues.value,
+      result: formValues.value.result || undefined,
+      link: formValues.value.link || undefined
+    }
+    const res = (await apis.addContestTeam(contestId.value, requestData)).data
+    await apis.addContestTeamMembers(contestId.value, res.id, {
+      members: members.value.map(member => member.id)
+    })
+    toast.success('コンテストチ－ムを追加しました')
+    router.push(`/contests/${contestId.value}`)
+  } catch {
+    toast.error('コンテストチームの追加に失敗しました')
+  }
+  isSending.value = false
+}
+</script>
+
+<template>
+  <page-container>
+    <div :class="$style.headerContainer">
+      <content-header
+        icon-name="mdi:trophy-outline"
+        :header-texts="[
+          { title: 'Contests', url: '/contests' },
+          { title: contest.name, url: `/contests/${contestId}` },
+          {
+            title: 'Teams',
+            url: `/contests/${contestId}`
+          },
+          { title: 'New', url: `/contests/${contestId}/teams/new` }
+        ]"
+        detail="コンテストチームの情報を変更します。"
+        :class="$style.header"
+      />
+    </div>
+    <form>
+      <labeled-form required label="チーム名" :class="$style.labeledForm">
+        <form-input v-model="formValues.name" :limit="32" />
+      </labeled-form>
+      <labeled-form label="結果" :class="$style.labeledForm">
+        <form-input v-model="formValues.result" :limit="32" />
+      </labeled-form>
+      <labeled-form label="リンク" :class="$style.labeledForm">
+        <form-input
+          v-model="formValues.link"
+          has-anchor
+          placeholder="https://"
+        />
+      </labeled-form>
+      <labeled-form required label="メンバー" :class="$style.labeledForm">
+        <member-input v-model="members" />
+      </labeled-form>
+      <labeled-form required label="説明" :class="$style.labeledForm">
+        <form-text-area
+          v-model="formValues.description"
+          :limit="256"
+          :rows="3"
+        />
+      </labeled-form>
+    </form>
+
+    <div :class="$style.buttonContainer">
+      <router-link :to="`/contests/${contestId}`" :class="$style.link">
+        <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
+      </router-link>
+      <base-button
+        :is-disabled="!canSubmit"
+        type="primary"
+        icon="mdi:plus"
+        @click="createContestTeam"
+      >
+        Create
+      </base-button>
+    </div>
+  </page-container>
+</template>
+
+<style lang="scss" module>
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header {
+  margin: 4rem 0 2rem;
+}
+.labeledForm {
+  margin-bottom: 2rem;
+}
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+.buttonContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4rem;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 5f3a28e7..5349e484 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ const Contests = () => import('/@/pages/Contests.vue')
 const Contest = () => import('/@/pages/Contest.vue')
 const ContestNew = () => import('/@/pages/ContestNew.vue')
 const ContestEdit = () => import('/@/pages/ContestEdit.vue')
+const ContestTeamNew = () => import('/@/pages/ContestTeamNew.vue')
 const ContestTeamEdit = () => import('/@/pages/ContestTeamEdit.vue')
 
 const routes = [
@@ -61,6 +62,11 @@ const routes = [
     name: 'ContestEdit',
     component: ContestEdit
   },
+  {
+    path: '/contests/:contestId/teams/new',
+    name: 'ContestTeamNew',
+    component: ContestTeamNew
+  },
   {
     path: '/contests/:contestId/teams/:teamId/edit',
     name: 'ContestTeamEdit',

From 23cf728fe13c155dfc59500faa46255d7d26893c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 5 Oct 2023 13:43:34 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC?=
 =?UTF-8?q?=E3=81=AE=E8=AA=AC=E6=98=8E=E6=96=87=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ContestTeamNew.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ContestTeamNew.vue b/src/pages/ContestTeamNew.vue
index 73d94cb2..3896a148 100644
--- a/src/pages/ContestTeamNew.vue
+++ b/src/pages/ContestTeamNew.vue
@@ -74,7 +74,7 @@ const createContestTeam = async () => {
           },
           { title: 'New', url: `/contests/${contestId}/teams/new` }
         ]"
-        detail="コンテストチームの情報を変更します。"
+        detail="コンテストチームを追加します。"
         :class="$style.header"
       />
     </div>