Page edit: Add editing of tags #2078

Davek145 · 2023-09-19T21:56:56Z

Closes #2077.

This PR adds ability to add / change / remove Tags to Pages via MainUI.
It is using existing tag-input.vue component similar as UI for Items and Rules.

Signed-off-by: David Kesl <davidkesl76@gmail.com> Signed-off-by: Davek145 <123872093+Davek145@users.noreply.github.com>

florian-h05

Funny how small the world is 😂

I’ve just read your community post about your fork of my multiuser proxy (I will have a to take a closer look at it, I’m curious) — BTW I am really happy to have it forked by someone — and started to read the README and read something about a PR.

After abandoning this project (mostly because I did not really need it) I slowly started contributing to openHAB, and so I’m here now as a UI maintainer and I can review your PR:

For consistency I would prefer to have the tag input separate from the name, label etc. — the same as for rules etc.
Implementation:

openhab-webui/bundles/org.openhab.ui/web/src/pages/settings/rules/rule-edit.vue

Lines 153 to 157 in cf3b218

    
           <f7-col v-if="(isEditable || rule.tags.length > 0) && (!createMode || !hasTemplate)"> 
        
             <f7-block-title>Tags</f7-block-title> 
        
             <semantics-picker v-if="isEditable" :item="rule" /> 
        
             <tag-input :item="rule" :disabled="!isEditable" /> 
        
           </f7-col>

Next, the tags should be shown on the https://github.com/openhab/openhab-webui/blob/cf3b21857187fb288b2db521652d5d7b778bbfd7/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue, for implementation see:

openhab-webui/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue

Lines 104 to 108 in cf3b218

    
           <div slot="footer"> 
        
             <f7-chip v-for="tag in rule.tags.filter((t) => t !== 'Script' && t !== 'Scene')" :key="tag" :text="tag" media-bg-color="blue" style="margin-right: 6px"> 
        
               <f7-icon slot="media" ios="f7:tag_fill" md="material:label" aurora="f7:tag_fill" /> 
        
             </f7-chip> 
        
           </div>

Davek145 · 2023-09-20T15:56:55Z

Hi Florian. Yes, I have noticed you being now UI maintainer. And you are right, this PR is there because I realized the need when adjusting the multi-user proxy.

For consistency I would prefer to have the tag input separate from the name, label etc. — the same as for rules etc.

Yes, I understand. This is what I have started with. But it did not look good in the Page designer given the dynamic part below this template. That is why in the end I have choosen the accordion. But no problem to make ti separate again. I will just welcome your help in adjusting the vue template, so it works and looks good.
I will make separate branch with my prior version that had the tag edit separated from name / label and ask you to take a look.

Next, the tags should be shown on the https://github.com/openhab/openhab-webui/blob/cf3b21857187fb288b2db521652d5d7b778bbfd7/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue

This is actually already there. All tags are showing in Pages list already now. Including those added by API or via my PR.

florian-h05 · 2023-09-21T11:56:15Z

I will make separate branch with my prior version that had the tag edit separated from name / label and ask you to take a look.

Well, let’s see what looks better then.
I will be back home this evening, so I should be able to have a look today or tomorrow

This is actually already there. All tags are showing in Pages list already now. Including those added by API or via my PR.

Yeah, I did not expect that, but I’ve checked the code and it is indeed there.

Davek145 · 2023-09-21T14:45:16Z

Thanks
Here is second version with separated tag edit from the name / label. Take a look at which you like more and I will change it in the PR.
https://github.com/openhab/openhab-webui/compare/main...Davek145:openhab-webui:added-pages-tag-edit-v2?diff=unified

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

florian-h05

LGTM, thanks!
The accordion tag input looks way better than the separate one.

I think we can omit the "Non-Semantic", I have removed this.

florian-h05 · 2023-09-22T00:49:22Z

@Davek145 I just wanted to merge this, however I have noted that you made your commits using a GitHub no-reply mail address. This is no problem in general, however does DCO require a mail address under which you are actually reachable.

Can you please comment a sign-off line that is valid according to https://www.openhab.org/docs/developer/contributing.html#sign-your-work?

