refactor: simplify filters components (#6749)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Dorian Grasset
GitHub
parent
81ae0af7e1
commit
18331eaf33
@ -1,8 +1,24 @@
|
||||
<template>
|
||||
<div class="shadow-box mb-3 p-0" :style="boxStyle">
|
||||
<div class="list-header">
|
||||
<div class="header-top">
|
||||
<div class="select-checkbox-wrapper">
|
||||
<!-- Line 1: Checkbox + Status + Tags + Search Bar -->
|
||||
<div class="filter-row">
|
||||
<div class="search-wrapper">
|
||||
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
|
||||
<font-awesome-icon icon="times" />
|
||||
</a>
|
||||
<form @submit.prevent>
|
||||
<input
|
||||
v-model="searchText"
|
||||
class="form-control search-input"
|
||||
:placeholder="$t('Search...')"
|
||||
:aria-label="$t('Search monitored sites')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="filters-group">
|
||||
<input
|
||||
v-if="!selectMode"
|
||||
v-model="selectMode"
|
||||
@ -18,33 +34,17 @@
|
||||
type="checkbox"
|
||||
:aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="header-filter">
|
||||
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
|
||||
</div>
|
||||
|
||||
<div class="search-wrapper ms-auto">
|
||||
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
|
||||
<font-awesome-icon icon="times" />
|
||||
</a>
|
||||
<form @submit.prevent>
|
||||
<input
|
||||
v-model="searchText"
|
||||
class="form-control search-input"
|
||||
:placeholder="$t('Search...')"
|
||||
:aria-label="$t('Search monitored sites')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectMode && selectedMonitorCount > 0" class="selected-count-row">
|
||||
<!-- Line 2: Cancel + Actions (shown when selection mode is active) -->
|
||||
<div v-if="selectMode && selectedMonitorCount > 0" class="selection-row">
|
||||
<button class="btn btn-outline-normal" @click="cancelSelectMode">
|
||||
{{ $t("Cancel") }}
|
||||
</button>
|
||||
<div class="actions-wrapper ms-2">
|
||||
<div class="actions-wrapper">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn btn-outline-normal dropdown-toggle"
|
||||
@ -82,7 +82,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<span class="selected-count ms-2">
|
||||
<span class="selected-count">
|
||||
{{ $t("selectedMonitorCountMsg", selectedMonitorCount) }}
|
||||
</span>
|
||||
</div>
|
||||
@ -538,6 +538,9 @@ export default {
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.dark & {
|
||||
background-color: $dark-header-bg;
|
||||
@ -545,37 +548,26 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.header-top {
|
||||
.filter-row {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
|
||||
@media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.select-checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
|
||||
.form-check-input {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
margin-left: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-filter {
|
||||
.filters-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actions-wrapper {
|
||||
@ -642,6 +634,13 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.selection-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selected-count {
|
||||
white-space: nowrap;
|
||||
font-size: 0.9em;
|
||||
@ -652,8 +651,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.selected-count-row {
|
||||
padding: 5px 10px 0 10px;
|
||||
.actions-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -676,10 +674,29 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 975px) {
|
||||
.filter-row {
|
||||
flex-direction: column-reverse;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.filters-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 770px) {
|
||||
.list-header {
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -687,15 +704,14 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 300px;
|
||||
margin-left: auto;
|
||||
order: 1;
|
||||
|
||||
@media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
|
||||
order: -1;
|
||||
form {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -713,13 +729,8 @@ export default {
|
||||
}
|
||||
|
||||
.search-input {
|
||||
max-width: 15em;
|
||||
width: 100%;
|
||||
padding-right: 30px;
|
||||
|
||||
@media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.monitor-item {
|
||||
|
||||
@ -1,139 +1,142 @@
|
||||
<template>
|
||||
<div class="d-flex align-items-center flex-wrap gap-1">
|
||||
<MonitorListFilterDropdown :filterActive="filterState.status?.length > 0">
|
||||
<template #status>
|
||||
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
|
||||
<span v-else>
|
||||
{{ $t("Status") }}
|
||||
</span>
|
||||
</template>
|
||||
<template #dropdown>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="1" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.up }}
|
||||
<span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
<MonitorListFilterDropdown :filterActive="filterState.status?.length > 0 || filterState.active?.length > 0">
|
||||
<template #status>
|
||||
<Status
|
||||
v-if="filterState.status?.length === 1 && !filterState.active?.length"
|
||||
:status="filterState.status[0]"
|
||||
/>
|
||||
<span
|
||||
v-else-if="!filterState.status?.length && filterState.active?.length === 1"
|
||||
class="badge status-pill"
|
||||
:class="filterState.active[0] ? 'running' : 'paused'"
|
||||
>
|
||||
<font-awesome-icon :icon="filterState.active[0] ? 'play' : 'pause'" class="icon-small" />
|
||||
{{ filterState.active[0] ? $t("Running") : $t("filterActivePaused") }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t("Status") }}
|
||||
</span>
|
||||
</template>
|
||||
<template #dropdown>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="1" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.up }}
|
||||
<span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="0" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.down }}
|
||||
<span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="0" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.down }}
|
||||
<span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="2" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.pending }}
|
||||
<span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="2" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.pending }}
|
||||
<span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="3" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.maintenance }}
|
||||
<span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<Status :status="3" />
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.maintenance }}
|
||||
<span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</MonitorListFilterDropdown>
|
||||
<MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
|
||||
<template #status>
|
||||
<span v-if="filterState.active?.length === 1">
|
||||
<span v-if="filterState.active[0]">{{ $t("Running") }}</span>
|
||||
<span v-else>{{ $t("filterActivePaused") }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t("filterActive") }}
|
||||
</span>
|
||||
</template>
|
||||
<template #dropdown>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span>{{ $t("Running") }}</span>
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.active }}
|
||||
<span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span class="badge status-pill running">
|
||||
<font-awesome-icon icon="play" class="icon-small" />
|
||||
{{ $t("Running") }}
|
||||
</span>
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.active }}
|
||||
<span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span>{{ $t("filterActivePaused") }}</span>
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.pause }}
|
||||
<span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span class="badge status-pill paused">
|
||||
<font-awesome-icon icon="pause" class="icon-small" />
|
||||
{{ $t("filterActivePaused") }}
|
||||
</span>
|
||||
<span class="ps-3">
|
||||
{{ $root.stats.pause }}
|
||||
<span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</MonitorListFilterDropdown>
|
||||
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
|
||||
<template #status>
|
||||
<Tag
|
||||
v-if="filterState.tags?.length === 1"
|
||||
:item="tagsList.find((tag) => tag.id === filterState.tags[0])"
|
||||
:size="'sm'"
|
||||
/>
|
||||
<span v-else>
|
||||
{{ $t("Tags") }}
|
||||
</span>
|
||||
</template>
|
||||
<template #dropdown>
|
||||
<li v-for="tag in tagsList" :key="tag.id">
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span><Tag :item="tag" :size="'sm'" /></span>
|
||||
<span class="ps-3">
|
||||
{{ getTaggedMonitorCount(tag) }}
|
||||
<span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</MonitorListFilterDropdown>
|
||||
<MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
|
||||
<template #status>
|
||||
<Tag
|
||||
v-if="filterState.tags?.length === 1"
|
||||
:item="tagsList.find((tag) => tag.id === filterState.tags[0])"
|
||||
:size="'sm'"
|
||||
/>
|
||||
<span v-else>
|
||||
{{ $t("Tags") }}
|
||||
</span>
|
||||
</template>
|
||||
<template #dropdown>
|
||||
<li v-for="tag in tagsList" :key="tag.id">
|
||||
<div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<span><Tag :item="tag" :size="'sm'" /></span>
|
||||
<span class="ps-3">
|
||||
{{ getTaggedMonitorCount(tag) }}
|
||||
<span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
|
||||
<font-awesome-icon icon="check" />
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="tagsList.length === 0">
|
||||
<div class="dropdown-item disabled px-3">
|
||||
{{ $t("No tags found.") }}
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</MonitorListFilterDropdown>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="tagsList.length === 0">
|
||||
<div class="dropdown-item disabled px-3">
|
||||
{{ $t("No tags found.") }}
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</MonitorListFilterDropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -252,6 +255,17 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.simple-status {
|
||||
min-width: 64px;
|
||||
border: 1px solid #d1d5db;
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
|
||||
.dark & {
|
||||
border-color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-filters-btn {
|
||||
font-size: 0.8em;
|
||||
margin-right: 5px;
|
||||
@ -275,4 +289,37 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0.5rem 0;
|
||||
border-top: 1px solid #d1d5db;
|
||||
|
||||
.dark & {
|
||||
border-top-color: #6b7280;
|
||||
}
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
min-width: 64px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
&.running,
|
||||
&.paused {
|
||||
background-color: white !important;
|
||||
border: 1px solid #d1d5db;
|
||||
color: inherit;
|
||||
|
||||
.dark & {
|
||||
background-color: transparent !important;
|
||||
border-color: #6b7280;
|
||||
color: $dark-font-color;
|
||||
}
|
||||
|
||||
.icon-small {
|
||||
font-size: 0.75em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -103,7 +103,7 @@ export default {
|
||||
@extend .btn-outline-normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-left: 0;
|
||||
color: $link-color;
|
||||
|
||||
.dark & {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user