List

Liste sayfası, sayfalandırma, sıralama, filtreleme, dışa aktarma vb. gibi işlemleri gerçekleştirebileceğiniz temel sayfalardır. Liste seçeneklerini kullanmak için bir VaList bileşeni ve VaDataTableServer bileşeni ile sunucu taraflı bir veri tablosunu kolayca oluşturabilirsiniz.

/olobase-demo-ui/src/resources/Employees/List.vue

<template>
  <va-list
    :filters="filters"
    :fields="fields"
    :items-per-page="10"
    disable-create
    enable-save-dialog
  >
   <va-data-table-server
     row-show
     row-save-dialog
     row-save-dialog-width="1024"
     row-save-dialog-height="600"
     disable-clone
     disable-show
   >
   </va-data-table-server>
  </va-list>
</template>

Sayfa Özelleştirme

Her CRUD sayfası için istediğiniz her şeyi koymakta özgür olduğunuzu ve sağlanan optimize edilmiş bileşenleri kullanmak zorunda olmadığınızı unutmayın. Tüm veri sağlayıcı yöntemleri, her kaynak için özel bir depolama modülünde mevcut olduğundan, verilerinizi getirecek kendi liste bileşenlerinizi oluşturmak o kadar da karmaşık değildir. Veri sağlayıcı mantığından çıkan her türlü özel veriyi getirmeniz gerekiyorsa elbette mevcut global $axios örneğini kullanabilirsiniz. Bunun için store bölümündeki kullanıma bakın.

VaList

List bileşeni veri tablosuna ait ayarlar, filtreler ve üst seçeneklerin görüntülenmesini sağlar.

<va-list
  :filters="filters"
  :fields="fields"
  disable-settings
  hide-header
>
  <va-data-table-server></data-va-data-table-server>
</va-list>

Seçenekler

Slotlar

Data Table Server

VaDataTableServer ızgara yapısına uyan bir listenin sayfalanması ve herhangi bir kaynak tarama ve listeleme için kullanılır. Sıralama, arama, sayfalandırma, filtreleme ve seçim gibi özellikleri içerir. Varsayılan slot içinde liste düzeni tamamen özelleştirilebilir.

Mixinler

• Resource
• Search

Seçenekler

Slotlar

Olaylar

Sütunlar

Tüm sütunları tanımlamak için fields niteliğini kullanın. En azından getirmek istediğiniz kaynak alanını tanımlayan kaynak özelliğini, ardından basit metin formatından farklıysa veri formatlayıcının türünü ayarlamanız gerekir. Desteklenen tüm alanlar için fields bölümünü kontrol edin.

/olobase-demo-ui/src/resources/Employees/List.vue

<template>
  <va-list
    disable-create
    enable-save-dialog
   :filters="filters"
   :fields="fields"
   :items-per-page="10"  
  >
   <va-data-table-server
     row-show
     row-save-dialog
     row-save-dialog-width="1024"
     row-save-dialog-height="600"
     disable-clone
     disable-show
   >
   </va-data-table-server>
  </va-list>
</template>

<script>
import { required } from "@vuelidate/validators";

