Skip to content

Commit dc44696

Browse files
jamesjieyejamesjieye
committed
implement create team, create board window
1 parent dfdff7c commit dc44696

File tree

5 files changed

+301
-44
lines changed

5 files changed

+301
-44
lines changed

‎front-end/src/App.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
</template>
66

77
<script>
8+
import 'bootstrap/dist/js/bootstrap.min'
9+
810
export default {
911
name: 'App'
1012
}
@@ -19,6 +21,11 @@ html {
1921
max-width: 900px;
2022
}
2123
24+
input.form-control:focus,
25+
textarea.form-control:focus {
26+
border: 1px solid #377EF6 !important;
27+
}
28+
2229
.public {
2330
.form {
2431
margin-top: 50px;
@@ -45,4 +52,43 @@ html {
4552
color: #ff0000;
4653
}
4754
}
55+
56+
.modal {
57+
.modal-dialog {
58+
-webkit-transform: translate(0,-25%);
59+
-o-transform: translate(0,-25%);
60+
transform: translate(0,-25%);
61+
top: 25%;
62+
margin: 0 auto;
63+
64+
.modal-header {
65+
border-bottom: none;
66+
padding: 1rem 1rem .5rem;
67+
68+
.modal-title {
69+
font-size: 1rem;
70+
}
71+
}
72+
73+
.modal-body {
74+
padding-bottom: 0;
75+
76+
textarea {
77+
resize: none;
78+
height: 100px;
79+
}
80+
}
81+
82+
.modal-footer {
83+
justify-content: start;
84+
border-top: none;
85+
padding-top: 0;
86+
padding-bottom: 1.5rem;
87+
88+
.btn-cancel {
89+
color: #666;
90+
}
91+
}
92+
}
93+
}
4894
</style>

‎front-end/src/components/PageHeader.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,6 @@ export default {
128128
border: 1px solid #eee;
129129
border-radius: 5px;
130130
}
131-
132-
input:focus {
133-
border: 1px solid #377EF6;
134-
}
135131
}
136132
}
137133

‎front-end/src/modals/CreateBoardModal.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<form @submit.prevent="saveBoard">
3+
<div class="modal" tabindex="-1" role="dialog" backdrop="static" id="createBoardModal">
4+
<div class="modal-dialog" role="document">
5+
<div class="modal-content">
6+
<div class="modal-header">
7+
<h5 class="modal-title">Create Board</h5>
8+
<button type="button" class="close" @click="close" aria-label="Close">
9+
<span aria-hidden="true">&times;</span>
10+
</button>
11+
</div>
12+
<div class="modal-body">
13+
<div v-show="errorMessage" class="alert alert-danger failed">{{ errorMessage }}</div>
14+
<div class="form-group">
15+
<input type="text" class="form-control" id="boardNameInput" v-model="board.name" placeholder="Board name" maxlength="128">
16+
<div class="field-error" v-if="$v.board.name.$dirty">
17+
<div class="error" v-if="!$v.board.name.required">Name is required</div>
18+
</div>
19+
</div>
20+
<div class="form-group">
21+
<textarea class="form-control" v-model="board.description" placeholder="Add board description here"></textarea>
22+
<div class="field-error" v-if="$v.board.description.$dirty">
23+
<div class="error" v-if="!$v.board.description.required">Description is required</div>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="modal-footer">
28+
<button type="submit" class="btn btn-primary">Create</button>
29+
<button type="button" class="btn btn-default btn-cancel" @click="close">Cancel</button>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</form>
35+
</template>
36+
37+
<script>
38+
import $ from 'jquery'
39+
import { required } from 'vuelidate/lib/validators'
40+
import boardService from '@/services/boards'
41+
42+
export default {
43+
name: 'CreateBoardModal',
44+
props: ['teamId'],
45+
data () {
46+
return {
47+
board: {
48+
name: '',
49+
description: ''
50+
},
51+
errorMessage: ''
52+
}
53+
},
54+
validations: {
55+
board: {
56+
name: {
57+
required
58+
},
59+
description: {
60+
required
61+
}
62+
}
63+
},
64+
mounted () {
65+
$('#createBoardModal').on('shown.bs.modal', () => {
66+
$('#boardNameInput').trigger('focus')
67+
})
68+
},
69+
methods: {
70+
saveBoard () {
71+
this.$v.$touch()
72+
if (this.$v.$invalid) {
73+
return
74+
}
75+
76+
const board = {
77+
teamId: this.teamId,
78+
name: this.board.name,
79+
description: this.board.description
80+
}
81+
82+
boardService.create(board).then((createdBoard) => {
83+
this.$store.dispatch('addBoard', createdBoard)
84+
this.$emit('created', createdBoard.id)
85+
this.close()
86+
}).catch(error => {
87+
this.errorMessage = error.message
88+
})
89+
},
90+
close () {
91+
this.$v.$reset()
92+
this.board.name = ''
93+
this.board.description = ''
94+
this.errorMessage = ''
95+
$('#createBoardModal').modal('hide')
96+
}
97+
}
98+
}
99+
</script>
100+
101+
<style lang="scss" scoped>
102+
.modal {
103+
.modal-dialog {
104+
width: 400px;
105+
}
106+
}
107+
</style>

