Bugfixes for Try It Out

resources/js/tryitout.js

@@ -4,7 +4,7 @@ function tryItOut(endpointId) {
     document.querySelector(`#btn-canceltryout-${endpointId}`).hidden = false;
 
     // Show all input fields
-    document.querySelectorAll(`input[data-endpoint=${endpointId}]`)
+    document.querySelectorAll(`input[data-endpoint=${endpointId}],label[data-endpoint=${endpointId}]`)
         .forEach(el => el.hidden = false);
 
     if (document.querySelector(`#form-${endpointId}`).dataset.authed === "1") {
@@ -22,7 +22,8 @@ function cancelTryOut(endpointId) {
     executeBtn.hidden = true;
     executeBtn.textContent = "Execute";
     document.querySelector(`#btn-canceltryout-${endpointId}`).hidden = true;
-    document.querySelectorAll(`input[data-endpoint=${endpointId}]`)
+    // hide inputs
+    document.querySelectorAll(`input[data-endpoint=${endpointId}],label[data-endpoint=${endpointId}]`)
         .forEach(el => el.hidden = true);
     document.querySelectorAll(`#form-${endpointId} details`)
         .forEach(el => el.open = false);
@@ -51,10 +52,7 @@ function cancelTryOut(endpointId) {
 }
 
 function makeAPICall(method, path, body, query, headers) {
-    console.log(path);
-    console.log(body);
-    console.log(query);
-    console.log(headers);
+    console.log({path, body, query, headers});
 
     if (!(body instanceof FormData)) {
         body = JSON.stringify(body)
@@ -184,8 +182,4 @@ function getPreviousSiblingUntil(elem, siblingSelector, stopSelector) {
         if (sibling.matches(stopSelector)) return null;
         sibling = sibling.previousElementSibling;
     }
-}
-
-function loadingIndicator() {
-
 }

resources/views/components/field-details.blade.php

@@ -3,8 +3,13 @@
 @if(($isInput ?? true) && empty($hasChildren))
 @php
     $isList = Str::endsWith($type, '[]');
-    $fullName = empty($parent) ? $name : "$parent.$name";
+    $fullName =str_replace('[]', '.0', $name);
     $baseType = $isList ? substr($type, 0, -2) : $type;
+    // Ignore the first '[]': the frontend will take care of it
+    while (\Str::endsWith($baseType, '[]')) {
+        $fullName .= '.0';
+        $baseType = substr($baseType, 0, -2);
+    }
     switch($baseType) {
         case 'number':
         case 'integer':
@@ -18,11 +23,11 @@
     }
 @endphp
 @if($type === 'boolean')
-<label><input type="radio" name="{{ $fullName }}" value="true" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif hidden><code>true</code></label>
-<label><input type="radio" name="{{ $fullName }}" value="false" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif hidden><code>false</code></label>
+<label data-endpoint="{{ $endpointId }}" hidden><input type="radio" name="{{ $fullName }}" value="true" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif><code>true</code></label>
+<label data-endpoint="{{ $endpointId }}" hidden><input type="radio" name="{{ $fullName }}" value="false" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif><code>false</code></label>
 @elseif($isList)
 <input type="{{ $inputType }}" name="{{ $fullName.".0" }}" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif hidden>
-<input type="{{ $inputType }}" name="{{ $fullName.".1" }}" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif hidden>
+<input type="{{ $inputType }}" name="{{ $fullName.".1" }}" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" hidden>
 @else
 <input type="{{ $inputType }}" name="{{ $fullName }}" data-endpoint="{{ $endpointId }}" data-component="{{ $component }}" @if($required)required @endif hidden>
 @endif

resources/views/partials/body-parameters.blade.php

@@ -5,7 +5,7 @@
 <details>
 <summary>
 @component('scribe::components.field-details', [
-  'name' => $name,
+  'name' => $parameter['name'],
   'type' => $parameter['type'] ?? 'string',
   'required' => $parameter['required'] ?? false,
   'description' => $parameter['description'] ?? '',
@@ -17,34 +17,17 @@
 </summary>
 <br>
 @foreach($parameter['fields'] as $subfieldName => $subfield)
-@php
-    // Set the parent name for the field properly.
-   // This allows the input fields used by tryItOut to have the correct dot path
-   // which we pass to lodash set to set the values in our request body
-    $arrayAccessors = '';
-    $type = $parameter['type'];
-    while (\Str::endsWith($type, '[]')) {
-        $arrayAccessors .= '.0';
-        $type = substr($type, 0, -2);
-    }
-    if (empty($parent)) {
-        $parentPath = "$name$arrayAccessors";
-    } else {
-        $parentPath = "$parent$arrayAccessors.$name";
- }
-@endphp
 @if(!empty($subfield['fields']))
-@component('scribe::partials.body-parameters', ['parameters' => [$subfield['name'] => $subfield], 'parent' => $parentPath])
+@component('scribe::partials.body-parameters', ['parameters' => [$subfieldName => $subfield]])
 @endcomponent
 @else
 <p>
 @component('scribe::components.field-details', [
-  'name' => $subfieldName,
+  'name' => $subfield['name'],
   'type' => $subfield['type'] ?? 'string',
   'required' => $subfield['required'] ?? false,
   'description' => $subfield['description'] ?? '',
   'endpointId' => $endpointId,
-  'parent' => $parentPath,
   'hasChildren' => false,
   'component' => 'body',
 ])
@@ -57,7 +40,7 @@
 @else
 <p>
 @component('scribe::components.field-details', [
-  'name' => $name,
+  'name' => $parameter['name'],
   'type' => $parameter['type'] ?? 'string',
   'required' => $parameter['required'] ?? false,
   'description' => $parameter['description'] ?? '',

resources/views/partials/endpoint.blade.php

@@ -1,4 +1,3 @@
-@php($endpointId = $route['methods'][0].str_replace(['/', '?', '{', '}'], '-', $route['uri']))
 ## {{ $route['metadata']['title'] ?: $route['uri']}}
 
 @component('scribe::components.badges.auth', ['authenticated' => $route['metadata']['authenticated']])
@@ -50,12 +49,11 @@
     <button type="button" style="background-color: #c97a7e; padding: 5px 10px; border-radius 5px; border-width: thin;" id="btn-canceltryout-{{ $endpointId }}" onclick="cancelTryOut('{{ $endpointId }}');" hidden>Cancel</button>&nbsp;&nbsp;
     <button type="submit" style="background-color: #6ac174; padding: 5px 10px; border-radius 5px; border-width: thin;" id="btn-executetryout-{{ $endpointId }}" hidden>Execute</button>
 </h3>
-<p>
 @foreach($route['methods'] as $method)
+<p>
 @component('scribe::components.badges.http-method', ['method' => $method])@endcomponent <b><code>{{$route['uri']}}</code></b>
-
-@endforeach
 </p>
+@endforeach
 @if($route['metadata']['authenticated'] && $auth['location'] === 'header')
 <p>
 <label id="auth-{{ $endpointId }}" hidden>{{ $auth['name'] }} header: <b><code>{{ $auth['prefix'] }}</code></b><input type="text" name="{{ $auth['name'] }}" data-prefix="{{ $auth['prefix'] }}" data-endpoint="{{ $endpointId }}" data-component="header"></label>
@@ -66,7 +64,7 @@
 @foreach($route['urlParameters'] as $attribute => $parameter)
 <p>
 @component('scribe::components.field-details', [
-  'name' => $attribute,
+  'name' => $parameter['name'],
   'type' => $parameter['type'] ?? 'string',
   'required' => $parameter['required'] ?? true,
   'description' => $parameter['description'],
@@ -82,7 +80,7 @@
 @foreach($route['queryParameters'] as $attribute => $parameter)
 <p>
 @component('scribe::components.field-details', [
-  'name' => $attribute,
+  'name' => $parameter['name'],
   'type' => $parameter['type'] ?? 'string',
   'required' => $parameter['required'] ?? true,
   'description' => $parameter['description'],
@@ -106,7 +104,7 @@
 @foreach($route['responseFields'] as $name => $field)
 <p>
 @component('scribe::components.field-details', [
-  'name' => $name,
+  'name' => $field['name'],
   'type' => $field['type'],
   'required' => true,
   'description' => $field['description'],

src/Writing/Writer.php

@@ -162,6 +162,7 @@ class Writer
                 $route['output'] = (string)view('scribe::partials.endpoint')
                     ->with('hasRequestOptions', $hasRequestOptions)
                     ->with('route', $route)
+                    ->with('endpointId', $route['methods'][0].str_replace(['/', '?', '{', '}'], '-', $route['uri']))
                     ->with('settings', $settings)
                     ->with('auth', $auth)
                     ->with('baseUrl', $this->baseUrl)