export default {
  props: ["resource", "title"],
  provide() {
    return {
      validations: {
        form: {
          companyId: {
            required
          },
          employeeNumber: {
            required
          },
          name: {
            required
          },
          surname: {
            required
          },
        }
      },
      errors: {
        companyIdErrors: (v$) => {
          const errors = [];
          if (!v$['form'].companyId.$dirty) return errors;
          v$['form'].companyId.required.$invalid &&
            errors.push(this.$t("v.text.required"));
          return errors;
        },
        employeeNumberErrors: (v$) => {
          const errors = [];
          if (!v$['form'].employeeNumber.$dirty) return errors;
          v$['form'].employeeNumber.required.$invalid &&
            errors.push(this.$t("v.text.required"));
          return errors;
        },
        nameErrors: (v$) => {
          const errors = [];
          if (!v$['form'].name.$dirty) return errors;
          v$['form'].name.required.$invalid &&
            errors.push(this.$t("v.text.required"));
          return errors;
        },
        surnameErrors: (v$) => {
          const errors = [];
          if (!v$['form'].surname.$dirty) return errors;
          v$['form'].surname.required.$invalid &&
            errors.push(this.$t("v.text.required"));
          return errors;
        }
      }
    };
  },
  data() {
    return {
      loading: false,
      yearId: new Date().getFullYear(),
      filters: [
        {
          source: "companyId",
          type: "select",
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "companies",
          }
        },
        {
          source: "jobTitleId",
          type: "select",
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "jobtitles",
          }
        },
        {
          source: "gradeId",
          type: "select",
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "employeegrades",
          }
        },
      ],
      fields: [
        {
          source: "companyId",
          type: "select",
          attributes: {
            reference: "companies",
          },
          sortable: true,
          width: "10%"
        },
        {
          source: "employeeNumber",
          sortable: true,
          width: "10%"
        },
        {
          source: "name",
          sortable: true,
          width: "10%"
        },
        {
          source: "surname",
          sortable: true,
          width: "10%"
        },
        {
          source: "jobTitleId",
          type: "select",
          attributes: {
            reference: "jobtitles",
          },
          sortable: true,
          width: "20%"
        },
        {
          source: "gradeId",
          type: "select",
          attributes: {
            reference: "employeegrades",
          },
          sortable: true,
          width: "10%"
        },
      ],
    };
  }
};
</script>

Alan Nitelikleri

Özel Satır Aksiyonları

row.actions slotu kullanılarak satır aksiyonları özelleştirebilir. Takip eden örnekte yazılımcılara ait bir veri tablosunda özel bir silme tuşu developerId parametresi ile delete-developer adlı bir rotaya yönlendiriliyor.

<template>
  <div> 
    <va-list 
      disable-settings
      hide-bulk-copy
      :filters="filters"
      :fields="fields"
      :items-per-page="50"
      >
        <va-data-table-server
          disable-show
          disable-clone
          disable-delete
        >
          <template v-slot:row.actions="{ item }">
            <va-action-button
              icon="mdi-delete-forever"
              :color="color || 'red'"
              text
              :to="{ name: 'delete-developer', params: { developerId: item.id  } }"
            ></va-action-button>
          </template>
        </va-data-table-server>
    </va-list>
  </div>
</template>

Alan Şablonlaması

Yukarıdaki tüm alan seçeneklerinin ihtiyaçlarınızı karşılamaması durumunda, her alan için gelişmiş slot şablonlamasını kullanabilirsiniz. Hatta içindeki tüm Olobase Admin alanlarını bile kullanabilirsiniz. Bu alan bileşenini, aşağıda gösterildiği gibi ana bileşenin içine yerleştirmeniz gerektiğinde çok kullanışlıdır:

<template>
  <va-list
    :fields="fields"
  >
    <va-data-table-server
    >
      <template v-slot:[`field.authors`]="{ value }">
        <v-chip-group column>
          <va-reference-field
            reference="authors"
            v-for="(item, i) in value"
            :key="i"
            color="primary"
            small
            chip
            :item="item"
          >
          </va-reference-field>
        </v-chip-group>
      </template>
    </va-data-table-server>
  </va-list>
</template>

<script>
export default {
  props: ["resource", "title"],
  data() {
    return {
      fields: [
        //...
        "authors",
        //...
      ],
      //...
    };
  },
  //...
};
</script>

Bunun için field.{source} adında bir slotunu kullanmanız yeterlidir; burada source, alanın adıdır. Bu slot size tam satır kaynak öğesini ve varsayılan olarak işlenecek hücrenin değerini sağlayacaktır.

Bir başka örnek:

