Skip to content

Commit 5d63b45

Browse files
MaySoMusicianMaySoMusician
authored
Merge pull request #176 from Nekoya3/feature/175-headerButton-Action
各種右上のボタンを設定
2 parents f461e9b + 9b1fe16 commit 5d63b45

File tree

7 files changed

+486
-39
lines changed

7 files changed

+486
-39
lines changed

‎src/components/ActionButton.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@click="$emit('click')"
88
>
99
<span>{{ text }}</span>
10+
<v-icon v-if="icon">{{ icon }}</v-icon>
1011
</v-btn>
1112
</template>
1213

@@ -28,6 +29,9 @@ export default class ActionButton extends Vue {
2829
2930
@Prop({ default: false })
3031
isLoading?: boolean
32+
33+
@Prop({ default: '' })
34+
icon?: string
3135
}
3236
</script>
3337

‎src/components/BaseDialog.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
2-
<v-dialog :value="value" :persistent="modal" @input="$emit('input', $event)">
2+
<v-dialog
3+
max-width="320px"
4+
:value="value"
5+
:persistent="modal"
6+
@input="$emit('input', $event)"
7+
>
38
<v-card class="DialogCard">
49
<v-card-title class="DialogCardTitle">
510
<v-icon class="DialogCardTitleIcon" size="48">{{ iconName }}</v-icon>
@@ -13,6 +18,8 @@
1318
v-for="(action, i) in actions"
1419
:key="i"
1520
class="my-3"
21+
:theme="action.theme"
22+
:icon="action.iconName"
1623
:text="action.buttonLabel"
1724
@click="doDialogAction(i)"
1825
/>
@@ -34,6 +41,8 @@ import ActionButton from '@/components/ActionButton.vue'
3441
3542
export type DialogAction = {
3643
buttonLabel: string
44+
iconName: string
45+
theme: string
3746
/**
3847
* ボタン押下時に実行する処理。実行後に BaseModalDialog を閉じないようにするには true を返す。
3948
*/

‎src/layouts/classes.vue‎

Lines changed: 126 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,48 @@
11
<template>
22
<v-app>
3+
<v-dialog v-model="openCalenderDialog" max-width="320px">
4+
<v-date-picker
5+
v-model="date"
6+
locale="ja"
7+
first-day-of-week="1"
8+
@input="openCalenderDialog = false"
9+
/>
10+
</v-dialog>
11+
<base-dialog
12+
v-model="openClassIdDialog"
13+
icon-name="mdi-clipboard-account"
14+
hide-default-cancel-button
15+
:actions="[
16+
{
17+
buttonLabel: '閉じる',
18+
iconName: '',
19+
theme: 'primary',
20+
action: () => {
21+
return false
22+
}
23+
},
24+
{
25+
buttonLabel: 'ログアウト',
26+
iconName: 'mdi-login-variant',
27+
theme: 'border',
28+
action: () => {
29+
clickLogout()
30+
return false
31+
}
32+
}
33+
]"
34+
>
35+
<template v-slot:title>
36+
今、ログインしているクラスです
37+
</template>
38+
<template v-slot:default>
39+
<div class="ClassIdModal-Contents">
40+
<p class="ClassIdModal-ClassText">{{ className }}</p>
41+
<p class="ClassIdModal-Text">クラスID</p>
42+
<div class="ClassIdModal-Id">{{ classId }}</div>
43+
</div>
44+
</template>
45+
</base-dialog>
346
<v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
447
<div class="loader">
548
Loading
@@ -8,9 +51,28 @@
851
<v-app-bar fixed app class="bar" elevation="0">
952
<HeaderLogo />
1053
<v-spacer />
11-
<v-btn fab small outlined rounded color="#0071C2">
12-
<v-icon>mdi-clipboard-account</v-icon>
13-
</v-btn>
54+
<div class="classes-buttons">
55+
<v-btn
56+
fab
57+
small
58+
outlined
59+
rounded
60+
color="#0071C2"
61+
@click="openCalenderDialog = true"
62+
>
63+
<v-icon>mdi-calendar-today</v-icon>
64+
</v-btn>
65+
<v-btn
66+
fab
67+
small
68+
outlined
69+
rounded
70+
color="#0071C2"
71+
@click="openClassIdDialog = true"
72+
>
73+
<v-icon>mdi-clipboard-account</v-icon>
74+
</v-btn>
75+
</div>
1476
<template v-slot:extension>
1577
<div class="header-calender">
1678
<CalendarBar v-model="app.currentDate" />
@@ -27,29 +89,57 @@
2789

