Skip to content

Commit bb45e43

Browse files
NEKOYASANNEKOYASAN
authored
Merge pull request #116 from kaizumaki/feature/issue-104-edit-index
編集・作成者（先生側）ページ作成
2 parents d69d11c + 668f61f commit bb45e43

File tree

5 files changed

+289
-18
lines changed

5 files changed

+289
-18
lines changed

‎src/components/ContentCardEditable.vue‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div class="ContentCard-Outer">
3+
<v-card class="ContentCard elevation-4">
4+
<v-card-actions class="ContentCard-Actions">
5+
<subject-tag
6+
v-for="(item, idx) in subjects"
7+
:key="idx"
8+
class="ContentCard-SubjectTag"
9+
:name="item.name || '教科名'"
10+
:icon="item.icon || ''"
11+
:icon-color="item.iconColor || 'white'"
12+
:background-color="item.backgroundColor || '#A5D8FF'"
13+
/>
14+
<subject-tag
15+
class="ContentCard-SubjectTag"
16+
:name="'動画'"
17+
:icon="'mdi-video'"
18+
:icon-color="'#424242'"
19+
:background-color="'#E0E0E0'"
20+
/>
21+
</v-card-actions>
22+
<v-card-title>
23+
<h2 class="ContentCard-Title">{{ title }}</h2>
24+
</v-card-title>
25+
<v-card-text>
26+
<p class="ContentCard-Description">{{ description }}</p>
27+
</v-card-text>
28+
</v-card>
29+
<div class="ContentCard-Button-Outer">
30+
<content-card-editor-button
31+
class="ContentCard-Button"
32+
icon-name="mdi-eye-off"
33+
/>
34+
<content-card-editor-button
35+
class="ContentCard-Button"
36+
icon-name="mdi-pencil"
37+
/>
38+
<content-card-editor-button
39+
class="ContentCard-Button"
40+
icon-name="mdi-file-multiple"
41+
/>
42+
</div>
43+
</div>
44+
</template>
45+
46+
<script lang="ts">
47+
import Vue from 'vue'
48+
import SubjectTag from '@/components/SubjectTag.vue'
49+
import ContentCardEditorButton from '@/components/ContentCardEditorButton.vue'
50+
51+
export default Vue.extend({
52+
components: {
53+
SubjectTag,
54+
ContentCardEditorButton
55+
},
56+
props: {
57+
subjects: {
58+
type: Array,
59+
default: () => []
60+
},
61+
title: {
62+
type: String,
63+
default: ''
64+
},
65+
description: {
66+
type: String,
67+
default: ''
68+
}
69+
}
70+
})
71+
</script>
72+
73+
<style scoped lang="scss">
74+
.ContentCard-Outer {
75+
display: flex;
76+
}
77+
.ContentCard-Button-Outer {
78+
display: flex;
79+
flex-direction: column;
80+
flex: 0 1 auto;
81+
margin-left: 12px;
82+
.ContentCard-Button {
83+
margin-bottom: 12px;
84+
}
85+
}
86+
.ContentCard {
87+
flex: 1 1 auto;
88+
color: $color-gray;
89+
border-radius: 14px !important;
90+
.ContentCard-Actions {
91+
padding: 16px 16px 0;
92+
}
93+
.ContentCard-SubjectTag {
94+
margin-right: 4px;
95+
}
96+
.ContentCard-Title {
97+
font-weight: bold;
98+
font-size: 14px;
99+
line-height: 1.75;
100+
}
101+
.ContentCard-Description {
102+
font-size: 12px;
103+
color: $color-gray;
104+
margin: 0;
105+
}
106+
}
107+
</style>