<template>
  <va-list
    :fields="fields"
  >
    <va-data-table-server
    >
      <template v-slot:[`field.orderStatusId`]="{ item }">
        <v-chip 
          label
          :color="getOrderStatusColor(item.orderStatusId)"
          >
          <v-icon icon="mdi-label" start></v-icon>
          {{ $t("resources.orders.chips." + item.orderStatusId) }}
        </v-chip>
      </template>
    </va-data-table-server>
  </va-list>
</template>

<script>
export default {
  props: ["resource", "title"],
  methods: {
    getOrderStatusColor(val) {
      if (val == "waiting") {
        return 'orange-darken-1';
      }
      if (val == "canceled") {
        return 'red-darken-1';
      }
      if (val == "completed") {
        return 'green-darken-1';
      }
    },
  }
  //...
};
</script>

Genişletilebilir Satır

Öğe satırının altında ek bir tam colspan hücresi için genişletilmiş öğe özelliğini show-expand desteğiyle kullanabilirsiniz. Bu yöntem satır verisinin uzun olduğu durumlarda ya da hızlı görüntüleme için kullanılabilir.

<template>
  <va-list 
   :filters="filters"
   :fields="fields"
   >
      <va-data-table-server 
         disable-show
        :show-expand="true"
        :expand-on-click="true"
        :disable-actions="false"
      >
        <template v-slot:top>
          <v-toolbar flat>
            <v-toolbar-title>Expandable Table</v-toolbar-title>
          </v-toolbar>
        </template>
        <template v-slot:expanded-row="{ columns, item }">
          <tr>
            <td :colspan="columns.length">
              More info about {{ item.raw.roleName }}
            </td>
          </tr>
        </template>
      </va-data-table-server>
  </va-list>
</template>

Güncellenebilir Satırlar

Güncelenebilir satırları olan bir veri tablosu yaratmak için aşağıdaki nitelikleri VaDataTableServer bileşeninde kullanmalısınız. Bu nitelikleri kullanılırken standart disable-edit, disable-show ve disable-clone gibi işlemleri pasif hale getirmeniz gerekir.

Güncellenebilir bir tablo aşağıdaki aksiyonları içerebilir:

• row-create
• row-clone
• row-edit
• row-show
• row-delete

<template>
  <va-list 
    disable-create
    :fields="fields"
    :items-per-page="50"
  >
    <va-data-table-server
      row-create
      row-clone
      row-edit
      disable-edit
      disable-show
      disable-clone
      disable-create-redirect
    >
    </va-data-table-server>
  </va-list>
</template>

Güncellenebilir Etkileşimli Satırlar

Bir seçim alanını seçtikten sonra başka bir seçim alanının etkileşimli olarak değişmesini istiyorsanız, aşağıdaki örnekte yer alan koda göz atın.

<script>
export default {
  props: ["resource", "title"],
  data() {
    return {
      fields: [
        {
          source: "companyId",
          type: "select",
          attributes: {
            reference: "companies",
          },
          sortable: true,
          width: "15%"
        },
        {
          source: "departmentId",
          type: "select",
          attributes: {
            reference: "departments",
          },
          key: "companyId",
          filters: ["companyId"],
          sortable: true,
          width: "15%"
        },
      ],
    };
  }
};
</script>

Dialog İçerisinde Kayıt

Eğer veri listesinde sıralanan her bir kayıt için güncelleme işleminin yeni bir pencere içerisinde yapılmasını istiyorsanız aşağıdaki nitelikleri kullanmalısınız.

• rowSaveDialog
• rowSaveDialogWidth
• rowSaveDialogHeight

/va-demo/src/resources/Employees/List.vue

<template>
  <va-list
    disable-create
    enable-save-dialog
   :filters="filters"
   :fields="fields"
   :items-per-page="10"
  >
   <va-data-table-server
     row-show
     row-save-dialog
     row-save-dialog-width="1024"
     row-save-dialog-height="600"
     disable-clone
     disable-show
   >
   </va-data-table-server>
  </va-list>
