From 74642777b5dfd08a42f262338dd642b0e188059c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 18 Oct 2018 14:14:22 +0200
Subject: [PATCH] added settings and admin page templates

---
 pages/admin.vue                     |  58 ++++++
 pages/admin/categories.vue          |   7 +
 pages/admin/index.vue               |  82 +++++++++
 pages/admin/notifications.vue       |   7 +
 pages/admin/organizations.vue       |   7 +
 pages/admin/pages.vue               |   7 +
 pages/admin/settings.vue            |   7 +
 pages/admin/users.vue               |   7 +
 pages/index.vue                     |  24 +--
 pages/post/_slug.vue                |  27 ++-
 pages/profile/_slug.vue             | 271 ++++++++++++++--------------
 pages/settings.vue                  |  58 ++++++
 pages/settings/data-download.vue    |   7 +
 pages/settings/delete-account.vue   |   7 +
 pages/settings/index.vue            |  10 +-
 pages/settings/invites.vue          |   7 +
 pages/settings/my-organizations.vue |   7 +
 pages/settings/password.vue         |   7 +
 pages/settings/settings.vue         |   7 +
 19 files changed, 441 insertions(+), 173 deletions(-)
 create mode 100644 pages/admin.vue
 create mode 100644 pages/admin/categories.vue
 create mode 100644 pages/admin/index.vue
 create mode 100644 pages/admin/notifications.vue
 create mode 100644 pages/admin/organizations.vue
 create mode 100644 pages/admin/pages.vue
 create mode 100644 pages/admin/settings.vue
 create mode 100644 pages/admin/users.vue
 create mode 100644 pages/settings.vue
 create mode 100644 pages/settings/data-download.vue
 create mode 100644 pages/settings/delete-account.vue
 create mode 100644 pages/settings/invites.vue
 create mode 100644 pages/settings/my-organizations.vue
 create mode 100644 pages/settings/password.vue
 create mode 100644 pages/settings/settings.vue

