Skip to content

Commit 7b3a0a2

Browse files
genj11genj11
committed
feat(namecard): add namecard base elements
1 parent 23c2182 commit 7b3a0a2

File tree

10 files changed

+246
-45
lines changed

10 files changed

+246
-45
lines changed

‎apps/web/app/components/namecard/ImageUploader.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
import { useTypography } from '@vuejs-jp/composable'
3+
4+
type Props = {
5+
label: string
6+
}
7+
defineProps<Props>()
8+
9+
const { fontWeight, fontSize } = useTypography()
10+
</script>
11+
12+
<template>
13+
<!-- TODO 画像アップローダーのブラッシュアップ -->
14+
<VFDragDropArea
15+
:style="{
16+
fontWeight: fontWeight('heading/100'),
17+
fontSize: fontSize('heading/100'),
18+
}"
19+
>
20+
{{ label }}
21+
<VFCssResetButton class="select-button" />
22+
</VFDragDropArea>
23+
</template>
24+
25+
<style scoped></style>

‎apps/web/app/lang/en.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,16 @@
129129
"inquiry_in_progress": "inquiry in progress",
130130
"inquiry_failed": "inquiry failed",
131131
"inquiry_completed": "inquiry complete"
132+
},
133+
"form": {
134+
"label_name": "お名前／Name",
135+
"label_avatar": "アバター／Avatar",
136+
"label_order_number": "Order Number",
137+
"annotation_name": "Up to 12 full-width characters (24 half-width characters)",
138+
"annotation_order_number": "* The order number can be found in the receipt data included in the email sent by Peatix when you purchase a ticket.",
139+
"placeholder_order_number": "Please enter the order number",
140+
"submit": "Submit",
141+
"registrationCompleted": "The name card information has been successfully registered!"
132142
}
133143
}
134144
}

‎apps/web/app/lang/ja.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,16 @@
147147
"inquiry_in_progress": "注文番号照会中",
148148
"inquiry_failed": "注文番号照会失敗",
149149
"inquiry_completed": "注文番号照合完了"
150+
},
151+
"form": {
152+
"label_name": "お名前／Name",
153+
"label_avatar": "アバター／Avatar",
154+
"label_order_number": "注文番号",
155+
"annotation_name": "※全角12文字（半角24文字）まで",
156+
"annotation_order_number": "※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる領収データから確認できます。",
157+
"placeholder_order_number": "注文番号を入力してください",
158+
"submit": "確定する",
159+
"registrationCompleted": "ネームカードの情報登録が完了しました！"
150160
}
151161
}
152162
}

‎apps/web/app/layouts/namecard-base.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import { useI18n } from '#i18n'
3+
import { useColor, useTypography } from '@vuejs-jp/composable'
4+
5+
const { t } = useI18n()
6+
const { fontWeight, fontSize } = useTypography()
7+
const { color } = useColor()
8+
</script>
9+
10+
<template>
11+
<div class="namecard-base-layout">
12+
<h1
13+
:style="{
14+
fontWeight: fontWeight('heading/700'),
15+
fontSize: fontSize('heading/700'),
16+
color: color('vue-blue'),
17+
}"
18+
class="title"
19+
>
20+
{{ t('namecard.title_edit') }}
21+
</h1>
22+
<slot />
23+
</div>
24+
</template>
25+
26+
<style scoped>
27+
@import url('~/assets/media.css');
28+
29+
.namecard-base-layout {
30+
--header-height: calc(var(--unit) * 10);
31+
padding-top: calc(var(--header-height) + var(--unit) * 15);
32+
text-align: center;
33+
}
34+
.title {
35+
margin-bottom: calc(var(--unit) * 5);
36+
}
37+
</style>