</template>

Data Iterator Server

VaDataIteratorServer bileşeni, ızgara yapısına uymayan veya özelleştirilmesi gereken verileri görüntülemek için kullanılır ve işlevsellik yönünden v-data-table bileşenine benzer. Sıralama, arama, sayfalandırma, filtreleme ve seçim gibi özellikleri içerir. Varsayılan slot içindeki liste düzeni tamamen özelleştirilebilir.

Mixinler:

• Resource
• Search

<template>
  <va-list
    :filters="filters"
    :fields="fields"
    disable-create
    disable-positioning
    disable-visibility
    :items-per-page="2"
  >
    <va-data-iterator-server
      :pagination="{ 
        density: 'default',
        activeColor: 'primary',
        top: false,
        bottom: true,
        rounded: 'pill',
      }"
    >
      <template v-slot:default="{ items }">
        <v-row no-gutters class="bordered pt-1 pb-1 justify-center" v-if="$store.state.api.loading">
          <v-progress-circular
            color="primary"
            indeterminate
          ></v-progress-circular>
        </v-row>
        <v-row no-gutters v-else>
          <v-col
            v-for="(item, i) in items"
            :key="i"
            cols="12"
            sm="6"
            xl="3"
            class="mb-3"
          >
            <v-sheet border rounded :class="(isOdd(i)) ? '' : 'mr-5'">
              <v-list-item
                :title="item.raw.username"
                :subtitle="item.raw.id"
                lines="two"
                density="comfortable"
              >
                <template v-slot:title>
                  <strong class="text-h6">
                    {{ item.raw.username }}
                  </strong>
                </template>
              </v-list-item>
              <v-table density="compact" class="text-caption">
                <tbody>
                  <tr align="right">
                    <th width="20%">{{ $t("resources.failedlogins.fields.attemptedAt") }}:</th>
                    <td>{{ item.raw.attemptedAt }}</td>
                  </tr>
                  <tr align="right">
                    <th>{{ $t("resources.failedlogins.fields.ip") }}:</th>
                    <td>{{ item.raw.ip }}</td>
                  </tr>
                  <tr align="right">
                    <th>{{ $t("resources.failedlogins.fields.userAgent") }}:</th>
                    <td>{{ item.raw.userAgent }}</td>
                  </tr>
                </tbody>
              </v-table>
            </v-sheet>
          </v-col>
        </v-row>              
      </template>
      <template v-slot:bottom.pagination.header="{ page, pageCount }">
        <v-footer class="text-body-3 mt-6 mb-2" style="padding:0;">
          <div>{{ $t("dataiterator.displaying_page", {page, pageCount}) }}</div>
        </v-footer>
      </template>
      <template v-slot:no-data>
        <v-row no-gutters class="bordered pt-1 pb-1 justify-center" v-if="$store.state.api.loading">
          <v-progress-circular
            color="primary"
            indeterminate
          ></v-progress-circular>
        </v-row>
        <v-row no-gutters class="bordered pt-2 pb-2 justify-center" v-else>
          {{ $t("va.datatable.nodata")}}
        </v-row>
      </template>
    </va-data-iterator-server>
  </va-list>
</template>

<script>
export default {
  props: ["resource", "title"],
  data() {
    return {
      filters: [
        {
          source: "username",
          type: "select",
          attributes: {
            reference: "failedloginusernames",
            multiple: true,  
          }
        },
        {
          source: "ip",
          type: "select",
          attributes: {
            reference: "failedloginips",
            multiple: true,  
          }
        },
        {
          source: "attemptedAtStart",
          type: "date",
        },
        {
          source: "attemptedAtEnd",
          type: "date",
        }
      ],
      fields: [
        {
          source: "username",
          type: "text",
          sortable: true,
          width: "10%"
        },
        {
          source: "attemptedAt",
          type: "date",
          sortable: true,
          width: "10%"
        },
        {
          source: "userAgent",
          sortable: true,
          width: "10%"
        },
        {
          source: "ip",
          sortable: true,
          width: "10%"
        },
      ],
    };
  },
  methods: {
    isOdd(number) {
      return (number & 1) === 1;
    }
  }
};
</script>