‎src/components/PeriodCardEditable.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div class="PeriodCard">
3+
<div class="PeriodCard-NumberBlock">
4+
<div class="PeriodCard-Number">
5+
<span class="PeriodCard-Number-Num">1</span>
6+
<span class="PeriodCard-Number-Text">時間目</span>
7+
</div>
8+
<div class="PeriodCard-Time">
9+
<span>00:00</span>
10+
<span>|</span>
11+
<span>00:00</span>
12+
</div>
13+
</div>
14+
<v-row>
15+
<v-col
16+
v-for="(item, i) in classData.getLessonsByDisplayDate"
17+
:key="i"
18+
cols="12"
19+
md="6"
20+
>
21+
<content-card-editable
22+
:description="formatDate(item.startTime)"
23+
:title="item.content"
24+
:subjects="[{ name: item.subject }]"
25+
/>
26+
</v-col>
27+
</v-row>
28+
</div>
29+
</template>
30+
31+
<script lang="ts">
32+
import Vue from 'vue'
33+
import dayjs from 'dayjs'
34+
import ContentCardEditable from '@/components/ContentCardEditable.vue'
35+
36+
export default Vue.extend({
37+
components: { ContentCardEditable },
38+
props: {
39+
classData: {
40+
type: Object,
41+
default: () => {}
42+
}
43+
},
44+
methods: {
45+
formatDate(date: Date): string {
46+
return dayjs(date).format('HH:MM')
47+
}
48+
}
49+
})
50+
</script>
51+
52+
<style scoped lang="scss">
53+
.PeriodCard {
54+
display: flex;
55+
border-bottom: 1px solid $color-base-color-02;
56+
padding-bottom: 12px;
57+
margin-bottom: 12px;
58+
59+
&:last-child {
60+
border: none;
61+
}
62+
63+
.PeriodCard-NumberBlock {
64+
display: flex;
65+
flex-direction: column;
66+
margin: 12px;
67+
}
68+
69+
.PeriodCard-Number {
70+
display: flex;
71+
flex-direction: column;
72+
align-items: center;
73+
color: $color-white;
74+
background-color: $color-base-color-06;
75+
width: 40px;
76+
border-radius: 3em;
77+
padding: 12px 4px;
78+
margin-bottom: 8px;
79+
80+
.PeriodCard-Number-Num {
81+
font-size: 22px;
82+
}
83+
84+
.PeriodCard-Number-Text {
85+
font-size: 8px;
86+
font-weight: bold;
87+
}
88+
}
89+
90+
.PeriodCard-Time {
91+
display: flex;
92+
flex-direction: column;
93+
justify-content: center;
94+
text-align: center;
95+
font-size: 10px;
96+
color: $color-white;
97+
}
98+
}
99+
</style>

