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
parent
bd137071b5
commit
0a29ec6f9e
|
@ -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 () {
|
||||
|
|
|
@ -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')
|
||||
},
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
|
@ -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"> (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"> (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" /> 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)
|
||||
|
|
Loading…
Reference in New Issue