Davek145 · 2023-09-22T07:27:01Z

@Davek145 I just wanted to merge this, however I have noted that you made your commits using a GitHub no-reply mail address. This is no problem in general, however does DCO require a mail address under which you are actually reachable.

@florian-h05, this commit is having Sign-off using valid email address as well. You are right that there is also the no-reply address next to it. I have fixed my github settings, so it will not be adding this no-reply sign-off when I make these small commits from webedit. What exactly do you mean by "Can you please comment a sign-off line"? As you made the change in the code I do not want to edit the original commit. Sorry, I have not used Github for more than a decade, so getting back into using it.

florian-h05 · 2023-09-22T08:38:41Z

Sorry, I have just checked your commit message and the first Sign Off from the first commit is fine. GitHub however selects the last sign off line when proposing a message for the merge, so I did not see that sign off.

Everything is fine, thank you for the hint!

lolodomo · 2023-09-22T08:59:34Z

Just to be clear, does this PR adds the ability to manage custom tags?

Davek145 · 2023-09-22T09:05:55Z

Yes, what ever Tags you want to put in. Same as for Rules, Items ...
PR is just adding UI. The functionality is the one available by REST API.

lolodomo · 2023-09-22T10:42:07Z

Cool, I will test that during the weekend.

lolodomo · 2023-09-22T10:57:10Z

Is it possible to have a screenshot showing how it looks like?

lolodomo · 2023-09-23T08:40:16Z

I just installed the very last version but I do not find any new page to manage tags.

florian-h05 · 2023-09-23T08:45:49Z

This PR is not about having a page to edit the semantic model, it adds the ability to add and remove tags for pages.

Davek145 · 2023-09-23T10:36:34Z

Sorry @lolodomo, I did not understand your question correctly. As said by @florian-h05, my PR is about non-semantic tags and ability to add / remove them for pages via UI. Similar to what is already possible for Rules and Items.
If you are looking for the ability to change custom semantic tags, than it is possible now with OH4. I like it very much and have already expanded my semantic model given the fact I have quite sizable OH instance. But as of now, my understanding is it is still possible only via /rest/tags .
If nobody is working on UI for this yet, which I understood from forum discussions may be the case, I can take a look at it later. But it will take some time. I'm now finishing some other UI enhancements for non-semantic tags.

Closes openhab#2077. This PR adds ability to add / change / remove Tags to Pages via MainUI. It is using existing tag-input.vue component similar as UI for Items and Rules. --------- Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: David Kesl <davidkesl76@gmail.com> Signed-off-by: jgeorgi <justin.georgi@gmail.com>

Closes openhab#2077. This PR adds ability to add / change / remove Tags to Pages via MainUI. It is using existing tag-input.vue component similar as UI for Items and Rules. --------- Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: David Kesl <davidkesl76@gmail.com>

Closes #2086 - Adds Non-semantic tags to Items list (e.g. /settings/items/) consistently with similar list of Rules / Scripts / Pages. - Extends `getItemTypeAndMetaLabel` with relatesTo part of Semantic classification and moves it to a mixin. - Fixes incorrect calculation of vue virtual box height on Items list. - Replaces custom tag input with accordion tag input (inspired by #2078) and show number of tags (inspired by #2083). - Moves the custom tag input to `item-form.vue`, so it is available also in Model view, when creating Item from Thing etc. Also-by: Florian Hotze <florianh_dev@icloud.com> Signed-off-by: David Kesl <david_git@keslovi.cz>

