595 lines
20 KiB
Vue
Executable File
595 lines
20 KiB
Vue
Executable File
<template>
|
|
<div class="pf-c-toolbar">
|
|
<div class="pf-c-toolbar__content">
|
|
<div class="pf-c-toolbar__content-section pf-m-nowrap">
|
|
<div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show">
|
|
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
<div class="pf-c-search-input">
|
|
<div class="pf-c-search-input__bar">
|
|
<span class="pf-c-search-input__text">
|
|
<span class="pf-c-search-input__icon">
|
|
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
</span>
|
|
<input
|
|
class="pf-c-search-input__text-input"
|
|
type="text"
|
|
placeholder="Type to Search"
|
|
aria-label="Type to Search"
|
|
v-model="searchInput"
|
|
@input="handleInput"
|
|
ref="search"
|
|
autocomplete="off"
|
|
/>
|
|
</span>
|
|
<span class="pf-c-search-input__utilities">
|
|
<span class="pf-c-search-input__clear">
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
aria-label="Clear"
|
|
@click="clear"
|
|
>
|
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
</button>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="pf-c-divider pf-m-vertical pf-m-hidden pf-m-visible-on-lg" />
|
|
<div
|
|
class="pf-c-toolbar__group pf-m-filter-group pf-m-hidden pf-m-visible-on-lg"
|
|
>
|
|
<div class="pf-c-toolbar__item">
|
|
<div class="pf-c-select pf-m-expanded" ref="clickOutsidetarget1">
|
|
<span hidden>Choose one</span>
|
|
|
|
<button
|
|
class="pf-c-select__toggle"
|
|
type="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
@click.prevent="showCatFilteroptions = !showCatFilteroptions"
|
|
>
|
|
<div class="pf-c-select__toggle-wrapper">
|
|
<span
|
|
class="pf-c-select__toggle-text"
|
|
v-text="selectedCatName ? selectedCatName : 'Categories'"
|
|
></span>
|
|
</div>
|
|
<span class="pf-c-select__toggle-arrow">
|
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
<ul
|
|
class="pf-c-select__menu multi-select-dropdown-overflow"
|
|
role="listbox"
|
|
v-if="showCatFilteroptions ? 'hidden' : ''"
|
|
>
|
|
<li role="presentation" v-for="option in cats" :key="option">
|
|
<button
|
|
class="pf-c-select__menu-item pf-m-selected"
|
|
role="option"
|
|
@click.prevent="
|
|
setFilter('category', option.id, option.categoryName)
|
|
"
|
|
>
|
|
{{ option.categoryName }}
|
|
<span
|
|
class="pf-c-select__menu-item-icon"
|
|
v-if="selectedCatName === option.categoryName"
|
|
>
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pf-c-toolbar__item">
|
|
<div class="pf-c-select pf-m-expanded" ref="clickOutsidetarget2">
|
|
<span hidden>Choose one</span>
|
|
|
|
<button
|
|
class="pf-c-select__toggle"
|
|
type="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
@click.prevent="showTagFilteroptions = !showTagFilteroptions"
|
|
>
|
|
<div class="pf-c-select__toggle-wrapper">
|
|
<span
|
|
class="pf-c-select__toggle-text"
|
|
v-text="selectedTagname ? selectedTagname : 'Tag'"
|
|
></span>
|
|
</div>
|
|
<span class="pf-c-select__toggle-arrow">
|
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
<ul
|
|
class="pf-c-select__menu multi-select-dropdown-overflow"
|
|
role="listbox"
|
|
v-if="showTagFilteroptions ? 'hidden' : ''"
|
|
>
|
|
<li role="presentation" v-for="option in tags" :key="option">
|
|
<button
|
|
class="pf-c-select__menu-item pf-m-selected"
|
|
role="option"
|
|
@click.prevent="setFilter('tag', option.id, option.tagname)"
|
|
>
|
|
{{ option.tagname }}
|
|
<span
|
|
class="pf-c-select__menu-item-icon"
|
|
v-if="selectedTagname === option.tagname"
|
|
>
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pf-c-toolbar__item">
|
|
<div class="pf-c-select pf-m-expanded" ref="clickOutsidetarget3">
|
|
<span hidden>Choose one</span>
|
|
|
|
<button
|
|
class="pf-c-select__toggle"
|
|
type="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
@click.prevent="
|
|
showVendorFilteroptions = !showVendorFilteroptions
|
|
"
|
|
>
|
|
<div class="pf-c-select__toggle-wrapper">
|
|
<span
|
|
class="pf-c-select__toggle-text"
|
|
v-text="selectedVendorname ? selectedVendorname : 'Vendor'"
|
|
></span>
|
|
</div>
|
|
<span class="pf-c-select__toggle-arrow">
|
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
<ul
|
|
class="pf-c-select__menu multi-select-dropdown-overflow"
|
|
role="listbox"
|
|
v-if="showVendorFilteroptions ? 'hidden' : ''"
|
|
>
|
|
<li role="presentation" v-for="option in vendors" :key="option">
|
|
<button
|
|
class="pf-c-select__menu-item pf-m-selected"
|
|
role="option"
|
|
@click.prevent="
|
|
setFilter('vendor', option.id, option.vendorName)
|
|
"
|
|
>
|
|
{{ option.vendorName }}
|
|
<span
|
|
class="pf-c-select__menu-item-icon"
|
|
v-if="selectedVendorname === option.vendorName"
|
|
>
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="pf-c-toolbar__item">
|
|
<div class="pf-c-select pf-m-expanded" ref="clickOutsidetarget4">
|
|
<span hidden>Choose one</span>
|
|
|
|
<button
|
|
class="pf-c-select__toggle"
|
|
type="button"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
@click.prevent="
|
|
showModelFilteroptions = !showModelFilteroptions
|
|
"
|
|
>
|
|
<div class="pf-c-select__toggle-wrapper">
|
|
<span
|
|
class="pf-c-select__toggle-text"
|
|
v-text="selectedModelname ? selectedModelname : 'Model'"
|
|
></span>
|
|
</div>
|
|
<span class="pf-c-select__toggle-arrow">
|
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
<ul
|
|
class="pf-c-select__menu multi-select-dropdown-overflow"
|
|
role="listbox"
|
|
v-if="showModelFilteroptions ? 'hidden' : ''"
|
|
>
|
|
<li role="presentation" v-for="option in models" :key="option">
|
|
<button
|
|
class="pf-c-select__menu-item pf-m-selected"
|
|
role="option"
|
|
@click.prevent="setFilter('device_model', option, option)"
|
|
>
|
|
{{ option }}
|
|
<span
|
|
class="pf-c-select__menu-item-icon"
|
|
v-if="selectedModelname === option"
|
|
>
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COLUMN EDITOR -->
|
|
<hr class="pf-c-divider pf-m-vertical" />
|
|
<button
|
|
class="pf-c-button pf-m-control"
|
|
type="button"
|
|
alt="Edit Columns"
|
|
title="Edit Columns"
|
|
@click="showEditColumns()"
|
|
>
|
|
<i class="fas fa-columns" aria-hidden="true"></i>
|
|
<span
|
|
class="pf-u-display-none pf-u-display-inline-block-on-lg"
|
|
></span>
|
|
</button>
|
|
<!-- COLUMN EDITOR -->
|
|
|
|
<hr class="pf-c-divider pf-m-vertical" />
|
|
<div class="pf-c-toolbar__group pf-m-icon-button-group">
|
|
<div class="pf-c-toolbar__item">
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click.prevent="clear()"
|
|
>
|
|
<i
|
|
class="fas fa-expand-arrows-alt"
|
|
:class="
|
|
activeStatus === null ? 'statusActive' : 'statusInactive'
|
|
"
|
|
alt="Show all devices"
|
|
title="Show all devices"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
<div class="pf-c-toolbar__item">
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click.prevent="filterSelect('status', '1')"
|
|
>
|
|
<i
|
|
class="fas fa-check-circle pf-u-success-color-100"
|
|
:class="activeStatus == '1' ? 'statusActive' : 'statusInactive'"
|
|
alt="Show up devices"
|
|
title="Show up devices"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
<div class="pf-c-toolbar__item">
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click.prevent="filterSelect('status', '0')"
|
|
>
|
|
<i
|
|
class="fas fa-exclamation-triangle pf-u-warning-color-100"
|
|
:class="activeStatus == '0' ? 'statusActive' : 'statusInactive'"
|
|
alt="Show down devices"
|
|
title="Show down devices"
|
|
></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ACTION BUTTONS -->
|
|
<div class="pf-c-toolbar__item pf-m-pagination">
|
|
<div class="pf-c-overflow-menu" id="-overflow-menu">
|
|
<div
|
|
class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
|
|
>
|
|
<div class="pf-c-overflow-menu__group pf-m-button-group">
|
|
<div class="pf-c-overflow-menu__item">
|
|
<button
|
|
class="pf-c-button pf-m-primary"
|
|
type="button"
|
|
@click="openDrawer(0)"
|
|
>
|
|
New {{ pagename }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ACTION BUTTONS -->
|
|
</div>
|
|
|
|
<div
|
|
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
id="-expandable-content"
|
|
hidden=""
|
|
></div>
|
|
</div>
|
|
|
|
<!-- FILTER CHIPS -->
|
|
<div
|
|
class="pf-c-toolbar__content pf-m-chip-container"
|
|
v-if="
|
|
selectedCatName ||
|
|
selectedModelname ||
|
|
selectedVendorname ||
|
|
selectedTagname
|
|
"
|
|
>
|
|
<div class="pf-c-toolbar__group">
|
|
<div class="pf-c-toolbar__item pf-m-chip-group">
|
|
<div class="pf-c-chip-group pf-m-category">
|
|
<div class="pf-c-chip-group__main">
|
|
<span class="pf-c-chip-group__label" aria-hidden="true"
|
|
>Filter
|
|
<span v-if="selectedCatName">category: </span>
|
|
<span v-if="selectedModelname">model: </span>
|
|
<span v-if="selectedVendorname">vendor: </span>
|
|
<span v-if="selectedTagname">tag: </span>
|
|
</span>
|
|
<ul class="pf-c-chip-group__list" role="list">
|
|
<li class="pf-c-chip-group__list-item" v-if="selectedCatName">
|
|
<div class="pf-c-chip">
|
|
<span class="pf-c-chip__text">{{ selectedCatName }}</span>
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click="clear()"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<li class="pf-c-chip-group__list-item" v-if="selectedModelname">
|
|
<div class="pf-c-chip">
|
|
<span class="pf-c-chip__text">{{ selectedModelname }}</span>
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click="clear()"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<li
|
|
class="pf-c-chip-group__list-item"
|
|
v-if="selectedVendorname"
|
|
>
|
|
<div class="pf-c-chip">
|
|
<span class="pf-c-chip__text">{{
|
|
selectedVendorname
|
|
}}</span>
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click="clear()"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
<li class="pf-c-chip-group__list-item" v-if="selectedTagname">
|
|
<div class="pf-c-chip">
|
|
<span class="pf-c-chip__text">{{ selectedTagname }}</span>
|
|
<button
|
|
class="pf-c-button pf-m-plain"
|
|
type="button"
|
|
@click="clear()"
|
|
>
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-c-toolbar__item">
|
|
<button
|
|
class="pf-c-button pf-m-link pf-m-inline"
|
|
type="button"
|
|
@click="clear()"
|
|
>
|
|
Clear all filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- FILTER CHIPS -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive } from "vue";
|
|
import useGetAllModeResults from "../composables/AllModelResultsFactory";
|
|
import { onClickOutside } from "@vueuse/core";
|
|
|
|
export default {
|
|
props: {
|
|
pagename: {
|
|
type: String,
|
|
default: "rConfig",
|
|
},
|
|
},
|
|
|
|
setup(props, { emit }) {
|
|
const search = ref(null);
|
|
const searchInput = ref("");
|
|
const activeStatus = ref(null);
|
|
const showCatFilteroptions = ref(false);
|
|
const clickOutsidetarget1 = ref(null);
|
|
const selectedCatName = ref(null);
|
|
const clickOutsidetarget2 = ref(null);
|
|
const showTagFilteroptions = ref(false);
|
|
const selectedTagname = ref(null);
|
|
const clickOutsidetarget3 = ref(null);
|
|
const showVendorFilteroptions = ref(false);
|
|
const selectedVendorname = ref(null);
|
|
const clickOutsidetarget4 = ref(null);
|
|
const showModelFilteroptions = ref(false);
|
|
const selectedModelname = ref(null);
|
|
|
|
const { results: getTags, isLoading: tagsIsLoading } =
|
|
useGetAllModeResults("tags");
|
|
const { results: getCats, isLoading: catsIsLoading } =
|
|
useGetAllModeResults("categories");
|
|
const { results: getVendors, isLoading: vendorsIsLoading } =
|
|
useGetAllModeResults("vendors");
|
|
const { results: getModels, isLoading: modelsIsLoading } =
|
|
useGetAllModeResults("get-device-models");
|
|
|
|
onClickOutside(
|
|
clickOutsidetarget1,
|
|
(event) => (showCatFilteroptions.value = false)
|
|
);
|
|
onClickOutside(
|
|
clickOutsidetarget2,
|
|
(event) => (showTagFilteroptions.value = false)
|
|
);
|
|
onClickOutside(
|
|
clickOutsidetarget3,
|
|
(event) => (showVendorFilteroptions.value = false)
|
|
);
|
|
onClickOutside(
|
|
clickOutsidetarget4,
|
|
(event) => (showModelFilteroptions.value = false)
|
|
);
|
|
|
|
// console.log(getTags);
|
|
// console.log(getCats);
|
|
// console.log(getVendors);
|
|
// console.log(getModels);
|
|
|
|
function filterSelect(type, id) {
|
|
var obj = { [type]: id };
|
|
|
|
if (type === "status") {
|
|
activeStatus.value = id;
|
|
}
|
|
|
|
let jsonObj = JSON.stringify(obj);
|
|
emit("searchInput", jsonObj);
|
|
}
|
|
|
|
function openDrawer(id) {
|
|
emit("openDrawer", id);
|
|
}
|
|
|
|
function handleInput(e) {
|
|
emit("searchInput", e.target.value);
|
|
}
|
|
|
|
function showEditColumns() {
|
|
emit("showEditColumns");
|
|
}
|
|
|
|
function setFilter(type, id, name) {
|
|
if (type === "category") {
|
|
selectedCatName.value = name;
|
|
selectedTagname.value = false;
|
|
selectedVendorname.value = false;
|
|
selectedModelname.value = false;
|
|
showCatFilteroptions.value = false;
|
|
}
|
|
if (type === "tag") {
|
|
selectedTagname.value = name;
|
|
selectedCatName.value = false;
|
|
selectedVendorname.value = false;
|
|
selectedModelname.value = false;
|
|
showTagFilteroptions.value = false;
|
|
}
|
|
if (type === "vendor") {
|
|
selectedVendorname.value = name;
|
|
selectedCatName.value = false;
|
|
selectedTagname.value = false;
|
|
selectedModelname.value = false;
|
|
showVendorFilteroptions.value = false;
|
|
}
|
|
if (type === "device_model") {
|
|
selectedModelname.value = name;
|
|
selectedCatName.value = false;
|
|
selectedTagname.value = false;
|
|
selectedVendorname.value = false;
|
|
showModelFilteroptions.value = false;
|
|
}
|
|
|
|
var obj = { [type]: id };
|
|
let jsonObj = JSON.stringify(obj);
|
|
emit("searchInput", jsonObj);
|
|
}
|
|
|
|
function clear() {
|
|
selectedModelname.value = false;
|
|
selectedCatName.value = false;
|
|
selectedTagname.value = false;
|
|
selectedVendorname.value = false;
|
|
activeStatus.value = null;
|
|
searchInput.value = "";
|
|
emit("searchInput", searchInput.value);
|
|
}
|
|
|
|
return {
|
|
activeStatus,
|
|
clear,
|
|
filterSelect,
|
|
handleInput,
|
|
openDrawer,
|
|
search,
|
|
searchInput,
|
|
showEditColumns,
|
|
setFilter,
|
|
tags: getTags,
|
|
tagsIsLoading,
|
|
cats: getCats,
|
|
catsIsLoading,
|
|
vendors: getVendors,
|
|
vendorsIsLoading,
|
|
models: getModels,
|
|
modelsIsLoading,
|
|
showCatFilteroptions,
|
|
clickOutsidetarget1,
|
|
selectedCatName,
|
|
clickOutsidetarget2,
|
|
showTagFilteroptions,
|
|
selectedTagname,
|
|
clickOutsidetarget3,
|
|
showVendorFilteroptions,
|
|
selectedVendorname,
|
|
clickOutsidetarget4,
|
|
showModelFilteroptions,
|
|
selectedModelname,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.statusActive {
|
|
opacity: 1;
|
|
}
|
|
.statusInactive {
|
|
opacity: 0.3;
|
|
}
|
|
.statusInactive:hover {
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|