Rates, Build

resources/js/Components/SearchInput.vue

@@ -19,20 +19,19 @@ defineExpose({ focus: () => input.value.focus() });
 </script>
 
 <template>
-    <form>
-   <div class="flex items-center justify-center">
-    <div class="flex border-2 rounded">
-        <input type="text" class="px-4 py-2 w-80" 
-        :value="modelValue"
-        @input="$emit('update:modelValue', $event.target.value)" placeholder="Search...">
-        <button class="flex items-center justify-center px-4 border-l bg-slate-500">
-            <svg class="w-6 h-6 text-white" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24">
-                <path
-                    d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z" />
-            </svg>
-        </button>
+    <div class="flex items-center max-w-md mx-auto bg-white rounded-md">
+        <div class="w-full">
+            <input type="search" class="border-0 w-full px-4 py-1 text-gray-800 rounded-full focus:outline-none focus:ring-0"
+                placeholder="search" x-model="search">
+        </div>
+        <div>
+            <button type="submit" class="flex items-center bg-blue-500 justify-center w-12 h-12 text-white rounded-r-md">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+            </button>
+        </div>
     </div>
-</div>
-    </form>
 </template>

resources/js/Pages/IkeaRoot.vue

@@ -25,6 +25,12 @@ const ccountry_filter = ref([['Country'],]);
 const ccountry_list = ref(['TEST']);
 const selected = ref(null);
 const article = ref('');
+const hrates = ref([
+  { text: "Currency", value: "currency", sortable: true},
+  { text: "Country", value: "country_name", sortable: true},
+  { text: "Rate", value: "rate", sortable: true}
+]);
+const rates = ref([]);
 
 const options = {
   region: 150,
@@ -72,6 +78,24 @@ const fetch = async () => {
   }
 }
 
+const fetch_rates = async () => {
+  try {
+    const response = await axios.get(route('rates.index'))
+    rates.value = response.data;
+    console.log("RATE=", rates.value);
+  } catch (e) {
+    const response = await Swal.fire({
+      title: __('are you want to try again') + '?',
+      text: __(`${e}`),
+      icon: 'question',
+      showCancelButton: true,
+      showCloseButton: true,
+    })
+
+    response.isConfirmed && fetch()
+  }
+}
+
 const headers = ref([
   { text: "Id", value: "id", sortable: true },
   { text: "Country", value: "country", sortable: true },
@@ -88,6 +112,7 @@ function selectCountry(item, id) {
 }
 
 onMounted(fetch);
+onMounted(fetch_rates);
 </script>
 
 <template>
@@ -138,7 +163,9 @@ onMounted(fetch);
         <div class="mt-5">
           <EasyTable :rows-per-page=10 :headers="headers" :items="items"></EasyTable>
         </div>
-
+        <div class="mt-5">
+          <EasyTable :rows-per-page=15 :headers="hrates" :items="rates"></EasyTable>
+        </div>
       </div>
     </div>
   </div>