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

Add "create class" view

This commit is contained in:
Ramon Wenger 2020-03-20 10:14:55 +01:00
parent aa9e72b087
commit 950fe9c60e
8 changed files with 242 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/cypress/fixtures/schema.json
View File

File diff suppressed because one or more lines are too long

124
client/cypress/integration/school-class.spec.js
View File

@ -16,16 +16,52 @@ describe('Class Management', () => {
});
it('should join class', () => {
const name = 'KF1A';
const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
const __typename = 'SchoolClassNode';
let localMe = {
...me
};
cy.mockGraphqlOps({
operations: {
MeQuery: me,
MeQuery: localMe,
// JoinClass() {
// // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
// let schoolClass = {
// id,
// name,
// // __typename
// };
// // localMe.me.schoolClasses.edges.push({
// // node: schoolClass,
// // __typename: 'SchoolClassNodeEdge'
// // });
// return {
// joinClass: {
// success: true,
// schoolClass
// }
// }
// },
JoinClass: {
joinClass: {
success: true,
schoolClass: {
id: "U2Nob29sQ2xhc3NOb2RlOjI=",
name: "KF1A",
__typename: "SchoolClassNode"
name,
id
}
}
},
MySchoolClassQuery: {
me: {
...selectedClass.me,
selectedClass: {
__typename,
name,
id,
members: []
}
}
}
@ -37,7 +73,7 @@ describe('Class Management', () => {
cy.get('[data-cy=header-user-widget]').within(() => {
cy.get('[data-cy=user-widget-avatar]').click();
});
//
cy.get('[data-cy=class-selection]').click();
cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
cy.get('[data-cy=class-selection]').click();
@ -47,12 +83,16 @@ describe('Class Management', () => {
cy.get('[data-cy=input-class-code]').type('XXXX');
cy.get('[data-cy=join-class]').click();
cy.get('[data-cy=school-class-name]').should('contain', name);
cy.get('[data-cy=current-class-name]').should('contain', name);
cy.get('[data-cy=header-user-widget]').within(() => {
cy.get('[data-cy=user-widget-avatar]').click();
});
cy.get('[data-cy=class-selection]').click();
cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
//
});
it('should not be able to leave class', () => {
@ -169,5 +209,77 @@ describe('Class Management', () => {
cy.get('[data-cy=edit-class-name-input]').type('{selectall}{backspace}').type(className);
cy.get('[data-cy=modal-save-button]').click();
cy.get('[data-cy=school-class-name]').should('contain', className);
})
});
it.only('creates a new class', () => {
const name = 'Moordale';
const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
const __typename = "SchoolClassNode";
let localMe = {...me};
cy.mockGraphqlOps({
operations: {
MeQuery: () => {
return localMe;
},
CreateSchoolClass() {
// fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
let schoolClass = {
id,
name,
__typename
};
// localMe.me.schoolClasses.edges.push({
// node: schoolClass,
// __typename: 'SchoolClassNodeEdge'
// });
return {
createSchoolClass: {
success: true,
schoolClass
}
}
},
MySchoolClassQuery: {
me: {
...selectedClass.me,
selectedClass: {
__typename,
name,
id,
members: []
}
}
}
}
});
cy.visit('/me/my-class');
cy.get('h1').should('exist');
cy.get('[data-cy=header-user-widget]').within(() => {
cy.get('[data-cy=user-widget-avatar]').click();
});
cy.get('[data-cy=class-selection]').click();
cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
cy.get('[data-cy=create-class-link]').click();
cy.get('[data-cy=input-class-name]').type(name);
cy.get('[data-cy=create-class]').click();
cy.get('[data-cy=school-class-name]').should('contain', name);
cy.get('[data-cy=current-class-name]').should('contain', name);
cy.get('[data-cy=header-user-widget]').within(() => {
cy.get('[data-cy=user-widget-avatar]').click();
});
cy.get('[data-cy=class-selection]').click();
cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
});
});

28
client/src/components/school-class/ClassSelectionWidget.vue
View File

@ -17,7 +17,9 @@
@click="updateSelectedClassAndHidePopover(schoolClass)">
{{schoolClass.name}}
</li>
<li class="popover-links__link popover-links__link--large popover-links__divider">Klasse erfassen</li>
<li class="popover-links__link popover-links__link--large popover-links__divider" data-cy="create-class-link" @click="closeSidebar">
<router-link :to="{name: 'create-class'}">Klasse erfassen</router-link>
</li>
<li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
<router-link :to="{name: 'old-classes'}">Alte Klassen anzeigen</router-link>
</li>
@ -30,10 +32,9 @@
import ChevronDown from '@/components/icons/ChevronDown';
import CurrentClass from '@/components/school-class/CurrentClass';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
import updateSelectedClassMixin from '@/mixins/updateSelectedClass';
import sidebarMixin from '@/mixins/sidebar';
import meMixin from '@/mixins/me';
export default {
components: {
@ -49,29 +50,10 @@
}
},
mixins: [updateSelectedClassMixin, sidebarMixin],
apollo: {
me: {
query: ME_QUERY,
manual: true,
result({data, loading, networkStatus}) {
if (!loading) {
this.me = this.$getRidOfEdges(data).me;
}
}
}
},
mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
data() {
return {
me: {
selectedClass: {
id: ''
},
permissions: [],
schoolClasses: []
},
showPopover: false
}
},

2
client/src/components/school-class/CurrentClass.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="current-class">{{currentClassName}}</span>
<span class="current-class" data-cy="current-class-name">{{currentClassName}}</span>
</template>
<script>

21
client/src/mixins/add-school-class.js Normal file
View File

@ -0,0 +1,21 @@
import ME_QUERY from '@/graphql/gql/meQuery';
export default {
methods: {
addSchoolClass(store, schoolClass) {
const query = ME_QUERY;
if (schoolClass) {
console.log('updating school class');
const data = store.readQuery({query});
if (data) {
data.me.schoolClasses.edges.push({
node: schoolClass,
__typename: 'SchoolClassNodeEdge'
});
data.me.selectedClass.id = schoolClass.id;
store.writeQuery({query, data});
}
}
},
}
}

83
client/src/pages/createClass.vue Normal file
View File

@ -0,0 +1,83 @@
<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
id="class-name"
class="skillbox-input skillboxform-input__input"
:class="{'skillboxform-input__input--error': error}"
data-cy="input-class-name"
:value="name"
@input="updateName">
<small
v-if="error"
class="skillboxform-input__error"
data-cy="email-local-errors"
>{{ 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>
</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';
export default {
mixins: [addSchoolClassMixin],
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'
});
},
refetchQueries: [{
query: MY_SCHOOL_CLASS_QUERY
}]
});
},
cancel() {
this.$router.go(-1);
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.create-class {
}
</style>

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

@ -30,9 +30,13 @@
<script>
import JOIN_CLASS_MUTATION from '@/graphql/gql/mutations/joinClass.gql';
import ME_QUERY from '@/graphql/gql/meQuery.gql';
import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/mySchoolClass';
import addSchoolClassMixin from '@/mixins/add-school-class';
export default {
mixins: [addSchoolClassMixin],
data: () => ({
code: '',
error: ''
@ -44,6 +48,7 @@
this.error = '';
},
joinClass(code) {
let self = this;
this.$apollo.mutate({
mutation: JOIN_CLASS_MUTATION,
variables: {
@ -52,20 +57,13 @@
}
},
update(store, {data: {joinClass: {schoolClass}}}) {
if (schoolClass) {
const data = store.readQuery({query: ME_QUERY});
if (data) {
data.me.schoolClasses.edges.push({
node: schoolClass,
__typename: 'SchoolClassNode'
});
store.writeQuery({query: ME_QUERY, data});
}
}
}
self.addSchoolClass(store, schoolClass);
self.$router.push({name: 'my-class'});
},
refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}]
})
.then(() => {
this.$router.push({name: 'my-class'});
})
.catch(e => {
console.debug(e);

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

@ -32,6 +32,7 @@ import registration from '@/pages/registration'
import waitForClass from '@/pages/waitForClass'
import joinClass from '@/pages/joinClass'
import oldClasses from '@/pages/oldClasses';
import createClass from '@/pages/createClass';
import store from '@/store/index';
@ -118,7 +119,7 @@ const routes = [
component: oldClasses,
meta: {isProfile: true}
},
{path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
]
},
{path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'simple'}},