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

Merged in feature/instrument-overview (pull request #25) 

Feature/instrument overview

Approved-by: Christian Cueni <christian.cueni@iterativ.ch>
This commit is contained in:
Ramon Wenger 2019-07-17 11:10:24 +00:00 committed by Christian Cueni
parent c476485685 12b580a94a
commit ba6b80dfdc
13 changed files with 117 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/InstrumentTeaser.vue
View File

@ -1,14 +1,23 @@
<template>
<div class="instrument-teaser">
<h3 class="instrument-teaser__title">Instrument: Diskussionsregeln</h3>
<p class="instrument-teaser__text">
Für eine konstruktive Diskussion braucht es gewisse Regeln.
<router-link tag="div" :to="{name: 'instrument', params: {slug: slug}}" class="instrument-teaser">
<h3 class="instrument-teaser__title">{{title}}</h3>
<p class="instrument-teaser__text" v-html="teaser">
</p>
</div>
</router-link>
</template>
<script>
export default {}
import teaser from '@/helpers/teaser';
export default {
props: ['title', 'contents', 'slug'],
computed: {
teaser() {
return teaser(this.contents);
}
}
}
</script>
<style scoped lang="scss">
@ -20,6 +29,8 @@
box-sizing: border-box;
padding: $medium-spacing;
@include widget-shadow;
width: 100%;
cursor: pointer;
&__title {
@include heading-3;

4
client/src/components/book-navigation/BookNavigation.vue
View File

@ -4,8 +4,8 @@
<book-topic-navigation></book-topic-navigation>
</sub-navigation-item>
<sub-navigation-item title="Instrument">
<router-link tag="div" class="book-subnavigation__item" to="/basic-knowledge">Sprache und Kommunikation</router-link>
<router-link tag="div" class="book-subnavigation__item" to="/basic-knowledge">Gesellschaft</router-link>
<router-link tag="div" class="book-subnavigation__item" to="/instruments/sprache-kommunikation">Sprache und Kommunikation</router-link>
<router-link tag="div" class="book-subnavigation__item" to="/instruments/gesellschaft">Gesellschaft</router-link>
</sub-navigation-item>
<sub-navigation-item title="News">
<template slot="title">

6
client/src/components/book-navigation/SubNavigationItem.vue
View File

@ -29,6 +29,12 @@
}
},
watch: {
$route(to, from) {
this.show = false;
}
},
methods: {
close() {
this.show = false;

20
client/src/components/rooms/RoomEntry.vue
View File

@ -27,6 +27,7 @@
import UserWidget from '@/components/UserWidget';
import MoreOptionsWidget from '@/components/MoreOptionsWidget';
import teaser from '@/helpers/teaser';
export default {
props: ['title', 'author', 'contents', 'slug', 'id'],
@ -72,24 +73,7 @@
return '';
},
teaser() {
if (this.contents && this.contents.length) {
let first = this.contents.find(content => content.type !== 'image_url_block');
if (first && first.type) {
switch (first.type) {
case 'text_block':
return first.value.text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>').slice(0, 75) + '...';
// return first.value.text;
case 'link_block':
return first.value.url;
case 'document_block':
const parts = first.value.url.split('/');
return parts[parts.length - 1];
default:
return ''
}
}
}
return '';
return teaser(this.contents);
},
myEntry() {
return this.author.id === this.me.id;

9
client/src/graphql/gql/basicKnowledgeQuery.gql
View File

@ -1,9 +0,0 @@
query BasicKnowledgeQuery($slug: String!){
basicKnowledge(slug: $slug) {
id
title
slug
type
contents
}
}

9
client/src/graphql/gql/instrumentQuery.gql Normal file
View File

@ -0,0 +1,9 @@
query InstrumentQuery($slug: String!){
instrument(slug: $slug) {
id
title
slug
type
contents
}
}

12
client/src/graphql/gql/instrumentsByTypeQuery.gql Normal file
View File

@ -0,0 +1,12 @@
query InstrumentQuery($type: String!){
instruments(type: $type) {
edges {
node {
id
title
contents
slug
}
}
}
}

20
client/src/helpers/teaser.js Normal file
View File

@ -0,0 +1,20 @@
export default (contents) => {
if (contents && contents.length) {
let first = contents.find(content => content.type !== 'image_url_block');
if (first && first.type) {
switch (first.type) {
case 'text_block':
return first.value.text.replace(/<p>/g, '').replace(/<\/p>/g, '<br>').slice(0, 75) + '...';
// return first.value.text;
case 'link_block':
return first.value.url;
case 'document_block':
const parts = first.value.url.split('/');
return parts[parts.length - 1];
default:
return ''
}
}
}
return '';
}

12
client/src/pages/instrument.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="instrument">
<h1 class="instrument__title">{{basicKnowledge.title}}</h1>
<h1 class="instrument__title">{{instrument.title}}</h1>
<component v-for="component in basicKnowledge.contents"
<component v-for="component in instrument.contents"
:key="component.id"
:is="component.type"
v-bind="component">
@ -12,7 +12,7 @@
</template>
<script>
import BASIC_KNOWLEDGE_QUERY from '@/graphql/gql/basicKnowledgeQuery.gql';
import INSTRUMENT_QUERY from '@/graphql/gql/instrumentQuery.gql';
import TextBlock from '@/components/content-blocks/TextBlock';
import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
@ -25,9 +25,9 @@
export default {
apollo: {
basicKnowledge() {
instrument() {
return {
query: BASIC_KNOWLEDGE_QUERY,
query: INSTRUMENT_QUERY,
variables: {
slug: this.$route.params.slug
}
@ -49,7 +49,7 @@
data() {
return {
basicKnowledge: {}
instrument: {}
}
}
}

41
client/src/pages/instrumentOverview.vue
View File

@ -2,23 +2,55 @@
<div class="instrument-overview">
<div class="instrument-overview__heading">
<h1 class="instrument-overview__title">
Instrument:<br> Sprache und Kommunikation
Instrument:<br> {{instrumentType}}
</h1>
</div>
<div class="instrument-overview__list">
<instrument-teaser></instrument-teaser>
<instrument-teaser></instrument-teaser>
<instrument-teaser></instrument-teaser>
<instrument-teaser
v-bind="instrument"
v-for="instrument in instruments"
:key="instrument.id"
></instrument-teaser>
</div>
</div>
</template>
<script>
import InstrumentTeaser from '@/components/InstrumentTeaser';
import INSTRUMENTS_QUERY from '@/graphql/gql/instrumentsByTypeQuery.gql';
export default {
components: {
InstrumentTeaser
},
computed: {
instrumentType () {
return this.$route.params.slug === 'gesellschaft' ? 'Gesellschaft' : 'Sprache und Kommunikation';
}
},
apollo: {
instruments: {
query: INSTRUMENTS_QUERY,
variables() {
return {
type: this.$route.params.slug === 'gesellschaft' ? 'society' : 'language_communication'
}
},
manual: true,
result({data, loading, networkStatus}) {
if (!loading) {
this.instruments = this.$getRidOfEdges(data).instruments;
}
}
}
},
data() {
return {
instruments: []
}
}
}
</script>
@ -49,6 +81,7 @@
&__list {
padding: $large-spacing 0;
max-width: 1200px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;

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

@ -55,7 +55,7 @@ const routes = [
{path: '/room/:slug', name: 'room', component: room, props: true},
{path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
{
path: '/instrument/',
path: '/instruments/:slug',
name: 'instrument-overview',
component: instrumentOverview,
meta: {subnavigation: true}

1
client/src/styles/_navigation.scss
View File

@ -57,6 +57,7 @@
padding: $large-spacing;
width: 100%;
box-sizing: border-box;
margin-top: 17px;
&:empty {
display: none;

8
server/basicknowledge/queries.py
View File

@ -10,7 +10,7 @@ from .models import BasicKnowledge
class BasicKnowledgeNode(DjangoObjectType):
class Meta:
model = BasicKnowledge
filter_fields = ['slug']
filter_fields = ['slug', 'type']
interfaces = (relay.Node,)
only_fields = [
'slug', 'title', 'type', 'contents',
@ -18,10 +18,10 @@ class BasicKnowledgeNode(DjangoObjectType):
class BasicKnowledgeQuery(object):
basic_knowledge = graphene.Field(BasicKnowledgeNode, slug=graphene.String(), id=graphene.ID())
basic_knowledge_pages = DjangoFilterConnectionField(BasicKnowledgeNode)
instrument = graphene.Field(BasicKnowledgeNode, slug=graphene.String(), id=graphene.ID())
instruments = DjangoFilterConnectionField(BasicKnowledgeNode)
def resolve_basic_knowledge(self, info, **kwargs):
def resolve_instrument(self, info, **kwargs):
slug = kwargs.get('slug')
room_id = kwargs.get('id')