2890
<script lang="ts">
2991
import Vue from 'vue'
92+
import dayjs from 'dayjs'
3093
import HeaderLogo from '@/assets/svgs/header_logo.svg'
3194
import CalendarBar from '@/components/CalendarBar.vue'
95+
import BaseDialog from '@/components/BaseDialog.vue'
3296
import { vxm } from '@/store'
3397
3498
type LocalData = {
3599
loading: boolean
100+
openCalenderDialog: boolean
101+
openClassIdDialog: boolean
102+
classId: string
103+
className: string
36104
app: typeof vxm.app
37105
}
38106
39107
export default Vue.extend({
40108
middleware: 'checkClassData',
41109
components: {
42110
CalendarBar,
111+
BaseDialog,
43112
HeaderLogo
44113
},
45114
data(): LocalData {
46115
return {
47116
loading: true,
117+
openCalenderDialog: false,
118+
openClassIdDialog: false,
119+
classId: vxm.classData.classId,
120+
className: vxm.classData.className,
48121
app: vxm.app
49122
}
50123
},
124+
computed: {
125+
date: {
126+
get() {
127+
return dayjs(vxm.app.currentDate).format('YYYY-MM-DD')
128+
},
129+
set(newValue: string) {
130+
vxm.app.setDate(dayjs(newValue).toDate())
131+
}
132+
}
133+
},
51134
mounted(): void {
52135
this.loading = false
136+
},
137+
methods: {
138+
clickLogout() {
139+
vxm.classData.unloadClassData().then(() => {
140+
this.$router.push('/')
141+
})
142+
}
53143
}
54144
})
55145
</script>
@@ -86,4 +176,37 @@ export default Vue.extend({
86176
.classes-container {
87177
height: 100%;
88178
}
179+
.classes-buttons {
180+
padding: 0 4px;
181+
}
182+
.ClassIdModal-Contents {
183+
display: flex;
184+
flex-direction: column;
185+
justify-content: center;
186+
align-items: center;
187+
padding: 0;
188+
}
189+
.ClassIdModal-Text {
190+
font-size: 16px;
191+
font-weight: bold;
192+
color: $color-gray;
193+
margin: 6px 0 12px;
194+
}
195+
.ClassIdModal-ClassText {
196+
font-size: 16px;
197+
color: $color-gray;
198+
margin: 6px 0 12px;
199+
}
200+
.ClassIdModal-Id {
201+
max-width: 9em;
202+
padding: 16px 24px;
203+
text-align: center;
204+
background-color: $color-back-gray;
205+
border: 2px solid $color-base-color-01;
206+
border-radius: 14px;
207+
letter-spacing: 0.2em;
208+
line-height: 1.25;
209+
font-size: 30px;
210+
color: $color-gray;
211+
}
89212
</style>

‎src/layouts/protected.vue‎

Lines changed: 108 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,39 @@
11
<template>
22
<v-app>
3+
<v-dialog v-model="openCalenderDialog" max-width="320px">
4+
<v-date-picker
5+
v-model="date"
6+
locale="ja"
7+
first-day-of-week="1"
8+
@input="openCalenderDialog = false"
9+
/>
10+
</v-dialog>
11+
<base-dialog
12+
v-model="openClassIdDialog"
13+
icon-name="mdi-clipboard-account"
14+
default-cancel-button-label="閉じる"
15+
:actions="[
16+
{
17+
buttonLabel: 'クラスの切替・登録',
18+
action: () => {
19+
vxm.classData.unloadClassData()
20+
this.$router.push('/user/classlist')
21+
return false
22+
}
23+
}
24+
]"
25+
>
26+
<template v-slot:title>
27+
今、ログインしているクラスです
28+
</template>
29+
<template v-slot:default>
30+
<div class="ClassIdModal-Contents">
31+
<p class="ClassIdModal-ClassText">{{ classData.className }}</p>
32+
<p class="ClassIdModal-Text">クラスID</p>
33+
<div class="ClassIdModal-Id">{{ classData.classId }}</div>
34+
</div>
35+
</template>
36+
</base-dialog>
337
<v-overlay :value="loading" color="#0071C2" opacity="1" z-index="9999">
438
<div class="loader">
539
Loading
@@ -9,13 +43,34 @@
943
<HeaderLogo />
1044
<v-spacer />
1145
<div class="admin-buttons">
12-
<v-btn fab x-small outlined rounded color="#0071C2">
46+
<v-btn
47+
fab
48+
x-small
49+
outlined
50+
rounded
51+
color="#0071C2"
52+
@click="openCalenderDialog = true"
53+
>
1354
<v-icon>mdi-calendar-today</v-icon>
1455
</v-btn>
15-
<v-btn fab x-small outlined rounded color="#0071C2">
56+
<v-btn
57+
fab
58+
x-small
59+
outlined
60+
rounded
61+
color="#0071C2"
62+
@click="openClassIdDialog = true"
63+
>
1664
<v-icon>mdi-clipboard-account</v-icon>
1765
</v-btn>
18-
<v-btn fab x-small outlined rounded color="#0071C2">
66+
<v-btn
67+
fab
68+
x-small
69+
outlined
70+
rounded
71+
color="#0071C2"
72+
@click="$router.push('/user/editUserData')"
73+
>
1974
<v-icon>mdi-cog</v-icon>
2075
</v-btn>
2176
</div>
@@ -35,27 +90,47 @@
3590

3691
<script lang="ts">
3792
import Vue from 'vue'
93+
import dayjs from 'dayjs'
3894
import { vxm } from '@/store'
3995
import HeaderLogo from '@/assets/svgs/header_logo.svg'
4096
import CalendarBar from '@/components/CalendarBar.vue'
97+
import BaseDialog from '@/components/BaseDialog.vue'
4198
4299
type LocalData = {
43100
loading: boolean
101+
openCalenderDialog: boolean
102+
openClassIdDialog: boolean
44103
app: typeof vxm.app
45104
}
46105
47106
export default Vue.extend({
48107
// middleware: 'authenticated',
49108
components: {
50109
CalendarBar,
110+
BaseDialog,
51111
HeaderLogo
52112
},
53113
data(): LocalData {
54114
return {
55115
loading: true,
116+
openCalenderDialog: false,
117+
openClassIdDialog: false,
56118
app: vxm.app
57119
}
58120
},
121+
computed: {
122+
date: {
123+
get() {
124+
return dayjs(vxm.app.currentDate).format('YYYY-MM-DD')
125+
},
126+
set(newValue: string) {
127+
vxm.app.setDate(dayjs(newValue).toDate())
128+
}
129+
},
130+
classData() {
131+
return vxm.classData
132+
}
133+
},
59134
mounted(): void {
60135
this.loading = false
61136
},
@@ -102,4 +177,34 @@ export default Vue.extend({
102177
.admin-buttons {
103178
padding: 0 4px;
104179
}
180+
.ClassIdModal-Contents {
181+
display: flex;
182+
flex-direction: column;
183+
justify-content: center;
184+
align-items: center;
185+
padding: 0;
186+
}
187+
.ClassIdModal-Text {
188+
font-size: 16px;
189+
font-weight: bold;
190+
color: $color-gray;
191+
margin: 6px 0 12px;
192+
}
193+
.ClassIdModal-ClassText {
194+
font-size: 16px;
195+
color: $color-gray;
196+
margin: 6px 0 12px;
197+
}
198+
.ClassIdModal-Id {
199+
max-width: 9em;
200+
padding: 16px 24px;
201+
text-align: center;
202+
background-color: $color-back-gray;
203+
border: 2px solid $color-base-color-01;
204+
border-radius: 14px;
205+
letter-spacing: 0.2em;
206+
line-height: 1.25;
207+
font-size: 30px;
208+
color: $color-gray;
209+
}
105210
</style>

0 commit comments

Comments
 (0)