ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new pages for joining and creating teams

This commit is contained in:
Ramon Wenger 2021-03-24 23:38:49 +01:00
parent 19b721388b
commit ea3a404ae7
9 changed files with 272 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
client/src/components/profile/JoinForm.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div>
<h1 data-cy="join-class-title">{{ title }}</h1>
<div>
<div class="skillboxform-input">
<label
for="join-code"
class="skillboxform-input__label">{{ labelText }}</label>
<input
:class="{'skillboxform-input__input--error': error}"
:value="value"
class="skillbox-input skillboxform-input__input"
data-cy="input-class-code"
id="join-code"
@input="$emit('input', $event)">
<small
class="skillboxform-input__error"
v-if="error"
>{{ error }}
</small>
</div>
<div>
<a
class="button button--primary button--big"
data-cy="join-class"
@click="$emit('confirm', value)">{{ okText }}</a>
<button
class="button button--big"
data-cy="join-class-cancel"
@click="$emit('cancel')">{{ cancelText }}
</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
error: {
type: String,
default: ''
},
okText: {
type: String,
default: 'Klasse beitreten'
},
labelText: {
type: String,
default: 'Zugangscode eingeben'
},
cancelText: {
type: String,
default: 'Abmelden'
}
}
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
</style>

70
client/src/pages/createClass.vue
View File

@ -1,41 +1,15 @@
<template>
<div class="create-class">
<h1 class="create-class__title">Klasse erfassen</h1>
<div>
<div class="skillboxform-input">
<label
for="class-name"
class="skillboxform-input__label">Name</label>
<input
:class="{'skillboxform-input__input--error': error}"
:value="name"
class="skillbox-input skillboxform-input__input"
data-cy="input-class-name"
id="class-name"
@input="updateName">
<small
class="skillboxform-input__error"
data-cy="email-local-errors"
v-if="error"
>{{ error }}
</small>
</div>
<div>
<a
class="button button--primary button--big"
data-cy="create-class"
@click="createClass(name)">Klasse
erfassen</a>
<a
class="button button--big"
data-cy="create-class-cancel"
@click="cancel">Abbrechen</a>
</div>
</div>
</div>
<join-form
:value="name"
class="create-class"
title="Klasse erfassen"
ok-text="Klasse erfassen"
label-text="Name"
cancel-text="Abbrechen"
@input="updateName"
@cancel="cancel"
@confirm="createClass"
/>
</template>
<script>
@ -43,12 +17,18 @@
import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
import JoinForm from '@/components/profile/JoinForm';
export default {
mixins: [addSchoolClassMixin],
components: {
JoinForm
},
data: () => ({
name: '',
error: ''
error: '',
}),
methods: {
@ -62,24 +42,24 @@
mutation: CREATE_CLASS_MUTATION,
variables: {
input: {
name
}
name,
},
},
update(store, {data: {createSchoolClass: {schoolClass}}}) {
self.addSchoolClass(store, schoolClass);
self.$router.push({
name: 'my-class'
name: 'my-class',
});
},
refetchQueries: [{
query: MY_SCHOOL_CLASS_QUERY
}]
query: MY_SCHOOL_CLASS_QUERY,
}],
});
},
cancel() {
this.$router.go(-1);
}
}
},
},
};
</script>

78
client/src/pages/joinClass.vue
View File

@ -1,40 +1,13 @@
<template>
<div>
<h1 data-cy="join-class-title">Einer Klasse beitreten</h1>
<div>
<div class="skillboxform-input">
<label
for="join-code"
class="skillboxform-input__label">Zugangscode eingeben</label>
<input
:class="{'skillboxform-input__input--error': error}"
:value="code"
class="skillbox-input skillboxform-input__input"
data-cy="input-class-code"
id="join-code"
@input="updateCode">
<small
class="skillboxform-input__error"
data-cy="email-local-errors"
v-if="error"
>{{ error }}
</small>
</div>
<div>
<a
class="button button--primary button--big"
data-cy="join-class"
@click="joinClass(code)">Klasse beitreten</a>
<button
class="button button--big"
data-cy="join-class-cancel"
@click="logout">Abmelden
</button>
</div>
</div>
</div>
<join-form
:value="code"
:error="error"
title="Einer Klasse beitreten"
ok-text="Klasse beitreten"
cancel-text="Abmelden"
@input="updateCode"
@cancel="logout"
@confirm="joinClass"/>
</template>
<script>
@ -44,12 +17,15 @@
import addSchoolClass from '@/mixins/add-school-class';
import logout from '@/mixins/logout';
import JoinForm from '@/components/profile/JoinForm';
export default {
mixins: [addSchoolClass, logout],
components: {JoinForm},
data: () => ({
code: '',
error: ''
error: '',
}),
methods: {
@ -60,18 +36,18 @@
joinClass(code) {
let self = this;
this.$apollo.mutate({
mutation: JOIN_CLASS_MUTATION,
variables: {
input: {
code
}
},
update(store, {data: {joinClass: {schoolClass}}}) {
self.addSchoolClass(store, schoolClass);
self.$router.push({name: 'my-class'});
},
refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}]
})
mutation: JOIN_CLASS_MUTATION,
variables: {
input: {
code,
},
},
update(store, {data: {joinClass: {schoolClass}}}) {
self.addSchoolClass(store, schoolClass);
self.$router.push({name: 'my-class'});
},
refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}],
})
.then(() => {
})
@ -83,7 +59,7 @@
this.error = 'Dieser Zugangscode ist nicht gültig.';
}
});
}
}
},
},
};
</script>