‎front-end/src/modals/CreateTeamModal.vue

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<form @submit.prevent="saveTeam">
3+
<div class="modal" tabindex="-1" role="dialog" backdrop="static" id="createTeamModal">
4+
<div class="modal-dialog" role="document">
5+
<div class="modal-content">
6+
<div class="modal-header">
7+
<h5 class="modal-title">Create Team</h5>
8+
<button type="button" class="close" @click="close" aria-label="Close">
9+
<span aria-hidden="true">&times;</span>
10+
</button>
11+
</div>
12+
<div class="modal-body">
13+
<div v-show="errorMessage" class="alert alert-danger failed">{{ errorMessage }}</div>
14+
<div class="form-group">
15+
<input type="text" class="form-control" id="teamNameInput" v-model="team.name" placeholder="Team name" maxlength="128">
16+
<div class="field-error" v-if="$v.team.name.$dirty">
17+
<div class="error" v-if="!$v.team.name.required">Name is required</div>
18+
</div>
19+
</div>
20+
</div>
21+
<div class="modal-footer">
22+
<button type="submit" class="btn btn-primary">Create</button>
23+
<button type="button" class="btn btn-default btn-cancel" @click="close">Cancel</button>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
</form>
29+
</template>
30+
31+
<script>
32+
import $ from 'jquery'
33+
import { required } from 'vuelidate/lib/validators'
34+
import teamService from '@/services/teams'
35+
36+
export default {
37+
name: 'CreateTeamModal',
38+
data () {
39+
return {
40+
team: {
41+
name: ''
42+
},
43+
errorMessage: ''
44+
}
45+
},
46+
validations: {
47+
team: {
48+
name: {
49+
required
50+
}
51+
}
52+
},
53+
mounted () {
54+
$('#createTeamModal').on('shown.bs.modal', () => {
55+
$('#teamNameInput').trigger('focus')
56+
})
57+
},
58+
methods: {
59+
saveTeam () {
60+
this.$v.$touch()
61+
if (this.$v.$invalid) {
62+
return
63+
}
64+
65+
teamService.create(this.team).then((createdTeam) => {
66+
this.$store.dispatch('addTeam', createdTeam)
67+
this.close()
68+
}).catch(error => {
69+
this.errorMessage = error.message
70+
})
71+
},
72+
close () {
73+
this.$v.$reset()
74+
this.team.name = ''
75+
this.errorMessage = ''
76+
$('#createTeamModal').modal('hide')
77+
}
78+
}
79+
}
80+
</script>
81+
82+
<style lang="scss" scoped>
83+
.modal {
84+
.modal-dialog {
85+
width: 400px;
86+
}
87+
}
88+
</style>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy