From f9dc51770f1e5b175c892129a485b01c59290ef5 Mon Sep 17 00:00:00 2001
From: Tobias <privat@t-kurze.de>
Date: Fri, 31 Jul 2020 16:33:48 +0200
Subject: [PATCH] vee validate migration for commands, recorders and rooms
 should be complete -> not yet clear how virtual commands should work

---
 src/api/commandRepository.ts |  2 +-
 src/components/Commands.vue  | 75 +++++++-----------------------------
 src/components/Recorders.vue | 27 +++++++++++--
 3 files changed, 37 insertions(+), 67 deletions(-)

diff --git a/src/api/commandRepository.ts b/src/api/commandRepository.ts
index bb3245c..78e70f4 100644
--- a/src/api/commandRepository.ts
+++ b/src/api/commandRepository.ts
@@ -3,7 +3,7 @@
 // @ts-ignore
 import Repository from './Repository';
 
-const commandResource = '/command';
+const commandResource = '/virtual_command';
 
 import {dictEmptyValToNull} from '@/utils';
 
diff --git a/src/components/Commands.vue b/src/components/Commands.vue
index acda3fc..91e888b 100644
--- a/src/components/Commands.vue
+++ b/src/components/Commands.vue
@@ -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,
                 },
             };
diff --git a/src/components/Recorders.vue b/src/components/Recorders.vue
index e7ab1ce..c9fd382 100644
--- a/src/components/Recorders.vue
+++ b/src/components/Recorders.vue
@@ -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)