diff --git a/pages/admin.vue b/pages/admin.vue
new file mode 100644
index 000000000..13f4b6705
--- /dev/null
+++ b/pages/admin.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <ds-heading tag="h1">
+      Administartion
+    </ds-heading>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '200px' }">
+        <ds-menu :routes="routes" />
+      </ds-flex-item>
+      <ds-flex-item>
+        <transition
+          name="slide-up"
+          appear>
+          <nuxt-child />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      routes: [
+        {
+          name: 'Dashboard',
+          path: `/admin`
+        },
+        {
+          name: 'Users',
+          path: `/admin/users`
+        },
+        {
+          name: 'Organizations',
+          path: `/admin/organizations`
+        },
+        {
+          name: 'Pages',
+          path: `/admin/pages`
+        },
+        {
+          name: 'Notifications',
+          path: `/admin/notifications`
+        },
+        {
+          name: 'Categories',
+          path: `/admin/categories`
+        },
+        {
+          name: 'Settings',
+          path: `/admin/settings`
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/pages/admin/categories.vue b/pages/admin/categories.vue
new file mode 100644
index 000000000..0c7f18075
--- /dev/null
+++ b/pages/admin/categories.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Categories...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
new file mode 100644
index 000000000..f0d618073
--- /dev/null
+++ b/pages/admin/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <ds-card>
+    <ds-space margin="large">
+      <ds-flex>
+        <ds-flex-item>
+          <ds-number
+            :count="3802 | number(0)"
+            label="Users"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-number
+            :count="10491 | number(0)"
+            label="Posts"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-number
+            :count="43644 | number(0)"
+            label="Comments"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+      </ds-flex>
+    </ds-space>
+    <ds-space margin="x-large">
+      <ds-flex>
+        <ds-flex-item>
+          <ds-number
+            :count="80046 | number(0)"
+            label="Notifications"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-number
+            :count="273 | number(0)"
+            label="Organization"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-number
+            :count="0 | number(0)"
+            label="Projects"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+      </ds-flex>
+    </ds-space>
+    <ds-space margin="x-large">
+      <ds-flex>
+        <ds-flex-item>
+          <ds-number
+            :count="2174 | number(0)"
+            label="Open Invites"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-number
+            :count="1383 | number(0)"
+            label="Follows"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+        <ds-flex-item>
+          <ds-number
+            :count="27180 | number(0)"
+            label="Shouts"
+            size="x-large"
+            uppercase />
+        </ds-flex-item>
+      </ds-flex>
+    </ds-space>
+  </ds-card>
+</template>
+
+<script>
+
diff --git a/pages/admin/notifications.vue b/pages/admin/notifications.vue
new file mode 100644
index 000000000..8afa84c34
--- /dev/null
+++ b/pages/admin/notifications.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Notifications...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/admin/organizations.vue b/pages/admin/organizations.vue
new file mode 100644
index 000000000..f2ae47c18
--- /dev/null
+++ b/pages/admin/organizations.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Organizations...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/admin/pages.vue b/pages/admin/pages.vue
new file mode 100644
index 000000000..3474cf612
--- /dev/null
+++ b/pages/admin/pages.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Pages...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/admin/settings.vue b/pages/admin/settings.vue
new file mode 100644
index 000000000..f5f2f694d
--- /dev/null
+++ b/pages/admin/settings.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Settings...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/admin/users.vue b/pages/admin/users.vue
new file mode 100644
index 000000000..4fc462ec9
--- /dev/null
+++ b/pages/admin/users.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Users...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/index.vue b/pages/index.vue
index 14858edc6..4103b8553 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,18 +1,14 @@
 <template>
-  <div>
-    <no-ssr>
-      <ds-flex
-        :width="{ base: '100%' }"
-        gutter="base">
-        <ds-flex-item
-          v-for="post in Post"
-          :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-          :key="post.id">
-          <hc-post-card :post="post" />
-        </ds-flex-item>
-      </ds-flex>
-    </no-ssr>
-  </div>
+  <ds-flex
+    :width="{ base: '100%' }"
+    gutter="base">
+    <ds-flex-item
+      v-for="post in Post"
+      :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+      :key="post.id">
+      <hc-post-card :post="post" />
+    </ds-flex-item>
+  </ds-flex>
 </template>
 
 <script>
diff --git a/pages/post/_slug.vue b/pages/post/_slug.vue
index 2a719a690..c3022b8a3 100644
--- a/pages/post/_slug.vue
+++ b/pages/post/_slug.vue
@@ -1,20 +1,17 @@
 <template>
   <div>
-    <no-ssr>
-      <ds-flex gutter="small">
-        <ds-flex-item>
-          <transition
-            name="slide-up"
-            appear>
-            <nuxt-child />
-          </transition>
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '200px' }">
-          <ds-menu
-            :routes="routes" />
-        </ds-flex-item>
-      </ds-flex>
-    </no-ssr>
+    <ds-flex gutter="small">
+      <ds-flex-item>
+        <transition
+          name="slide-up"
+          appear>
+          <nuxt-child />
+        </transition>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '200px' }">
+        <ds-menu :routes="routes" />
+      </ds-flex-item>
+    </ds-flex>
   </div>
 </template>
 
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index b5e19bc2c..d6d73d2cb 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -3,149 +3,146 @@
     <ds-card v-if="user && user.image">
       <p>PROFILE IMAGE</p>
     </ds-card>
