Skip to content

Commit be6bc5c

Browse files
greabockgreabock
committed
Design
1 parent 6446271 commit be6bc5c

File tree

6 files changed

+119
-127
lines changed

6 files changed

+119
-127
lines changed

‎resources/assets/js/components/edit-block/edit-block.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@
6464
this.$api.ajax(request.method, request.url, request.data, request.headers).then((response) => {
6565
this.setRequestInfo(response.data)
6666
this.setInfoError(false)
67-
}).catch(() => {
68-
this.setInfoError(true)
67+
}).catch((xhr) => {
68+
this.setInfoError(xhr.status)
6969
})
7070
},
7171
send (request){

‎resources/assets/js/components/edit-block/request-editor/request-editor-navigation.vue‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎resources/assets/js/components/edit-block/request-editor/request-editor.vue‎

Lines changed: 36 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,53 @@
11
<template>
22
<div class="request-editor">
33
<div class="columns is-multiline" v-if="request">
4-
<div class="column is-full" v-if="infoError">
5-
Current route is broken!
6-
</div>
7-
<div class="column is-full">
8-
<input class="input is-minimal"
9-
type="text"
10-
placeholder="Name"
11-
title="Name"
12-
v-model="request.name"
13-
>
14-
</div>
4+
<div class="column is-7">
5+
<div class="card is-fullwidth">
6+
<header class="card-header">
7+
<p class="card-header-title">
8+
<input class="input is-expanded is-fullwidth"
9+
type="text"
10+
placeholder="Name"
11+
title="Title"
12+
v-model="request.name"
13+
>
14+
</p>
15+
</header>
16+
<section class="card-content">
17+
<vm-navigation-tabs class="is-boxed"
18+
:pages="['data', 'headers']"
19+
:mode="mode"
20+
@changed="setMode($arguments[0])"
21+
></vm-navigation-tabs>
22+
</section>
1523

16-
<div class="column is-full">
17-
<vm-navigation-tabs class="is-boxed"
18-
:pages="['data', 'headers', 'info']"
19-
:mode="mode"
20-
@changed="setMode($arguments[0])"
21-
></vm-navigation-tabs>
22-
</div>
2324

24-
<!-- Editor -->
25-
<div class="column is-full" v-if="mode === 'data'">
26-
<vm-json-editor :json="request.body"
27-
style="height: 300px"
28-
@changed="request.body = $arguments[0], changed = true"
29-
></vm-json-editor>
30-
</div>
25+
<!-- Editor -->
26+
<div v-if="mode === 'data'">
27+
<vm-json-editor :json="request.body"
28+
style="height: 300px"
29+
@changed="request.body = $arguments[0], changed = true"
30+
></vm-json-editor>
31+
</div>
3132

32-
<!-- Headers -->
33-
<div class="column is-full" v-if="mode === 'headers'">
34-
<vm-headers :headers="request.headers"
35-
@updated="request.headers = $arguments[0]"
36-
></vm-headers>
33+
<!-- Headers -->
34+
<div v-if="mode === 'headers'">
35+
<vm-headers :headers="request.headers"
36+
@updated="request.headers = $arguments[0]"
37+
></vm-headers>
38+
</div>
39+
</div>
40+
</div>
41+
<div class="column is-5">
42+
<vm-route-info></vm-route-info>
3743
</div>
38-
39-
<!-- Info -->
40-
<vm-route-info
41-
class="column is-full"
42-
v-if="mode === 'info'"
43-
></vm-route-info>
44-
4544
</div>
4645
</div>
4746
</template>
4847

4948
<script>
5049
import vmJsonEditor from '../../json-editor/json-editor.vue'
5150
import vmRouteInfo from './route-info.vue'
52-
import vmPosterNavigation from './request-editor-navigation.vue'
5351
import vmHeaders from './headers/headers.vue'
5452
5553
import vmNavigationTabs from '../../ligth-components/navigation-tabs.vue'
@@ -63,14 +61,11 @@
6361
vmJsonEditor,
6462
vmHeaders,
6563
vmRouteInfo,
66-
vmPosterNavigation,
67-
6864
vmNavigationTabs,
6965
},
7066
vuex: {
7167
getters: {
7268
mode: state => state.request.mode,
73-
infoError: (state) => state.routes.infoError,
7469
},
7570
actions: {
7671
setMode: ({dispatch}, mode) => dispatch('SET_EDITOR_MODE', mode)

‎resources/assets/js/components/edit-block/request-editor/route-info.vue‎

Lines changed: 73 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,68 @@
11
<template>
2-
<div class="current-route">
3-
<div class="content">
4-
<div v-if="infoError" class="notification is-danger">
5-
Whoops... error while getting route info.
6-
<hr>
7-
{{infoError.status}}
8-
</div>
9-
<blockquote v-if="currentRoute">
10-
<table class="table">
11-
<tbody>
12-
<tr v-if="annotation">
13-
<td colspan="2">
14-
<pre v-text="annotation"></pre>
15-
</td>
16-
</tr>
17-
<tr>
18-
<td>Methods</td>
19-
<td v-text="methods"></td>
20-
</tr>
21-
<tr>
22-
<td>Middleware</td>
23-
<td>
24-
<pre v-text="middleware"></pre>
25-
</td>
26-
</tr>
27-
<tr>
28-
<td>Name</td>
29-
<td v-text="name"></td>
30-
</tr>
31-
<tr>
32-
<td>Action</td>
33-
<td v-text="action"></td>
34-
</tr>
35-
<tr>
36-
<td colspan="2" @click="additionalInfo = true">
37-
<a v-if="! additionalInfo"
38-
39-
v-text="'Show additional info'"
40-
></a>
41-
<pre v-if="additionalInfo"
42-
v-text="currentRoute | json"
43-
></pre>
44-
</td>
45-
</tr>
46-
</tbody>
47-
</table>
48-
</blockquote>
49-
<iframe v-if="infoError" :srcdoc="infoError.data"></iframe>
50-
<blockquote v-if="! currentRoute && infoMode !=='route' && !infoError">
51-
No info
52-
</blockquote>
2+
<div class="card current-route is-fullwidth">
3+
<header class="card-header">
4+
<p class="card-header-title">Route Info</p>
5+
</header>
6+
<div
7+
class="notification is-danger has-text-centered no-rounded-borders"
8+
v-if="infoError === 500"
9+
>
10+
<span><i class="fa fa-warning"> </i> Current route is broken!</span>
11+
</div>
12+
<div
13+
class="notification is-warning has-text-centered no-rounded-borders"
14+
v-if="infoError === 404"
15+
>
16+
<span><i class="fa fa-warning"> </i> No matching route found :( </span>
5317
</div>
18+
<div class="notification" v-if="! currentRoute">
19+
<span> No info </span>
20+
</div>
21+
<!-- Info -->
22+
<blockquote v-if="currentRoute">
23+
<table class="table">
24+
<tbody>
25+
<tr v-if="annotation">
26+
<td colspan="2">
27+
<pre v-text="annotation"></pre>
28+
</td>
29+
</tr>
30+
<tr>
31+
<td>Methods</td>
32+
<td v-text="methods"></td>
33+
</tr>
34+
<tr>
35+
<td>Middleware</td>
36+
<td>
37+
<pre v-text="middleware"></pre>
38+
</td>
39+
</tr>
40+
<tr>
41+
<td>Name</td>
42+
<td v-text="name"></td>
43+
</tr>
44+
<tr>
45+
<td>Action</td>
46+
<td v-text="action"></td>
47+
</tr>
48+
<tr>
49+
<td colspan="2" >
50+
<a v-if="! additionalInfo"
51+
@click="toggleAdditionalInfo"
52+
v-text="'Show additional info'"
53+
></a>
54+
<a v-if="additionalInfo"
55+
@click="toggleAdditionalInfo"
56+
v-text="'Hide additional info'"
57+
></a>
58+
<pre v-if="additionalInfo"
59+
v-text="currentRoute | json"
60+
></pre>
61+
</td>
62+
</tr>
63+
</tbody>
64+
</table>
65+
</blockquote>
5466
</div>
5567
</template>
5668

@@ -65,7 +77,12 @@
6577
getters: {
6678
currentRoute: (state) => state.routes.currentRoute,
6779
infoMode: (state) => state.infoMode,
68-
infoError: (state) => state.infoError,
80+
infoError: (state) => state.routes.infoError
81+
}
82+
},
83+
methods: {
84+
toggleAdditionalInfo(){
85+
this.additionalInfo = ! this.additionalInfo
6986
}
7087
},
7188
computed: {
@@ -118,4 +135,8 @@
118135
background-color: transparent;
119136
color: #69707a;
120137
}
138+
139+
.notification .fa {
140+
vertical-align: baseline;
141+
}
121142
</style>

‎resources/assets/js/components/routes/route.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
<style scoped>
7979
.route.selected {
8080
border-right: 2px solid rgb(255, 82, 82);
81-
background-color: #eef9f2;
81+
background-color: #e2fcff;
8282
}
8383
.route.columns {
8484
margin: 0;

‎resources/assets/sass/api-tester.sass‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,15 @@ $fa-font-path: '../assets/fonts'
1212
.tag
1313
margin: 0
1414

15+
16+
1517
body
16-
background-color: #ffffff
18+
background-color: #f5f7fa
1719
font-family: "Roboto", "Helvetica", "Arial", sans-serif
20+
height: 100%
21+
22+
html
23+
height: 100%
1824

1925
.input.is-minimal
2026
border-top: 0

0 commit comments

Comments
 (0)