added settings and admin page templates

This commit is contained in:
Grzegorz Leoniec 2018-10-18 14:14:22 +02:00
parent b8a92cc1cf
commit 74642777b5
19 changed files with 441 additions and 173 deletions

58
pages/admin.vue Normal file
View File

@ -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>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Categories...
</ds-space>
</ds-card>
</template>

82
pages/admin/index.vue Normal file
View File

@ -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>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Notifications...
</ds-space>
</ds-card>
</template>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Organizations...
</ds-space>
</ds-card>
</template>

7
pages/admin/pages.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Pages...
</ds-space>
</ds-card>
</template>

7
pages/admin/settings.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Settings...
</ds-space>
</ds-card>
</template>

7
pages/admin/users.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Users...
</ds-space>
</ds-card>
</template>

View File

@ -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>

View File

@ -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>

View File

@ -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>

58
pages/settings.vue Normal file
View File

@ -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>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Download my Data...
</ds-space>
</ds-card>
</template>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Delete my Account...
</ds-space>
</ds-card>
</template>

View File

@ -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>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Invites...
</ds-space>
</ds-card>
</template>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
My Organizations...
</ds-space>
</ds-card>
</template>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Change my Password...
</ds-space>
</ds-card>
</template>

View File

@ -0,0 +1,7 @@
<template>
<ds-card>
<ds-space margin="small">
Settings...
</ds-space>
</ds-card>
</template>