Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sortby state to things-list and extend things-inbox for multi-unignore #1096

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Add sortby state to things-list and extend things-inbox for multi-unignore #1096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
108c68b
Add sortby state to things-list
cbrosius Jun 7, 2021
b99bef8
Add sortby state to things-list
cbrosius Jun 7, 2021
60599f2
Merge branch 'main' of https://github.com/CBrosius/openhab-webui into…
cbrosius Jun 9, 2021
4b2f423
add unignore to Multiselect in thing-inbox
cbrosius Jun 9, 2021
2617c2f
Update bundles/org.openhab.ui/web/src/pages/settings/things/things-li…
cbrosius Jun 10, 2021
4e8f52d
Update bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inb…
cbrosius Jun 10, 2021
636620a
Update bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inb…
cbrosius Jun 10, 2021
e46aa34
Update bundles/org.openhab.ui/web/src/pages/settings/things/things-li…
cbrosius Jun 10, 2021
7b3e6df
Update bundles/org.openhab.ui/web/src/pages/settings/things/things-li…
cbrosius Jun 10, 2021
997e380
Update bundles/org.openhab.ui/web/src/pages/settings/things/things-li…
cbrosius Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions bundles/org.openhab.ui/web/src/pages/settings/things/inbox/inbox-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
<f7-link color="orange" v-show="selectedItems.length" v-if="!$theme.md" class="ignore" @click="confirmActionOnSelection('ignore')" icon-ios="f7:eye_slash" icon-aurora="f7:eye_slash">
&nbsp;Ignore {{ selectedItems.length }}
</f7-link>
<f7-link color="blue" v-show="selectedItems.length" v-if="!$theme.md" class="unignore" @click="confirmActionOnSelection('unignore')" icon-ios="f7:eye" icon-aurora="f7:eye">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if there's enough room on a phone screen for 4 links at the bottom - that's why I left the unignore feature out. Unignore could however replace ignore if all checked items are already ignored.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
On my phone (Android10) there is enough space because the Text is not shown.
But this might be depending on the phone or theme.

When starting, the absence of an 'unignore'-button is not cruical, but over time one may add more and more things to the ignore-list, and then it makes much more sense to have 'unignore' in the multiselect-view, too.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep but for instance on a iPhone 12 mini (which would have the iOS theme and a smallish screen), it would look like this:

image

this part of the code is for themes other than Material Design (i.e. Android) so adding a new function needs to account for those as well.

&nbsp;Unignore {{ selectedItems.length }}
</f7-link>
<f7-link color="green" v-show="selectedItems.length" v-if="!$theme.md" class="approve" @click="confirmActionOnSelection('approve')" icon-ios="f7:hand_thumbsup" icon-aurora="f7:hand_thumbsup">
&nbsp;Approve {{ selectedItems.length }}
</f7-link>
Expand All @@ -33,6 +36,7 @@
<div class="right" v-if="$theme.md">
<f7-link v-show="selectedItems.length" icon-md="material:delete" icon-color="white" @click="confirmActionOnSelection('delete')" />
<f7-link v-show="selectedItems.length" icon-md="material:visibility_off" icon-color="white" @click="confirmActionOnSelection('ignore')" />
<f7-link v-show="selectedItems.length" icon-md="material:visibility" icon-color="white" @click="confirmActionOnSelection('unignore')" />
<f7-link v-show="selectedItems.length" icon-md="material:thumb_up" icon-color="white" @click="confirmActionOnSelection('approve')" />
</div>
</f7-toolbar>
Expand Down Expand Up @@ -61,6 +65,7 @@
By binding
</f7-button>
</f7-segmented>
<f7-checkbox v-if="showCheckboxes" @change="masterToggle" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not convinced this lone checkbox is the best design for a "select all" feature honestly.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, but until now I could not find a better, simple way to provide the functionality.
I tried a header-row, but that needs much more space without additional improvements.