‎src/components/SimpleBottomSheet.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<template>
2-
<v-bottom-sheet v-model="sheet" class="sheet" persistent scrollable>
2+
<v-bottom-sheet
3+
v-model="sheet"
4+
class="sheet"
5+
persistent
6+
scrollable
7+
hide-overlay
8+
>
39
<v-card class="card">
410
<v-card-title class="card-title" />
511
<v-card-text class="card-text">
@@ -79,7 +85,6 @@ export default Vue.extend({
7985
.message {
8086
align-self: center;
8187
color: $color-white !important;
82-
font-family: 'Noto Sans JP', sans-serif;
8388
}
8489
8590
.add-button {

‎src/layouts/protected.vue‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@
99
<HeaderLogo />
1010
<v-spacer />
1111
<div class="admin-buttons">
12-
<v-btn outlined rounded color="#0071C2">
12+
<v-btn fab x-small outlined rounded color="#0071C2">
1313
<v-icon>mdi-calendar-today</v-icon>
1414
</v-btn>
15-
<v-btn outlined rounded color="#0071C2">
15+
<v-btn fab x-small outlined rounded color="#0071C2">
1616
<v-icon>mdi-clipboard-account</v-icon>
1717
</v-btn>
18+
<v-btn fab x-small outlined rounded color="#0071C2">
19+
<v-icon>mdi-cog</v-icon>
20+
</v-btn>
1821
</div>
1922
<template v-slot:extension>
2023
<div class="header-calender">
@@ -23,7 +26,7 @@
2326
</template>
2427
</v-app-bar>
2528
<v-content class="content">
26-
<v-container class="px-4 py-8">
29+
<v-container class="classes-container px-4 py-8">
2730
<nuxt />
2831
</v-container>
2932
</v-content>
@@ -41,7 +44,7 @@ type LocalData = {
4144
}
4245
4346
export default Vue.extend({
44-
middleware: 'authenticated',
47+
// middleware: 'authenticated',
4548
components: {
4649
CalendarBar,
4750
HeaderLogo
@@ -65,8 +68,6 @@ export default Vue.extend({
6568

6669
<style scoped lang="scss">
6770
.v-btn {
68-
font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
69-
font-style: normal;
7071
font-weight: bold;
7172
font-size: 12px;
7273
line-height: 16px;
@@ -83,7 +84,6 @@ export default Vue.extend({
8384
}
8485
.bar {
8586
background-color: $color-back-gray;
86-
text-align: center;
8787
}
8888
.content {
8989
background-color: $color-base-color-01;
@@ -94,6 +94,9 @@ export default Vue.extend({
9494
max-width: 640px;
9595
height: 40px;
9696
}
97+
.classes-container {
98+
height: 100%;
99+
}
97100
.admin-buttons {
98101
padding: 0 4px;
99102
}

‎src/pages/edit/index.vue‎

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,81 @@
11
<template>
2-
<div>
3-
<h1>{{ user.uid }}</h1>
4-
<h1>{{ user.email }}</h1>
5-
<h1>{{ user.emailVerified }}</h1>
6-
<h1>{{ user.displayName }}</h1>
7-
<h1>{{ user.allowAccess }}</h1>
2+
<div class="MainPage">
3+
<div v-if="classData.getLessonsByDisplayDate.length">
4+
<period-card-editable :class-data="classData" />
5+
</div>
6+
<div v-else class="Classes-Outer">
7+
<h1 class="Classes-Title">
8+
まだ{{ dateTitle }}の時間割は<br />ありません
9+
</h1>
10+
<ul class="Classes-List">
11+
<li>おうちで時間割について</li>
12+
<li>お問い合わせ</li>
13+
<li>サイトポリシー</li>
14+
</ul>
15+
</div>
16+
<simple-bottom-sheet message="2年B組の授業を追加・編集する" />
817
</div>
918
</template>
1019

1120
<script lang="ts">
1221
import Vue from 'vue'
1322
import { vxm } from '@/store'
23+
import PeriodCardEditable from '@/components/PeriodCardEditable.vue'
24+
import SimpleBottomSheet from '@/components/SimpleBottomSheet.vue'
25+
26+
type Data = {
27+
classData: typeof vxm.classData
28+
dateTitle: string
29+
}
1430
1531
export default Vue.extend({
32+
components: {
33+
PeriodCardEditable,
34+
SimpleBottomSheet
35+
},
1636
layout: 'protected',
17-
name: 'EditorIndex',
18-
data() {
37+
data(): Data {
1938
return {
20-
user: vxm.user
39+
classData: vxm.classData,
40+
dateTitle: '25日'
2141
}
2242
}
2343
})
2444
</script>
45+
46+
<style lang="scss" scoped>
47+
.MainPage {
48+
display: flex;
49+
flex-direction: column;
50+
height: calc(100% - 80px);
51+
}
52+
.Classes-Outer {
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
justify-content: space-around;
57+
flex: 1 0 auto;
58+
}
59+
.Classes-Title {
60+
font-size: 21px;
61+
font-weight: normal;
62+
color: $color-white;
63+
text-align: center;
64+
}
65+
.Classes-List {
66+
font-size: 12px;
67+
color: $color-white;
68+
text-align: center;
69+
list-style: none;
70+
padding: 0;
71+
72+
li {
73+
margin-bottom: 12px;
74+
75+
&::before {
76+
content: '-';
77+
padding-right: 8px;
78+
}
79+
}
80+
}
81+
</style>

0 commit comments

Comments
 (0)