feat(ui): adds empty stream page and stream query
This commit is contained in:
Matteo Cominetti
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<v-app id="speckle">
|
||||
<v-app-bar app color="white" flat>
|
||||
<v-container class="py-0 fill-height">
|
||||
<v-btn text to="/">
|
||||
@@ -62,8 +62,12 @@
|
||||
</div>
|
||||
<div>{{ serverInfo.company }}</div>
|
||||
<div>{{ serverInfo.description }}</div>
|
||||
<div>{{ serverInfo.adminContact }}</div>
|
||||
<code>{{ serverInfo.canonicalUrl }}</code>
|
||||
<div v-if="serverInfo.adminContact">
|
||||
{{ serverInfo.adminContact }}
|
||||
</div>
|
||||
<code v-if="serverInfo.canonicalUrl">
|
||||
{{ serverInfo.canonicalUrl }}
|
||||
</code>
|
||||
</v-sheet>
|
||||
</v-col>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-card class="mb-2" elevation="0" rounded="lg">
|
||||
<div>
|
||||
<v-row class="caption pl-4 pr-4">
|
||||
<v-col>
|
||||
<v-icon small color="grey lighten-1">mdi-cube-outline</v-icon>
|
||||
@@ -9,44 +9,49 @@
|
||||
<span v-if="commit.items">{{ commit.items.length }} commits</span>
|
||||
<span v-else>a commit</span>
|
||||
to
|
||||
<strong>{{ commit.streamName }}</strong>
|
||||
<strong>
|
||||
<router-link :to="'streams/' + commit.streamId">
|
||||
{{ commit.streamName }}
|
||||
</router-link>
|
||||
</strong>
|
||||
|
||||
<timeago :datetime="parseInt(commit.createdAt)"></timeago>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<v-card-title v-if="!commit.items" class="subtitle-2">
|
||||
{{ commit.message }}
|
||||
</v-card-title>
|
||||
<v-expansion-panels v-else flat>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header class="pl-4">
|
||||
<span class="subtitle-2">
|
||||
{{ commit.message }}
|
||||
</span>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="(item, i) in commit.items" :key="i">
|
||||
<div style="width: 100%">
|
||||
<v-row class="caption">
|
||||
<v-col>
|
||||
<span class="caption">{{ item.message }}</span>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col class="text-right">
|
||||
<timeago :datetime="parseInt(item.createdAt)"></timeago>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider v-if="i < commit.items.length - 1"></v-divider>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
<v-card class="mb-3" elevation="0" rounded="lg">
|
||||
<v-card-title v-if="!commit.items" class="subtitle-2">
|
||||
{{ commit.message }}
|
||||
</v-card-title>
|
||||
<v-expansion-panels v-else flat>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-header class="pl-4">
|
||||
<span class="subtitle-2">
|
||||
{{ commit.message }}
|
||||
</span>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-list dense>
|
||||
<v-list-item v-for="(item, i) in commit.items" :key="i">
|
||||
<div style="width: 100%">
|
||||
<v-row class="caption">
|
||||
<v-col>
|
||||
<span class="caption">{{ item.message }}</span>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col class="text-right">
|
||||
<timeago :datetime="parseInt(item.createdAt)"></timeago>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider v-if="i < commit.items.length - 1"></v-divider>
|
||||
</div>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<v-card class="mb-2" elevation="0" rounded="lg">
|
||||
<v-row class="caption pl-4 pr-4">
|
||||
<div>
|
||||
<v-row v-if="isFeed" class="caption pl-4 pr-4">
|
||||
<v-col>
|
||||
<v-icon small color="grey lighten-1">mdi-compare-vertical</v-icon>
|
||||
|
||||
@@ -8,38 +8,52 @@
|
||||
created a new stream
|
||||
<timeago :datetime="parseInt(stream.createdAt)"></timeago>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col class="mr-4 text-right">
|
||||
<span class="caption streamid">
|
||||
{{ stream.id }}
|
||||
</span>
|
||||
<v-icon small>mdi-key-outline</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<span class="caption">{{ stream.branches.totalCount }}</span>
|
||||
<v-icon small>mdi-source-branch</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<span class="caption">{{ stream.commits.totalCount }}</span>
|
||||
<v-icon small>mdi-cube-outline</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<span class="caption">{{ stream.collaborators.length }}</span>
|
||||
<v-icon small>mdi-account-outline</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<v-icon v-if="stream.isPublic" small>mdi-lock-open</v-icon>
|
||||
<v-icon v-else small>mdi-lock-outline</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider></v-divider>
|
||||
<v-row align="end">
|
||||
<v-col class="pt-0 pb-0">
|
||||
<v-card-title class="subtitle-2">
|
||||
{{ stream.name }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle>
|
||||
{{ stream.description }}
|
||||
</v-card-subtitle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
<v-card class="mb-3" elevation="0" rounded="lg">
|
||||
<v-row>
|
||||
<v-col class="pt-0 pb-0">
|
||||
<v-card-title class="subtitle-2">
|
||||
<router-link :to="'streams/' + stream.id">
|
||||
{{ stream.name }}
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
<v-card-subtitle>
|
||||
{{ stream.description }}
|
||||
</v-card-subtitle>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col class="mr-4 caption text-right">
|
||||
<div class="mt-1">
|
||||
<span class="streamid">
|
||||
<router-link :to="'streams/' + stream.id">
|
||||
{{ stream.id }}
|
||||
</router-link>
|
||||
</span>
|
||||
<v-icon small>mdi-key-outline</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<span>{{ stream.branches.totalCount }}</span>
|
||||
<v-icon small>mdi-source-branch</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<span>{{ stream.commits.totalCount }}</span>
|
||||
<v-icon small>mdi-cube-outline</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<span>{{ stream.collaborators.length }}</span>
|
||||
<v-icon small>mdi-account-outline</v-icon>
|
||||
<span class="ma-2"></span>
|
||||
<v-icon v-if="stream.isPublic" small>mdi-lock-open</v-icon>
|
||||
<v-icon v-else small>mdi-lock-outline</v-icon>
|
||||
</div>
|
||||
|
||||
<div v-if="!isFeed" class="mt-1 grey--text text--lighten-1">
|
||||
Created
|
||||
<timeago :datetime="parseInt(stream.createdAt)"></timeago>
|
||||
, updated
|
||||
<timeago :datetime="parseInt(stream.updatedAt)"></timeago>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
@@ -49,6 +63,10 @@ export default {
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
isFeed: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
query Stream($id: String!) {
|
||||
stream(id: $id) {
|
||||
id
|
||||
name
|
||||
description
|
||||
isPublic
|
||||
createdAt
|
||||
updatedAt
|
||||
collaborators {
|
||||
id
|
||||
name
|
||||
role
|
||||
}
|
||||
branches {
|
||||
totalCount
|
||||
cursor
|
||||
items {
|
||||
id
|
||||
name
|
||||
author {
|
||||
id
|
||||
suuid
|
||||
email
|
||||
name
|
||||
bio
|
||||
company
|
||||
avatar
|
||||
}
|
||||
description
|
||||
commits {
|
||||
totalCount
|
||||
cursor
|
||||
items {
|
||||
id
|
||||
message
|
||||
authorName
|
||||
authorId
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
import Vue from "vue"
|
||||
import VueRouter from "vue-router"
|
||||
import Home from "../views/Home.vue"
|
||||
import Streams from "../views/Streams.vue"
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@@ -9,12 +7,17 @@ const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "home",
|
||||
component: Home
|
||||
component: () => import("../views/Home.vue")
|
||||
},
|
||||
{
|
||||
path: "/streams",
|
||||
name: "streams",
|
||||
component: Streams
|
||||
name: "Streams",
|
||||
component: () => import("../views/Streams.vue")
|
||||
},
|
||||
{
|
||||
path: "/streams/:id",
|
||||
name: "Stream",
|
||||
component: () => import("../views/Stream.vue")
|
||||
},
|
||||
{
|
||||
path: "/help",
|
||||
|
||||
@@ -13,15 +13,13 @@
|
||||
</v-chip-group>
|
||||
</v-card>
|
||||
<div v-for="(activity, i) in recentActivity" :key="i">
|
||||
<!-- STREAM -->
|
||||
<stream-box
|
||||
v-if="activity.__typename === 'Stream'"
|
||||
:stream="activity"
|
||||
:is-feed="true"
|
||||
></stream-box>
|
||||
|
||||
<!-- COMMIT -->
|
||||
<commit-box
|
||||
v-if="activity.__typename === 'CommitCollectionUserNode'"
|
||||
v-else-if="activity.__typename === 'CommitCollectionUserNode'"
|
||||
:commit="activity"
|
||||
></commit-box>
|
||||
</div>
|
||||
@@ -82,6 +80,7 @@ export default {
|
||||
if (group.length > 1) {
|
||||
activityGrouped.push({
|
||||
streamName: group[0].streamName,
|
||||
streamId: group[0].streamId,
|
||||
createdAt: group[0].createdAt,
|
||||
message: group[0].message,
|
||||
__typename: "CommitCollectionUserNode",
|
||||
@@ -97,6 +96,7 @@ export default {
|
||||
if (group.length > 1) {
|
||||
activityGrouped.push({
|
||||
streamName: group[0].streamName,
|
||||
streamId: group[0].streamId,
|
||||
createdAt: group[0].createdAt,
|
||||
message: group[0].message,
|
||||
__typename: "CommitCollectionUserNode",
|
||||
@@ -122,8 +122,16 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style>
|
||||
.streamid {
|
||||
font-family: monospace !important;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<v-sheet v-if="stream" rounded="lg" class="pa-15 text-center">
|
||||
<h1>{{ stream.name }}</h1>
|
||||
<p class="ma-10 subtitle-1 font-weight-light">{{ stream.description }}</p>
|
||||
</v-sheet>
|
||||
</template>
|
||||
<script>
|
||||
import streamQuery from "../graphql/stream.gql"
|
||||
|
||||
export default {
|
||||
name: "Stream",
|
||||
apollo: {
|
||||
stream: {
|
||||
prefetch: true,
|
||||
query: streamQuery,
|
||||
variables() {
|
||||
// Use vue reactive properties here
|
||||
return {
|
||||
id: this.$route.params.id
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: () => ({}),
|
||||
watch: {
|
||||
stream(val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user