‎apps/web/app/pages/namecard/[id]/edit/complete.vue

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,28 @@
1-
<script setup lang="ts"></script>
2-
<template></template>
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import { useI18n } from '#i18n'
4+
import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
5+
import type { NamecardUser } from '@vuejs-jp/model'
6+
7+
const { t } = useI18n()
8+
const statusKey = computed<Status>(() => {
9+
// TODO テーブルから取得する
10+
return 'inquiry_in_progress'
11+
})
12+
const user = computed<NamecardUser>(() => {
13+
// TODO テーブルから取得する
14+
return {
15+
display_name: 'jiyuujin',
16+
avatar_url: '',
17+
role: 'attendee',
18+
}
19+
})
20+
</script>
21+
<template>
22+
<NuxtLayout name="namecard-base">
23+
<p>{{ t('namecard.form.registrationCompleted') }}</p>
24+
<!-- TODO テキスト&SNSリンク追加 -->
25+
<CreationStatus :status-key="statusKey" class="creation-status" />
26+
<VFNamecard23 :user="user" class="namecard" />
27+
</NuxtLayout>
28+
</template>

‎apps/web/app/pages/namecard/[id]/edit/index.vue

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,102 @@
1-
<script setup lang="ts"></script>
2-
<template></template>
1+
<script setup lang="ts">
2+
import { ref, computed } from 'vue'
3+
import { useI18n } from '#i18n'
4+
import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
5+
import ImageUploader from '~/components/namecard/ImageUploader.vue'
6+
import type { NamecardUser } from '@vuejs-jp/model'
7+
import { navigateTo, useRoute } from '#imports'
8+
9+
const { t } = useI18n()
10+
const route = useRoute()
11+
12+
// TODO useFormとは別でコンポーザブルを作成する
13+
const name = ref('')
14+
const orderNumber = ref('')
15+
const isSubmitting = ref(true)
16+
function onSubmit(e: any) {
17+
// TODO フォーム送信処理追加
18+
e.preventDefault()
19+
navigateTo(`/namecard/${route.params.id}/edit/complete/`)
20+
}
21+
22+
const updateName = (e: any) => {
23+
name.value = e.target.value
24+
}
25+
const updateOrderNumber = (e: any) => {
26+
orderNumber.value = e.target.value
27+
}
28+
29+
const statusKey = computed<Status>(() => {
30+
// TODO テーブルから取得する
31+
return 'not_created'
32+
})
33+
const user = computed<NamecardUser>(() => {
34+
// TODO form から取得する
35+
return {
36+
display_name: 'jiyuujin',
37+
avatar_url: '',
38+
role: 'attendee',
39+
}
40+
})
41+
</script>
42+
<template>
43+
<NuxtLayout name="namecard-base">
44+
<div class="namecard-edit-root">
45+
<div class="preview-wrapper">
46+
<VFNamecard23 :user="user" class="namecard" />
47+
<CreationStatus :status-key="statusKey" class="creation-status" />
48+
</div>
49+
<div class="form-wrapper">
50+
<form @submit="onSubmit">
51+
<VFInputField
52+
id="name"
53+
v-model="name"
54+
name="name"
55+
:label="t('namecard.form.label_name')"
56+
:placeholder="`${t('form.form_placeholder_example')}${t('form.form_name_placeholder')}`"
57+
required
58+
:annotation="t('namecard.form.annotation_name')"
59+
:error="nameError"
60+
@input="updateName"
61+
@blur="validateName"
62+
/>
63+
<ImageUploader :label="t('namecard.form.label_avatar')" />
64+
<!-- TODO 領収書データ を外部リンク化する -->
65+
<VFInputField
66+
id="orderNumber"
67+
v-model="orderNumber"
68+
name="orderNumber"
69+
:label="t('namecard.form.label_order_number')"
70+
:placeholder="t('namecard.form.placeholder_order_number')"
71+
required
72+
:annotation="t('namecard.form.annotation_order_number')"
73+
:error="orderNumberError"
74+
@input="updateOrderNumber"
75+
@blur="validateOrderNumbere"
76+
/>
77+
<div class="form-buttons">
78+
<!-- TODO ボタンのスタイルを追加する -->
79+
<VFSubmitButton :disabled="!isSubmitting">
80+
{{ $t('namecard.form.submit') }}
81+
</VFSubmitButton>
82+
</div>
83+
</form>
84+
</div>
85+
</div>
86+
</NuxtLayout>
87+
</template>
88+
89+
<style scoped>
90+
@import url('~/assets/media.css');
91+
.namecard-edit-root {
92+
/** TODO スタイル調整を行う 仮組でflex適応しているだけ */
93+
display: flex;
94+
max-width: 769px;
95+
margin: 0 auto;
96+
gap: 0 calc(var(--unit) * 8);
97+
}
98+
.form-wrapper {
99+
text-align: left;
100+
}
101+
/* TODO モバイル版スタイル */
102+
</style>

