blacklight
/
platypush
forked from platypush/platypush
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merged all the items in the entities panel's header in the Selector component.

This commit is contained in:
Fabio Manganiello 2023-05-03 03:14:46 +02:00
parent 7c7818dd76
commit a06d0ef6a1
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
2 changed files with 82 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
View File

@ -3,17 +3,13 @@
<Loading v-if="loading" />
<header>
<div class="col-s-10 col-m-11 left">
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
</div>
<div class="col-s-2 col-m-1 actions-container right">
<Dropdown title="Actions" icon-class="fas fa-ellipsis">
<DropdownItem icon-class="fa fa-sync-alt" text="Refresh" @click="refresh" />
<DropdownItem icon-class="fa fa-square-root-variable"
text="Set Variable" @click="variableModalVisible = true" />
</Dropdown>
</div>
<Selector
:entity-groups="entityGroups"
:value="selector"
@input="selector = $event"
@refresh="refresh"
@show-variable-modal="variableModalVisible = true"
/>
</header>
<div class="groups-canvas">
@ -79,8 +75,6 @@
</template>
<script>
import Dropdown from "@/components/elements/Dropdown";
import DropdownItem from "@/components/elements/DropdownItem";
import Utils from "@/Utils"
import Loading from "@/components/Loading";
import Icon from "@/components/elements/Icon";
@ -97,8 +91,6 @@ export default {
name: "Entities",
mixins: [Utils],
components: {
Dropdown,
DropdownItem,
Entity,
EntityModal,
Icon,
@ -449,42 +441,6 @@ export default {
padding: 0.5em 0;
}
}
:deep(.right) {
.dropdown-container {
.dropdown {
min-width: 10em;
.item {
box-shadow: none;
.text {
text-align: left;
margin-left: 0.75em;
}
}
}
button {
margin-right: 0;
text-align: center;
background: transparent;
border: 0;
@include until($tablet) {
padding-right: 0;
}
&:hover {
color: $default-hover-fg;
}
i {
margin-left: 0.5em;
}
}
}
}
}
.groups-canvas {

101
platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
View File

@ -1,24 +1,34 @@
<template>
<div class="entities-selectors-container">
<div class="selector">
<Dropdown title="Group by" icon-class="fas fa-object-ungroup" ref="groupingSelector">
<DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
:item-class="{selected: value?.grouping === g}"
@click="onGroupingChanged(g)" />
</Dropdown>
<div class="selector search-container col-11"
v-if="Object.keys(entityGroups.id || {}).length">
<input ref="search" type="text" class="search-bar"
title="Filter by name, plugin or ID" placeholder="🔎"
v-model="searchTerm">
</div>
<div class="selector" :class="{active: isGroupFilterActive}" v-if="value?.grouping">
<Dropdown title="Filter by" icon-class="fas fa-filter" ref="groupSelector"
keep-open-on-item-click>
<DropdownItem v-for="g in sortedGroups" :key="g" :text="g"
v-bind="iconForGroup(g)" :item-class="{selected: !!selectedGroups[g]}"
@click.stop="toggleGroup(g)" />
</Dropdown>
</div>
<div class="selector actions-container col-1 pull-right">
<Dropdown title="Actions" icon-class="fas fa-ellipsis">
<DropdownItem icon-class="fas fa-sync-alt" text="Refresh"
@click="$emit('refresh')" />
<DropdownItem icon-class="fas fa-square-root-variable"
text="Set Variable" @click="$emit('show-variable-modal')" />
<div class="selector" v-if="Object.keys(entityGroups.id || {}).length">
<input ref="search" type="text" class="search-bar" placeholder="🔎" v-model="searchTerm">
<Dropdown title="Group by" text="Group by"
icon-class="fas fa-object-ungroup" ref="groupingSelector">
<DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
:item-class="{selected: value?.grouping === g}"
@click="onGroupingChanged(g)" />
</Dropdown>
<Dropdown title="Filter groups" text="Filter groups"
:icon-class="{fas: true, 'fa-filter': true, active: hasActiveFilter}"
ref="groupSelector" keep-open-on-item-click>
<DropdownItem v-for="g in sortedGroups" :key="g" :text="g"
v-bind="iconForGroup(g)" :item-class="{selected: !!selectedGroups[g]}"
@click.stop="toggleGroup(g)" />
</Dropdown>
</Dropdown>
</div>
</div>
</template>
@ -33,7 +43,7 @@ import { bus } from "@/bus";
export default {
name: "Selector",
emits: ['input'],
emits: ['input', 'refresh', 'show-variable-modal'],
mixins: [Utils],
components: {Dropdown, DropdownItem},
props: {
@ -62,6 +72,10 @@ export default {
)
},
hasActiveFilter() {
return Object.values(this.selectedGroups).filter((val) => val === false).length > 0
},
sortedGroups() {
return Object.keys(this.entityGroups[this.value?.grouping] || {}).sort()
},
@ -189,14 +203,6 @@ export default {
.selector {
height: 100%;
display: inline-flex;
&.active {
:deep(.dropdown-container) {
button {
color: $default-hover-fg;
}
}
}
}
@media (max-width: 330px) {
@ -205,10 +211,53 @@ export default {
}
}
.search-bar {
margin: 0.25em 0;
}
@include until(#{$tablet - 1 }) {
.search-bar {
width: 100%;
margin-right: 2em;
}
}
@include from($tablet) {
.search-bar {
min-width: 400px;
}
}
:deep(.dropdown-container) {
height: 100%;
display: flex;
.dropdown {
min-width: 10em;
.text {
text-align: left;
padding-left: 0.5em;
}
}
.dropdown-container {
button {
width: 100%;
background: none;
text-align: left;
letter-spacing: 0.01em;
.text {
padding-left: 0.25em;
}
.icon.active {
color: $selected-fg;
}
}
}
button {
height: 100%;
background: $default-bg-2;
@ -221,7 +270,7 @@ export default {
}
.item {
padding: 0.5em 4em 0.5em 0.5em;
padding: 0.75em 0.5em;
border: 0;
box-shadow: none;