MoonDocs

# useCoreTable

Do zarządzania tabelami w projektach bazowych wykorzystywany jest composable useCoreTable. Funkcja ta przyjmuje następujące parametry:

  • routeConfig - konfiguracja adresów url,
  • config - konfiguracja tabeli, w którym możemy nadpisać następujące parametry:
    • initialFetching - decydujemy czy dane powinny się pobierać przy zamontowaniu komponentu (domyślnie na true)
    • searchParamName - nazwa parametru po którym przeszukujemy api (domyślnie na search)
    • pagination - domyślny obiekt paginacji
    • fetchResults - funkcja za pomocą, której pobierane są rekordy z api. Domyślnie wykorzystywana jest funkcja defaultFetchResults, która pobiera dane przy użyciu routeConfig -> indexApiRoute
  • additionalParams - dodatkowe parametry po których chcemy przefiltrować rekordy. Wysyłane w requescie są jako query. Jeżeli podana wartość jest obiektem ref to dane pobierane są ponownie w momencie aktualizacji.

# BaseTable

Razem z composable używany jest komponent BaseTable, który rozszerza komponent QTable (opens new window). Przykład użycia w module User:

<script setup>
const { t } = useLocale();

const routeConfig = useCoreTableRouteConfig({
  alias: "user.roles",
  path: "/user/roles",
});

const columns = computed(() => [
  {
    name: "serial_no",
    required: true,
    label: t("table.columns.lp"),
    align: "left",
  },
  {
    name: "name",
    required: true,
    label: t("table.columns.name"),
    align: "left",
    field: "name",
    sortable: true,
  },
  {
    name: "slug",
    required: true,
    label: t("table.columns.slug"),
    align: "left",
    field: "slug",
    sortable: true,
  },
  {
    name: "created_at",
    required: true,
    label: t("table.columns.created_at"),
    align: "left",
    field: "created_at",
    sortable: true,
  },
  {
    name: "actions",
    required: true,
    label: t("table.columns.actions"),
    align: "left",
  },
]);

const { state, onRequest, performAction } = useCoreTable(routeConfig, null);
</script>

<template>
  <base-table
    v-model:pagination="state.pagination"
    v-model:filter="state.filter"
    :rows="state.results"
    :columns="columns"
    :loading="state.loading"
    :actions="state.actions"
    row-key="id"
    @request="onRequest"
    @perform-action="performAction"
  >
    <template #top-left>
      <div class="full-width">
        <q-btn
          color="primary"
          :label="$t('buttons.create')"
          :to="{ name: 'user.roles.create' }"
        />
      </div>
    </template>

    <template v-for="(_, slot) of $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </base-table>
</template>

# useCoreTableRouteConfig

Funkcja useCoreTableRouteConfig może być użyta do generowania konfiguracji dla standardowych adresów URL. W przypadku niestandardowych adresów, zaleca się utworzenie osobnej konfiguracji.

# indexApiRoute

Definiowanie ustawień dla adresu URL służącego do pobierania rekordów z API. Domyślnie obiekt wygląda następująco:

const path = "{module}/{plural-model}";

{
    indexApiRoute: {
        url: path,
        queryParams: {},
    }
}

Można również tworzyć adres URL poprzez funkcję getUrl, co umożliwia bezpośredni dostęp do route'a:

const path = "{module}/{plural-model}";

{
    indexApiRoute: {
      getUrl: (route) => `${path}/${route.params.categorySlug}/${route.params.id}`,
      queryParams: {},
    }
}

# editPageRoute

Na podstawie tych ustawień tworzony jest link do strony edycji. W params podajemy listę parametrów, które mają zostać przekazane do linku. Na podstawie podanej tablicy pobierane są one z danego rekordu (czyli tego, który został aktualnie użyty).

const alias = "{module}.{plural-model}";

{
    editPageRoute: {
    name: `${alias}.show`,
    params: [
        {
            name: "id",
        },
    ],
   }
}

# destroyApiRoute

Tworzenie linku API do usuwania rekordu z bazy danych. Można użyć funkcji getUrl, w której dostępny jest kliknięty rekord. Istnieje również możliwość podania bezpośredniego linku w właściwości url.

const path = "{module}/{plural-model}";

{
    destroyApiRoute: {
        getUrl: (row) => `${path}/${row.id}`,
        queryParams: {},
    }   
}

# Definiowanie akcji

Domyślnie dostępne są dwie akcje: edycja oraz usuwanie rekordu. Istnieje możliwość całkowitego nadpisania oraz zmergowania z istniejącymi. Akcje przekazywane są poprzez props actions komponentu. Żeby zdecydować czy łączymy z domyślnymi akacjami podajemy props merge-actions jako true lub false.

TIP

Przykład użycia można znaleźć w komponencie modules/media/components/FileTable.vue oraz modules/media/helpers/tables/files.js.

← Obsługa wielu języków →