mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
21 changed files with 292 additions and 150 deletions
@ -0,0 +1,87 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
|
|||
export let _bb |
|||
export let _instanceId |
|||
export let model |
|||
export let layout = "list" |
|||
|
|||
let headers = [] |
|||
let store = _bb.store |
|||
|
|||
async function fetchData() { |
|||
const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records` |
|||
const response = await _bb.api.get(FETCH_RECORDS_URL) |
|||
if (response.status === 200) { |
|||
const json = await response.json() |
|||
|
|||
store.update(state => { |
|||
state[model._id] = json |
|||
return state |
|||
}); |
|||
} else { |
|||
throw new Error("Failed to fetch records.", response) |
|||
} |
|||
} |
|||
|
|||
$: data = $store[model._id] || [] |
|||
|
|||
onMount(async () => { |
|||
await fetchData() |
|||
}) |
|||
</script> |
|||
|
|||
<section |
|||
class:grid={layout === "grid"} |
|||
class:list={layout === "list"} |
|||
> |
|||
{#each data as data} |
|||
<div class="data-card"> |
|||
<ul> |
|||
{#each Object.keys(data) as key} |
|||
<li> |
|||
<span class="data-key"> |
|||
{key}: |
|||
</span> |
|||
<span class="data-value"> |
|||
{data[key]} |
|||
</span> |
|||
</li> |
|||
{/each} |
|||
</ul> |
|||
</div> |
|||
{/each} |
|||
</section> |
|||
|
|||
<style> |
|||
.list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
font-family: Roboto; |
|||
} |
|||
|
|||
.grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr; |
|||
} |
|||
|
|||
ul { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
li { |
|||
margin: 5px 0 5px 0; |
|||
} |
|||
|
|||
.data-card { |
|||
border: 1px solid #ccc; |
|||
border-radius: 5px; |
|||
padding: 10px; |
|||
} |
|||
|
|||
.data-key { |
|||
font-weight: bold; |
|||
font-size: 20px; |
|||
text-transform: capitalize; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,17 @@ |
|||
<script> |
|||
export let _bb |
|||
export let model |
|||
|
|||
let searchValue = "" |
|||
|
|||
function search() { |
|||
const SEARCH_URL = |
|||
_bb.api.get(``); |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<div> |
|||
<input type="text" bind:value={searchValue}> |
|||
<button on:click={search}>Search</button> |
|||
</div> |
|||
Loading…
Reference in new issue