- add references anf keywords fro edit form

- edit datetime settings from database
- edit time, elevation and depth

app/Http/Controllers/Publish/SubmitController.php

@@ -3,26 +3,26 @@ namespace App\Http\Controllers\Publish;
 
 use App\Exceptions\GeneralException;
 use App\Http\Controllers\Controller;
+use App\Http\Requests\DocumentRequest;
 use App\Models\Dataset;
+use App\Models\DatasetReference;
+use App\Models\Description;
+use App\Models\File;
+use App\Models\License;
+// use Illuminate\View\View;
+use App\Models\Project;
+// for edit actions:
+use App\Models\Subject;
+use App\Models\Title;
 use App\Models\User;
+use Exception;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
-use Illuminate\Support\Facades\Storage;
-// use Illuminate\View\View;
-use Illuminate\Support\Facades\View;
-// for edit actions:
-use App\Models\Project;
 use Illuminate\Support\Facades\DB;
-use App\Models\License;
+use Illuminate\Support\Facades\Storage;
-use App\Http\Requests\DocumentRequest;
 use Illuminate\Support\Facades\Validator;
-use App\Models\Title;
+use Illuminate\Support\Facades\View;
-use App\Models\Description;
-use App\Models\File;
-use App\Models\Subject;
-use App\Models\DatasetReference;
-use Exception;
 
 class SubmitController extends Controller
 {
@@ -81,16 +81,14 @@ class SubmitController extends Controller
         // $checkeds = $dataset->licenses->pluck('id')->toArray();
         $checkeds = $dataset->licenses->first()->id;
 
-        
         $keywordTypes = ['uncontrolled' => 'uncontrolled', 'swd' => 'swd'];
 
-        $referenceTypes = ["rdr-id", "arXiv", "bibcode", "DOI", "EAN13", "EISSN", "Handle", "IGSN", "ISBN", "ISSN", "ISTC", "LISSN", "LSID", "PMID", "PURL", "UPC", "URL", "URN"];
+        $referenceTypes = ["rdr-id", "doi", "handle", "isbn", "issn", "url", "urn"];
         $referenceTypes = array_combine($referenceTypes, $referenceTypes);
 
-        $relationTypes = ["IsCitedBy", "Cites", "IsSupplementTo", "IsSupplementedBy", "IsContinuedBy", "Continues", "HasMetadata", "IsMetadataFor","IsNewVersionOf", "IsPreviousVersionOf", "IsPartOf", "HasPart", "IsReferencedBy", "References", "IsDocumentedBy", "Documents", "IsCompiledBy", "Compiles", "IsVariantFormOf", "IsOriginalFormOf", "IsIdenticalTo", "IsReviewedBy", "Reviews", "IsDerivedFrom", "IsSourceOf"];
+        $relationTypes = ["IsCitedBy", "Cites", "IsSupplementTo", "IsSupplementedBy", "IsContinuedBy", "Continues", "HasMetadata", "IsMetadataFor", "IsNewVersionOf", "IsPreviousVersionOf", "IsPartOf", "HasPart", "IsReferencedBy", "References", "IsDocumentedBy", "Documents", "IsCompiledBy", "Compiles", "IsVariantFormOf", "IsOriginalFormOf", "IsIdenticalTo", "IsReviewedBy", "Reviews", "IsDerivedFrom", "IsSourceOf"];
         $relationTypes = array_combine($relationTypes, $relationTypes);
 
-    
         return View::make(
             'workflow.submitter.edit',
             compact(
@@ -122,26 +120,26 @@ class SubmitController extends Controller
             'type' => 'required|min:5',
             'coverage.xmin' => [
                 'nullable',
-                'regex:/^[-]?((((1[0-7][0-9])|([0-9]?[0-9]))\.(\d+))|180(\.0+)?)$/'
+                'regex:/^[-]?((((1[0-7][0-9])|([0-9]?[0-9]))\.(\d+))|180(\.0+)?)$/',
             ],
             'coverage.ymin' => [
                 'nullable',
-                'regex:/^[-]?(([0-8]?[0-9])\.(\d+))|(90(\.0+)?)$/'
+                'regex:/^[-]?(([0-8]?[0-9])\.(\d+))|(90(\.0+)?)$/',
             ],
             'coverage.xmax' => [
                 'nullable',
-                'regex:/^[-]?((((1[0-7][0-9])|([0-9]?[0-9]))\.(\d+))|180(\.0+)?)$/'
+                'regex:/^[-]?((((1[0-7][0-9])|([0-9]?[0-9]))\.(\d+))|180(\.0+)?)$/',
             ],
             'coverage.ymax' => [
                 'nullable',
-                'regex:/^[-]?(([0-8]?[0-9])\.(\d+))|(90(\.0+)?)$/'
+                'regex:/^[-]?(([0-8]?[0-9])\.(\d+))|(90(\.0+)?)$/',
             ],
             'keywords.*.value' => 'required|string',
             'keywords.*.type' => 'required|string',
             'files.*.label' => 'required|string',
         ];
         $customMessages = [
-            'keywords.*.type.required' => 'The types of all keywords are required.'
+            'keywords.*.type.required' => 'The types of all keywords are required.',
         ];
         $validator = Validator::make($request->all(), $rules, $customMessages);
         if (!$validator->fails()) {
@@ -183,6 +181,7 @@ class SubmitController extends Controller
             $references = $request->input('references');
             if (is_array($references) && count($references) > 0) {
                 foreach ($references as $key => $formReference) {
+                    if (isset($key) && $key != 'undefined') {
                         $reference = DatasetReference::findOrFail($key);
                         $reference->value = $formReference['value'];
                         $reference->label = $formReference['label'];
@@ -191,6 +190,12 @@ class SubmitController extends Controller
                         if ($reference->isDirty()) {
                             $reference->save();
                         }
+                    } else {
+                        $reference = new DatasetReference($formReference);
+                        // $title->status = true;
+                        // $title->name_type = "Organizational";
+                        $dataset->references()->save($reference);
+                    }
                 }
             }
 
@@ -198,12 +203,19 @@ class SubmitController extends Controller
             $keywords = $request->input('subjects');
             if (is_array($keywords) && count($keywords) > 0) {
                 foreach ($keywords as $key => $formKeyword) {
+                    if (isset($key) && $key != 'undefined') {
                         $subject = Subject::findOrFail($key);
                         $subject->value = $formKeyword['value'];
                         $subject->type = $formKeyword['type'];
                         if ($subject->isDirty()) {
                             $subject->save();
                         }
+                    } else {
+                        $subject = new Subject($formKeyword);
+                        // $title->status = true;
+                        // $title->name_type = "Organizational";
+                        $dataset->subjects()->save($subject);
+                    }
                 }
             }
 
@@ -264,7 +276,6 @@ class SubmitController extends Controller
         }));
     }
 