Do you have a suggestion for this?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not completely sure but I was thinking about "Select All/Unselect All" buttons like those you have on that screen when you add points to the model from a thing:

image

Though your approach of a "select all" checkbox isn't bad either, maybe it could be made clearer, but in any case we need a common approach. So I would suggest adding these buttons at the bottom of the list when the "select" mode is active.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about such a composition?
image

This way it would be possible to select all items in bigger lists without scrolling to the bottom.

</div>
<f7-list v-if="!ready" contacts-list class="col inbox-list">
<f7-list-group>
Expand Down Expand Up @@ -131,6 +136,7 @@ export default {
showIgnored: false,
groupBy: 'alphabetical',
showCheckboxes: false,
checkAll: false,
eventSource: null
}
},
Expand Down Expand Up @@ -452,6 +458,15 @@ export default {
console.error(err)
this.$f7.dialog.alert('An error occurred: ' + err)
})
masterToggle() {
this.checkAll = !this.checkAll
for (let e in this.inbox) {
if (this.checkAll) {
this.selectedItems.push(this.inbox[e].thingUID)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If an item is already in the selectedItems array it will be added again with this code.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I´m a newbie in vue/javascript programming and contributing. Hopefully this explains a little bit why there are so many issues with my commit :O)
Would it be a solution to empty the selectedItems-Array before setting all items again, or is there a better way to add all items in the list only once?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I´m a newbie in vue/javascript programming and contributing. Hopefully this explains a little bit why there are so many issues with my commit :O)

No worries, first-time contributions are welcome, we'll walk you through this 😃

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
this.selectedItems.push(this.inbox[e].thingUID)
masterToggle() {
this.checkAll = !this.checkAll
this.selectedItems = []
if (this.checkAll) {
for (let e in this.inbox) {
this.selectedItems.push(this.inbox[e].thingUID)
}
}
},

} else {
this.selectedItems = []
}
}
},
filterSelectedItems () {
return this.inbox.filter((e) => this.selectedItems.indexOf(e.thingUID) >= 0)
Expand Down
51 changes: 33 additions & 18 deletions bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@
<f7-button :active="groupBy === 'binding'" @click="switchGroupOrder('binding')">
By binding
</f7-button>
<f7-button :active="groupBy === 'state'" @click="switchGroupOrder('state')">
By State
</f7-button>
</f7-segmented>
</div>
<f7-list v-if="!ready" contacts-list class="col things-list">
Expand Down Expand Up @@ -150,26 +153,38 @@ export default {
},
computed: {
indexedThings () {
if (this.groupBy === 'alphabetical') {
return this.things.reduce((prev, thing, i, things) => {
const initial = (thing.label || thing.UID).substring(0, 1).toUpperCase()
if (!prev[initial]) {
prev[initial] = []
}
prev[initial].push(thing)
switch (this.groupBy) {
case 'alphabetical':
return this.things.reduce((prev, thing, i, things) => {
const initial = (thing.label || thing.UID).substring(0, 1).toUpperCase()
if (!prev[initial]) {
prev[initial] = []
}
prev[initial].push(thing)

return prev
}, {})
} else {
return this.things.reduce((prev, thing, i, things) => {
const binding = thing.thingTypeUID.split(':')[0]
if (!prev[binding]) {
prev[binding] = []
}
prev[binding].push(thing)
return prev
}, {})
break;
case 'state':
return this.things.reduce((prev, thing, i, things) => {
const statusInfo = thing.statusInfo.status
if (!prev[statusInfo]) {
prev[statusInfo] = []
}
prev[statusInfo].push(thing)
return prev
}, {})
break;
default:
return this.things.reduce((prev, thing, i, things) => {
const binding = thing.thingTypeUID.split(':')[0]
if (!prev[binding]) {
prev[binding] = []
}
prev[binding].push(thing)

return prev
}, {})
return prev
}, {})
}
},
inboxCount () {
Expand Down