Prerobena verzia, s zobrazovanim a logom

package.json

@@ -18,7 +18,10 @@
     "sass": "^1.57.1",
     "tailwindcss": "^3.2.1",
     "vite": "^4.0.0",
-    "vue": "^3.2.41"
+    "vite-svg-loader": "^4.0.0",
+    "vue": "^3.2.41",
+    "vue-inline-svg": "^2.1.3",
+    "vue-svg-loader": "^0.16.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.1",

resources/js/Components/RpoRecord2.vue

@@ -49,47 +49,104 @@ function printRpoName(rpoKey) {
     return rpoKey;
 }
 
+function createRPOflatList(resultTree, flatList, RpoTree, lastKey = undefined, level = 0, fullPathRpo = []) {
+    console.log('RESTREE=',resultTree);
+    let fullPath = [ ...fullPathRpo ] ;      
+    if (lastKey != undefined) fullPath.push(lastKey);
+    
+    if (level == 0 || checkValueType(resultTree) == "object") {
+      let i=0;
+      Object.keys(resultTree).forEach(k => {
+        if (typeof resultTree[k] != 'string') {
+          if (RpoTree[k] !== undefined) {
+            flatList.push({"level": level, "key": k, "val": undefined, "translated": RpoTree[k].desc ,"full": fullPath.join(' => '), "index": i++ });
+            createRPOflatList(resultTree[k],flatList, RpoTree[k], k, level + 1, fullPath );
+          }
+        } else {
+          console.log('RT=',RpoTree);
+          console.log('K=', k);
+          if (RpoTree[k] !== undefined)
+            flatList.push({"level": level, "key": k, "val": resultTree[k], "translated": RpoTree[k].desc ,"full": fullPath.join(' => '), "index": i++ });
+        }
+      });
+  } else if (checkValueType(resultTree) == "array") {
+    let i=0;
+    for (const e of resultTree) {
+      console.log('e=',e);
+      if (checkValueType(e) == "object" || checkValueType(e) == "array") {
+            createRPOflatList(e, flatList, RpoTree, lastKey, level + 1, fullPath );
+        } else {
+          console.log('RT=',RpoTree);
+            flatList.push({"level": level, "key": lastKey, "val": e, "translated": RpoTree.desc !== undefined ? RpoTree.desc : '' ,"full": fullPath.join(' => '), "index": i++ });
+        }
+    }   
+  }
+}
+
 function subRpo(val,kz,i) {
         console.log('val=',val,'k=',kz,'i=',i);
         console.log(props.rpo);
         return props.rpo[kz];
 }
+
+var flatListRpo = [];
+createRPOflatList(props.data, flatListRpo, props.rpo);
+console.log('FLAT=',flatListRpo);
 </script>
 
 <template>
-    <div class="table-main">
-      <div
-        v-for="(row, index) in arrData"
-        :key="index"
-        class="row-data m-2 d-flex"
+        <div class="flex flex-col">
+            <div class="overflow-x-auto">
+                
+                <div class="p-1.5 w-full inline-block align-middle">
+                    <div class="overflow-hidden border rounded-lg">
+                        <table class="min-w-full divide-y divide-gray-200 border-4 border-black border-solid">
+                            <thead class="bg-red-300">
+                                <tr>
+                                    <th
+                                        scope="col"
+                                        class="min-w-min px-2 py-2 text-xs font-bold text-left border-4 border-black border-solid uppercase"
                                     >
-        <div class="key p-2 d-inline-block">
-          <!-- <div class="text-capitalize "> -->
-            {{ printRpoName(row) }} 
-          <!-- </div> -->
-        </div>
-        <div v-if="['string', 'number'].includes(checkValueType(data[row]))">
-          <div class="value p-2 d-inline-block">{{ data[row] }}</div>
-        </div>
-        <div v-else-if="checkValueType(data[row]) === 'array'">
-          <div v-for="(arrRow, index2) in data[row]" :key="index2" class="d-flex">
-            <div v-if="['string', 'number'].includes(checkValueType(arrRow))">
-              {{ arrRow }}
-            </div>
-            <div v-else>
-              <RpoRecord2 :data="arrRow" :rpo="subRpo(arrRow, row,index2)"/>
+                                        Nazov
+                                    </th>
+                                    <th
+                                        scope="col"
+                                        class="px-2 py-2 text-xs font-bold text-left border-4 border-black border-solid uppercase"
+                                    >
+                                        Hodnota
+                                    </th>
+                                    
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200">
+                                <tr v-for="(row,index) in flatListRpo" :key="index"
+                                  :class="index % 2 === 0 ? 'bg-zinc-100' : 'bg-zinc-200'">
+                                    <td
+                                        class="py-2 text-sm text-gray-800 font-bold whitespace-nowrap border-r-4 border-black border-solid border-b"
+                                        :style="`padding-left: ${10+row.level*15}px`"
+                                    >
+                                    {{ row.translated }}
+                                    </td>
+                                    <td
+                                        class="px-2 py-2 text-sm text-gray-800 whitespace-nowrap border-black border-solid border-b"
+                                    >
+                                        {{ row.val }}
+                                    </td>
+ 
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
             </div>
-        <div v-else>
-          <RpoRecord2 :data="data[row]" :rpo="subRpo(data[row],row,index)" />
         </div>
-      </div>
-    </div>
-  </template>
+</template>
   
   
   <style scoped>
+  .level-1 {
+    width: 200px;
+  }
   .table-main {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

resources/js/Layouts/GuestLayout.vue

@@ -1,13 +1,14 @@
 <script setup>
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import { Link } from '@inertiajs/inertia-vue3';
+import Logo from '@/Data/tis_full-1.svg';
 </script>
 
 <template>
 <div class="min-h-screen bg-gray-100">
 <nav class="flex items-center justify-between flex-wrap bg-stone-400 p-6">
   <div class="flex items-center flex-no-shrink text-white mr-6">
-    <svg class="h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
+    <Logo class="fill-blue-700 mr-4" />
     <span class="font-semibold text-xl tracking-tight"><a href="/">Register právnických osôb</a></span>
   </div>
   <div class="block lg:hidden">

tailwind.config.js

@@ -3,6 +3,7 @@ const colors = require('tailwindcss/colors');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+    mode: 'jit',
     content: [
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './storage/framework/views/*.php',

vite.config.js

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import laravel from 'laravel-vite-plugin';
 import vue from '@vitejs/plugin-vue';
+import svgLoader from 'vite-svg-loader';
 
 export default defineConfig({
     plugins: [
@@ -20,5 +21,6 @@ export default defineConfig({
                 },
             },
         }),
+        svgLoader(),
     ],
 });