feat(ui): scaffolding feed

This commit is contained in:
Matteo Cominetti
2020-10-01 22:39:57 +01:00
parent b299e18c22
commit 4edf26e9e3
6 changed files with 91 additions and 26 deletions
+6 -5
View File
@@ -9,8 +9,7 @@
},
"ignorePatterns": [
"modules/*/tests/*",
"node_modules/*",
"frontend/*"
"node_modules/*"
],
"rules": {
"arrow-spacing": [
@@ -45,9 +44,11 @@
2
],
"space-unary-ops": [
2, {
2,
{
"words": true,
"nonwords": false
}]
}
]
}
}
}
+18 -4
View File
@@ -5635,8 +5635,7 @@
"date-fns": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==",
"dev": true
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
},
"de-indent": {
"version": "1.0.2",
@@ -9625,8 +9624,7 @@
"moment": {
"version": "2.25.3",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
"integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==",
"dev": true
"integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg=="
},
"move-concurrently": {
"version": "1.0.1",
@@ -14174,6 +14172,14 @@
}
}
},
"vue-moment": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/vue-moment/-/vue-moment-4.1.0.tgz",
"integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
"requires": {
"moment": "^2.19.2"
}
},
"vue-router": {
"version": "3.4.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.5.tgz",
@@ -14213,6 +14219,14 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vue-timeago": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/vue-timeago/-/vue-timeago-5.1.2.tgz",
"integrity": "sha512-K74EdER1WO1XX+EIsf5ZeHucZjconfncOTlKxntC7s7q0QAAgiZt5BYenJ/GPHEEcxfmrGsiFWJPYmLHyNzDRg==",
"requires": {
"date-fns": "^1.29.0"
}
},
"vuetify": {
"version": "2.3.12",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.12.tgz",
+1
View File
@@ -15,6 +15,7 @@
"vue": "^2.6.12",
"vue-apollo": "^3.0.4",
"vue-router": "^3.4.5",
"vue-timeago": "^5.1.2",
"vuetify": "^2.3.12",
"vuex": "^3.5.1"
},
+21 -10
View File
@@ -2,11 +2,16 @@
<v-app id="inspire">
<v-app-bar app color="white" flat>
<v-container class="py-0 fill-height">
<v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
<v-toolbar-title class="mr-5" style="margin-top: -4px">
<span class="primary--text caption"><b>SPECKLE</b></span
>&nbsp;<span class="caption">ADMIN</span>
</v-toolbar-title>
<v-btn text>
<v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
<div class="mt-1">
<span class="primary--text"><b>SPECKLE</b></span>&nbsp;<span class="font-weight-light">ADMIN</span>
</div>
</v-btn>
<v-btn v-for="link in links" :key="link" text>
{{ link }}
@@ -56,11 +61,11 @@
</v-col>
<v-col>
<v-sheet min-height="70vh" rounded="lg">
<v-main>
<router-view></router-view>
<!-- <v-sheet min-height="70vh" rounded="lg"> -->
<v-main class="pt-0">
<router-view :user="user"></router-view>
</v-main>
</v-sheet>
<!-- </v-sheet> -->
</v-col>
</v-row>
</v-container>
@@ -113,6 +118,12 @@ export default {
data: () => ( {
user: {},
links: [ "streams", "projects", "profile", "settings", "help" ],
} )
} ),
watch:{
user( val ){
console.log( val )
}
}
}
</script>
+10 -3
View File
@@ -3,9 +3,10 @@ import App from './AppFrontend.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
import { createProvider, onLogin } from './vue-apollo'
import { createProvider, } from './vue-apollo'
import { signIn } from './auth-helpers'
import crs from 'crypto-random-string'
import VueTimeago from 'vue-timeago'
Vue.config.productionTip = false
@@ -13,10 +14,16 @@ Vue.config.productionTip = false
;
/* Semicolon of Doom */
( async ( ) => {
let result = await signIn( )
if ( !result ) return
let app = new Vue( {
Vue.use( VueTimeago, {
locale: 'en' } )
new Vue( {
router,
store,
vuetify,
+35 -4
View File
@@ -1,8 +1,39 @@
<template>
<div>
<h1>
<div v-if="user.streams && user.streams.items">
<v-card class="mb-5" elevation="0" rounded="lg">
<v-subheader class="text-uppercase"> Recent activity: </v-subheader>
<v-chip class="ml-3 mb-3" small color="indigo" text-color="white">
all activity
</v-chip>
<v-chip class="ml-3 mb-3" small color="orange" text-color="white">
your activity
</v-chip>
<v-chip class="ml-3 mb-3" small color="green" text-color="white">
team activity
</v-chip>
</v-card>
</h1>
<v-card
v-for="(stream, i) in user.streams.items"
:key="i"
class="mb-2"
elevation="0"
rounded="lg"
>
<v-row class="caption pl-4 pr-4 grey--text text--lighten-1">
<v-col><strong>You</strong> created a new stream</v-col>
<v-spacer></v-spacer>
<v-col class="text-right"><timeago :datetime="parseInt(stream.createdAt)"></timeago></v-col>
</v-row>
<v-divider></v-divider>
<v-card-title>
{{ stream.name }}
</v-card-title>
<v-card-subtitle>
{{ stream.description }}
</v-card-subtitle>
</v-card>
</div>
</template>
<script>
@@ -15,4 +46,4 @@ export default {
data: () => ( {} ),
props: [ "user" ],
}
</script>
</script>