-
     /**
      * Display the specified resource.
      *
@@ -329,7 +340,7 @@ class SubmitController extends Controller
         $dataset = Dataset::with('user:id,login')->findOrFail($id);
 
         return View::make('workflow.submitter.delete', [
-            'dataset' => $dataset
+            'dataset' => $dataset,
         ]);
     }
 

resources/js/EditDataset.js

@@ -1,14 +1,14 @@
 import { Component, Vue, Watch } from 'vue-property-decorator';
-import axios from 'axios';
+import datetime from 'vuejs-datetimepicker';
 import VeeValidate from 'vee-validate';
 Vue.use(VeeValidate);
 import LocationsMap from './components/locations-map.vue';
 import Dataset from './components/Dataset';
 
-
 @Component({
     components: {
-        LocationsMap
+        LocationsMap,
+        datetime
     }
 })
 export default class EditDataset extends Vue {
@@ -53,6 +53,9 @@ export default class EditDataset extends Vue {
     // };
     allErros = [];
     success = false;
+    elevation = "no_elevation";
+    depth = "no_depth";
+    time = "no_time";
 
     beforeMount() {
         // this.form = window.Laravel.form;
@@ -60,6 +63,12 @@ export default class EditDataset extends Vue {
         this.projects = window.Laravel.projects;
         this.licenses = window.Laravel.licenses;
         this.checkeds = window.Laravel.checkeds;
+        this.referenceTypes = window.Laravel.referenceTypes;
+        this.relationTypes = window.Laravel.relationTypes;
+    }
+
+    mounted() {
+        this.setRadioButtons();
     }
 
     /*
@@ -116,6 +125,32 @@ export default class EditDataset extends Vue {
         return (typeof item === "object" && !Array.isArray(item) && item !== null);
     }
 
+    setRadioButtons() {
+        if (this.form.coverage.time_absolut != null) {
+            this.time = "absolut";
+        } else if (this.form.coverage.time_min != null) {
+            this.time = "range";
+        } else {
+            this.time = "no_time";
+        }
+        
+        if (this.form.coverage.elevation_absolut != null) {
+            this.elevation = "absolut";
+        } else if (this.form.coverage.elevation_min != null) {
+            this.elevation = "range";
+        } else {
+            this.elevation = "no_elevation";
+        }
+        
+        if (this.form.coverage.depth_absolut != null) {
+            this.depth = "absolut";
+        } else if (this.form.coverage.depth_min != null) {
+            this.depth = "range";
+        } else {
+            this.depth = "no_depth";
+        }
+    }
+
     onSubmit() {
         // var dataform = new FormData();
         // dataform.append('name', this.form.name);
@@ -141,4 +176,45 @@ export default class EditDataset extends Vue {
         });
     }
 
+    /*
+      adds a new Keyword
+      */
+    addKeyword() {
+        let newKeyword = { value: '', type: 'uncontrolled', language: this.form.language };
+        //this.dataset.files.push(uploadedFiles[i]);
+        this.form.subjects.push(newKeyword);
+    }
+    /*
+       Removes a selected keyword
+       */
+    removeKeyword(key) {
+        this.form.subjects.splice(key, 1);
+    }
+
+    /*
+        Handles a change on the file upload
+        */
+    addReference() {
+        let newReference = { value: '', label: '', relation: '', type: '' };
+        //this.dataset.files.push(uploadedFiles[i]);
+        this.form.references.push(newReference);
+    }
+
+    /*
+    Removes a selected reference
+    */
+    removeReference(key) {
+        this.form.references.splice(key, 1);
+    }
+
+    // @Watch('form.coverage.time_absolut')
+    // onTimeAbsolutChanged(val) {
+    //   this.time = "absolut";      
+    // }
+
+    // @Watch('form.coverage.time_min')
+    // onTimeMinChanged(val) {
+    //   this.time = "range";      
+    // }
+
 }

