Thing editing improvements (#823)

Don't save thing when coming back from the Code tab if it hasn't changed - fixes #618.
Disable editing controls if thing is not editable - fixes #570.
Disable editing of config parameters with readOnly enabled - fixes #756.

Signed-off-by: Yannick Schaus <github@schaus.net>
pull/843/head
Yannick Schaus 2021-01-18 19:15:08 +01:00 committed by GitHub
parent bd137071b5
commit 0a29ec6f9e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 16 deletions

View File

@ -1,7 +1,8 @@
<template>
<f7-list ref="parameter" class="config-parameter" :no-hairlines-md="configDescription.type !== 'BOOLEAN' && (!configDescription.options || !configDescription.options.length) && ['item'].indexOf(configDescription.context) < 0"
v-show="(configDescription.visible) ? configDescription.visible(value, configuration, configDescription, parameters) : true">
<component :is="control" :config-description="configDescription" :value="value" :parameters="parameters" :configuration="configuration" :title="configDescription.title" @input="updateValue" />
<component v-if="!readOnly && !configDescription.readOnly" :is="control" :config-description="configDescription" :value="value" :parameters="parameters" :configuration="configuration" :title="configDescription.title" @input="updateValue" />
<f7-list-item v-else :title="configDescription.label" :after="(value !== undefined && value !== null) ? value.toString() : 'N/A'" />
<f7-block-footer slot="after-list" class="param-description">
<div v-if="status" class="param-status-info">
<f7-chip v-if="status.type !== 'INFORMATION'" :color="status.type === 'WARNING' ? 'orange' : (status.type === 'ERROR') ? 'red' : 'gray'" style="float: right" :text="status.type"></f7-chip>
@ -41,6 +42,7 @@ export default {
'value',
'parameters',
'configuration',
'readOnly',
'status'
],
data () {

View File

@ -14,6 +14,7 @@
:value="configurationWithDefaults[parameter.name]"
:parameters="parameters"
:configuration="configurationWithDefaults"
:read-only="readOnly"
:status="parameterStatus(parameter)"
@update="(value) => updateParameter(parameter, value)"
/>
@ -37,6 +38,7 @@
:value="configurationWithDefaults[parameter.name]"
:parameters="parameters"
:configuration="configurationWithDefaults"
:read-only="readOnly"
:status="parameterStatus(parameter)"
@update="(value) => updateParameter(parameter, value)"
/>
@ -70,7 +72,7 @@
import { actionParams } from '@/assets/definitions/widgets/actions'
export default {
props: ['parameterGroups', 'parameters', 'configuration', 'status', 'setEmptyConfigAsNull'],
props: ['parameterGroups', 'parameters', 'configuration', 'status', 'readOnly', 'setEmptyConfigAsNull'],
components: {
'config-parameter': () => import(/* webpackChunkName: "config-parameter" */ './config-parameter.vue')
},

View File

@ -11,10 +11,10 @@
</f7-list-input>
<f7-list-input label="Identifier" type="text" placeholder="Name" :value="thing.UID" disabled>
</f7-list-input>
<f7-list-input label="Label" type="text" :disabled="!ready" placeholder="e.g. My Thing" :value="thing.label"
<f7-list-input label="Label" type="text" :disabled="!ready || readOnly" placeholder="e.g. My Thing" :value="thing.label"
@input="thing.label = $event.target.value; $emit('updated')" required validate>
</f7-list-input>
<f7-list-input label="Location" type="text" :disabled="!ready" placeholder="e.g. Kitchen" :value="thing.location"
<f7-list-input label="Location" type="text" :disabled="!ready || readOnly" placeholder="e.g. Kitchen" :value="thing.location"
@input="thing.location = $event.target.value; $emit('updated')" clear-button>
</f7-list-input>
</f7-list>
@ -40,7 +40,7 @@
import ThingPicker from '@/components/config/controls/thing-picker.vue'
export default {
props: ['thing', 'thingType', 'createMode', 'ready'],
props: ['thing', 'thingType', 'createMode', 'ready', 'readOnly'],
components: {
ThingPicker
},

View File

@ -2,8 +2,8 @@
<f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" class="thing-details-page">
<f7-navbar :title="thing.label || thing.UID" back-link="Back" no-hairline>
<f7-nav-right v-show="!error">
<f7-link @click="save()" v-if="$theme.md" icon-md="material:save" icon-only></f7-link>
<f7-link @click="save()" v-if="!$theme.md">Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span></f7-link>
<f7-link @click="save()" v-if="$theme.md && thing.editable" icon-md="material:save" icon-only></f7-link>
<f7-link @click="save()" v-if="!$theme.md && thing.editable">Save<span v-if="$device.desktop">&nbsp;(Ctrl-S)</span></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-toolbar tabbar position="top">
@ -13,7 +13,7 @@
</f7-toolbar>
<f7-tabs>
<f7-tab id="thing" @tab:show="() => this.currentTab = 'thing'" :tab-active="currentTab === 'thing'">
<f7-tab id="thing" :tab-active="currentTab === 'thing'">
<f7-block v-if="ready && thing.statusInfo" class="block-narrow padding-left padding-right" strong>
<f7-col>
<div v-show="!error" class="float-right align-items-flex-start align-items-center">
@ -44,8 +44,9 @@
<f7-block v-if="ready && !error" class="block-narrow">
<f7-col>
<thing-general-settings :thing="thing" :thing-type="thingType" @updated="thingDirty = true" :ready="true" />
<thing-general-settings :thing="thing" :thing-type="thingType" @updated="thingDirty = true" :ready="true" :read-only="thing.editable === false" />
<f7-block-title v-if="thingType && thingType.UID" medium style="margin-bottom: var(--f7-list-margin-vertical)">Information</f7-block-title>
<f7-block-footer v-if="thing.editable === false" class="no-margin padding-left"><f7-icon f7="lock_fill" size="12" color="gray" />&nbsp;Note: this thing is not editable because it has been provisioned from a file.</f7-block-footer>
<f7-list accordion-opposite>
<f7-list-item accordion-item title="Thing Type" :after="thingType.label">
<f7-accordion-content class="thing-type-description">
@ -74,6 +75,7 @@
:configuration="thing.configuration"
:status="configStatusInfo"
:set-empty-config-as-null="true"
:read-only="thing.editable === false"
@updated="dirty = true"
/>
</f7-col>
@ -98,7 +100,7 @@
<z-wave-network-popup :opened="zwaveNetworkPopupOpened" @closed="zwaveNetworkPopupOpened = false" />
</f7-block>
<f7-block class="block-narrow" v-if="ready">
<f7-block class="block-narrow" v-if="ready && thing.editable">
<f7-col>
<f7-list>
<f7-list-button color="red" title="Delete Thing" @click="deleteThing"></f7-list-button>
@ -107,14 +109,14 @@
</f7-block>
</f7-tab>
<f7-tab id="channels" disabled="!thingType.channels" @tab:show="() => this.currentTab = 'channels'" :tab-active="currentTab === 'channels'">
<f7-tab id="channels" disabled="!thingType.channels" :tab-active="currentTab === 'channels'">
<f7-block v-if="currentTab === 'channels'" class="block-narrow">
<channel-list :thingType="thingType" :thing="thing" :channelTypes="channelTypes"
@channels-updated="onChannelsUpdated" :context="context"
/>
<f7-col v-if="isExtensible || thing.channels.length > 0">
<f7-list>
<f7-list-button class="searchbar-ignore" color="blue" title="Add Channel" v-if="isExtensible" @click="addChannel()"></f7-list-button>
<f7-list-button class="searchbar-ignore" color="blue" title="Add Channel" v-if="isExtensible && thing.editable" @click="addChannel()"></f7-list-button>
<f7-list-button class="searchbar-ignore" color="blue" title="Add Equipment to Model" @click="addToModel(true)"></f7-list-button>
<f7-list-button class="searchbar-ignore" color="blue" title="Add Points to Model" @click="addToModel(false)"></f7-list-button>
<f7-list-button class="searchbar-ignore" color="red" title="Unlink all Items" @click="unlinkAll(false)"></f7-list-button>
@ -124,7 +126,7 @@
</f7-block>
</f7-tab>
<f7-tab id="code" @tab:show="() => { this.currentTab = 'code'; toYaml() }" :tab-active="currentTab === 'code'">
<f7-tab id="code" :tab-active="currentTab === 'code'">
<editor v-if="currentTab === 'code'" class="thing-code-editor" mode="application/vnd.openhab.thing+yaml" :value="thingYaml" :hint-context="{ thingType: thingType, channelTypes: channelTypes }" @input="(value) => thingYaml = value" />
<!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
</f7-tab>
@ -315,13 +317,14 @@ export default {
switchTab (tab) {
if (this.currentTab === tab) return
if (this.currentTab === 'code') {
if (this.fromYaml()) {
const previousYaml = this.toYaml()
if (this.thingYaml !== previousYaml && this.fromYaml()) {
this.save()
}
}
this.currentTab = tab
if (this.currentTab === 'code') {
this.toYaml()
this.thingYaml = this.toYaml()
}
},
load () {
@ -673,7 +676,7 @@ export default {
if (editableChannels.length > 0) editableThing.channels = editableChannels
this.thingYaml = YAML.stringify(editableThing)
return YAML.stringify(editableThing)
},
fromYaml () {
const updatedThing = YAML.parse(this.thingYaml)