Seçenekler

Slotlar

Arama

Genel arama filtresi varsayılan olarak etkin olacaktır. Bunu devre dışı bırakmak için, disableGlobalSearch özelliğini kullanın. Bu filtre, varsayılan olarak q olan ve globalSearchQuery değişkeninde yapılandırılan anahtar aracılığıyla arka uca arama sorgusunu gönderecektir. Daha sonra SQL işleme için arka uç tarafında, örneğin çok sütunlu LIKE aramasını ilgili model Olobase\Mezzio\ColumnFilters sınıfı sayesinde otomatik olarak yapılacaktır.

<template>
  <va-list 
  :fields="fields"
  :filters="filters"
  >
    <va-data-table-server 
       disable-show
      :disable-actions="false"
    >
    </va-data-table-server>
  </va-list>
</template>

<script>
export default {
  props: ["resource"],
  data() {
    return {
      filters: [],
      fields: [
        {
          source: "roleName",
          sortable: true,
        },
        {
          source: "roleKey",
          sortable: true,
        },
        {
          source: "roleLevel",          
          sortable: true,
        },
      ],
    };
  }
};
</script>

<?php
namespace App\Model;

use Exception;
use Olobase\Mezzio\ColumnFiltersInterface;
use Laminas\Db\Sql\Sql;
use Laminas\Db\Sql\Expression;
use Laminas\Paginator\Paginator;
use Laminas\Paginator\Adapter\DbSelect;
use Laminas\Db\Adapter\AdapterInterface;
use Laminas\Cache\Storage\StorageInterface;
use Laminas\Db\TableGateway\TableGatewayInterface;

class RoleModel
{
    private $conn;
    private $roles;
    private $rolePermissions;
    private $cache;
    private $adapter;
    private $columnFilters;

    public function __construct(
        TableGatewayInterface $roles,
        TableGatewayInterface $rolePermissions,
        StorageInterface $cache,
        ColumnFiltersInterface $columnFilters
    )
    {
        $this->roles = $roles;
        $this->rolePermissions = $rolePermissions;
        $this->cache = $cache;
        $this->adapter = $roles->getAdapter();
        $this->columnFilters = $columnFilters;
        $this->conn = $this->adapter->getDriver()->getConnection();
    }

    public function findAllBySelect()
    {
        $sql = new Sql($this->adapter);
        $select = $sql->select();
        $select->columns([
            'id' => 'roleId',
            'roleKey',
            'roleName',
            'roleLevel',
        ]);
        $select->from(['r' => 'roles']);
        return $select;
    }

    public function findAllByPaging(array $get)
    {
        $select = $this->findAllBySelect();
        $this->columnFilters->clear();
        $this->columnFilters->setColumns([
            'roleKey',
            'roleName',
            'roleLevel',
        ]);
        $this->columnFilters->setData($get);
        $this->columnFilters->setSelect($select);

        if ($this->columnFilters->searchDataIsNotEmpty()) {
            $nest = $select->where->nest();
            foreach ($this->columnFilters->getSearchData() as $col => $words) {
                $nest = $nest->or->nest();
                foreach ($words as $str) {
                    $nest->or->like(new Expression($col), '%'.$str.'%');
                }
                $nest = $nest->unnest();
            }
            $nest->unnest();
        }
        if ($this->columnFilters->orderDataIsNotEmpty()) {
            foreach ($this->columnFilters->getOrderData() as $order) {
                $select->order(new Expression($order));
            }
        }
        // echo $select->getSqlString($this->adapter->getPlatform());
        // die;
        $paginatorAdapter = new DbSelect(
            $select,
            $this->adapter
        );
        $paginator = new Paginator($paginatorAdapter);
        return $paginator;
    }
}

