frontend display

Author: kevincobain2000

src/LaravelRequestDocs.php

@@ -189,7 +189,12 @@ public function getControllersInfo(array $onlyMethods): Collection
                 $controllerName     = (new ReflectionClass($controllerFullPath))->getShortName();
             }
 
-            $pathParameters = $this->routePath->getPathParameters($route);
+            $pathParameters = [];
+            $pp = $this->routePath->getPathParameters($route);
+            // same format as rules
+            foreach ($pp as $k => $v) {
+                $pathParameters[$k] = [$v];
+            }
 
             $doc = new Doc(
                 $route->uri,

ui/src/components/ApiInfo.tsx

@@ -47,16 +47,25 @@ export default function ApiInfo(props: Props) {
                 </code>
             </h3>
             {(Object.keys(lrdDocsItem.path_parameters).length > 0) && (
-                <h3 className='pt-4'>
-                    <span className='text-sm text-slate-500'>
-                        PATH PARAMETERS
-                    </span>
-                    {(Object.keys(lrdDocsItem.path_parameters).map((rule) => (
-                        <div key={shortid.generate()}>
-                            <ApiInfoRules key={shortid.generate()} mainRule={rule} lrdDocsItem={ lrdDocsItem } />
-                        </div>
-                    )))}
-                </h3>
+                <>
+                    <h3 className='pt-4'>
+                        <span className='text-sm text-slate-500'>
+                            PATH PARAMETERS
+                        </span>
+                    </h3>
+                    <div className='pt-4'>
+
+                        <table className="table table-fixed table-compact w-full">
+                            <tbody>
+                                {Object.keys(lrdDocsItem.path_parameters).map((rule) => (
+                                    <ApiInfoRules key={shortid.generate()} mainRule={rule} rules={lrdDocsItem.path_parameters[rule]} />
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </>
+
+
             )}
 
             <h3 className='pt-4'>
@@ -74,7 +83,7 @@ export default function ApiInfo(props: Props) {
                 <table className="table table-fixed table-compact w-full">
                     <tbody>
                         {lrdDocsItem.rules && Object.keys(lrdDocsItem.rules).map((rule) => (
-                            <ApiInfoRules key={shortid.generate()} mainRule={rule} lrdDocsItem={lrdDocsItem} />
+                            <ApiInfoRules key={shortid.generate()} mainRule={rule} rules={lrdDocsItem.rules[rule]} />
                         ))}
                     </tbody>
                 </table>

ui/src/components/elements/ApiInfoRules.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { explode } from '../../libs/strings'
 import shortid from 'shortid';
-import type { IAPIInfo } from '../../libs/types'
 import { ChevronRightIcon, LinkIcon, EnvelopeIcon } from '@heroicons/react/24/outline'
 
 interface Props {
-    lrdDocsItem: any,
+    rules: string[],
     mainRule: string,
 }
 
 export default function ApiInfoRules(props: Props) {
-    const { lrdDocsItem, mainRule } = props
+    const { rules, mainRule } = props
     const StyledRule = (rule: any): JSX.Element => {
         const theRule = rule.rule
         const split = theRule.split(':')
@@ -83,14 +82,14 @@ export default function ApiInfoRules(props: Props) {
                             <ChevronRightIcon key={shortid.generate()} className='inline-block w-4 h-4' />
                         ) : (<span key={shortid.generate()}></span>)}
                     </code>
-                    {lrdDocsItem.rules[mainRule].map((rule) => (
+                    {rules.map((rule) => (
                         rule.split('|').map((theRule) => (
                             (theRule == "file" || theRule == "image") ? (
                                 <div key={shortid.generate()} className="block badge badge-success badge-outline ml-4 mt-1 mb-1 rounded-sm title">{theRule}</div>
                             ) : (<span key={shortid.generate()}></span>)
                         ))
                     ))}
-                    {lrdDocsItem.rules[mainRule].map((rule) => (
+                    {rules.map((rule) => (
                         rule.split('|').map((theRule) => (
                             (theRule == "required") ? (
                                 <div className='block ml-6' key={shortid.generate()}>
@@ -99,7 +98,7 @@ export default function ApiInfoRules(props: Props) {
                             ) : (<span key={shortid.generate()}></span>)
                         ))
                     ))}
-                    {lrdDocsItem.rules[mainRule].map((rule) => (
+                    {rules.map((rule) => (
                         rule.split('|').map((theRule) => (
                             (theRule.startsWith("required_if")) ? (
                                 <div className='block ml-6' key={shortid.generate()}>
@@ -110,7 +109,7 @@ export default function ApiInfoRules(props: Props) {
                     ))}
                 </th>
                 <td>
-                    {lrdDocsItem.rules[mainRule].map((rule) => (
+                    {rules.map((rule) => (
                         rule.split('|').map((theRule) => {
                             if (theRule == "required") {
                                 return (<span key={shortid.generate()}></span>)
@@ -131,15 +130,15 @@ export default function ApiInfoRules(props: Props) {
                             return (<span key={shortid.generate()}></span>)
                         })
                     ))}
-                    {lrdDocsItem.rules[mainRule].map((rule) => (
+                    {rules.map((rule) => (
                         rule.split('|').map((theRule) => {
                             if (theRule == "required") {
                                 return (<span key={shortid.generate()}></span>)
                             }
                             return (<span key={shortid.generate()}></span>)
                         })
                     ))}
-                    {lrdDocsItem.rules[mainRule].map((rule) => (
+                    {rules.map((rule) => (
                         rule.split('|').map((theRule) => {
                             if (theRule == "required"
                                 || theRule == "integer"