resources/views/workflow/submitter/_form.blade.php

@@ -5,13 +5,15 @@
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
             {!! Form::label('reject_reviewer_note', 'editor reject note..') !!}
             {{-- {!! Form::select('server_state', Config::get('enums.server_states'), null, ['id' => 'server_state', 'placeholder' => '-- select server state --']) !!} --}}
-                {!! Form::textarea('reject_editor_note', null, ['class'=>'pure-u-23-24','readonly', 'v-model' => 'form.reject_editor_note']) !!}
+            {!! Form::textarea('reject_editor_note', null, ['class'=>'pure-u-23-24','readonly', 'v-model' =>
+            'form.reject_editor_note']) !!}
         </div>
         @endif
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
             {!! Form::label('server_state', 'Status..') !!}
             {{-- {!! Form::select('server_state', Config::get('enums.server_states'), null, ['id' => 'server_state', 'placeholder' => '-- select server state --']) !!} --}}
-                {!! Form::text('server_state', null, ['class'=>'pure-u-23-24','readonly', 'v-model' => 'form.server_state']) !!}
+            {!! Form::text('server_state', null, ['class'=>'pure-u-23-24','readonly', 'v-model' => 'form.server_state'])
+            !!}
         </div>
     </div>
 </fieldset>
@@ -32,7 +34,8 @@
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
             {!! Form::label('type', 'Type..') !!}
             <div class="select  pure-u-23-24">
