|
|
@@ -1,141 +1,132 @@
|
|
|
<template>
|
|
|
<div class="table-outer-container">
|
|
|
- <div class="table-container">
|
|
|
- <div class="table-header">
|
|
|
- <tippy
|
|
|
- v-if="filters.length > 0"
|
|
|
- :touch="true"
|
|
|
- :interactive="true"
|
|
|
- placement="bottom"
|
|
|
- theme="search"
|
|
|
- ref="search"
|
|
|
- trigger="click"
|
|
|
- >
|
|
|
- <a class="button is-info" @click.prevent="true">
|
|
|
- <i class="material-icons icon-with-button">search</i>
|
|
|
- Search
|
|
|
- </a>
|
|
|
-
|
|
|
- <template #content>
|
|
|
- <div
|
|
|
- v-for="(query, index) in advancedQuery"
|
|
|
- :key="`query-${index}`"
|
|
|
- class="advanced-query"
|
|
|
- >
|
|
|
- <div class="control select">
|
|
|
- <select v-model="query.filter">
|
|
|
- <option
|
|
|
- v-for="f in filters"
|
|
|
- :key="f.name"
|
|
|
- :value="f"
|
|
|
- >
|
|
|
- {{ f.displayName }}
|
|
|
- </option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <div class="control select">
|
|
|
- <select
|
|
|
- v-if="query.filter.type"
|
|
|
- v-model="query.type"
|
|
|
- >
|
|
|
- <option
|
|
|
- v-for="type in filterTypes"
|
|
|
- :key="type"
|
|
|
- :value="type"
|
|
|
- >
|
|
|
- {{ type }}
|
|
|
- </option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- <p class="control is-expanded">
|
|
|
- <input
|
|
|
- v-if="query.type === 'regex'"
|
|
|
- v-model="query.regex"
|
|
|
- class="input"
|
|
|
- type="text"
|
|
|
- placeholder="Search value"
|
|
|
- @keyup.enter="changeFilter()"
|
|
|
- />
|
|
|
- </p>
|
|
|
- <div class="control">
|
|
|
- <button
|
|
|
- class="button material-icons is-success"
|
|
|
- @click="addQueryItem()"
|
|
|
+ <div class="table-header">
|
|
|
+ <tippy
|
|
|
+ v-if="filters.length > 0"
|
|
|
+ :touch="true"
|
|
|
+ :interactive="true"
|
|
|
+ placement="bottom"
|
|
|
+ theme="search"
|
|
|
+ ref="search"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <a class="button is-info" @click.prevent="true">
|
|
|
+ <i class="material-icons icon-with-button">search</i>
|
|
|
+ Search
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <template #content>
|
|
|
+ <div
|
|
|
+ v-for="(query, index) in advancedQuery"
|
|
|
+ :key="`query-${index}`"
|
|
|
+ class="advanced-query"
|
|
|
+ >
|
|
|
+ <div class="control select">
|
|
|
+ <select v-model="query.filter">
|
|
|
+ <option
|
|
|
+ v-for="f in filters"
|
|
|
+ :key="f.name"
|
|
|
+ :value="f"
|
|
|
>
|
|
|
- control_point
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- v-if="advancedQuery.length > 1"
|
|
|
- class="control"
|
|
|
+ {{ f.displayName }}
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="control select">
|
|
|
+ <select
|
|
|
+ v-if="query.filter.type"
|
|
|
+ v-model="query.type"
|
|
|
>
|
|
|
- <button
|
|
|
- class="button material-icons is-danger"
|
|
|
- @click="removeQueryItem(index)"
|
|
|
+ <option
|
|
|
+ v-for="type in filterTypes"
|
|
|
+ :key="type"
|
|
|
+ :value="type"
|
|
|
>
|
|
|
- remove_circle_outline
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ {{ type }}
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
</div>
|
|
|
- <a class="button is-info" @click="changeFilter()">
|
|
|
- <i class="material-icons icon-with-button"
|
|
|
- >search</i
|
|
|
+ <p class="control is-expanded">
|
|
|
+ <input
|
|
|
+ v-if="query.type === 'regex'"
|
|
|
+ v-model="query.regex"
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ placeholder="Search value"
|
|
|
+ @keyup.enter="changeFilter()"
|
|
|
+ />
|
|
|
+ </p>
|
|
|
+ <div class="control">
|
|
|
+ <button
|
|
|
+ class="button material-icons is-success"
|
|
|
+ @click="addQueryItem()"
|
|
|
>
|
|
|
- Search
|
|
|
- </a>
|
|
|
- </template>
|
|
|
- </tippy>
|
|
|
- <tippy
|
|
|
- v-if="hidableSortedColumns.length > 0"
|
|
|
- :touch="true"
|
|
|
- :interactive="true"
|
|
|
- placement="bottom"
|
|
|
- theme="dropdown"
|
|
|
- ref="toggleColumns"
|
|
|
- trigger="click"
|
|
|
- >
|
|
|
- <a class="button is-info" @click.prevent="true">
|
|
|
- <i class="material-icons icon-with-button"
|
|
|
- >visibility</i
|
|
|
- >
|
|
|
- Toggle Columns
|
|
|
- </a>
|
|
|
-
|
|
|
- <template #content>
|
|
|
- <div class="nav-dropdown-items">
|
|
|
+ control_point
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div v-if="advancedQuery.length > 1" class="control">
|
|
|
<button
|
|
|
- v-for="(column, index) in hidableSortedColumns"
|
|
|
- :key="column.name"
|
|
|
- class="nav-item"
|
|
|
- @click.prevent="toggleColumnVisibility(column)"
|
|
|
- :title="column.displayName"
|
|
|
+ class="button material-icons is-danger"
|
|
|
+ @click="removeQueryItem(index)"
|
|
|
>
|
|
|
- <p class="control is-expanded checkbox-control">
|
|
|
- <label class="switch">
|
|
|
- <input
|
|
|
- type="checkbox"
|
|
|
- :id="index"
|
|
|
- :checked="
|
|
|
- shownColumns.indexOf(
|
|
|
- column.name
|
|
|
- ) !== -1
|
|
|
- "
|
|
|
- @click="
|
|
|
- toggleColumnVisibility(column)
|
|
|
- "
|
|
|
- />
|
|
|
- <span class="slider round"></span>
|
|
|
- </label>
|
|
|
- <label :for="index">
|
|
|
- <span></span>
|
|
|
- <p>{{ column.displayName }}</p>
|
|
|
- </label>
|
|
|
- </p>
|
|
|
+ remove_circle_outline
|
|
|
</button>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </tippy>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <a class="button is-info" @click="changeFilter()">
|
|
|
+ <i class="material-icons icon-with-button">search</i>
|
|
|
+ Search
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ </tippy>
|
|
|
+ <tippy
|
|
|
+ v-if="hidableSortedColumns.length > 0"
|
|
|
+ :touch="true"
|
|
|
+ :interactive="true"
|
|
|
+ placement="bottom"
|
|
|
+ theme="dropdown"
|
|
|
+ ref="toggleColumns"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <a class="button is-info" @click.prevent="true">
|
|
|
+ <i class="material-icons icon-with-button">visibility</i>
|
|
|
+ Toggle Columns
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <template #content>
|
|
|
+ <div class="nav-dropdown-items">
|
|
|
+ <button
|
|
|
+ v-for="(column, index) in hidableSortedColumns"
|
|
|
+ :key="column.name"
|
|
|
+ class="nav-item"
|
|
|
+ @click.prevent="toggleColumnVisibility(column)"
|
|
|
+ :title="column.displayName"
|
|
|
+ >
|
|
|
+ <p class="control is-expanded checkbox-control">
|
|
|
+ <label class="switch">
|
|
|
+ <input
|
|
|
+ type="checkbox"
|
|
|
+ :id="index"
|
|
|
+ :checked="
|
|
|
+ shownColumns.indexOf(
|
|
|
+ column.name
|
|
|
+ ) !== -1
|
|
|
+ "
|
|
|
+ @click="toggleColumnVisibility(column)"
|
|
|
+ />
|
|
|
+ <span class="slider round"></span>
|
|
|
+ </label>
|
|
|
+ <label :for="index">
|
|
|
+ <span></span>
|
|
|
+ <p>{{ column.displayName }}</p>
|
|
|
+ </label>
|
|
|
+ </p>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </tippy>
|
|
|
+ </div>
|
|
|
+ <div class="table-container">
|
|
|
<table class="table">
|
|
|
<thead>
|
|
|
<draggable
|
|
|
@@ -255,70 +246,70 @@
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
- <div class="table-footer">
|
|
|
- <div class="page-controls">
|
|
|
- <button
|
|
|
- :class="{ disabled: page === 1 }"
|
|
|
- class="button is-primary material-icons"
|
|
|
- :disabled="page === 1"
|
|
|
- @click="changePage(1)"
|
|
|
- content="First Page"
|
|
|
- v-tippy
|
|
|
- >
|
|
|
- skip_previous
|
|
|
- </button>
|
|
|
- <button
|
|
|
- :class="{ disabled: page === 1 }"
|
|
|
- class="button is-primary material-icons"
|
|
|
- :disabled="page === 1"
|
|
|
- @click="changePage(page - 1)"
|
|
|
- content="Previous Page"
|
|
|
- v-tippy
|
|
|
- >
|
|
|
- fast_rewind
|
|
|
- </button>
|
|
|
-
|
|
|
- <p>Page {{ page }} / {{ lastPage }}</p>
|
|
|
-
|
|
|
- <button
|
|
|
- :class="{ disabled: page === lastPage }"
|
|
|
- class="button is-primary material-icons"
|
|
|
- :disabled="page === lastPage"
|
|
|
- @click="changePage(page + 1)"
|
|
|
- content="Next Page"
|
|
|
- v-tippy
|
|
|
- >
|
|
|
- fast_forward
|
|
|
- </button>
|
|
|
- <button
|
|
|
- :class="{ disabled: page === lastPage }"
|
|
|
- class="button is-primary material-icons"
|
|
|
- :disabled="page === lastPage"
|
|
|
- @click="changePage(lastPage)"
|
|
|
- content="Last Page"
|
|
|
- v-tippy
|
|
|
- >
|
|
|
- skip_next
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="page-size">
|
|
|
- <div class="control">
|
|
|
- <label class="label">Items per page</label>
|
|
|
- <p class="control select">
|
|
|
- <select
|
|
|
- v-model.number="pageSize"
|
|
|
- @change="changePageSize()"
|
|
|
- >
|
|
|
- <option value="10">10</option>
|
|
|
- <option value="25">25</option>
|
|
|
- <option value="50">50</option>
|
|
|
- <option value="100">100</option>
|
|
|
- <option value="250">250</option>
|
|
|
- <option value="500">500</option>
|
|
|
- <option value="1000">1000</option>
|
|
|
- </select>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-footer">
|
|
|
+ <div class="page-controls">
|
|
|
+ <button
|
|
|
+ :class="{ disabled: page === 1 }"
|
|
|
+ class="button is-primary material-icons"
|
|
|
+ :disabled="page === 1"
|
|
|
+ @click="changePage(1)"
|
|
|
+ content="First Page"
|
|
|
+ v-tippy
|
|
|
+ >
|
|
|
+ skip_previous
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ :class="{ disabled: page === 1 }"
|
|
|
+ class="button is-primary material-icons"
|
|
|
+ :disabled="page === 1"
|
|
|
+ @click="changePage(page - 1)"
|
|
|
+ content="Previous Page"
|
|
|
+ v-tippy
|
|
|
+ >
|
|
|
+ fast_rewind
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <p>Page {{ page }} / {{ lastPage }}</p>
|
|
|
+
|
|
|
+ <button
|
|
|
+ :class="{ disabled: page === lastPage }"
|
|
|
+ class="button is-primary material-icons"
|
|
|
+ :disabled="page === lastPage"
|
|
|
+ @click="changePage(page + 1)"
|
|
|
+ content="Next Page"
|
|
|
+ v-tippy
|
|
|
+ >
|
|
|
+ fast_forward
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ :class="{ disabled: page === lastPage }"
|
|
|
+ class="button is-primary material-icons"
|
|
|
+ :disabled="page === lastPage"
|
|
|
+ @click="changePage(lastPage)"
|
|
|
+ content="Last Page"
|
|
|
+ v-tippy
|
|
|
+ >
|
|
|
+ skip_next
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="page-size">
|
|
|
+ <div class="control">
|
|
|
+ <label class="label">Items per page</label>
|
|
|
+ <p class="control select">
|
|
|
+ <select
|
|
|
+ v-model.number="pageSize"
|
|
|
+ @change="changePageSize()"
|
|
|
+ >
|
|
|
+ <option value="10">10</option>
|
|
|
+ <option value="25">25</option>
|
|
|
+ <option value="50">50</option>
|
|
|
+ <option value="100">100</option>
|
|
|
+ <option value="250">250</option>
|
|
|
+ <option value="500">500</option>
|
|
|
+ <option value="1000">1000</option>
|
|
|
+ </select>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
