Frontend: Disable edit fields depending on feature flag

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-04-13 19:45:38 +02:00
parent c2fa3a7246
commit 463498c6d0
4 changed files with 61 additions and 20 deletions

View file

@ -31,7 +31,7 @@
<translate>Details</translate>
</v-tab>
<v-tab id="tab-edit-labels" ripple>
<v-tab id="tab-edit-labels" ripple :disabled="!$config.feature('labels')">
<translate>Labels</translate>
</v-tab>
@ -46,11 +46,11 @@
</v-tab-item>
<v-tab-item lazy>
<p-tab-photo-edit-labels :model="model"></p-tab-photo-edit-labels>
<p-tab-photo-edit-labels :model="model" @close="close"></p-tab-photo-edit-labels>
</v-tab-item>
<v-tab-item lazy>
<p-tab-photo-edit-files :model="model"></p-tab-photo-edit-files>
<p-tab-photo-edit-files :model="model" @close="close"></p-tab-photo-edit-files>
</v-tab-item>
</v-tabs-items>
</v-tabs>

View file

@ -36,6 +36,7 @@
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
label="Title"
placeholder=""
@ -48,6 +49,7 @@
<v-flex xs12 sm6 md3 pa-2 class="p-date-select">
<v-text-field
:disabled="disabled"
:value="timeLocalFormatted"
browser-autocomplete="off"
label="Local Time"
@ -59,6 +61,7 @@
</v-flex>
<v-flex xs12 sm6 md3 pa-2 class="p-date-select">
<v-menu
:disabled="disabled"
v-model="showTimePicker"
:close-on-content-click="false"
full-width
@ -66,6 +69,7 @@
>
<template v-slot:activator="{ on }">
<v-text-field
:disabled="disabled"
:value="timeFormatted"
label="UTC Time"
readonly
@ -85,12 +89,14 @@
</v-flex>
<v-flex xs12 sm6 md3 class="pa-2 p-date-select">
<v-menu
:disabled="disabled"
:close-on-content-click="false"
full-width
max-width="290"
>
<template v-slot:activator="{ on }">
<v-text-field
:disabled="disabled"
:value="dateFormatted"
browser-autocomplete="off"
label="UTC Date"
@ -110,6 +116,7 @@
<v-flex xs12 sm6 md3 class="pa-2 p-timezone-select">
<v-autocomplete
:disabled="disabled"
:label="labels.timezone"
hide-details
color="secondary-dark"
@ -122,6 +129,7 @@
<v-flex xs12 md6 pa-2 class="p-camera-select">
<v-select
:disabled="disabled"
:label="labels.camera"
browser-autocomplete="off"
hide-details
@ -134,6 +142,7 @@
</v-flex>
<v-flex xs12 md6 pa-2 class="p-lens-select">
<v-select
:disabled="disabled"
:label="labels.lens"
browser-autocomplete="off"
hide-details
@ -147,6 +156,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Latitude"
@ -157,6 +167,7 @@
</v-flex>
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Longitude"
@ -167,6 +178,7 @@
</v-flex>
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Altitude (m)"
@ -178,6 +190,7 @@
<v-flex xs12 sm6 md3 class="pa-2 p-countries-select">
<v-select
:disabled="disabled"
:label="labels.country"
hide-details
browser-autocomplete="off"
@ -191,6 +204,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Focal Length"
@ -202,6 +216,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="F Number"
@ -213,6 +228,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="ISO"
@ -224,6 +240,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Exposure"
@ -235,6 +252,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-textarea
:disabled="disabled"
hide-details
browser-autocomplete="off"
auto-grow
@ -248,6 +266,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Artist"
@ -259,6 +278,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-text-field
:disabled="disabled"
hide-details
browser-autocomplete="off"
label="Copyright"
@ -270,6 +290,7 @@
<v-flex xs12 sm6 md3 class="pa-2">
<v-textarea
:disabled="disabled"
hide-details
browser-autocomplete="off"
auto-grow
@ -283,6 +304,7 @@
<v-flex xs12 class="pa-2">
<v-textarea
:disabled="disabled"
hide-details
browser-autocomplete="off"
auto-grow
@ -296,6 +318,7 @@
<v-flex xs12 md6 class="pa-2">
<v-textarea
:disabled="disabled"
hide-details
browser-autocomplete="off"
auto-grow
@ -309,6 +332,7 @@
<v-flex xs12 md6 class="pa-2">
<v-textarea
:disabled="disabled"
hide-details
browser-autocomplete="off"
auto-grow
@ -320,7 +344,7 @@
></v-textarea>
</v-flex>
<v-flex xs12 text-xs-right class="pt-3">
<v-flex xs12 text-xs-right class="pt-3" v-if="!disabled">
<v-btn @click.stop="close" depressed color="secondary-light"
class="p-photo-dialog-close">
<translate>Close</translate>
@ -355,6 +379,7 @@
},
data() {
return {
disabled: !this.$config.feature("edit"),
config: this.$config.values,
all: {
countries: [{code: "", name: ""}],

View file

@ -12,9 +12,12 @@
>
<template slot="items" slot-scope="props" class="p-file">
<td>
<a :href="'/api/v1/download/' + props.item.FileHash" class="secondary-dark--text" target="_blank">
<a :href="'/api/v1/download/' + props.item.FileHash" class="secondary-dark--text" target="_blank" v-if="$config.feature('download')">
{{ props.item.FileName }}
</a>
<span v-else>
{{ props.item.FileName }}
</span>
</td>
<td>{{ props.item.FileWidth ? props.item.FileWidth : "" }}</td>
<td>{{ props.item.FileHeight ? props.item.FileHeight : "" }}</td>

View file

@ -14,13 +14,20 @@
<td>{{ props.item.Label.LabelName }}</td>
<td class="text-xs-left">{{ props.item.LabelSource }}</td>
<td class="text-xs-center">{{ 100 - props.item.LabelUncertainty }}%</td>
<td class="text-xs-center"><v-btn icon small flat :ripple="false"
class="p-photo-label-remove"
@click.stop.prevent="removeLabel(props.item.Label)">
<v-icon color="secondary-dark">delete</v-icon>
</v-btn></td>
<td class="text-xs-center">
<v-btn v-if="!disabled" icon small flat :ripple="false"
class="p-photo-label-remove"
@click.stop.prevent="removeLabel(props.item.Label)">
<v-icon color="secondary-dark">delete</v-icon>
</v-btn>
<v-btn v-else icon small flat :ripple="false"
class="action-view"
@click.stop.prevent="searchLabel(props.item.Label)">
<v-icon color="secondary-dark">search</v-icon>
</v-btn>
</td>
</template>
<template v-slot:footer>
<template v-slot:footer v-if="!disabled">
<td>
<v-text-field
v-model="newLabel"
@ -36,11 +43,13 @@
</td>
<td class="text-xs-left">manual</td>
<td class="text-xs-center">100%</td>
<td class="text-xs-center"><v-btn icon small flat :ripple="false"
class="p-photo-label-remove"
@click.stop.prevent="addLabel">
<v-icon color="secondary-dark">add</v-icon>
</v-btn></td>
<td class="text-xs-center">
<v-btn icon small flat :ripple="false"
class="p-photo-label-remove"
@click.stop.prevent="addLabel">
<v-icon color="secondary-dark">add</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
</div>
@ -56,6 +65,7 @@
},
data() {
return {
disabled: !this.$config.feature("edit"),
config: this.$config.values,
readonly: this.$config.getValue("readonly"),
selected: [],
@ -72,13 +82,12 @@
nameRule: v => v.length <= 25 || this.$gettext("Name too long"),
};
},
computed: {
},
computed: {},
methods: {
refresh() {
},
removeLabel(label) {
if(!label) {
if (!label) {
return
}
@ -89,7 +98,7 @@
});
},
addLabel() {
if(!this.newLabel) {
if (!this.newLabel) {
return
}
@ -99,6 +108,10 @@
this.newLabel = "";
});
},
searchLabel(label) {
this.$router.push({name: 'photos', query: {q: 'label:' + label.LabelSlug}}).catch(err => {});
this.$emit('close');
},
},
};
</script>