Merge pull request #434 from specklesystems/dim/branches

Dim/branches
This commit is contained in:
Dimitrie Stefanescu
2021-10-12 16:36:43 +01:00
committed by GitHub
5 changed files with 161 additions and 50 deletions
@@ -14,7 +14,9 @@
<v-spacer></v-spacer>
<v-btn icon @click="show = false"><v-icon>mdi-close</v-icon></v-btn>
</v-toolbar>
<v-alert v-show="error" dismissible type="error">
{{ error }}
</v-alert>
<v-form ref="form" v-model="valid" lazy-validation @submit.prevent="agree">
<v-card-text>
<v-text-field
@@ -25,6 +27,10 @@
required
autofocus
></v-text-field>
<p class="caption">
Tip: you can create nested branches by using "/" as a separator in their names. E.g.,
"mep/stage-1" or "arch/sketch-design".
</p>
<v-textarea v-model="branch.description" rows="2" label="Description"></v-textarea>
</v-card-text>
<v-card-actions>
@@ -79,7 +85,8 @@ export default {
],
isEdit: false,
pendingDelete: false,
allBranchNames: []
allBranchNames: [],
error: null
}
},
apollo: {
@@ -125,6 +132,7 @@ export default {
methods: {
async deleteBranch() {
this.loading = true
this.error = null
this.$matomo && this.$matomo.trackPageView('branch/delete')
try {
await this.$apollo.mutate({
@@ -141,16 +149,18 @@ export default {
}
})
} catch (e) {
console.log(e)
this.error = e.message
}
this.loading = false
this.resolve({
result: true,
deleted: true
})
this.dialog = false
this.showDelete = false
if (!this.error) {
this.resolve({
result: true,
deleted: true
})
this.dialog = false
}
},
open(branch) {
this.dialog = true
@@ -22,6 +22,10 @@
required
autofocus
></v-text-field>
<p class="caption">
Tip: you can create nested branches by using "/" as a separator in their names. E.g.,
"mep/stage-1" or "arch/sketch-design".
</p>
<v-textarea v-model="description" rows="2" label="Description"></v-textarea>
</v-card-text>
<v-card-actions>
@@ -45,7 +49,7 @@ export default {
reservedBranchNames: ['main', 'globals'],
valid: false,
loading: false,
name: null,
name: '',
nameRules: [
(v) => !!v || 'Branches need a name too!',
(v) =>
+11 -13
View File
@@ -6,9 +6,9 @@
<span class="space-grotesk" style="max-width: 80%">{{ stream.branch.name }}</span>
<span class="caption ml-2 mb-2 pb-2">{{ stream.branch.description }}</span>
<v-chip
v-tooltip="`Branch ${stream.branch.name} has ${stream.branch.commits.totalCount} commits`"
class="ml-2 pl-2"
small
v-tooltip="`Branch ${stream.branch.name} has ${stream.branch.commits.totalCount} commits`"
>
<v-icon small>mdi-source-commit</v-icon>
{{ stream.branch.commits.totalCount }}
@@ -17,7 +17,6 @@
</portal>
<portal to="streamActionsBar">
<v-btn
elevation="0"
v-if="
loggedInUserId &&
stream &&
@@ -25,12 +24,13 @@
stream.branch &&
stream.branch.name !== 'main'
"
v-tooltip="'Edit branch'"
elevation="0"
color="primary"
small
rounded
:fab="$vuetify.breakpoint.mdAndDown"
dark
v-tooltip="'Edit branch'"
@click="editBranch()"
>
<v-icon small :class="`${$vuetify.breakpoint.mdAndDown ? '' : 'mr-2'}`">mdi-pencil</v-icon>
@@ -44,11 +44,11 @@
<v-col v-else-if="stream && stream.branch" cols="12" class="pa-0 ma-0">
<branch-edit-dialog ref="editBranchDialog" />
<div style="height: 60vh" v-if="latestCommitObjectUrl">
<div v-if="latestCommitObjectUrl" style="height: 60vh">
<renderer :object-url="latestCommitObjectUrl" show-selection-helper />
</div>
<v-list class="pa-0 ma-0" v-if="stream.branch.commits.items.length > 0">
<v-list v-if="stream.branch.commits.items.length > 0" class="pa-0 ma-0">
<list-item-commit
:commit="latestCommit"
:stream-id="streamId"
@@ -66,19 +66,18 @@
></list-item-commit>
<!-- TODO: pagination -->
</v-list>
</v-col>
<no-data-placeholder
v-if="!$apollo.loading && stream.branch && stream.branch.commits.totalCount === 0"
>
<h2 class="space-grotesk">Branch "{{stream.branch.name}}" has no commits.</h2>
<h2 class="space-grotesk">Branch "{{ stream.branch.name }}" has no commits.</h2>
</no-data-placeholder>
</v-row>
<error-placeholder
error-type="404"
v-if="!$apollo.loading && (error || stream.branch === null)"
error-type="404"
>
<h2>{{ error || `Branch "${$route.params.branchName}" does not exist.` }}</h2>
</error-placeholder>
@@ -162,6 +161,10 @@ export default {
else return null
}
},
mounted() {
if (this.$route.params.branchName === 'globals')
this.$router.push(`/streams/${this.$route.params.streamId}/globals`)
},
methods: {
editBranch() {
this.$refs.editBranchDialog.open(this.stream.branch).then((dialog) => {
@@ -181,11 +184,6 @@ export default {
}
})
}
},
mounted() {
console.log(this.$route.params)
if (this.$route.params.branchName === 'globals')
this.$router.push(`/streams/${this.$route.params.streamId}/globals`)
}
}
</script>
+125 -26
View File
@@ -106,7 +106,7 @@
</v-card>
<!-- Stream menu options -->
<v-list v-if="stream" style="padding-left: 10px" rounded dense class="mt-0 pt-0">
<v-list v-if="stream" style="padding-left: 10px" rounded dense class="mt-0 pt-0" expand>
<v-list-item link :to="`/streams/${stream.id}`" class="no-overlay">
<v-list-item-icon>
<v-icon small>mdi-home</v-icon>
@@ -117,7 +117,6 @@
</v-list-item>
<!-- Branch menu group -->
<!-- TODO: group by "/", eg. dim/a, dim/b, dim/c should be under a sub-group called "dim". -->
<v-list-group v-model="branchMenuOpen" class="my-2">
<template #activator>
<v-list-item-icon>
@@ -143,28 +142,77 @@
</v-list-item-content>
</v-list-item>
<v-list-item
v-for="(branch, i) in sortedBranches"
v-if="!$apollo.queries.branchQuery.loading"
:key="i"
link
:to="`/streams/${stream.id}/branches/${branch.name}`"
>
<v-list-item-icon>
<v-icon v-if="branch.name !== 'main'" small style="padding-top: 10px">
mdi-source-branch
</v-icon>
<v-icon v-else small style="padding-top: 10px" class="primary--text">mdi-star</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ branch.name }} ({{ branch.commits.totalCount }})
</v-list-item-title>
<v-list-item-subtitle class="caption">
{{ branch.description ? branch.description : 'no description' }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<!-- TODO -->
<div v-if="!$apollo.queries.branchQuery.loading">
<template v-for="(item, i) in groupedBranches">
<v-list-item
v-if="item.type === 'item'"
:key="i"
:to="`/streams/${stream.id}/branches/${item.name}`"
exact
>
<v-list-item-icon>
<v-icon v-if="item.name !== 'main'" small style="padding-top: 10px">
mdi-source-branch
</v-icon>
<v-icon v-else small style="padding-top: 10px" class="primary--text">
mdi-star
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ item.displayName }} ({{ item.commits.totalCount }})
</v-list-item-title>
<v-list-item-subtitle class="caption">
{{ item.description ? item.description : 'no description' }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-group
v-else
:key="i"
sub-group
:value="item.expand"
prepend-icon=""
:group="item.name"
>
<template #activator>
<v-list-item style="overflow: visible">
<v-list-item-icon style="position: relative; left: -26px">
<v-icon style="padding-top: 10px">
{{ item.expand ? 'mdi-chevron-down' : 'mdi-chevron-down' }}
</v-icon>
</v-list-item-icon>
<v-list-item-content style="position: relative; left: -8px">
<v-list-item-title>{{ item.name }}</v-list-item-title>
<v-list-item-subtitle class="caption">
{{ item.children.length }} branches
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</template>
<v-list-item
v-for="(kid, j) in item.children"
:key="j"
:to="`/streams/${stream.id}/branches/${kid.name}`"
exact
>
<v-list-item-icon>
<v-icon small style="padding-top: 10px">mdi-source-branch</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
{{ kid.displayName }} ({{ kid.commits.totalCount }})
</v-list-item-title>
<v-list-item-subtitle class="caption">
{{ kid.description ? kid.description : 'no description' }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list-group>
</template>
</div>
<v-skeleton-loader v-else type="list-item-two-line"></v-skeleton-loader>
<v-divider class="mb-2"></v-divider>
</v-list-group>
@@ -539,6 +587,10 @@ export default {
items {
name
description
author {
id
name
}
commits {
totalCount
}
@@ -551,6 +603,10 @@ export default {
return {
id: this.$route.params.streamId
}
},
update: (data) => {
// console.log(data.branchQuery.branches.items)
return data.branchQuery
}
},
$subscribe: {
@@ -598,6 +654,43 @@ export default {
}
},
computed: {
groupedBranches() {
if (!this.branchQuery) return
let branches = this.branchQuery.branches.items
let items = []
for (let b of branches) {
if (b.name === 'globals') continue
let parts = b.name.split('/')
if (parts.length === 1) {
items.push({ ...b, displayName: b.name, type: 'item', children: [] })
} else {
let existing = items.find((i) => i.name === parts[0] && i.type === 'group')
if (!existing) {
existing = { name: parts[0], type: 'group', children: [], expand: false }
items.push(existing)
}
existing.children.push({
...b,
displayName: parts.slice(1).join('/'),
type: 'item'
})
if (this.$route.path.includes(b.name)) existing.expand = true
}
}
let sorted = items.sort((a, b) => {
const nameA = a.name.toLowerCase()
const nameB = b.name.toLowerCase()
if (nameA < nameB) return -1
if (nameA > nameB) return 1
return 0
})
return [
...sorted.filter((it) => it.name === 'main'),
...sorted.filter((it) => it.name !== 'main')
]
// return items
},
streamUrl() {
return `${window.location.origin}/streams/${this.$route.params.streamId}`
},
@@ -631,14 +724,20 @@ export default {
}
},
watch: {
$route() {
$route(to) {
// Ensures branch menu is open when navigating to a branch url
if (this.$route.name.toLowerCase().includes('branch') && !this.branchMenuOpen)
if (to.name.toLowerCase().includes('branch') && !this.branchMenuOpen)
this.branchMenuOpen = true
// closes any share dialog
this.shareStream = false
this.snackbar = false
}
// branchMenuOpen(val) {
// if (this.$route.name.toLowerCase().includes('branch') && !val)
// this.$nextTick(() => {
// this.branchMenuOpen = true
// })
// }
},
mounted() {
setTimeout(
@@ -41,7 +41,7 @@ module.exports = {
Branch: {
async author( parent, args, context, info ) {
if ( parent.userId )
if ( parent.authorId && context.auth )
return await getUserById( { userId: parent.authorId } )
else return null
}