Combine room backend with frontend

client/src/components/rooms/RoomGroupWidget.vue

@@ -2,7 +2,7 @@
   <div class="room-group-widget">
     <group></group>
     <span>
-        {{group}}
+        {{name}} - {{year}}
     </span>
   </div>
 </template>
@@ -11,7 +11,7 @@
   import Group from '@/components/images/Group.vue';
 
   export default {
-    props: ['group'],
+    props: ['name', 'year'],
 
     components: {
       Group

client/src/components/rooms/RoomWidget.vue

@@ -2,7 +2,7 @@
   <router-link to="/room" tag="div" class="room-widget" :class="roomClass">
     <div class="room-widget__content">
       <h2 class="room-widget__title">{{title}}</h2>
-      <room-group-widget :group="group"></room-group-widget>
+      <room-group-widget v-bind="userGroup"></room-group-widget>
       <room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
     </div>
     <div class="room-widget__footer">
@@ -11,7 +11,6 @@
       </router-link>
     </div>
   </router-link>
-
 </template>
 
 <script>
@@ -20,16 +19,17 @@
   import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
 
   export default {
-    props: ['title', 'appearance', 'entries', 'group'],
+    props: ['title', 'appearance', 'slug', 'userGroup'],
 
     components: {
       RoomEntryCountWidget,
       Ellipses,
       RoomGroupWidget
     },
+
     computed: {
       entryCount() {
-        return this.entries.length
+        return 6 // TODO: this.entries.length
       },
       roomClass() {
         return `room-widget--${this.appearance}`

client/src/graphql/gql/roomsQuery.gql

@@ -0,0 +1,17 @@
+query RoomsQuery {
+  allRooms {
+    edges {
+      node {
+        id
+        title
+        appearance
+        slug
+        userGroup {
+          id
+          name
+          year
+        }
+      }
+    }
+  }
+}

client/src/graphql/gql/sandbox/roomsQuery.gql

@@ -0,0 +1,18 @@
+query RoomsQuery {
+  room(id:"Um9vbU5vZGU6Ng==") {
+    id
+    title
+    slug
+    appearance
+    pk
+  }
+
+  allRooms(first:3) {
+    edges {
+      node {
+        id
+        title
+      }
+    }
+  }
+}

client/src/pages/module.vue

@@ -6,11 +6,17 @@
 </template>
 
 <script>
-  import Module from '@/components/modules/Module.vue';
-  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
   import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
 
+  import Module from '@/components/modules/Module.vue';
+  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
+
   export default {
+    components: {
+      Module,
+      ModuleNavigation
+    },
+
     apollo: {
       moduleQuery: {
         query: MODULE_DETAILS_QUERY,
@@ -28,11 +34,6 @@
       }
     },
 
-    components: {
-      Module,
-      ModuleNavigation
-    },
-
     // TODO: can we do better by defining a type for module?
     data() {
       return {

client/src/pages/rooms.vue

@@ -6,6 +6,8 @@
 </template>
 
 <script>
+  import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
+
   import RoomWidget from '@/components/rooms/RoomWidget.vue';
   import AddRoom from '@/components/rooms/AddRoom.vue';
 
@@ -15,29 +17,21 @@
       AddRoom
     },
 
+    apollo: {
+      modules: {
+        query: ROOMS_QUERY,
+        manual: true,
+        result({data, loading, networkStatus}) {
+          if (!loading) {
+            this.rooms = this.$getRidOfEdges(data).allRooms
+          }
+        }
+      }
+    },
+
     data() {
       return {
-        rooms: [
+        rooms: []
-          {
-            title: 'Ein historisches Festival',
-            group: 'Klasse 3b',
-            appearance: 'red',
-            entries: [1, 1, 1, 1, 1, 1]
-          },
-          {
-            title: 'Erfahrungen Lehrbeginn',
-            group: 'Klasse 3b',
-            appearance: 'green',
-            entries: [1]
-          },
-          {
-            title: 'Interview «Mein neues Umfeld»',
-            group: 'Hans Muster und 12 weitere Personen',
-            appearance: 'brown',
-            entries: [1, 1, 1, 1, 1, 1]
-          }
-
-        ]
       }
     }
   }

server/core/management/commands/dummy_data.py

@@ -286,3 +286,6 @@ class Command(BaseCommand):
                         for content_block_idx, content_block_data in enumerate(content_blocks_data):
                             # ContentBlockFactory.create(parent=chapter, **self.filter_data(content_block_data, 'contents'))
                             ContentBlockFactory.create(parent=chapter, **content_block_data)
+
+        # now create all usergroups and rooms
+        management.call_command('dummy_rooms', verbosity=0)

server/rooms/schema.py

@@ -4,14 +4,16 @@ from graphene_django import DjangoObjectType
 from graphene_django.filter import DjangoFilterConnectionField
 
 from rooms.models import Room
+from user.schema import UserGroupNode
 
 
 class RoomNode(DjangoObjectType):
     pk = graphene.Int()
+    userGroup = UserGroupNode()
 
     class Meta:
         model = Room
-        filter_fields = ['slug', 'user_group', 'appearance']
+        filter_fields = ['slug', 'appearance']
         interfaces = (relay.Node,)
 
     def resolve_pk(self, *args, **kwargs):
@@ -20,4 +22,4 @@ class RoomNode(DjangoObjectType):
 
 class RoomsQuery(object):
     room = relay.Node.Field(RoomNode)
-    rooms = DjangoFilterConnectionField(RoomNode)
+    all_rooms = DjangoFilterConnectionField(RoomNode)

server/user/schema.py

@@ -0,0 +1,19 @@
+import graphene
+from graphene import relay
+from graphene_django import DjangoObjectType
+from graphene_django.filter import DjangoFilterConnectionField
+
+from rooms.models import Room
+from user.models import UserGroup
+
+
+class UserGroupNode(DjangoObjectType):
+    pk = graphene.Int()
+
+    class Meta:
+        model = UserGroup
+        filter_fields = ['pk', 'name']
+        interfaces = (relay.Node,)
+
+    def resolve_pk(self, *args, **kwargs):
+        return self.id