From 6961c96dd4ef5b58eaf26e971935c79fae21800a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 25 Aug 2021 09:07:40 +0200
Subject: [PATCH] Add styling to comments

---
 .../frontend/rooms/article-page.spec.js       |  5 +-
 client/src/components/news/NewsTeaser.vue     |  4 +-
 client/src/components/profile/Avatar.vue      |  2 +-
 client/src/components/rooms/Comment.vue       | 49 +++++++++++++++----
 client/src/components/rooms/CommentInput.vue  |  9 ++--
 client/src/components/ui/EmojiBar.vue         | 26 ++++++++--
 client/src/filters/date-filter.js             |  6 +++
 .../src/graphql/gql/mutations/addComment.gql  |  1 +
 .../graphql/gql/queries/roomEntryQuery.gql    |  1 +
 client/src/main.js                            |  3 +-
 client/src/pages/article.vue                  |  2 +-
 server/users/tests/test_my_school_classes.py  | 23 +++------
 12 files changed, 91 insertions(+), 40 deletions(-)

diff --git a/client/cypress/integration/frontend/rooms/article-page.spec.js b/client/cypress/integration/frontend/rooms/article-page.spec.js
index 38219d70..f8a596d4 100644
--- a/client/cypress/integration/frontend/rooms/article-page.spec.js
+++ b/client/cypress/integration/frontend/rooms/article-page.spec.js
@@ -42,11 +42,12 @@ describe('Article page', () => {
       operations,
     });
 
-    const commentText = 'First! 🖐️';
+    const commentText = 'First! ';
+    const emoji = '🖐';
     cy.visit(`/article/${slug}`);
     cy.getByDataCy('comment-textarea').type(commentText);
     cy.getByDataCy('emoji-button').should('have.length', 9).first().click();
     cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();
-    cy.getByDataCy('comment').first().should('contain', commentText);
+    cy.getByDataCy('comment').first().should('contain', commentText + emoji);
   });
 });
diff --git a/client/src/components/news/NewsTeaser.vue b/client/src/components/news/NewsTeaser.vue
index 4dcd97ae..2a95cfbe 100644
--- a/client/src/components/news/NewsTeaser.vue
+++ b/client/src/components/news/NewsTeaser.vue
@@ -31,9 +31,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
-@import "@/styles/_functions.scss";
-@import "@/styles/_mixins.scss";
+@import "~styles/helpers";
 
 .news-teaser {
   position: relative;
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index 441abb2b..3fcc46aa 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -78,7 +78,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
 
   $max-width: 100%;
 
diff --git a/client/src/components/rooms/Comment.vue b/client/src/components/rooms/Comment.vue
index d1cd15bb..6868143e 100644
--- a/client/src/components/rooms/Comment.vue
+++ b/client/src/components/rooms/Comment.vue
@@ -2,30 +2,61 @@
   <div
     class="comment"
     data-cy="comment">
-    <div>
-      Author {{ comment.author }}
+    <div class="comment__owner">
+      <user-widget :avatar-url="comment.owner.avatarUrl"/>
+      <span class="comment__owner-name">{{ comment.owner.firstName }} {{ comment.owner.lastName }}</span>
     </div>
-    <div>
-      Datum {{ comment.created }}
+    <div class="comment__date">
+      {{ comment.created | datetime }}
     </div>
-    <div>
-      Text {{ comment.text }}
+    <div class="comment__text">
+      {{ comment.text }}
     </div>
   </div>
 </template>
 
 <script>
+  import UserWidget from '@/components/UserWidget';
+
   export default {
     props: {
       comment: {
         type: Object,
-        default: null
-      }
-    }
+        default: null,
+      },
+    },
+    components: {UserWidget},
   };
 </script>
 
 <style scoped lang="scss">
   @import '~styles/helpers';
 
+  .comment {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: 2rem auto;
+    grid-template-areas: "o d" "t t";
+    padding: $medium-spacing 0 $large-spacing 0;
+    border-bottom: 1px solid $color-silver;
+    grid-row-gap: $medium-spacing;
+
+    &__owner {
+      grid-area: o;
+      display: flex;
+      align-items: center;
+    }
+
+    &__date {
+      grid-area: d;
+      justify-self: end;
+      align-self: center;
+      @include regular-text;
+    }
+
+    &__text {
+      grid-area: t;
+      @include regular-paragraph;
+    }
+  }
 </style>
diff --git a/client/src/components/rooms/CommentInput.vue b/client/src/components/rooms/CommentInput.vue
index da9dc6b9..36eed06a 100644
--- a/client/src/components/rooms/CommentInput.vue
+++ b/client/src/components/rooms/CommentInput.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="comment-input">
-    <emoji-bar/>
+    <emoji-bar @add-emoji="addEmoji"/>
     <textarea
       v-auto-grow
-      :value="value"
+      :value="text"
       data-cy="comment-textarea"
       class="comment-input__textarea"
       placeholder="Kommentar erfassen"
@@ -31,12 +31,15 @@
     },
     data() {
       return {
-        text: ''
+        text: this.value
       };
     },
     methods: {
       updateValue(text) {
         this.text = text;
+      },
+      addEmoji(emoji) {
+        this.text = this.text + emoji;
       }
     },
   };
diff --git a/client/src/components/ui/EmojiBar.vue b/client/src/components/ui/EmojiBar.vue
index 3ce4aaab..b29b33b8 100644
--- a/client/src/components/ui/EmojiBar.vue
+++ b/client/src/components/ui/EmojiBar.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
-    <span
+  <div class="emoji-bar">
+    <a
       :key="index"