Varsayılan olarak gözüken filtrelere ek olarak, kullanıcının kullanıcı arayüzü aracılığıyla değiştiremeyeceği bazı dahili filtrelere de ihtiyacınız olabilir. Bunun için filter özelliğini kullanın. Bu, veri sağlayıcınıza otomatik olarak gönderilecek ve diğer etkin filtrelerle birleştirilecek basit bir key/value nesnesidir.

Filtreler

Eklediğiniz tüm filtereler varsayılan olarak aktifdir. Aktif olan bu filterler ve sütunlar ayarlar tabında kullanıcı tarafından göster/gizle eylemleri ile özelleşririlebilir. Küresel aramaya ek olarak VaDataTableServer, burada gösterildiği gibi birçok desteklenen girişle birlikte gelişmiş özel filtreleri de destekler:

Filtreleme için desteklenen girişler aşağıdaki gibidir:

• text
• number
• boolean
• date
• rating
• select (varsayılan olarak nesneye döner)
• autocompleter

Yeni filtreler tanımlamak için filtre özelliklerini kullanın. Bu gelişmiş filtrelerin kod örneği kullanımını burada bulabilirsiniz:

<script>
export default {
  props: ["resource", "title"],
  data() {
    return {
      loading: false,
      yearId: new Date().getFullYear(),
      filters: [
        {
          source: "companyId",
          type: "select",
          col: 2,
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "companies",
          }
        },
        {
          source: "jobTitleId",
          type: "select",
          col: 2,
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "jobtitles",
          }
        },
        {
          source: "gradeId",
          type: "select",
          returnObject: false, // sends ids as array
          col: 3,
          attributes: {
            optionText: "name",
            multiple: true,
            reference: "employeegrades",
          }
        },
      ],
    };
  }
};
</script>

Giriş türü için esas olarak zorunlu kaynak özelliğinin yanı sıra türü de kullanmalısınız. Belirli nitelikleri giriş bileşeniyle birleştirmek için attributes özelliğini kullanın.

Desteklenen tüm alan özelliklerine bakın:

Etkileşimli Filtreler

Eğer bir filtreyi seçtikten sonra diğer bir filtrenin/filtrelerin etkileşimli olarak değişmesini istiyorsanız takip eden örnekteki kodu inceleyelin.

<script>
export default {
  props: ["resource", "title"],
  data() {
    return {
      filters: [
        {
          source: "yearId",
          type: "select",
          attributes: {
            optionText: "name",
            multiple: false,
            reference: "years",
          },
          label: this.$t("employees.yearId"),
        },
        {
          source: "salaryListId",
          type: "select",
          attributes: {
            optionText: "name",
            multiple: false,
            reference: "salarylists",
          },
          key: "yearId",
          filters: ['yearId'],
          label: this.$t("salaries.salaryListId"),
        },
      ]
    };
  },
};
</script>

İki Tarih Arası Filtreleme

Eğer bir tarih sütununu belirtilen iki tarih sütunu aralığında filtrelemek istiyorsanız sütun adının sonlarına Start ve End önadlarını eklemelisiniz.

Takip eden örnekte attemptedAt sütun adı için attemptedAtStart ve attemptedAtEnd adlı 2 adet tarih filtresi ekleniyor.

<script>
export default {
  props: ["resource", "title"],
  data() {
    return {
      filters: [
        {
          source: "username",
          type: "text",
        },
        {
          source: "attemptedAtStart",
          type: "date",
        },
        {
          source: "attemptedAtEnd",
          type: "date",
        }
      ],
      fields: [
        {
          source: "username",
          type: "text",
          sortable: true,
          width: "10%"
        },
        {
          source: "attemptedAt",
          type: "date",
          sortable: true,
          width: "10%"
        },
      ],
    };
  },
};
</script>

