Data Iterator Server

The VaDataIteratorServer component is used to display data that does not fit into the grid structure or needs to be customized and is similar in functionality to the v-data-table component. It includes features such as sorting, search, pagination, filtering and selection. The list layout in the default slot is fully customizable.

Mixins:

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>

Options

Property	Type	Description	Default
class	`String`	It assigns a value to the HTML class attribute of the div element surrounding the data table.	`va-data-table`
pagination	`object`	Controls customizable variables of paging components. When the top and bottom options are true, pagination can be displayed both at the bottom and at the top.	`{ density: 'default', activeColor: 'primary', top: false, bottom: true, rounded: 'pill', }`
showExpand	`boolean`	Enables row expansion mode for quick detailed view.	`false`
expandOnClick	`boolean`	Allows the row to be expanded when the table rows are clicked.	`false`
groupBy	`array`	Vuetify folders table data using the original groupBy function. It can take more than one value.	`[]`
selectStrategy	`boolean`	Defines the strategy for selecting items in the list. Possible values: `single`, `page`, `all`.	`page`
returnObject	`boolean`	Changes the selection behavior to directly return the object rather than the value specified by the element value.	`false`
mustSort	`boolean`	If true, sorting cannot be disabled, it will always switch between ascending and descending.	`false`
multiSort	`boolean`	Enables/disables the multisorting feature, which is enabled by default.	`true`

Slots

Name	Description
top.pagination.header	Allows customization of the top of the parent pagination.
top.pagination.footer	Allows customization of the bottom of the parent pagination.
bottom.pagination.header	Allows customization of the top of the sub-pagination.
bottom.pagination.footer	Allows customization of the bottom part of sub-pagination.
no-data	Allows you to customize the section displayed when no data is found.

Data Iterator Server

Sponsors