Вывод изображений товаров

Как Vesp выводит изображения

Выбираем первую картинку

public function prepareRow(Model $object): array
{
    // Переводим объект в массив
    $array = $object->toArray();
    // Если первичный ключ не указан, значит идёт выборка списка товаров
    if (!$this->getPrimaryKey()) {
        // И тогда на каждый товар мы добираем первый ProductFile
        $productFile = $object->productFiles()
            ->where('active', true)->orderBy('rank')->first();
        // Если такая запись существует
        if ($productFile) {
            // Добавляем в массив id и время изменения файла,
            // чтобы обойти кэширование браузера
            $array['file'] = $productFile->file->only('id', 'updated_at');
        }
    }

    return $array;
}

protected function afterCount(Builder $c): Builder
{
    // Добавляем таблицу product_files
    $c->with('productFiles', function(HasMany $c) {
        // Выбираем только активные связи
        $c->where('active', true);
        // Сортируем по rank
        $c->orderBy('rank');
        // Выбираем только 2 нужные колонки
        $c->select('product_id', 'file_id');
        // И к этой связи добавляем еще и её связь с файлами
        $c->with('file:id,updated_at');
    });

    return $c;
}

public function prepareRow(Model $object): array
{
    $array = $object->toArray();
    // Если у товара есть файлы
    if (!empty($array['product_files'])) {
        // Выбираем и сохраняем первый файл из списка
        $array['file'] = $array['product_files'][0]['file'];
    } else {
        $array['file'] = [];
    }
    // И удаляем остальные ненужные файлы из результатов
    unset($array['product_files']);

    return $array;
}

protected function afterCount(Builder $c): Builder
{
    // Начинаем присоединение связей с файлами
    $c->leftJoin('product_files', function (JoinClause $c) {
        // Узнаём, какой у нас префикс таблиц
        $db = $this->eloquent->getConnection();
        $px = $db->getTablePrefix();
        // Условие присоединения по id товаров
        $c->on('product_files.product_id', '=', 'products.id');
        // Присоединение первой активной связи
        $c->on(
            'product_files.file_id',
            '=',
            // Добавляем сырой подзапрос, чтобы узнать file_id
            // первой активной связи с минимальным rank
            $db->raw("(
                select file_id from {$px}product_files where 
                {$px}product_files.product_id = {$px}products.id 
                order by `rank` limit 1
            )")
        );
    });
    // Присоединяем вторую таблицу по выбранному file_id
    $c->leftJoin('files', 'files.id', '=', 'product_files.file_id');

    // Так как у нас в запросе аж 3 таблицы, 
    // нужно указать какие колонки из них выбирать
    // Выбираем все колонки товара с указанием имени таблицы
    $columns = array_map(static function ($col) {
        return 'products.' . $col;
    // А список колонок получаем их схемы таблицы Eloquent
    }, $this->eloquent->getConnection()->getSchemaBuilder()->getColumnListing('products'));

    // Добавляем полученные колонки товара
    $c->select($columns);
    // И колонки файла, тоже с именем таблицы
    $c->addSelect('files.id as file_id', 'files.updated_at as file_updated_at');

    return $c;
}

public function prepareRow(Model $object): array
{
    $array = $object->toArray();
    // Проверяем наличие файла
    if (!empty($array['file_id'])) {
        // И добавляем вложенный масив
        $array['file'] = [
            'id' => $array['file_id'], 
            'updated_at' => $array['file_updated_at']
        ];
    } else {
        $array['file'] = [];
    }
    // Ненужные колонки убираем
    unset($array['file_id'], $array['file_updated_at']);

    return $array;
}

// Эта наша связь с выборкой первого активного ProductFile
public function firstFile(): HasOne
{
    return $this
        ->hasOne(ProductFile::class)
        // Выборка сортируется по rank
        ->ofMany(['rank' => 'min'], function (Builder $c) {
            $c->where('active', true);
        })
        // Добавляем и выборку конечного File
        ->with('file:id,updated_at');
}

// Расширяем метод toArray, чтобы он всегда заменял ключ first_file на file
public function toArray(): array
{
    $array = parent::toArray();
    // Если выбран первый файл
    if (array_key_exists('first_file', $array)) {
        // Приводим массив к нашему формату
        $array['file'] = !empty($array['first_file']) ? $array['first_file']['file'] : [];
        unset($array['first_file']);
    }

    return $array;
}

public function getKeyName(): string
{
    return 'file_id';
}

protected function afterCount(Builder $c): Builder
{
    $c->with('category:id,title');
    // наша новая связь
    $c->with('firstFile');

    return $c;
}

Выводим картинку в админке

fields() {
  return [
    {key: 'id', label: this.$t('components.table.columns.id'), sortable: true},
    {key: 'file', label: ''},
    // ...
  ]
},

<vesp-table  :url="url" ...>
  <template #cell(file)="{value}">
    <b-img v-if="value.id" :src="$image(value, {w: 100, h: 50, fit: 'crop'})" 
        width="100" height="50" />
  </template>
</vesp-table>

Вывод изображений на сайте

protected function afterCount(Builder $c): Builder
{
    $c->with('category:id,title');
    $c->with('firstFile');

    return $c;
}

<template>
  <div class="products-list">
    <div v-for="product in products" :key="product.id" class="product mt-2">
      <b-img
        v-if="product.file.id"
        :src="$image(product.file, {w: 100, h: 50, fit: 'crop'})"
        width="100"
        height="50"
        alt=""
      />
      {{ product.title }} &mdash; {{ product.price }} руб.
    </div>
  </div>
</template>

// Добавляем модуль Vesp
Config.modules = ['bootstrap-vue/nuxt', '@nuxtjs/axios', '@nuxtjs/pwa', '@vesp/frontend']
// Но подключаем из него пока только утилиты
Config.Vesp = {
  components: false, // компоненты админки
  scss: false, // стили компонентов
  i18n: false, // поддержка мультиязычности
  axios: false, // обработка ошибок при запросах в API
  utils: true, // утилиты, в которых есть и нужная нам $image
  filters: false, // фильтры вывода, типа форматирование дат
}

Заключение