From 47324d49054bf97d69e81d9da36fecffa9105274 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 17 Jul 2019 09:57:08 +0200
Subject: [PATCH] example II - lint ok, test local ok

---
 webapp/graphql/PostQuery.js |  4 ++--
 webapp/locales/de.json      |  6 +++++
 webapp/locales/en.json      |  6 +++++
 webapp/pages/index.vue      | 47 +++++++++++++++++++++++++++++++++++++
 4 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js
index cac80d9b1..1daedf5e1 100644
--- a/webapp/graphql/PostQuery.js
+++ b/webapp/graphql/PostQuery.js
@@ -79,8 +79,8 @@ export default i18n => {
 export const filterPosts = i18n => {
   const lang = i18n.locale().toUpperCase()
   return gql(`
-  query Post($filter: _PostFilter, $first: Int, $offset: Int) {
-    Post(filter: $filter, first: $first, offset: $offset) {
+  query Post($filter: _PostFilter, $first: Int, $offset: Int, $orderBy: [_PostOrdering]) {
+    Post(filter: $filter, first: $first, offset: $offset, orderBy: $orderBy) {
       id
       title
       contentExcerpt
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 467a9a2ee..617741170 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -23,6 +23,12 @@
     "bank": "Bankverbindung",
     "germany": "Deutschland"
   },
+  "sorting": {
+    "newest": "Neuste",
+    "oldest": "Älteste",
+    "poular": "Beliebt",
+    "commented": "meist Kommentiert"
+  },
   "login": {
     "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
     "login": "Einloggen",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index edd2c6dc6..13d9f2ed6 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -23,6 +23,12 @@
     "bank": "bank account",
     "germany": "Germany"
   },
+  "sorting": {
+    "newest": "Newest",
+    "oldest": "Oldest",
+    "poular": "Popular",
+    "commented": "most Commented"
+  },
   "login": {
     "copy": "If you already have a human-connection account, login here.",
     "login": "Login",
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index 0930d9a71..d2ad96113 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -9,6 +9,17 @@
           @clearSearch="clearSearch"
         />
       </ds-flex-item>
+      <ds-flex-item>
+        <div style="width: 250px; position: relative; float: right; padding: 0 18px;">
+          <ds-select
+            v-model="selected"
+            :options="sortingOptions"
+            size="large"
+            v-bind:icon-right="sortingIcon"
+            @input="toggleOnlySorting"
+          ></ds-select>
+        </div>
+      </ds-flex-item>
       <hc-post-card
         v-for="(post, index) in posts"
         :key="post.id"
@@ -53,6 +64,36 @@ export default {
       pageSize: 12,
       filter: {},
       hashtag,
+      placeholder: this.$t('sorting.newest'),
+      selected: this.$t('sorting.newest'),
+      sortingIcon: 'sort-amount-desc',
+      sorting: 'createdAt_desc',
+      sortingOptions: [
+        {
+          label: this.$t('sorting.newest'),
+          value: 'Newest',
+          icons: 'sort-amount-desc',
+          order: 'createdAt_desc',
+        },
+        {
+          label: this.$t('sorting.oldest'),
+          value: 'Oldest',
+          icons: 'sort-amount-asc',
+          order: 'createdAt_asc',
+        },
+        {
+          label: this.$t('sorting.poular'),
+          value: 'Popular',
+          icons: 'fire',
+          order: 'shoutedCount_desc',
+        },
+        {
+          label: this.$t('sorting.commented'),
+          value: 'Commented',
+          icons: 'comment',
+          order: 'commentsCount_desc',
+        },
+      ],
     }
   },
   mounted() {
@@ -91,6 +132,11 @@ export default {
       this.filter = filter
       this.$apollo.queries.Post.refresh()
     },
+    toggleOnlySorting(x) {
+      this.sortingIcon = x.icons
+      this.sorting = x.order
+      this.$apollo.queries.Post.refetch()
+    },
     clearSearch() {
       this.$router.push({ path: '/' })
       this.hashtag = null
@@ -144,6 +190,7 @@ export default {
           filter: this.filter,
           first: this.pageSize,
           offset: 0,
+          orderBy: this.sorting,
         }
       },
       fetchPolicy: 'cache-and-network',