Связи товара и мультикатегории

Вкладки в карточке

• она врубает индикатор ожидания при отправке.
• она требует заполнения обязательных полей даже при отправке по кнопке, которая, в общем-то, снаружи формы.

<template>
  <vesp-modal v-model="record" :url="url" :title="$t('models.product.title_one')" :hide-footer="tab > 0" size="lg">
    <template #default="{loading, submit}">
      <b-tabs v-model="tab" content-class="pt-3">
        <!-- Основная вкладка с товаром -->
        <b-tab :title="$t('models.product.tab_main')">
          <b-overlay :opacity="0.5" :show="loading">
            <b-form ref="form" @submit.prevent="submit">
              <form-product v-model="record" />
              <input type="submit" class="d-none" />
            </b-form>
          </b-overlay>
        </b-tab>

        <!-- Дополнительные вкладки, если в форме есть первичный ключ -->
        <template v-if="record.id">
          <b-tab :title="$t('models.product.tab_files')" lazy>
            <product-files :product-id="record.id" />
          </b-tab>
          <b-tab :title="$t('models.product.tab_categories')" lazy></b-tab>
          <b-tab :title="$t('models.product.tab_links')" lazy></b-tab>
        </template>
      </b-tabs>
    </template>
  </vesp-modal>
</template>

<script>
import FormProduct from '@/components/forms/product'
import ProductFiles from '@/components/product/gallery.vue'

export default {
  name: 'ProductCreatePage',
  components: {ProductFiles, FormProduct},
  data() {
    return {
      url,
      tab: 0,
      // ...
    }
  },
  // ...
}
</script>

• убираем кнопку файлов из tableActions на странице admin/pages/products.vue
• удаляем директорию admin/pages/products/files

Компонент ProductCategories

<?php

namespace App\Controllers\Admin\Product;

use App\Controllers\Traits\ProductPropertyController;
use App\Models\ProductCategory;
use Vesp\Controllers\ModelController;

class Categories extends ModelController
{
    use ProductPropertyController;

    protected $scope = 'products';
    protected $model = ProductCategory::class;
    protected $primaryKey = ['product_id', 'category_id'];

    protected function beforeCount(Builder $c): Builder
    {
        $c->where('product_id', $this->product->id);

        return $c;
    }
}

<?php

namespace App\Controllers\Traits;

use App\Models\Product;
use Psr\Http\Message\ResponseInterface;

trait ProductPropertyController
{
    protected ?Product $product;

    public function checkScope(string $method): ?ResponseInterface
    {
        if ($check = parent::checkScope($method)) {
            return $check;
        }

        if (!$this->product = Product::query()->find($this->getProperty('product_id'))) {
            return $this->failure('', 404);
        }

        return null;
    }
}

    protected function beforeCount(Builder $c): Builder
    {
        $c->where('product_id', $this->product->id);

        if ($query = trim($this->getProperty('query', ''))) {
            $c->whereHas('category', static function (Builder $c) use ($query) {
                $c->whereHas('translations', static function (Builder $c) use ($query) {
                    $c->where('title', 'LIKE', "%$query%");
                    $c->orWhere('description', 'LIKE', "%$query%");
                });
            });
        }

        return $c;
    }

SELECT *
FROM `old_product_categories`
WHERE `product_id` = '2'
  and exists (
    SELECT *
    FROM `old_categories`
    WHERE `old_product_categories`.`category_id` = `old_categories`.`id`
      and exists (
        SELECT *
        FROM `old_category_translations`
        WHERE `old_categories`.`id` = `old_category_translations`.`category_id`
          and (
            `title` LIKE '%test%'
            or `description` LIKE '%test%'
          )
      )
  )
LIMIT 20 offset 0

$group->any('/product/{product_id}/categories[/{category_id}]', App\Controllers\Admin\Product\Categories::class);

<template>
  <vesp-input-combo-box v-model="myValue" url="admin/categories" v-bind="$props" v-on="$listeners">
    <template #default="{item}">
      <div :class="{'text-muted': !item.active}">
        {{ $translate(item.translations) }}
        <div class="small text-muted">{{ item.uri }}</div>
      </div>
    </template>
  </vesp-input-combo-box>
</template>

<script>
import {BFormInput} from 'bootstrap-vue'

export default {
  name: 'InputCategory',
  props: {
    ...BFormInput.extendOptions.props,
    value: {
      type: [String, Number],
      required: true,
    },
    // ...
    formatValue: {
      type: Function,
      default(item) {
        return this.$translate(item.translations)
      },
    },
    // ...
  },
  // ...
}
</script>

<template>
    <!-- -->
    <b-form-group :label="$t('models.product.category')">
      <input-category v-model="record.category_id" />
    </b-form-group>
    <!-- -->
</template>
<script>
import InputCategory from '@/components/inputs/category.vue'

export default {
  name: 'FormProduct',
  components: {InputCategory},
  // ...
}
</script>

<template>
  <vesp-table
    :url="url"
    :fields="fields"
    :table-actions="tableActions"
    :filters="filters"
    :on-load="onLoad"
    primary-key="category_id"
  >
    <template #header>
      <b-row class="align-items-center mb-3">
        <b-col md="6">
          <input-category v-model="category" :filter-props="{exclude}" />
        </b-col>
        <b-col md="4" offset-md="2" class="mt-2 mt-md-0">
          <!-- Поле для поиска -->
      </b-row>
    </template>
    <template ...>
      <!-- Оформление колонок title и file -->
    </template>
  </vesp-table>
</template>

<script>
import InputCategory from '@/components/inputs/category.vue'

export default {
  name: 'ProductCategories',
  components: {InputCategory},
  props: {
    // Компонент требует указать id товара
    productId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      // Заготавливаем нужные реактивные переменные
      exclude: '',
      category: null,
      filters: {
        query: '',
      },
    }
  },
  computed: {
    // Адрес для работы таблицы зависит от id товара
    url() {
      return `admin/product/${this.productId}/categories`
    },
    // Подключение категории вместе с файлом нужно добавить в
    // afterCount контроллера
    fields() {
      return [
        {key: 'category_id', label: this.$t('components.table.columns.id')},
        {key: 'file', label: this.$t('models.category.file')},
        {key: 'title', label: this.$t('models.category.title')},
      ]
    },
    // Из действий только удаление
    tableActions() {
      return [{function: 'onDelete', icon: 'times', title: this.$t('actions.delete'), variant: 'danger'}]
    },
  },
  // Следим за значением input-category
  watch: {
    category(newValue) {
      if (newValue) {
        this.onSelect(newValue)
      }
    },
  },
  methods: {
    // При загрузке таблицы сохраняем категории товара в переменную
    // для исключения из комбо-бокса
    onLoad(data) {
      this.exclude = data.rows.map((i) => i.category_id)
      return data
    },
    // Добавление новой категории товару
    async onSelect(id) {
      try {
        await this.$axios.put(this.url, {category_id: id})
      } catch (e) {}
      // Очистка значение комбо
      this.$nextTick(() => {
        this.category = null
      })
      // Генерация события на обновление таблицы
      this.$root.$emit(`app::${this.url.split('/').join('-')}::update`)
    },
  },
}
</script>

Компонент ProductLinks

Заключение