forked from tsai/budibase
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