-                {!! Form::select('type', Lang::get('doctypes'), null, ['id' => 'type', 'placeholder' => '-- select type --', 
+                {!! Form::select('type', Lang::get('doctypes'), null, ['id' => 'type', 'placeholder' => '-- select type
+                --',
                 'v-model' => 'form.type', "v-validate" => "'required'"]) !!}
             </div>
         </div>
@@ -54,7 +57,8 @@
             {!! Form::label('creating_corporation', 'Creating Corporation') !!}
             {!! Form::text('creating_corporation', null, ['class' =>
             'pure-u-23-24', 'v-model' => 'form.creating_corporation', "v-validate" => "'required'"]) !!}
-            <span class="md-error" v-if="errors.has('form.creating_corporation')">creating corporation is required.</span>
+            <span class="md-error" v-if="errors.has('form.creating_corporation')">creating corporation is
+                required.</span>
         </div>
 
     </div>
@@ -172,6 +176,118 @@
     </div>
 </fieldset> --}}
 
+<fieldset id="fieldset-coverage">
+    <legend>Coverage</legend>
+    <div class="pure-g">
+       
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="pure-u-1 pure-u-md-1">
+                <label for="elevation-option-one" class="pure-radio">
+                    <input id="elevation-option-one" type="radio" v-model="elevation" value="absolut">
+                    absolut elevation (m)
+                </label>
+                <label for="elevation-option-two" class="pure-radio">
+                    <input id="elevation-option-two" type="radio" v-model="elevation" value="range">
+                    elevation range (m)
+                </label>
+                <label for="elevation-option-three" class="pure-radio">
+                    <input id="elevation-option-three" type="radio" v-model="elevation" value="no_elevation">
+                    no elevation
+                </label>
+            </div>                    
+            <div v-show="elevation === 'absolut'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('elevation_absolut', 'elevation absolut: ') !!} 
+                {!! Form::text('elevation_absolut', null,
+                ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.elevation_absolut', 'data-vv-scope' => 'step-2', "v-validate" => "this.isElevationAbsolut ? 'required|integer' : '' " ]) !!}
+            </div>
+            <div v-show="elevation === 'range'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('elevation_min', 'elevation min: ') !!} 
+                {!! Form::text('elevation_min', null, 
+                ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.elevation_min', 'data-vv-scope' => 'step-2', "v-validate" => "this.isElevationRange ? 'required|integer' : '' "]) !!}
+            </div>
+            <div  v-show="elevation === 'range'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('elevation_max', 'elevation max: ') !!} 
+                {!! Form::text('elevation_max', null,
+                ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.elevation_max', 'data-vv-scope' => 'step-2', "v-validate" => "this.isElevationRange ? 'required|integer' : '' "]) !!}
+            </div>                            
+        </div>  
+        
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="pure-u-1 pure-u-md-1">
+                <label for="depth-option-one" class="pure-radio">
+                                                <input id="depth-option-one" type="radio" v-model="depth" value="absolut">
+                                                absolut depth (m)
+                                            </label>
+                <label for="depth-option-two" class="pure-radio">
+                                                <input id="depth-option-two" type="radio" v-model="depth" value="range">
+                                                depth range (m)
+                                            </label>
+                <label for="depth-option-three" class="pure-radio">
+                                                <input id="depth-option-three" type="radio" v-model="depth" value="no_depth">
+                                                no depth
+                                            </label>
+            </div>
+        
+            <div v-show="depth === 'absolut'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('depth_absolut', 'depth absolut: ') !!} {!! Form::text('depth_absolut', null, ['class' => 'pure-u-23-24',
+                'v-model' => 'form.coverage.depth_absolut', 'data-vv-scope' => 'step-2', "v-validate" => "this.isDepthAbsolut
+                ? 'required|integer' : '' " ]) !!}
+            </div>
+            <div v-show="depth === 'range'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('depth_min', 'depth min: ') !!} {!! Form::text('depth_min', null, ['class' => 'pure-u-23-24', 'v-model' =>
+                'form.coverage.depth_min', 'data-vv-scope' => 'step-2', "v-validate" => "this.isDepthRange ? 'required|integer'
+                : '' "]) !!}
+            </div>
+            <div v-show="depth === 'range'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('depth_max', 'depth max: ') !!} {!! Form::text('depth_max', null, ['class' => 'pure-u-23-24', 'v-model' =>
+                'form.coverage.depth_max', 'data-vv-scope' => 'step-2', "v-validate" => "this.isDepthRange ? 'required|integer'
+                : '' "]) !!}
+            </div>                            
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="pure-u-1 pure-u-md-1">
+                <label for="time-option-one" class="pure-radio">
+                                                <input id="time-option-one" type="radio" v-model="time" value="absolut">
+                                                absolut time (dd.MM.yyyy HH:mm:ss)
+                                            </label>
+                <label for="time-option-two" class="pure-radio">
+                                                <input id="time-option-two" type="radio" v-model="time" value="range">
+                                                time range (dd.MM.yyyy HH:mm:ss)
+                                            </label>
+                <label for="time-option-three" class="pure-radio">
+                                                <input id="time-option-three" type="radio" v-model="time" value="no_time">
+                                                no time
+                                            </label>
+            </div>
+        
+            <div v-show="time === 'absolut'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('time_absolut', 'time absolut: ') !!} 
+                {{-- {!! Form::datetime('time_absolut', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm',
+                'v-model' => 'dataset.coverage.time_absolut', 'data-vv-scope' => 'step-2', 'format' => 'yyyy-MM-dd HH:mm',
+                "v-validate" => "this.isTimeAbsolut ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' " ]) !!} --}}
+                <datetime name="time_absolut" v-validate="this.isTimeAbsolut ? 'required|date_format:dd-MM-yyyy HH:mm:ss' : '' " data-vv-scope="step-2" format="YYYY-MM-DD h:i:s" v-model='form.coverage.time_absolut' ></datetime>
+                {{-- <datetime name="time_absolut" format="MM-DD-YYYY H:i:s" width="300px" v-model="dataset.coverage.time_absolut"></datetime> --}}
+            </div>
+            <div v-show="time === 'range'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('time_min', 'time min: ') !!} 
+                {{-- {!! Form::datetimelocal('time_min', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss', 
+                'v-model' => 'dataset.coverage.time_min', 'data-vv-scope' => 'step-2', 'step' => 1,
+                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!} --}}
+                <datetime name="time_min" v-validate="this.isTimeRange ? 'required|date_format:dd-MM-yyyy HH:mm:ss' : '' " data-vv-scope="step-2" format="DD-MM-YYYY h:i:s" v-model='form.coverage.time_min' ></datetime>
+            </div>
+            <div v-show="time === 'range'" class="pure-u-1 pure-u-md-1">
+                {!! Form::label('timemax', 'time max: ') !!} 
+                {{-- {!! Form::datetimelocal('time_max', null, ['class' => 'pure-u-23-24', 'placeholder' => 'dd.MM.yyyy HH:mm:ss',
+                'v-model' => 'dataset.coverage.time_max', 'data-vv-scope' => 'step-2', 'step' => 1,
+                "v-validate" => "this.isTimeRange ? 'required|date_format:dd.MM.yyyy HH:mm:ss' : '' "]) !!} --}}
+                <datetime name="time_max" v-validate="this.isTimeRange ? 'required|date_format:dd-MM-yyyy HH:mm:ss' : '' " data-vv-scope="step-2" format="DD-MM-YYYY h:i:s" v-model='form.coverage.time_max' ></datetime>
+            </div>                            
+        </div>
+
+    </div>
+</fieldset>
+
 <fieldset id="fieldset-titles">
     <legend>Title</legend>
     <div class="pure-g">
@@ -190,11 +306,13 @@
     <template v-for="(title, key) in form.titles">
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
             <label :for="'titles['+title.id+'][value]'"> @{{ 'Title ' + (key + 1) + ':' }}</label>
-                <input type="text" :id="'titles['+title.id+'][value]'" :name="'titles['+title.id+'][value]'" v-model="title.value" class="pure-u-23-24">
+            <input type="text" :id="'titles['+title.id+'][value]'" :name="'titles['+title.id+'][value]'"
+                v-model="title.value" class="pure-u-23-24">
         </div>
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
             <label :for="'titles['+title.id+'][language]'"> @{{ 'Language for title ' + (key + 1) + ':' }}</label>
-                <input type="text" :id="'titles['+title.id+'][language]'" :name="'titles['+title.id+'][language]'" v-model="title.language" class="pure-u-23-24" readonly>            
+            <input type="text" :id="'titles['+title.id+'][language]'" :name="'titles['+title.id+'][language]'"
+                v-model="title.language" class="pure-u-23-24" readonly>
         </div>
     </template>
 
@@ -220,11 +338,15 @@
     <template v-for="(abstract, key) in form.abstracts">
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
             <label :for="'abstracts['+abstract.id+'][value]'"> @{{ 'Title ' + (key + 1) + ':' }}</label>
-                <input type="text" :id="'abstracts['+abstract.id+'][value]'" :name="'abstracts['+abstract.id+'][value]'" v-model="abstract.value" class="pure-u-23-24">
+            <input type="text" :id="'abstracts['+abstract.id+'][value]'" :name="'abstracts['+abstract.id+'][value]'"
+                v-model="abstract.value" class="pure-u-23-24">
         </div>
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
-                <label :for="'abstracts['+abstract.id+'][language]'"> @{{ 'Language for abstract ' + (key + 1) + ':' }}</label>
+            <label :for="'abstracts['+abstract.id+'][language]'">
-                <input type="text" :id="'abstracts['+abstract.id+'][language]'" :name="'abstracts['+abstract.id+'][language]'" v-model="abstract.language" class="pure-u-23-24" readonly>            
+                @{{ 'Language for abstract ' + (key + 1) + ':' }}</label>
+            <input type="text" :id="'abstracts['+abstract.id+'][language]'"
+                :name="'abstracts['+abstract.id+'][language]'" v-model="abstract.language" class="pure-u-23-24"
+                readonly>
         </div>
     </template>
 
@@ -238,12 +360,13 @@
         {{-- @foreach ($licenses as $license)
         <label for={{ "license". $license->id }} class="pure-checkbox">
         @if ($loop->first)
-            <input name="licenses" value={{ $license->id }} v-model="form.checkedLicenses" {{ (in_array($license->id, $checkeds)) ? 'checked=checked' : '' }} 
+        <input name="licenses" value={{ $license->id }} v-model="form.checkedLicenses"
-            type="radio" class="form-check-input" v-validate="'required'" data-vv-as="Licence">
+            {{ (in_array($license->id, $checkeds)) ? 'checked=checked' : '' }} type="radio" class="form-check-input"
+            v-validate="'required'" data-vv-as="Licence">
         <a href="{{ $license->link_licence }}" target="_blank">{{ $license->name_long }}</a>
         @else
-            <input name="licenses" value={{ $license->id }} v-model="form.checkedLicenses" {{ (in_array($license->id, $checkeds)) ? 'checked=checked' : '' }} 
+        <input name="licenses" value={{ $license->id }} v-model="form.checkedLicenses"
-            type="radio" class="form-check-input">
+            {{ (in_array($license->id, $checkeds)) ? 'checked=checked' : '' }} type="radio" class="form-check-input">
         <a href="{{ $license->link_licence }}" target="_blank">{{ $license->name_long }}</a>
         @endif
         </label>
@@ -253,7 +376,8 @@
 
         <template v-for="(license, index) in licenses">
             <label :for="'license'+license.id" class="pure-checkbox">
-            <input name="licenses" :value="license.id" v-model="checkeds" type="radio" class="form-check-input" v-validate="'required'" >
+                <input name="licenses" :value="license.id" v-model="checkeds" type="radio" class="form-check-input"
+                    v-validate="'required'">
                 <a :href="license.link_licence" target="_blank">@{{ license.name_long }}</a>
             </label>
         </template>
@@ -266,9 +390,10 @@
 
 <fieldset id="fieldset-references">
     <legend>Dataset References</legend>
+    <button class="pure-button button-small" @click.prevent="addReference()">Add Reference</button>
     {{-- <table class="table table-hover" v-if="dataset.keywords.length"> --}}
-    @if ($dataset->references->count() > 0)
+    {{-- @if ($dataset->references->count() > 0) --}}
-    <table id="references" class="pure-table pure-table-horizontal">
+    <table v-show="form.references.length" id="references" class="pure-table pure-table-horizontal">
         <thead>
             <tr>
                 <th style="width: 20px;">Reference value</th>
@@ -280,39 +405,58 @@
         </thead>
         <tbody>
 
-            @foreach($dataset->references as $key => $reference)
+            {{-- @foreach($dataset->references as $key => $reference) --}}
             <tr v-for="(item, index) in form.references">
                 <td>
-                    {{ Form::text('references['.$reference->id.'][value]', $reference->value, ['class' => 'form-control',  'placeholder' => '[REFERENCE VALUE]']) }}
+                    {{-- {{ Form::text('references['.$reference->id.'][value]', $reference->value, ['class' => 'form-control',  'placeholder' => '[REFERENCE VALUE]']) }}
+                    --}}
+                    <input v-bind:name="'references[' +  item.id +'][value]'" class="form-control"
+                        placeholder="[REFERENCE VALUE]" v-model="item.value" v-validate="'required'" />
                 </td>
                 <td>
-                    {{ Form::text('references['.$reference->id.'][label]', $reference->label, ['class' => 'form-control',  'placeholder' => '[REFERENCE LABEL]']) }}
+                    {{-- {{ Form::text('references['.$reference->id.'][label]', $reference->label, ['class' => 'form-control',  'placeholder' => '[REFERENCE LABEL]']) }}
+                    --}}
+                    <input v-bind:name="'references[' +  item.id +'][label]'" class="form-control"
+                        placeholder="[REFERENCE LABEL]" v-model="item.label" v-validate="'required'" />
                 </td>
                 <td>
-                    {!! Form::select('references['.$reference->id.'][type]', $referenceTypes, $reference->type,
+                    {{-- {!! Form::select('references['.$reference->id.'][type]', $referenceTypes, $reference->type,
-                    ['placeholder' => '[reference type]', 'v-model' =>
+                    ['placeholder' => '[REFERENCE TYPE]', 'v-model' => 'item.type', "v-validate" => "'required'"]) !!} --}} 
-                    'item.type', "v-validate" => "'required'", 'data-vv-scope' => 'step-2']) !!}
+                    <select v-bind:name="'references[' +  item.id +'][type]'" v-model="item.type" class="form-control" v-validate="'required'">
+                        <option v-for="option in referenceTypes" :value='option'>
+                            @{{ option }}
+                        </option>
+                    </select>
+                    {{-- <span>Selected: @{{ item.type }}</span> --}}
                 </td>
                 <td>
-                    {!! Form::select('references['.$reference->id.'][relation]', $relationTypes, $reference->relation,
+                    {{-- {!! Form::select('references['.$reference->id.'][relation]', $relationTypes, $reference->relation,
-                    ['placeholder' => '[relation type]', 'v-model' =>
+                    ['placeholder' => '[REFERENCE TYPE]', 'v-model' => 'item.relation', "v-validate" => "'required'"]) !!} --}}
-                    'item.relation', "v-validate" => "'required'", 'data-vv-scope' => 'step-2']) !!}
+                    <select v-bind:name="'references[' +  item.id +'][relation]'" v-model="item.relation" class="form-control" v-validate="'required'">
+                        <option v-for="option in relationTypes" :value='option'>
+                            @{{ option }}
+                        </option>
+                    </select>
                 </td>
                 <td>
-
+                    <button v-if="item.id == undefined" class="pure-button button-small is-warning"
+                    @click.prevent="removeReference(index)">
+                    <i class="fa fa-trash"></i>
+                </button>
                 </td>
             </tr>
-            @endforeach
+            {{-- @endforeach --}}
         </tbody>
     </table>
-    @else
+    {{-- @else
     <span>...there are no references</span>
-    @endif
+    @endif --}}
 </fieldset>
 
 <fieldset id="fieldset-keywords">
     <legend>Dataset Keywords</legend>
     {{-- <table class="table table-hover" v-if="dataset.keywords.length"> --}}
+    <button class="pure-button button-small" @click.prevent="addKeyword()">Add Keyword</button>
     @if ($dataset->subjects->count() > 0)
     <table id="keywords" class="pure-table pure-table-horizontal">
         <thead>
@@ -324,11 +468,12 @@
         </thead>
         <tbody>
             {{-- @foreach($dataset->subjects as $key => $keyword) --}}
-            <tr>
             <tr v-for="(item, index) in form.subjects" :key="item.id">
                 <td>
-                <input v-bind:name="'subjects[' +  item.id +'][value]'" class="form-control" placeholder="[KEYWORD VALUE]" v-model="item.value" v-validate="'required'" />
+                    <input v-bind:name="'subjects[' +  item.id +'][value]'" class="form-control"
-                    {{-- {{ Form::text('keywords['.$keyword->id.'][value]', $keyword->value, ['class' => 'form-control',  'placeholder' => '[KEYWORD VALUE]']) }} --}}
+                        placeholder="[KEYWORD VALUE]" v-model="item.value" v-validate="'required'" />
+                    {{-- {{ Form::text('keywords['.$keyword->id.'][value]', $keyword->value, ['class' => 'form-control',  'placeholder' => '[KEYWORD VALUE]']) }}
+                    --}}
                 </td>
                 <td>
                     {{-- {!! Form::select('keywords['.$keyword->id.'][type]', $keywordTypes, $keyword->type, ['placeholder'
@@ -340,10 +485,14 @@
                             <option value="{{ $option }}">{{ $option }}</option>
                     @endforeach
                     </select> --}}
-                    <input v-bind:name="'subjects[' +  item.id +'][type]'" readonly class="form-control" placeholder="[KEYWORD TYPE]" v-model="item.type" v-validate="'required'" />
+                    <input v-bind:name="'subjects[' +  item.id +'][type]'" readonly class="form-control"
+                        placeholder="[KEYWORD TYPE]" v-model="item.type" v-validate="'required'" />
                 </td>
                 <td>
-                    {{-- <button class="pure-button button-small is-warning" @click.prevent="removeKeyword(index)">Remove</button> --}}
+                    <button v-if="item.id == undefined" class="pure-button button-small is-warning"
+                        @click.prevent="removeKeyword(index)">
+                        <i class="fa fa-trash"></i>
+                    </button>
                 </td>
             </tr>
             {{-- @endforeach --}}
@@ -372,11 +521,14 @@
                     @else
                     <span class="alert">missing file: {{ $file->path_name }}</span>
                     @endif --}}
-                    <a v-if="'storage/' + file.path_name" v-bind:src= " '/settings/file/download/' + file.id ">@{{ file.path_name }}</a>
+                    <a v-if="'storage/' + file.path_name"
+                        v-bind:src=" '/settings/file/download/' + file.id ">@{{ file.path_name }}</a>
                 </td>
                 <td>
-                    {{-- {{ Form::text('files['.$file->id.'][label]', $file->label, ['class' => 'form-control',  'placeholder' => '[FILE LABEL]']) }} --}}
+                    {{-- {{ Form::text('files['.$file->id.'][label]', $file->label, ['class' => 'form-control',  'placeholder' => '[FILE LABEL]']) }}
-                    <input v-bind:name="'files[' +  file.id +'][label]'" class="form-control" placeholder="[FILE LABEL]" v-model="file.label" v-validate="'required'" />
+                    --}}
+                    <input v-bind:name="'files[' +  file.id +'][label]'" class="form-control" placeholder="[FILE LABEL]"
+                        v-model="file.label" v-validate="'required'" />
                 </td>
             </tr>
             {{-- @endforeach --}}

resources/views/workflow/submitter/edit.blade.php

@@ -54,7 +54,9 @@
             'form' => $dataset,
             'projects' => $projects,
             'licenses'  => $licenses,
-            'checkeds' => $checkeds
+            'checkeds' => $checkeds,
+            'referenceTypes' => $referenceTypes,
+            'relationTypes' => $relationTypes
         ]); ?>        
 </script>