fix(AdvancedTable): Table header and footer should be outside table-container

frontend/src/components/AdvancedTable.vue

@@ -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>