68
client/src/pages/me/createTeam.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<join-form
:value="name"
class="create-team"
title="Team erfassen"
ok-text="Team erfassen"
label-text="Name"
cancel-text="Abbrechen"
@input="updateName"
@cancel="cancel"
@confirm="createClass"
/>
</template>
<script>
import addSchoolClassMixin from '@/mixins/add-school-class';
import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
import JoinForm from '@/components/profile/JoinForm';
export default {
mixins: [addSchoolClassMixin],
components: {
JoinForm
},
data: () => ({
name: '',
error: '',
}),
methods: {
updateName(event) {
this.name = event.target.value;
this.error = '';
},
createClass(name) {
let self = this;
this.$apollo.mutate({
mutation: CREATE_CLASS_MUTATION,
variables: {
input: {
name,
},
},
update(store, {data: {createSchoolClass: {schoolClass}}}) {
self.addSchoolClass(store, schoolClass);
self.$router.push({
name: 'my-class',
});
},
});
},
cancel() {
this.$router.go(-1);
},
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.create-class {
}
</style>

50
client/src/pages/me/joinTeam.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<join-form
:value="code"
:error="error"
title="Einem Team beitreten"
ok-text="Team beitreten"
cancel-text="Abbrechen"
@input="updateCode"
@cancel="cancel"
@confirm="joinTeam"/>
</template>
<script>
import JoinForm from '@/components/profile/JoinForm';
import {MY_TEAM} from '@/router/me.names';
export default {
components: {
JoinForm,
},
data() {
return {
code: '',
error: '',
teamRoute: {
name: MY_TEAM
}
};
},
methods: {
updateCode(event) {
this.code = event.target.value;
this.error = '';
},
cancel() {
this.$router.push(this.teamRoute);
},
joinTeam(code) {
console.log('joinTeam', code);
},
},
};
</script>
<style scoped lang="scss">
@import '~styles/helpers';
</style>

23
client/src/pages/me/team.vue
View File

@ -3,17 +3,34 @@
<h1 class="my-team__heading">Mein Team</h1>
<div class="my-team__section">
<h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
<a class="button button--primary">Zugangscode eingeben</a>
<router-link
:to="joinTeamRoute"
class="button button--primary">Zugangscode eingeben</router-link>
</div>
<div class="my-team__section">
<h2 class="my-team__subheading">Willst du ein neues Team erfassen?</h2>
<a class="button button--primary">Team erfassen</a>
<router-link
:to="createTeamRoute"
class="button button--primary">Team erfassen</router-link>
</div>
</div>
</template>
<script>
export default {};
import {JOIN_TEAM, CREATE_TEAM} from '@/router/me.names';
export default {
data() {
return {
joinTeamRoute: {
name: JOIN_TEAM
},
createTeamRoute: {
name: CREATE_TEAM
}
};
},
};
</script>
<style scoped lang="scss">

2
client/src/router/index.js
View File

@ -45,7 +45,7 @@ const routes = [
...portfolioRoutes,
{path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug'},
...meRoutes,
{path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'public'}},
{path: '/join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},
{
path: '/survey/:id',
component: surveyPage,

2
client/src/router/me.names.js
View File

@ -1 +1,3 @@
export const MY_TEAM = 'my-team';
export const JOIN_TEAM = 'join-team';
export const CREATE_TEAM = 'create-team';

8
client/src/router/me.routes.js
View File

@ -6,8 +6,10 @@ import oldClasses from '@/pages/oldClasses';
import createClass from '@/pages/createClass';
import showCode from '@/pages/showCode';
import myTeam from '@/pages/me/team';
import joinTeam from '@/pages/me/joinTeam';
import createTeam from '@/pages/me/createTeam';
import {MY_TEAM} from './me.names';
import {JOIN_TEAM, MY_TEAM, CREATE_TEAM} from './me.names';
export default [
{
@ -17,7 +19,6 @@ export default [
{path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
{path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
{path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
{path: 'my-team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
{path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
{
path: 'old-classes',
@ -27,6 +28,9 @@ export default [
},
{path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
{path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
{path: 'my-team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
{path: 'join-team', name: JOIN_TEAM, component: joinTeam, meta: {isProfile: true, layout: 'simple'}},
{path: 'create-team', name: CREATE_TEAM, component: createTeam, meta: {isProfile: true, layout: 'simple'}},
],
},
];