tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

vee validate migration for commands, recorders and rooms should be complete -> not yet clear how virtual commands should work

Browse Source
This commit is contained in:
Tobias
2020-07-31 16:33:48 +02:00
parent c0d6da48c9
commit f9dc51770f
3 changed files with 37 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/commandRepository.ts
View File

@@ -3,7 +3,7 @@
// @ts-ignore
import Repository from './Repository';
const commandResource = '/command';
const commandResource = '/virtual_command';
import {dictEmptyValToNull} from '@/utils';

75
src/components/Commands.vue
View File

@@ -24,33 +24,6 @@
<span>{{command.name}}&nbsp;</span>
</h5>
<p class="card-text">
<small><strong>{{ $t('alternative_name') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_alternative_name']">{{command.alternative_name}}&nbsp;
<a class="float-right badge badge-pill badge-primary">
<font-awesome-icon
@click="initRecCommandUpdate(command, 'alternative_name')"
icon="pencil-alt"/>
</a>
</span>
<b-input-group v-else>
<b-form-input :id="command.id+'_alternative_name'" name="alternative_name"
v-model="updateValues[command.id+'_alternative_name']"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('alternative_name'), 'is-invalid': errors.has('alternative_name')}"
class="form-control" type="text"
:placeholder="'Alternative name ('+command.alternative_name +')'"
required></b-form-input>
<b-input-group-append>
<b-button :disabled="errors.has('alternative_name')"
@click="updateRecCommand(command.id, 'alternative_name')"
variant="outline-success">
<font-awesome-icon icon="check"></font-awesome-icon>
</b-button>
</b-input-group-append>
</b-input-group>
</small>
</p>
<p class="card-text">
<small><strong>{{ $t('description') }}:</strong>&nbsp;
<span v-if="!formEditField[command.id+'_description']">{{command.description}}&nbsp;
@@ -62,7 +35,7 @@
</span>
<textarea class="textarea form-control" v-else name="comment"
v-model="updateValues[command.id+'_description']"
:placeholder="'Comment ('+command.description +')'"
:placeholder="'Notes ('+command.description +')'"
@blur="updateRecCommand(command.id, 'description')"></textarea>
</small>
</p>
@@ -99,51 +72,30 @@
<b-card-text>
<p>{{ $t('Create a new command')}}:</p>
<!-- form starts here -->
<form v-on:submit.prevent="savecommand()">
<ValidationObserver v-slot="{ invalid }">
<form v-on:submit.prevent="saveCommand()">
<section class="form">
<ValidationProvider :name="$t('name')" rules="required|min:3" v-slot="{ errors }" slim>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('name') }}</label>
<div class="col-sm-6">
<input name="name"
v-model="form.name"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('name'), 'is-invalid': errors.has('name')}"
v-bind:class="{'is-danger': errors.length > 0, 'is-invalid': errors.length > 0}"
class="form-control" type="text" placeholder="command name" required>
</div>
<p class="col-sm-4" v-show="errors.has('name')">
{{ errors.first('name') }}
<p class="col-sm-4" v-show="errors.length > 0">
{{ errors[0] }}
</p>
</div>
</ValidationProvider>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('alternate_name') }}</label>
<div class="col-sm-6">
<input name="alternate_name"
v-model="form.alternate_name"
class="form-control" type="text" placeholder="Alternate name">
</div>
</div>
<div class="form-group row">
<label class="label required col-sm-2 col-form-label">{{ $t('number') }}</label>
<div class="col-sm-6">
<input name="number"
v-model="form.number"
v-validate="'required|min:3'"
v-bind:class="{'is-danger': errors.has('number'), 'is-invalid': errors.has('number')}"
class="form-control" type="text" placeholder="command number" required>
</div>
<p class="col-sm-4" v-show="errors.has('number')">
{{ errors.first('number') }}
</p>
</div>
<div class="form-group row">
<label class="label col-sm-2 col-form-label">{{ $t('comment') }}</label>
<label class="label col-sm-2 col-form-label">{{ $t('notes') }}</label>
<div class="col-sm-6">
<textarea class="textarea form-control" placeholder="Comments, remarks, notes, etc."
v-model="form.comment"></textarea>
v-model="form.description"></textarea>
</div>
</div>
@@ -163,7 +115,7 @@
<div class="field is-grouped">
<div class="control">
<button
v-bind:disabled="errors.any()"
v-bind:disabled="invalid"
type="submit"
class="btn btn-primary">
Create command
@@ -173,6 +125,7 @@
</section>
</form>
</ValidationObserver>
</b-card-text>
</b-tab>
</b-tabs>
@@ -224,9 +177,7 @@
show_assigned_recorders: false,
form: {
name: null,
alternate_name: null,
number: null,
comment: null,
description: null,
recorder_id: null,
},
};

27
src/components/Recorders.vue
View File

@@ -584,16 +584,16 @@
<b-card-text>
<p class="card-text">
<strong>{{ $t('notes') }}:</strong>&nbsp;
<span v-if="!formEditField['model_'+recorderModel.id+'notes']">{{recorderModel.notes}}&nbsp;
<a class="float-right badge badge-pill badge-info" @click="initrecorderModelUpdate(recorderModel, 'notes')">
<span v-if="!formRecModelEditField[recorderModel.id+'_notes']">{{recorderModel.notes}}&nbsp;
<a class="float-right badge badge-pill badge-info" @click="initRecorderModelUpdate(recorderModel, 'notes')">
<font-awesome-icon
icon="pencil-alt"/>
</a>
</span>
<textarea class="textarea form-control" v-else name="notes"
v-model="updateValues['model_'+recorderModel.id+'_notes']"
v-model="updateRecModelValues[recorderModel.id+'_notes']"
:placeholder="'Notes ('+recorderModel.notes +')'"
@blur="updaterecorderModel(recorderModel.id, 'notes')"></textarea>
@blur="updateRecorderModel(recorderModel.id, 'notes')"></textarea>
</p>
@@ -680,6 +680,8 @@
tabIndex: 0,
updateValues: {},
formEditField: {},
updateRecModelValues: {},
formRecModelEditField: {},
show_assigned_recorders: false,
show_assigned_rooms: true,
form: {
@@ -704,6 +706,10 @@
this.$set(this.formEditField, recorder.id + '_' + fieldName, true);
this.$set(this.updateValues, recorder.id + '_' + fieldName, recorder[fieldName]);
},
initRecorderModelUpdate(recorderModel, fieldName) {
this.$set(this.formRecModelEditField, recorderModel.id + '_' + fieldName, true);
this.$set(this.updateRecModelValues, recorderModel.id + '_' + fieldName, recorderModel[fieldName]);
},
updateRecorder(id, fieldName) {
this.$parent.$data.isLoading = true;
const data = {};
@@ -717,6 +723,19 @@
});
});
},
updateRecorderModel(id, fieldName) {
this.$parent.$data.isLoading = true;
const data = {};
data[fieldName] = this.updateRecModelValues[id + '_' + fieldName];
recorderRepository.updateRecorderModel(id, data)
.then(() => {
this.$store.dispatch('loadRecorderModels')
.then(() => {
this.$parent.$data.isLoading = false;
this.formRecModelEditField[id + '_' + fieldName] = false;
});
});
},
saveRecorder() {
this.$parent.$data.isLoading = true;
recorderRepository.createRecorder(this.form)