-    <no-ssr>
-      <ds-space/>
-      <ds-flex
-        v-if="user"
-        :width="{ base: '100%' }"
-        gutter="base">
-        <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-          <ds-card style="position: relative; height: auto;">
-            <ds-avatar
-              :image="user.avatar"
-              :name="user.name || 'Anonymus'"
-              class="profile-avatar"
-              size="120px" />
-            <h3 style="text-align: center;">{{ user.name }}</h3>
-            <ds-space/>
-            <ds-flex>
-              <ds-flex-item style="text-align: center;">
-                <ds-text
-                  size="x-large"
-                  style="margin-bottom: 0;">{{ fanCount }}</ds-text>
-                <ds-text size="small">Fans</ds-text>
-              </ds-flex-item>
-              <ds-flex-item style="text-align: center;">
-                <ds-text
-                  size="x-large"
-                  style="margin-bottom: 0;">{{ user.friendsCount }}</ds-text>
-                <ds-text size="small">Freunde</ds-text>
-              </ds-flex-item>
-            </ds-flex>
-            <ds-space
-              margin="small">
-              <hc-follow-button
-                v-if="!myProfile"
-                :follow-id="user.id"
-                @update="voted = true && fetchUser()" />
-            </ds-space>
-          </ds-card>
+    <ds-space/>
+    <ds-flex
+      v-if="user"
+      :width="{ base: '100%' }"
+      gutter="base">
+      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+        <ds-card style="position: relative; height: auto;">
+          <ds-avatar
+            :image="user.avatar"
+            :name="user.name || 'Anonymus'"
+            class="profile-avatar"
+            size="120px" />
+          <h3 style="text-align: center;">{{ user.name }}</h3>
           <ds-space/>
-          <h2 style="text-align: center; margin-bottom: 10px;">Netzwerk</h2>
-          <ds-card style="position: relative; height: auto;">
-            <ds-space
-              v-if="user.following && user.following.length"
-              margin="x-small">
+          <ds-flex>
+            <ds-flex-item style="text-align: center;">
               <ds-text
-                tag="h5"
-                color="soft">
-                Wem folgt {{ user.name | truncate(15) }}?
-              </ds-text>
-            </ds-space>
-            <template v-if="user.following && user.following.length">
-              <ds-space
-                v-for="follow in user.following"
-                :key="follow.id"
-                margin="x-small">
-                <hc-related-user
-                  :post="follow"
-                  :trunc="15" />
-              </ds-space>
-            </template>
-            <template v-else>
-              <p style="text-align: center; opacity: .5;">{{ user.name }} folgt niemandem</p>
-            </template>
-          </ds-card>
-          <ds-space/>
-          <ds-card style="position: relative; height: auto;">
-            <ds-space
-              v-if="user.followedBy && user.followedBy.length"
-              margin="x-small">
-              <ds-text
-                tag="h5"
-                color="soft">
-                Wer folgt {{ user.name | truncate(15) }}?
-              </ds-text>
-            </ds-space>
-            <template v-if="user.followedBy && user.followedBy.length">
-              <ds-space
-                v-for="follow in user.followedBy"
-                :key="follow.id"
-                margin="x-small">
-                <hc-related-user
-                  :post="follow"
-                  :trunc="15" />
-              </ds-space>
-            </template>
-            <template v-else>
-              <p style="text-align: center; opacity: .5;">niemand folgt {{ user.name }}</p>
-            </template>
-          </ds-card>
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-          <ds-flex
-            :width="{ base: '100%' }"
-            gutter="small">
-            <ds-flex-item>
-              <ds-card class="ds-tab-nav">
-                <ds-flex>
-                  <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
-                    <ds-space margin="small">
-                      <ds-text
-                        size="x-large"
-                        style="margin-bottom: 0; text-align: center">{{ user.contributionsCount }}</ds-text>
-                      <ds-text
-                        size="small"
-                        style="text-align: center">Beiträge</ds-text>
-                    </ds-space>
-                  </ds-flex-item>
-                  <ds-flex-item class="ds-tab-nav-item">
-                    <ds-space margin="small">
-                      <ds-text
-                        size="x-large"
-                        style="margin-bottom: 0; text-align: center">{{ user.commentsCount }}</ds-text>
-                      <ds-text
-                        size="small"
-                        style="text-align: center">Kommentiert</ds-text>
-                    </ds-space>
-                  </ds-flex-item>
-                  <ds-flex-item class="ds-tab-nav-item">
-                    <ds-space margin="small">
-                      <ds-text
-                        size="x-large"
-                        style="margin-bottom: 0; text-align: center">{{ user.shoutedCount }}</ds-text>
-                      <ds-text
-                        size="small"
-                        style="text-align: center">Empfohlen</ds-text>
-                    </ds-space>
-                  </ds-flex-item>
-                </ds-flex>
-              </ds-card>
+                size="x-large"
+                style="margin-bottom: 0;">{{ fanCount }}</ds-text>
+              <ds-text size="small">Fans</ds-text>
             </ds-flex-item>