‎apps/web/app/pages/namecard/[id]/index.vue

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
33
import { useI18n } from '#i18n'
4+
import { navigateTo, useRoute } from '#imports'
45
import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
5-
import { useColor, useTypography } from '@vuejs-jp/composable'
66
import type { NamecardUser } from '@vuejs-jp/model'
77
8+
const route = useRoute()
89
const { t } = useI18n()
9-
const { fontWeight, fontSize } = useTypography()
10-
const { color } = useColor()
1110
1211
const statusKey = computed<Status>(() => {
1312
// TODO テーブルから取得する
@@ -21,44 +20,30 @@ const user = computed<NamecardUser>(() => {
2120
role: 'attendee',
2221
}
2322
})
23+
24+
function handleLinkButton() {
25+
navigateTo(`/namecard/${route.params.id}/edit/`)
26+
}
2427
</script>
2528
<template>
26-
<div class="name-card-user-root">
27-
<h1
28-
:style="{
29-
fontWeight: fontWeight('heading/700'),
30-
fontSize: fontSize('heading/700'),
31-
color: color('vue-blue'),
32-
}"
33-
class="title"
34-
>
35-
{{ t('namecard.title_edit') }}
36-
</h1>
29+
<NuxtLayout name="namecard-base">
3730
<CreationStatus :status-key="statusKey" class="creation-status" />
3831
<VFNamecard23 :user="user" class="namecard" />
3932
<VFLinkButton
4033
is="button"
4134
background-color="vue-green/200"
4235
color="white"
43-
href=""
4436
class="edit-button"
37+
@click="handleLinkButton"
4538
>{{ t('namecard.edit') }}</VFLinkButton
4639
>
4740
<!-- TODO 作成フロー・注記挿入 -->
48-
</div>
41+
</NuxtLayout>
4942
</template>
5043

5144
<style scoped>
5245
@import url('~/assets/media.css');
5346
54-
.name-card-user-root {
55-
--header-height: calc(var(--unit) * 10);
56-
padding-top: calc(var(--header-height) + var(--unit) * 15);
57-
text-align: center;
58-
}
59-
.title {
60-
margin-bottom: calc(var(--unit) * 5);
61-
}
6247
.creation-status {
6348
margin: 0 auto calc(var(--unit) * 2.5);
6449
}
@@ -73,4 +58,6 @@ const user = computed<NamecardUser>(() => {
7358
height: 66px;
7459
margin: 0 auto calc(var(--unit) * 5);
7560
}
61+
62+
/* TODO モバイル版スタイル */
7663
</style>

‎apps/web/app/pages/namecard/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
3131

3232
<!-- TODO i18n対応 -->
3333
<template>
34-
<div class="name-card-root">
34+
<div class="namecard-root">
3535
<VFIntegrationDialog
3636
v-if="showDialog"
3737
title="ソーシャルアカウントからのログイン"
@@ -46,7 +46,7 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
4646
</template>
4747

4848
<style scoped>
49-
.name-card-root {
49+
.namecard-root {
5050
--header-height: calc(var(--unit) * 10);
5151
padding-top: var(--header-height);
5252
}

‎packages/ui/components/forms/InputField.stories.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const Error: Story = {
4242
label: 'お名前',
4343
placeholder: '山田太郎',
4444
errorMessage: 'エラーメッセージが表示されます',
45+
annotation:'※全角12文字（半角24文字）まで'
4546
},
4647
}
4748

0 commit comments

Comments
 (0)