- Refactor rule & scene settings into rule-general-settings Vue component and use this component on rule-edit, scene-edit pages and inside script-general-settings component. - Replace semantic tag picker & custom tag input with accordion tag input (inspired by #2078) and show number of tags. - Refactor shared code from rules & scenes into mixin (`rule-edit-mixin.js`). - Fix Scene tag is not hidden from tag input. - Show number of tags on page settings page, follow up for #2078. --------- Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

Add editing of Tags for MainUI Pages

36f2416

Signed-off-by: David Kesl <davidkesl76@gmail.com> Signed-off-by: Davek145 <123872093+Davek145@users.noreply.github.com>

Davek145 requested a review from a team as a code owner September 19, 2023 21:56

Merge branch 'main' into added-pages-tag-edit

49d357f

florian-h05 reviewed Sep 20, 2023

View reviewed changes

Update label

a4052c8

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>

florian-h05 approved these changes Sep 21, 2023

View reviewed changes

florian-h05 changed the title ~~Add editing of Tags for MainUI Pages~~ Page edit: Add editing of tags Sep 22, 2023

florian-h05 added enhancement New feature or request main ui Main UI labels Sep 22, 2023

florian-h05 added this to the 4.1 milestone Sep 22, 2023

florian-h05 merged commit 6fd82e3 into openhab:main Sep 22, 2023
5 checks passed

florian-h05 changed the title ~~Page edit: Add editing of tags~~ Page edit: Add editing of custom tags Sep 22, 2023

florian-h05 changed the title ~~Page edit: Add editing of custom tags~~ Page edit: Add editing of tags Sep 23, 2023

florian-h05 mentioned this pull request Sep 23, 2023

Rule/script/scene edit: Update tag input & Refactoring #2083

Merged

Davek145 mentioned this pull request Sep 23, 2023

Items: Show non-semantic tags, relatesTo part of semantics & Use accordion tag input & Fix virtual box height #2087

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page edit: Add editing of tags #2078

Page edit: Add editing of tags #2078

Davek145 commented Sep 19, 2023 •

edited by florian-h05

florian-h05 left a comment •

edited

Davek145 commented Sep 20, 2023 •

edited

florian-h05 commented Sep 21, 2023

Davek145 commented Sep 21, 2023

florian-h05 left a comment

florian-h05 commented Sep 22, 2023 •

edited

Davek145 commented Sep 22, 2023

florian-h05 commented Sep 22, 2023

lolodomo commented Sep 22, 2023 •

edited

Davek145 commented Sep 22, 2023

lolodomo commented Sep 22, 2023

lolodomo commented Sep 22, 2023

lolodomo commented Sep 23, 2023

florian-h05 commented Sep 23, 2023

Davek145 commented Sep 23, 2023

	<f7-col v-if="(isEditable \|\| rule.tags.length > 0) && (!createMode \|\| !hasTemplate)">
	<f7-block-title>Tags</f7-block-title>
	<semantics-picker v-if="isEditable" :item="rule" />
	<tag-input :item="rule" :disabled="!isEditable" />
	</f7-col>

	<div slot="footer">
	<f7-chip v-for="tag in rule.tags.filter((t) => t !== 'Script' && t !== 'Scene')" :key="tag" :text="tag" media-bg-color="blue" style="margin-right: 6px">
	<f7-icon slot="media" ios="f7:tag_fill" md="material:label" aurora="f7:tag_fill" />
	</f7-chip>
	</div>

Page edit: Add editing of tags #2078

Page edit: Add editing of tags #2078

Conversation

Davek145 commented Sep 19, 2023 • edited by florian-h05

florian-h05 left a comment • edited

Choose a reason for hiding this comment

Davek145 commented Sep 20, 2023 • edited

florian-h05 commented Sep 21, 2023

Davek145 commented Sep 21, 2023

florian-h05 left a comment

Choose a reason for hiding this comment

florian-h05 commented Sep 22, 2023 • edited

Davek145 commented Sep 22, 2023

florian-h05 commented Sep 22, 2023

lolodomo commented Sep 22, 2023 • edited

Davek145 commented Sep 22, 2023

lolodomo commented Sep 22, 2023

lolodomo commented Sep 22, 2023

lolodomo commented Sep 23, 2023

florian-h05 commented Sep 23, 2023

Davek145 commented Sep 23, 2023

Davek145 commented Sep 19, 2023 •

edited by florian-h05

florian-h05 left a comment •

edited

Davek145 commented Sep 20, 2023 •

edited

florian-h05 commented Sep 22, 2023 •

edited

lolodomo commented Sep 22, 2023 •

edited