-            <ds-flex-item
-              v-for="{ Post } in user.contributions"
-              :width="{ base: '100%', md: '100%', xl: '50%' }"
-              :key="Post.id">
-              <hc-post-card
-                :post="Post"
-                :show-author-popover="false" />
+            <ds-flex-item style="text-align: center;">
+              <ds-text
+                size="x-large"
+                style="margin-bottom: 0;">{{ user.friendsCount }}</ds-text>
+              <ds-text size="small">Freunde</ds-text>
             </ds-flex-item>
           </ds-flex>
-        </ds-flex-item>
-      </ds-flex>
-    </no-ssr>
+          <ds-space
+            margin="small">
+            <hc-follow-button
+              v-if="!myProfile"
+              :follow-id="user.id"
+              @update="voted = true && fetchUser()" />
+          </ds-space>
+        </ds-card>
+        <ds-space/>
+        <h2 style="text-align: center; margin-bottom: 10px;">Netzwerk</h2>
+        <ds-card style="position: relative; height: auto;">
+          <ds-space
+            v-if="user.following && user.following.length"
+            margin="x-small">
+            <ds-text
+              tag="h5"
+              color="soft">
+              Wem folgt {{ user.name | truncate(15) }}?
+            </ds-text>
+          </ds-space>
+          <template v-if="user.following && user.following.length">
+            <ds-space
+              v-for="follow in user.following"
+              :key="follow.id"
+              margin="x-small">
+              <hc-related-user
+                :post="follow"
+                :trunc="15" />
+            </ds-space>
+          </template>
+          <template v-else>
+            <p style="text-align: center; opacity: .5;">{{ user.name }} folgt niemandem</p>
+          </template>
+        </ds-card>
+        <ds-space/>
+        <ds-card style="position: relative; height: auto;">
+          <ds-space
+            v-if="user.followedBy && user.followedBy.length"
+            margin="x-small">
+            <ds-text
+              tag="h5"
+              color="soft">
+              Wer folgt {{ user.name | truncate(15) }}?
+            </ds-text>
+          </ds-space>
+          <template v-if="user.followedBy && user.followedBy.length">
+            <ds-space
+              v-for="follow in user.followedBy"
+              :key="follow.id"
+              margin="x-small">
+              <hc-related-user
+                :post="follow"
+                :trunc="15" />
+            </ds-space>
+          </template>
+          <template v-else>
+            <p style="text-align: center; opacity: .5;">niemand folgt {{ user.name }}</p>
+          </template>
+        </ds-card>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+        <ds-flex
+          :width="{ base: '100%' }"
+          gutter="small">
+          <ds-flex-item>
+            <ds-card class="ds-tab-nav">
+              <ds-flex>
+                <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
+                  <ds-space margin="small">
+                    <ds-text
+                      size="x-large"
+                      style="margin-bottom: 0; text-align: center">{{ user.contributionsCount }}</ds-text>
+                    <ds-text
+                      size="small"
+                      style="text-align: center">Beiträge</ds-text>
+                  </ds-space>
+                </ds-flex-item>
+                <ds-flex-item class="ds-tab-nav-item">
+                  <ds-space margin="small">
+                    <ds-text
+                      size="x-large"
+                      style="margin-bottom: 0; text-align: center">{{ user.commentsCount }}</ds-text>
+                    <ds-text
+                      size="small"
+                      style="text-align: center">Kommentiert</ds-text>
+                  </ds-space>
+                </ds-flex-item>
+                <ds-flex-item class="ds-tab-nav-item">
+                  <ds-space margin="small">
+                    <ds-text
+                      size="x-large"
+                      style="margin-bottom: 0; text-align: center">{{ user.shoutedCount }}</ds-text>
+                    <ds-text
+                      size="small"
+                      style="text-align: center">Empfohlen</ds-text>
+                  </ds-space>
+                </ds-flex-item>
+              </ds-flex>
+            </ds-card>
+          </ds-flex-item>
+          <ds-flex-item
+            v-for="{ Post } in user.contributions"
+            :width="{ base: '100%', md: '100%', xl: '50%' }"
+            :key="Post.id">
+            <hc-post-card
+              :post="Post"
+              :show-author-popover="false" />
+          </ds-flex-item>
+        </ds-flex>
+      </ds-flex-item>
+    </ds-flex>
   </div>