-      class="emojis__emoji"
+      class="emoji-bar__emoji"
       data-cy="emoji-button"
       v-for="(emoji, index) in emojis"
-      @click="$emit('add-emoji', emoji)">{{ emoji }}</span>
+      @click="$emit('add-emoji', emoji)">{{ emoji }}</a>
   </div>
 </template>
 
@@ -15,11 +15,27 @@
       return {
         emojis: ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔'],
       };
-    }
+    },
   };
 </script>
 
 <style scoped lang="scss">
   @import '~styles/helpers';
 
+  .emoji-bar {
+    display: flex;
+    border-bottom: 1px solid $color-silver;
+    padding: $small-spacing $medium-spacing;
+    margin: -$medium-spacing;
+    margin-bottom: $medium-spacing;
+
+    &__emoji {
+      font-size: toRem(32px);
+      margin-right: $medium-spacing;
+      display: inline-flex;
+      cursor: pointer;
+    }
+
+  }
+
 </style>
diff --git a/client/src/filters/date-filter.js b/client/src/filters/date-filter.js
index 139caab8..c72d834f 100644
--- a/client/src/filters/date-filter.js
+++ b/client/src/filters/date-filter.js
@@ -7,3 +7,9 @@ export const dateFilter = value => {
     return moment(String(value)).format('DD. MMMM YYYY');
   }
 };
+
+export const dateTimeFilter = value => {
+  if (value) {
+    return moment(String(value)).format('DD. MMMM YYYY, hh:mm');
+  }
+};
diff --git a/client/src/graphql/gql/mutations/addComment.gql b/client/src/graphql/gql/mutations/addComment.gql
index 6535f630..a271ed55 100644
--- a/client/src/graphql/gql/mutations/addComment.gql
+++ b/client/src/graphql/gql/mutations/addComment.gql
@@ -5,6 +5,7 @@ mutation AddComment($input: AddCommentInput!) {
       text
       id
       owner {
+        avatarUrl
         firstName
         lastName
       }
diff --git a/client/src/graphql/gql/queries/roomEntryQuery.gql b/client/src/graphql/gql/queries/roomEntryQuery.gql
index 210c4e12..33322798 100644
--- a/client/src/graphql/gql/queries/roomEntryQuery.gql
+++ b/client/src/graphql/gql/queries/roomEntryQuery.gql
@@ -9,6 +9,7 @@ query RoomEntryQuery($slug: String!) {
           owner {
             firstName
             lastName
+            avatarUrl
           }
           created
         }
diff --git a/client/src/main.js b/client/src/main.js
index 2f06f7ce..b4fb3662 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -10,7 +10,7 @@ import VueScrollTo from 'vue-scrollto';
 import {Validator, install as VeeValidate} from 'vee-validate/dist/vee-validate.minimal.esm.js';
 import {required, min, decimal, confirmed} from 'vee-validate/dist/rules.esm.js';
 import veeDe from 'vee-validate/dist/locale/de';
-import {dateFilter} from './filters/date-filter';
+import {dateFilter, dateTimeFilter} from './filters/date-filter';
 import autoGrow from '@/directives/auto-grow';
 import clickOutside from '@/directives/click-outside';
 import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
@@ -104,6 +104,7 @@ Vue.use(VeeValidate, {
 });
 
 Vue.filter('date', dateFilter);
+Vue.filter('datetime', dateTimeFilter);
 
 /* guards */
 
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index f4964b80..f0a44aa9 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -71,7 +71,6 @@
 
     methods: {
       createComment(text) {
-        console.log('text', text);
         this.$apollo.mutate({
           mutation: ADD_COMMENT_MUTATION,
           variables: {
@@ -93,6 +92,7 @@
               if (data) {
                 data.roomEntry.comments.edges.unshift({
                   node: comment,
+                  __typename: 'CommentNodeEdge'
                 });
                 store.writeQuery({query, variables, data});
               }
diff --git a/server/users/tests/test_my_school_classes.py b/server/users/tests/test_my_school_classes.py
index 5da35782..2120e5e9 100644
--- a/server/users/tests/test_my_school_classes.py
+++ b/server/users/tests/test_my_school_classes.py
@@ -7,12 +7,12 @@
 #
 # Created on 2019-04-09
 # @author: chrigu <christian.cueni@iterativ.ch>
-from django.test import TestCase, RequestFactory
+from django.test import RequestFactory, TestCase
 from graphene.test import Client
+
 from api.schema import schema
 from api.utils import get_graphql_query
 from core.factories import UserFactory
-
 from users.factories import SchoolClassFactory
 from users.models import SchoolClassMember
 
@@ -43,15 +43,11 @@ class MySchoolClasses(TestCase):
                     node {
                       id
                       name
-                      users {
-                        edges {
-                          node {
-                            id
-                            firstName
-                            lastName
-                            permissions
-                          }
-                        }
+                      members {
+                        id
+                        firstName
+                        lastName
+                        permissions
                       }
                     }
                   }
@@ -61,6 +57,7 @@ class MySchoolClasses(TestCase):
         '''
 
         result = self.client.execute(query)
+        self.assertIsNone(result.get('errors'))
 
         classes = result.get('data').get('me').get('schoolClasses').get('edges')
         self.assertEqual(len(classes), 2)
@@ -80,7 +77,3 @@ class MySchoolClasses(TestCase):
 
         old_classes = result.get('data').get('me').get('oldClasses').get('edges')
         self.assertEqual(len(old_classes), 1)
-
-
-
-