Add news page, add field

client/src/graphql/gql/newsTeasersQuery.gql

@@ -0,0 +1,14 @@
+query NewsTeasers {
+	newsTeasers {
+	  edges {
+	    node {
+	      id
+	      description
+        title
+        imageUrl
+        newsArticleUrl
+        date
+	    }
+	  }
+	}
+}

client/src/pages/news.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="news">
+    <h2 class="news__heading">News</h2>
+    <div class="news__teasers teasers">
+      <div v-for="teaser in newsTeasers" :key="teaser.id" class="teasers__teaser teaser">
+        <img :src="teaser.imageUrl" class="teaser__image" />
+        <h3 class="teaser__title">{{teaser.title}}</h3>
+        <p class="teaser__description">{{teaser.description}}</p>
+        <p class="teaser__date">{{teaser.date}}</p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+  import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
+
+  export default {
+    components: {},
+
+    computed: {
+},
+
+    apollo: {
+      $client: 'publicClient',
+      newsTeasers: {
+        query: NEWS_TEASER_QUERY,
+        update(data) {
+          console.log(data);
+          return this.$getRidOfEdges(data).newsTeasers
+        },
+      },
+    },
+
+    data() {
+      return {
+        newsTeasers: []
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
+
+  .teasers {
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
+    }
+    grid-template-rows: 300px 300px;
+    -ms-grid-rows: auto 1fr 65px;
+  }
+</style>

client/src/router/index.js

@@ -39,6 +39,7 @@ import joinClass from '@/pages/joinClass'
 import oldClasses from '@/pages/oldClasses';
 import createClass from '@/pages/createClass';
 import showCode from '@/pages/showCode';
+import news from '@/pages/news';
 
 import store from '@/store/index';
 
@@ -199,6 +200,11 @@ const routes = [
       public: true
     }
   },
+  {
+    path: '/news',
+    component: news,
+    name: 'news'
+  },
   {path: '/styleguide', component: styleGuidePage},
   {path: '*', component: p404}
 ];

server/api/schema_public.py

@@ -2,7 +2,7 @@ import graphene
 from django.conf import settings
 from graphene_django.debug import DjangoDebug
 
-from newsteaser.schema import AllNewsTeasersQuery
+from newsteaser.schema_public import AllNewsTeasersQuery
 from users.mutations_public import UserMutations
 from registration.mutations_public import RegistrationMutations
 

server/newsteaser/migrations/0001_initial.py

@@ -1,4 +1,4 @@
-# Generated by Django 2.1.15 on 2020-05-20 10:57
+# Generated by Django 2.1.15 on 2020-05-20 13:39
 
 from django.db import migrations, models
 
@@ -21,6 +21,7 @@ class Migration(migrations.Migration):
                 ('date', models.DateField(null=True)),
                 ('order_id', models.IntegerField(default=-1)),
                 ('news_article_url', models.URLField(null=True, verbose_name='News Article URL')),
+                ('image_source', models.CharField(max_length=100, verbose_name='Image Source')),
             ],
         ),
     ]

server/newsteaser/models.py

@@ -9,6 +9,7 @@ class NewsTeaser(models.Model):
     date = models.DateField(blank=False, null=True)
     order_id = models.IntegerField(blank=False, null=False, default=-1)
     news_article_url = models.URLField(_('News Article URL'), blank=False, null=True)
+    image_source = models.CharField(_('Image Source'), max_length=100, blank=False, null=False)
 
     def __str__(self):
         return '{}'.format(self.title)

server/newsteaser/schema_public.py

@@ -14,7 +14,7 @@ class NewsTeaserNode(DjangoObjectType):
 
 
 class AllNewsTeasersQuery(object):
-    articles = DjangoFilterConnectionField(NewsTeaserNode)
+    news_teasers = DjangoFilterConnectionField(NewsTeaserNode)
 
-    def resolve_articles(self, info, **kwargs):
+    def resolve_news_teasers(self, info, **kwargs):
         return NewsTeaser.objects.all()