Skip to content

Commit

Permalink
Polish UI to allow crumb-style navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
andreas-marschke committed Jan 8, 2024
1 parent d85f817 commit aef2e57
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 26 deletions.
2 changes: 1 addition & 1 deletion api/router.go
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ func Route() *mux.Router {
projectUserAPI.Path("/webhooks").HandlerFunc(projects.AddWebhook).Methods("POST")

projectWebhooksAPI := projectUserAPI.PathPrefix("/webhook").Subrouter()

projectWebhooksAPI.Use(projects.ProjectMiddleware, projects.WebhookMiddleware)
projectWebhooksAPI.Path("/{webhook_id}").Methods("GET", "HEAD").HandlerFunc(projects.GetWebhook)
projectWebhooksAPI.Path("/{webhook_id}").Methods("PUT").HandlerFunc(projects.UpdateWebhook)
projectWebhooksAPI.Path("/{webhook_id}").Methods("DELETE").HandlerFunc(projects.DeleteWebhook)
Expand Down
4 changes: 1 addition & 3 deletions web/src/views/project/WebhookExtractValue.vue
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,6 @@
</div>
</template>
<script>
import { USER_PERMISSIONS } from '@/lib/constants';
import ItemListPageBase from '@/components/ItemListPageBase';
import WebhookExtractorsBase from '@/components/WebhookExtractorsBase';
Expand Down Expand Up @@ -125,7 +123,7 @@ export default {
methods: {
allowActions() {
return this.can(USER_PERMISSIONS.updateProject);
return true;
},
getHeaders() {
Expand Down
9 changes: 4 additions & 5 deletions web/src/views/project/WebhookExtractor.vue
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div>
<WebhookExtractorCrumb/>
<WebhookExtractValue/>
<WebhookMatcher/>
</div>
</template>
<script>
import { USER_PERMISSIONS } from '@/lib/constants';
import WebhookExtractorsBase from '@/components/WebhookExtractorsBase';
import WebhookExtractorBase from '@/components/WebhookExtractorBase';
import WebhookExtractValue from './WebhookExtractValue.vue';
import WebhookMatcher from './WebhookMatcher.vue';
import WebhookExtractorCrumb from './WebhookExtractorCrumb.vue';
export default {
mixins: [WebhookExtractorsBase, WebhookExtractorBase],
components: { WebhookMatcher, WebhookExtractValue },
components: { WebhookMatcher, WebhookExtractValue, WebhookExtractorCrumb },
computed: {
webhookId() {
if (/^-?\d+$/.test(this.$route.params.webhookId)) {
Expand All @@ -34,7 +33,7 @@ export default {
methods: {
allowActions() {
return this.can(USER_PERMISSIONS.updateProject);
return true;
},
},
};
Expand Down
90 changes: 90 additions & 0 deletions web/src/views/project/WebhookExtractorCrumb.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div v-if="extractor != null">
<v-toolbar flat>
<v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
<v-toolbar-title class="breadcrumbs">
<router-link
class="breadcrumbs__item breadcrumbs__item--link"
:to="`/project/${projectId}/webhook/${this.webhookId}`"
>
{{ webhook.name }}
</router-link>
<v-icon>mdi-chevron-right</v-icon>
<span class="breadcrumbs__item">{{ extractor.name }}</span>
<v-icon>mdi-chevron-right</v-icon>
<span class="breadcrumbs__item">Extractor Configuration</span>
</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
</div>
</template>
<script>
import axios from 'axios';
import ItemListPageBase from '@/components/ItemListPageBase';
import WebhookExtractorsBase from '@/components/WebhookExtractorsBase';
import WebhookExtractorBase from '@/components/WebhookExtractorBase';
export default {
mixins: [ItemListPageBase, WebhookExtractorsBase, WebhookExtractorBase],
components: { },
data() {
return {
webhook: null,
extractor: null,
};
},
async created() {
this.webhook = (await axios({
method: 'get',
url: `/api/project/${this.projectId}/webhook/${this.webhookId}`,
responseType: 'json',
})).data;
this.extractor = (await axios({
method: 'get',
url: `/api/project/${this.projectId}/webhook/${this.webhookId}/extractor/${this.extractorId}`,
responseType: 'json',
})).data;
},
computed: {
projectId() {
if (/^-?\d+$/.test(this.$route.params.projectId)) {
return parseInt(this.$route.params.projectId, 10);
}
return this.$route.params.projectId;
},
webhookId() {
if (/^-?\d+$/.test(this.$route.params.webhookId)) {
return parseInt(this.$route.params.webhookId, 10);
}
return this.$route.params.webhookId;
},
extractorId() {
if (/^-?\d+$/.test(this.$route.params.extractorId)) {
return parseInt(this.$route.params.extractorId, 10);
}
return this.$route.params.extractorId;
},
},
methods: {
allowActions() {
return true;
},
getHeaders() {
return [];
},
getItemsUrl() {
return `/api/project/${this.projectId}/webhook/${this.webhookId}/extractors`;
},
getSingleItemUrl() {
return `/api/project/${this.projectId}/webhook/${this.webhookId}/extractor/${this.extractorId}`;
},
getEventName() {
return 'w-webhook-matcher';
},
},
};
</script>
43 changes: 29 additions & 14 deletions web/src/views/project/WebhookExtractors.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<div v-if="items != null">
<div v-if="items != null && webhook != null">
<EditDialog
v-model="editDialog"
:save-button-text="itemId === 'new' ? 'Create' : 'Save'"
Expand Down Expand Up @@ -35,19 +35,18 @@
/>
<v-toolbar flat >
<v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
<v-toolbar-title>Extractor</v-toolbar-title>
<!-- <v-toolbar-title class="breadcrumbs"> -->
<!-- <router-link -->
<!-- class="breadcrumbs__item breadcrumbs__item--link" -->
<!-- :to="itemId -->
<!-- ? `/project/${projectId}/webhook/${itemID}/` -->
<!-- : `/project/${projectId}/webhooks/`" -->
<!-- > -->
<!-- Webhooks -->
<!-- </router-link> -->
<!-- <v-icon>mdi-chevron-right</v-icon> -->
<!-- <span class="breadcrumbs__item">{{ item.name }}</span> -->
<!-- </v-toolbar-title> -->
<v-toolbar-title class="breadcrumbs">
<router-link
class="breadcrumbs__item breadcrumbs__item--link"
:to="`/project/${projectId}/webhooks/`"
>
Webhooks
</router-link>
<v-icon>mdi-chevron-right</v-icon>
<span class="breadcrumbs__item">{{ webhook.name }}</span>
<v-icon>mdi-chevron-right</v-icon>
<span class="breadcrumbs__item">Extractors</span>
</v-toolbar-title>

<v-spacer></v-spacer>
<v-btn
Expand Down Expand Up @@ -93,6 +92,8 @@
</template>
<script>
/* eslint-disable vue/no-unused-components */
import axios from 'axios';
import { USER_PERMISSIONS } from '@/lib/constants';
import ItemListPageBase from '@/components/ItemListPageBase';
Expand All @@ -102,6 +103,20 @@ import WebhookExtractorsBase from '@/components/WebhookExtractorsBase';
export default {
mixins: [ItemListPageBase, WebhookExtractorsBase],
components: { WebhookExtractorForm },
data() {
return {
webhook: null,
};
},
async created() {
this.webhook = (await axios({
method: 'get',
url: `/api/project/${this.projectId}/webhook/${this.webhookId}`,
responseType: 'json',
})).data;
},
computed: {
projectId() {
if (/^-?\d+$/.test(this.$route.params.projectId)) {
Expand Down
3 changes: 1 addition & 2 deletions web/src/views/project/WebhookMatcher.vue
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@
</div>
</template>
<script>
import { USER_PERMISSIONS } from '@/lib/constants';
import ItemListPageBase from '@/components/ItemListPageBase';
import WebhookExtractorsBase from '@/components/WebhookExtractorsBase';
Expand Down Expand Up @@ -125,7 +124,7 @@ export default {
},
methods: {
allowActions() {
return this.can(USER_PERMISSIONS.updateProject);
return true;
},
getHeaders() {
return [{
Expand Down
2 changes: 1 addition & 1 deletion web/src/views/project/Webhooks.vue
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

<v-toolbar flat >
<v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
<v-toolbar-title>Webhook</v-toolbar-title>
<v-toolbar-title>Webhooks</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
color="primary"
Expand Down

0 comments on commit aef2e57

Please sign in to comment.