-
 </template>
 
 <script>
diff --git a/pages/settings.vue b/pages/settings.vue
new file mode 100644
index 000000000..7b625e742
--- /dev/null
+++ b/pages/settings.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <ds-heading tag="h1">
+      Settings
+    </ds-heading>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '200px' }">
+        <ds-menu :routes="routes" />
+      </ds-flex-item>
+      <ds-flex-item>
+        <transition
+          name="slide-up"
+          appear>
+          <nuxt-child />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      routes: [
+        {
+          name: 'Your Data',
+          path: `/settings`
+        },
+        {
+          name: 'Password',
+          path: `/settings/password`
+        },
+        {
+          name: 'Invites',
+          path: `/settings/invites`
+        },
+        {
+          name: 'Data Download',
+          path: `/settings/data-download`
+        },
+        {
+          name: 'Delete Account',
+          path: `/settings/delete-account`
+        },
+        {
+          name: 'My Organizations',
+          path: `/settings/my-organizations`
+        },
+        {
+          name: 'Settings',
+          path: `/settings/settings`
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/pages/settings/data-download.vue b/pages/settings/data-download.vue
new file mode 100644
index 000000000..cb70be586
--- /dev/null
+++ b/pages/settings/data-download.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Download my Data...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/settings/delete-account.vue b/pages/settings/delete-account.vue
new file mode 100644
index 000000000..8c9a02558
--- /dev/null
+++ b/pages/settings/delete-account.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Delete my Account...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 725b9ee8a..048d0d2bb 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -1,9 +1,5 @@
 <template>
-  <ds-flex>
-    <ds-flex-item>
-      <ds-heading tag="h1">
-        Einstellungen
-      </ds-heading>
-    </ds-flex-item>
-  </ds-flex>
+  <ds-card>
+    <p>My Data...</p>
+  </ds-card>
 </template>
diff --git a/pages/settings/invites.vue b/pages/settings/invites.vue
new file mode 100644
index 000000000..2ca110f6f
--- /dev/null
+++ b/pages/settings/invites.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Invites...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/settings/my-organizations.vue b/pages/settings/my-organizations.vue
new file mode 100644
index 000000000..c3c32f377
--- /dev/null
+++ b/pages/settings/my-organizations.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      My Organizations...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/settings/password.vue b/pages/settings/password.vue
new file mode 100644
index 000000000..8914ef00e
--- /dev/null
+++ b/pages/settings/password.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Change my Password...
+    </ds-space>
+  </ds-card>
+</template>
diff --git a/pages/settings/settings.vue b/pages/settings/settings.vue
new file mode 100644
index 000000000..f5f2f694d
--- /dev/null
+++ b/pages/settings/settings.vue
@@ -0,0 +1,7 @@
+<template>
+  <ds-card>
+    <ds-space margin="small">
+      Settings...
+    </ds-space>
+  </ds-card>
+</template>