budibase/packages/standard-components/src/List.svelte

<script>
  import { onMount } from "svelte"

  export let _bb
  export let model
  export let layout = "list"

  let headers = []
  let store = _bb.store
  let target

  async function fetchData() {
    if (!model || !model.length) return

    const FETCH_RECORDS_URL = `/api/views/all_${model}`
    const response = await _bb.api.get(FETCH_RECORDS_URL)
    if (response.status === 200) {
      const json = await response.json()

      _bb.attachChildren(target, {
        hydrate: false,
        context: json,
      })
    } else {
      throw new Error("Failed to fetch records.", response)
    }
  }

  $: if (model) fetchData()

  onMount(async () => {
    await fetchData()
  })
</script>

<section class:grid={layout === 'grid'} class:list={layout === 'list'}>
  <div class="data-card" bind:this={target} />
</section>

<style>
  .list {
    display: flex;
    flex-direction: column;
    font-family: Inter;
  }

  .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>