Evrensel Eylemler

Bu VaList bileşeni, create adında sadece 1 küresel eylemle birlikte gelir. Oluştur düğmesi yalnızca mevcut kaynağın oluşturma eylemi varsa ve kimliği doğrulanmış kullanıcının bu kaynak üzerinde oluşturma izni varsa görünecektir.

Aksiyon Olayları

Varsayılan yönlendirme davranışına uymak zorunda değilsiniz. Bir oluşturma eylemi tercih ederseniz, yalnızca eylem olayına abone olun ve oluşturma tuşunun bağlantılı eylem sayfasına yönlendirmesini önlemek için, disableCreateRedirect özelliği ile yönlendirme oluşturmayı devre dışı bırakın. VaDataTableServer'ın içindeki show, edit ve clone eylemleri için de aynı davranış geçerlidir. Bir Aside veya diyalog içerisinde özel bir davranışa ihtiyacınız varsa, item-action olayını kullanın ve varsayılan yönlendirmeyi devre dışı bırakın. İlgili tuşlar için herhangi bir işlem yapılmaması durumunda tüm bu tuşların otomatik olarak gizleneceğini unutmayın. İlgili eylem yönlendirmelerinin her birinin devre dışı bırakılması, tuşların yeniden görünmesine neden olur.

Bu eylem etkinlikleri size her zaman API'dan yenilenen öğenin yanı sıra uyarlanmış CRUD başlığını da sağlayacaktır.

Özelleştirilebilir Eylemler

Standart eylemlere ek olarak başka öğe eylemlerine ihtiyacınız varsa, özel item.actions slotunu kullanın. Güncellenebilir bir veri tablosu için ise row.actions slotunu kullanmalısınız.

<template>
  <va-list
   :fields="fields"
  >
    <va-data-table-server>
      <template v-slot:[`item.actions`]="{ resource, item }">
        <va-my-custom-button
          :resource="resource"
          :item="item"
        ></va-my-custom-button>
      </template>
    </va-data-table-server>
  </va-list>
</template>

Toplu Eylemler

Veri listeleme, ister kopyalama ister silme olsun, her türlü toplu işlemi destekler. Bu özellik, veri sağlayıcınızın copyMany, updateMany ve deleteMany yöntemlerini kullanacaktır. Bazı öğeleri seçtiğinizde, mevcut tüm toplu işlemler başlıkta görünecektir.

Özelleştirilebilir Toplu Eylemler

Varsayılan olarak Olobase Admin toplu silme eylemi sağlar, ancak bulk.actions slotlarını ve updateMany'yi kullanacak VaBulkActionButton'u kullanarak gerektiği gibi birden fazla toplu eylem ekleyebilirsiniz. Bu son bileşen, API'nize gönderilecek nesne olacak gerekli bir eylem desteğine ihtiyaç duyar. Bu nesne, toplu güncellemek istediğiniz tüm özellikleri içerecektir. Bir sonraki örnekte size toplu yayınlama/yayından kaldırma toplu işlemlerine ait bir örnek gösterilecektir:

<template>
  <va-list
   :filters="filters"
   :fields="fields"
   :items-per-page="10"          
  >
    <template v-slot:bulk.actions="{ selected }">
      <va-bulk-action-button
       :label="$t('users.enable')"
       icon="mdi-publish"
       color="success"
       :value="selected"
       :action="{ active: true }"
       text
      ></va-bulk-action-button>
     <va-bulk-action-button
       :label="$t('users.disable')"
       icon="mdi-download"
       color="orange"
       :value="selected"
       :action="{ active: false }"
       text
      ></va-bulk-action-button>
    </template>
    <va-data-table-server
       row-create
       row-show
       row-edit
       disable-clone
       disable-show
       disable-edit
     >
    </va-data-table-server>
  </va-list>
</template>