Skip to content

Commit 40921e9

Browse files
genj11genj11
authored
Merge pull request #198 from vuejs-jp/namecard-ui
add namecard base elements
2 parents c9c7cd7 + 7b3a0a2 commit 40921e9

File tree

14 files changed

+366
-47
lines changed

14 files changed

+366
-47
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script setup lang="ts">
2+
import { computed } from 'vue'
3+
import { useI18n } from '#i18n'
4+
import { useColor, useTypography } from '@vuejs-jp/composable'
5+
6+
const { t } = useI18n()
7+
const { fontWeight, fontSize } = useTypography()
8+
const { color } = useColor()
9+
export type Status = 'not_created' | 'inquiry_in_progress' | 'inquiry_failed' | 'inquiry_completed'
10+
type Props = {
11+
statusKey: Status
12+
}
13+
const props = defineProps<Props>()
14+
15+
const backgroundColor = computed(() => {
16+
switch (props.statusKey) {
17+
case 'inquiry_in_progress':
18+
return color('tohoh/200')
19+
case 'inquiry_failed':
20+
return color('sangosyo/200')
21+
case 'inquiry_completed':
22+
return color('hiwamoegi/200')
23+
default:
24+
return color('gray/100')
25+
}
26+
})
27+
</script>
28+
29+
<template>
30+
<div
31+
class="creation-status-root"
32+
:style="{
33+
fontWeight: fontWeight('heading/700'),
34+
fontSize: fontSize('heading/200'),
35+
color: color('white'),
36+
backgroundColor: backgroundColor,
37+
}"
38+
>
39+
{{ t(`namecard.creation_status.${statusKey}`) }}
40+
</div>
41+
</template>
42+
43+
<style scoped>
44+
.creation-status-root {
45+
display: flex;
46+
justify-content: center;
47+
align-items: center;
48+
width: 166px;
49+
height: 38px;
50+
border-radius: 38px;
51+
}
52+
</style>

‎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: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,5 +122,25 @@
122122
"privacy": {
123123
"title": "Privacy Policy",
124124
"button": "Back to Top"
125+
},
126+
"namecard": {
127+
"title_edit": "Create/Edit Name Card",
128+
"edit": "edit",
129+
"creation_status": {
130+
"not_created": "not created",
131+
"inquiry_in_progress": "inquiry in progress",
132+
"inquiry_failed": "inquiry failed",
133+
"inquiry_completed": "inquiry complete"
134+
},
135+
"form": {
136+
"label_name": "お名前／Name",
137+
"label_avatar": "アバター／Avatar",
138+
"label_order_number": "Order Number",
139+
"annotation_name": "Up to 12 full-width characters (24 half-width characters)",
140+
"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.",
141+
"placeholder_order_number": "Please enter the order number",
142+
"submit": "Submit",
143+
"registrationCompleted": "The name card information has been successfully registered!"
144+
}
125145
}
126-
}
146+
}

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,5 +140,25 @@
140140
"privacy": {
141141
"title": "プライバシーポリシー",
142142
"button": "トップに戻る"
143+
},
144+
"namecard": {
145+
"title_edit": "ネームカード作成・編集",
146+
"edit": "編集する",
147+
"creation_status": {
148+
"not_created": "未作成",
149+
"inquiry_in_progress": "注文番号照会中",
150+
"inquiry_failed": "注文番号照会失敗",
151+
"inquiry_completed": "注文番号照合完了"
152+
},
153+
"form": {
154+
"label_name": "お名前／Name",
155+
"label_avatar": "アバター／Avatar",
156+
"label_order_number": "注文番号",
157+
"annotation_name": "※全角12文字（半角24文字）まで",
158+
"annotation_order_number": "※注文番号は、チケット購入時にPeatixから送信されるメール内に含まれる領収データから確認できます。",
159+
"placeholder_order_number": "注文番号を入力してください",
160+
"submit": "確定する",
161+
"registrationCompleted": "ネームカードの情報登録が完了しました！"
162+
}
143163
}
144-
}
164+
}

‎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/middleware/auth.ts

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎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: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,63 @@
11
<script setup lang="ts">
2-
import { definePageMeta } from '#imports'
3-
definePageMeta({
4-
middleware: 'auth',
2+
import { computed } from 'vue'
3+
import { useI18n } from '#i18n'
4+
import { navigateTo, useRoute } from '#imports'
5+
import CreationStatus, { type Status } from '~/components/namecard/CreationStatus.vue'
6+
import type { NamecardUser } from '@vuejs-jp/model'
7+
8+
const route = useRoute()
9+
const { t } = useI18n()
10+
11+
const statusKey = computed<Status>(() => {
12+
// TODO テーブルから取得する
13+
return 'not_created'
14+
})
15+
const user = computed<NamecardUser>(() => {
16+
// TODO テーブルから取得する
17+
return {
18+
display_name: 'jiyuujin',
19+
avatar_url: '',
20+
role: 'attendee',
21+
}
522
})
23+
24+
function handleLinkButton() {
25+
navigateTo(`/namecard/${route.params.id}/edit/`)
26+
}
627
</script>
728
<template>
8-
<div class="name-card-user-root">
9-
<VFLinkButton is="button" background-color="vue-green/200" color="white" href=""
10-
>hoge</VFLinkButton
29+
<NuxtLayout name="namecard-base">
30+
<CreationStatus :status-key="statusKey" class="creation-status" />
31+
<VFNamecard23 :user="user" class="namecard" />
32+
<VFLinkButton
33+
is="button"
34+
background-color="vue-green/200"
35+
color="white"
36+
class="edit-button"
37+
@click="handleLinkButton"
38+
>{{ t('namecard.edit') }}</VFLinkButton
1139
>
12-
</div>
40+
<!-- TODO 作成フロー・注記挿入 -->
41+
</NuxtLayout>
1342
</template>
1443

1544
<style scoped>
16-
.name-card-user-root {
17-
--header-height: calc(var(--unit) * 10);
18-
padding-top: var(--header-height);
45+
@import url('~/assets/media.css');
46+
47+
.creation-status {
48+
margin: 0 auto calc(var(--unit) * 2.5);
49+
}
50+
.namecard {
51+
margin: 0 auto calc(var(--unit) * 5);
1952
}
53+
.edit-button {
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
width: 198px;
58+
height: 66px;
59+
margin: 0 auto calc(var(--unit) * 5);
60+
}
61+
62+
/* TODO モバイル版スタイル */
2063
</style>

0 commit comments

Comments
 (0)