Media

W module tym obsługiwany jest menedżer plików, w którym można zarządzać:

• dyskami
• katalogami
• plikami

Można go włączyć w dwóch trybach:

• strony src/modules/media/pages/FileIndexPage.vue
• pop-up src/modules/media/components/MediaManagerDialog.vue

useMediaManager

Żeby włączyć menedżer plików w trybie pop-up zalecane jest użycie funkcji show w composable useMediaManager. Zwraca ona wybrany plik lub wiele plików w zależności od wartości w multiple.

Przykład użycia:

<script setup>
  const selectedFiles = ref(null);

  const { show } = useMediaManager({
    multiple: true,
  });

  async function showMediaManager() {
    selectedFiles.value = await show();
  }
</script>

Przypisywanie do modeli

Tak jak jest to opisane w sekcji backendowej konieczne jest wysłanie parametru media_files podczas tworzenia/edycji danego modelu. Możliwe jest również użycie croppera, który dokona przekształcenia pliku graficznego i wyśle dane w parametrze coordinates.

VFileCollection

Obsługa dodawania pliku z MediaManagera. Można dodać jeden lub wiele plików (w zależności od propsa multiple).

<template>
  <base-form @submit="onSubmit">
    <div class="row q-col-gutter-md">
      <v-input
        class="col-sm-3 col-xs-12"
        name="first_name"
        :label="$t('labels.first_name')"
      />

      <v-input
        class="col-sm-3 col-xs-12"
        name="last_name"
        :label="$t('labels.last_name')"
      />
    </div>

    <v-file-collection
        :label="$t('labels.avatar')"
        type="image"
        name="media_files.avatar"
        :cropper-props="{
            maxWidth: 400,
            maxHeight: 400,
        }"
    />

    <div class="row justify-end">
      <q-btn
        color="secondary"
        :label="$t('buttons.create')"
        type="submit"
      />
    </div>
  </base-form>
</template>

TIP

Podanie parametrów maxWidth, maxHeight do cropperProps spowoduje wyświetlenie informacji w oknie croppera na temat pożądanych wartości. Pozostałe cropperProps związane są bezpośrednio z biblioteką Advanced Cropper (opens new window).

VImageCollection

Za pomocą tego komponentu możemy dodać dwie wersje grafiki: desktop oraz mobile.

Nazwą kolekcji możemy sterować poprzez propsy:

• nameDesktop
• nameMobile