- better edit form for submitter

- test adding files in edit form
- table with index numbering

app/Http/Controllers/Publish/SubmitController.php

@@ -10,8 +10,9 @@ use App\Models\Description;
 use App\Models\File;
 use App\Models\License;
 // use Illuminate\View\View;
-use App\Models\Project;
+use App\Models\Person;
 // for edit actions:
+use App\Models\Project;
 use App\Models\Subject;
 use App\Models\Title;
 use App\Models\User;
@@ -23,7 +24,8 @@ use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Storage;
 use Illuminate\Support\Facades\Validator;
 use Illuminate\Support\Facades\View;
-use App\Models\Person;
+use App\Rules\RdrFiletypes;
+use App\Rules\RdrFilesize;
 
 class SubmitController extends Controller
 {
@@ -151,6 +153,14 @@ class SubmitController extends Controller
         $customMessages = [
             'keywords.*.type.required' => 'The types of all keywords are required.',
         ];
+        if (null != $request->file('files')) {
+            $data = $request->all();
+            $files = count($request->input('files')) - 1;
+            foreach (range(0, $files) as $index) {
+                // $rules['files.' . $index] = 'image|max:2048';
+                $rules['files.' . $index . '.file'] = [new RdrFilesize($index + 1), 'file', new RdrFiletypes()];
+            }
+        }
         $validator = Validator::make($request->all(), $rules, $customMessages);
         if (!$validator->fails()) {
             $dataset = Dataset::findOrFail($id);
@@ -217,8 +227,9 @@ class SubmitController extends Controller
             $titles = $request->input('titles');
             if (is_array($titles) && count($titles) > 0) {
                 foreach ($titles as $key => $formTitle) {
-                    if (isset($key) && $key != 'undefined') {
-                        $title = Title::findOrFail($key);
+                    // if (isset($key) && $key != 'undefined') {
+                    if (isset($formTitle['id'])) {
+                        $title = Title::findOrFail($formTitle['id']);
                         $title->value = $formTitle['value'];
                         $title->language = $formTitle['language'];
                         $title->type = $formTitle['type'];
@@ -236,8 +247,9 @@ class SubmitController extends Controller
             $abstracts = $request->input('abstracts');
             if (is_array($abstracts) && count($abstracts) > 0) {
                 foreach ($abstracts as $key => $formAbstract) {
-                    if (isset($key) && $key != 'undefined') {
-                        $abstract = Description::findOrFail($key);
+                    // if (isset($key) && $key != 'undefined') {
+                    if (isset($formAbstract['id'])) {
+                        $abstract = Description::findOrFail($formAbstract['id']);
                         $abstract->value = $formAbstract['value'];
                         $abstract->language = $formAbstract['language'];
                         if ($abstract->isDirty()) {
@@ -254,8 +266,9 @@ 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);
+                    // if (isset($key) && $key != 'undefined') {
+                    if (isset($formReference['id'])) {
+                        $reference = DatasetReference::findOrFail($formReference['id']);
                         $reference->value = $formReference['value'];
                         $reference->label = $formReference['label'];
                         $reference->type = $formReference['type'];
@@ -274,8 +287,8 @@ 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);
+                    if (isset($formKeyword['id'])) {
+                        $subject = Subject::findOrFail($formKeyword['id']);
                         $subject->value = $formKeyword['value'];
                         $subject->type = $formKeyword['type'];
                         if ($subject->isDirty()) {
@@ -289,14 +302,41 @@ class SubmitController extends Controller
             }
 
             //save the files:
-            $files = $request->input('files');
+            $files = $request->get('files');
             if (is_array($files) && count($files) > 0) {
+                $index = 1;
                 foreach ($files as $key => $formFile) {
-                    $file = File::findOrFail($key);
-                    $file->label = $formFile['label'];
-                    if ($file->isDirty()) {
-                        $file->save();
+                    // if (isset($key) && $key != 'undefined') {
+                    if (isset($formFile['id'])) {
+                        $file = File::findOrFail($formFile['id']);
+                        $file->label = $formFile['label'];
+                        if ($file->isDirty()) {
+                            $file->save();
+                        }
+                    } else {
+                        $file = $formFile['file'];
+                        $label = urldecode($formFile['label']);
+                        $sort_order = $index;//$formFile['sort_order'];
+                        $fileName = "file-" . time() . '.' . $file->getClientOriginalExtension();
+                        $mimeType = $file->getMimeType();
+                        $datasetFolder = 'files/' . $dataset->id;
+                        $path = $file->storeAs($datasetFolder, $fileName);
+                        $size = Storage::size($path);
+                        //$path = Storage::putFile('files', $image, $fileName);
+                        $fileDb = new File([
+                            'path_name' => $path,
+                            'file_size' => $size,
+                            'mime_type' => $mimeType,
+                            'label' => $label,
+                            'sort_order' => $sort_order,
+                            'visible_in_frontdoor' => 1,
+                            'visible_in_oai' => 1
+                        ]);
+                        //$test = $file->path_name;
+                        $dataset->files()->save($fileDb);
+                        $fileDb->createHashValues();
                     }
+                    $index++;
                 }
             }
 

resources/js/EditDataset.js

@@ -206,6 +206,14 @@ export default class EditDataset extends Vue {
 
     onSubmit() {
         // var dataform = new FormData();
+        // var dataform = document.getElementById('submitEditForm');
+        // var length = this.form.files.length;   
+        // for (var i = 0; i < length; i++) {
+        //     if (this.form.files[i].file != undefined) {
+        //         var file = this.form.files[i];
+        //         dataform.append('files[undefined][file]', file.file, file.label);
+        //     }
+        // }
         // dataform.append('name', this.form.name);
         // // dataform.append('comments', this.form.comments);
         // console.log(this.form.name);
@@ -306,4 +314,32 @@ export default class EditDataset extends Vue {
         // } 
     }
 
+    filesChange(fieldName, fileList) {
+        var fileCount = fileList.length
+        // this.dataset.files = this.$refs.files.files; 
+        let uploadedFiles = fileList;
+
+        /*
+        Adds the uploaded file to the files array
+        */
+        for (var i = 0; i < uploadedFiles.length; i++) {
+            let fileName = uploadedFiles[i].name.replace(/\.[^/.]+$/, '');
+            let uploadeFile = { file: uploadedFiles[i], label: fileName, sort_order: 0 };
+            //this.dataset.files.push(uploadedFiles[i]);
+            this.form.files.push(uploadeFile);
+        }
+        // if (this.dataset.files.length > 0)
+        // {
+        //     this.currentStatus = STATUS_SAVING;
+        // } 
+    }
+
+    /*
+        Removes a select file the user has uploaded
+        */
+       removeFile(key) {
+        this.form.files.splice(key, 1);
+    }
+
+
 }

resources/js/components/PersonTable.vue

@@ -26,7 +26,7 @@
         >
           <td scope="row">{{ index + 1 }}</td>
            <td> <input             
-              v-bind:name="heading+'['+item.id+'][id]'"
+              v-bind:name="heading+'['+index+'][id]'"
               class="form-control"             
               v-model="item.id"              
               v-bind:readonly="item.status==1"              
@@ -34,7 +34,7 @@
             /></td>
           <td>
             <input             
-              v-bind:name="heading+'['+item.id+'][first_name]'"
+              v-bind:name="heading+'['+index+'][first_name]'"
               class="form-control"
               placeholder="[FIRST NAME]"
               v-model="item.first_name"
@@ -45,7 +45,7 @@
           </td>
           <td>
             <input
-             v-bind:name="heading+'['+item.id+'][last_name]'"            
+             v-bind:name="heading+'['+index+'][last_name]'"            
               class="form-control"
               placeholder="[LAST NAME]"
               v-model="item.last_name"
@@ -57,7 +57,7 @@
           <td>
              <!-- v-validate="'required|email'" -->
             <input
-             v-bind:name="heading+'['+item.id+'][email]'"             
+             v-bind:name="heading+'['+index+'][email]'"             
               class="form-control"
               placeholder="[EMAIL]"
               v-model="item.email"             
@@ -68,7 +68,7 @@
           </td>
           <td>
             <input
-              v-bind:name="heading+'['+item.id+'][identifier_orcid]'"             
+              v-bind:name="heading+'['+index+'][identifier_orcid]'"             
               class="form-control"
               placeholder="[ORCID optional]"
               v-model="item.identifier_orcid"

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

@@ -68,16 +68,18 @@
     <legend>Creator(s)</legend>
     <div class="pure-g">
         <div class="pure-u-1 pure-u-md-1-2 pure-div">
-            <my-autocomplete title="searching active person table" v-on:person="onAddAuthor"></my-autocomplete>           
+            <my-autocomplete title="searching active person table" v-on:person="onAddAuthor"></my-autocomplete>
         </div>
     </div>
     <div class="pure-u-1 pure-u-md-1-2 pure-div">
         {{-- {!! Form::label('additionalCreators', 'Add additional creator(s) if creator is not in database') !!} 
         <button class="pure-button button-small" @click.prevent="addNewAuthor()">+</button> --}}
     </div>
-    <input name="authors" v-model="form.authors" type="hidden" class="form-check-input" v-validate="'required'" data-vv-as="Author">                  
-    <person-table name="authors" v-bind:heading="'authors'" v-bind:personlist="form.authors"></person-table> 
-    <person-table name="contributors" v-bind:heading="'contributors'" v-bind:personlist="form.contributors"></person-table> 
+    <input name="authors" v-model="form.authors" type="hidden" class="form-check-input" v-validate="'required'"
+        data-vv-as="Author">
+    <person-table name="authors" v-bind:heading="'authors'" v-bind:personlist="form.authors"></person-table>
+    <person-table name="contributors" v-bind:heading="'contributors'" v-bind:personlist="form.contributors">
+    </person-table>
 </fieldset>
 
 <fieldset id="fieldset-titles">
@@ -108,18 +110,19 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="(title, key) in form.titles">
+            <tr v-for="(title, index) in form.titles">
                 <td>
-                    <input type="text" :id="'titles['+title.id+'][value]'" :name="'titles['+title.id+'][value]'"
+                    <input v-bind:name="'titles['+index+'][id]'" readonly class="form-control" v-model="title.id" hidden />
+                    <input type="text" :id="'titles['+index+'][value]'" :name="'titles['+index+'][value]'"
                         v-validate="'required'" class="form-control" v-model="title.value">
                 </td>
                 <td>
                     <template v-if="title.type == 'Main'">
-                        <input v-bind:name="'titles['+title.id+'][type]'" v-model="title.type" class="form-control"
+                        <input v-bind:name="'titles['+index+'][type]'" v-model="title.type" class="form-control"
                             v-validate="'required'" v-bind:readonly="title.type == 'Main'">
                     </template>
                     <template v-else>
-                        <select type="text" :id="'titles['+title.id+'][type]'" :name="'titles['+title.id+'][type]'"
+                        <select type="text" :id="'titles['+index+'][type]'" :name="'titles['+index+'][type]'"
                             class="form-control"
                             v-validate="{required: true, translatedLanguage: [form.language, title.type]}"
                             v-model="title.type" v-bind:readonly="title.type == 'Main'">
@@ -132,12 +135,12 @@
                 </td>
                 <td>
                     <template v-if="title.type == 'Main'">
-                        <input v-bind:name="'titles['+title.id+'][language]'" v-model="title.language"
+                        <input v-bind:name="'titles['+index+'][language]'" v-model="title.language"
                             class="form-control" v-validate="'required'" v-bind:readonly="title.type == 'Main'">
                     </template>
                     <template v-else>
-                        <select type="text" :id="'titles['+title.id+'][language]'"
-                            :name="'titles['+title.id+'][language]'" class="form-control"
+                        <select type="text" :id="'titles['+index+'][language]'"
+                            :name="'titles['+index+'][language]'" class="form-control"
                             v-validate="{required: true, translatedLanguage: [form.language, title.type]}"
                             v-model="title.language" v-bind:readonly="title.type == 'Main'">
                             <option v-for="option in languages" :value='option'>
@@ -148,7 +151,7 @@
                 </td>
                 <td>
                     <button v-if="title.id == undefined" class="pure-button button-small is-warning"
-                        @click.prevent="removeTitle(key)">
+                        @click.prevent="removeTitle(index)">
                         <i class="fa fa-trash"></i>
                 </td>
             </tr>
@@ -188,22 +191,22 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="(abstract, key) in form.abstracts">
+            <tr v-for="(abstract, index) in form.abstracts">
                 <td>
-                    {{-- <label :for="'abstracts['+abstract.id+'][value]'"> @{{ 'Title ' + (key + 1) + ':' }}</label>
-                    --}}
-                    <input type="text" :id="'abstracts['+abstract.id+'][value]'"
-                        :name="'abstracts['+abstract.id+'][value]'" v-validate="'required'" v-model="abstract.value"
+                    <input v-bind:name="'abstracts[' +  index +'][id]'" readonly class="form-control" v-model="abstract.id" hidden />
+
+                    <input type="text" :id="'abstracts['+ index +'][value]'"
+                        :name="'abstracts['+index+'][value]'" v-validate="'required'" v-model="abstract.value"
                         class="form-control">
                 </td>
                 <td>
                     <template v-if="abstract.type == 'Abstract'">
-                        <input v-bind:name="'abstracts['+abstract.id+'][type]'" v-model="abstract.type"
+                        <input v-bind:name="'abstracts['+ index +'][type]'" v-model="abstract.type"
                             class="form-control" v-validate="'required'" v-bind:readonly="abstract.type == 'Abstract'">
                     </template>
                     <template v-else>
-                        <select type="text" :id="'abstracts['+abstract.id+'][type]'"
-                            :name="'abstracts['+abstract.id+'][type]'" class="form-control"
+                        <select type="text" :id="'abstracts['+ index +'][type]'"
+                            :name="'abstracts['+ index +'][type]'" class="form-control"
                             v-validate="{required: true, translatedLanguage: [form.language, abstract.type]}"
                             v-model="abstract.type" v-bind:readonly="abstract.type == 'Abstract'">
                             <option v-for="option in descriptionTypes" :value='option'>
@@ -214,12 +217,12 @@
                 </td>
                 <td>
                     <template v-if="abstract.type == 'Abstract'">
-                        <input v-bind:name="'abstracts['+abstract.id+'][language]'" v-model="abstract.language"
+                        <input v-bind:name="'abstracts['+index+'][language]'" v-model="abstract.language"
                             class="form-control" v-validate="'required'" v-bind:readonly="abstract.type == 'Abstract'">
                     </template>
                     <template v-else>
-                        <select type="text" :id="'abstracts['+abstract.id+'][language]'"
-                            :name="'abstracts['+abstract.id+'][language]'" class="form-control"
+                        <select type="text" :id="'abstracts['+index+'][language]'"
+                            :name="'abstracts['+index+'][language]'" class="form-control"
                             v-validate="{required: true, translatedLanguage: [form.language, abstract.type]}"
                             v-model="abstract.language" v-bind:readonly="abstract.type == 'Abstract'">
                             <option v-for="option in languages" :value='option'>
@@ -230,7 +233,7 @@
                 </td>
                 <td>
                     <button v-if="abstract.id == undefined" class="pure-button button-small is-warning"
-                        @click.prevent="removeDescription(key)">
+                        @click.prevent="removeDescription(index)">
                         <i class="fa fa-trash"></i>
                 </td>
             </tr>
@@ -259,99 +262,6 @@
     </div>
 </fieldset>
 
-{{-- <fieldset id="fieldset-geolocation">
-    <legend>Coverage: Geolocation, Elevation, Depth, Time</legend>
-    <div class="pure-g">
-        <div class="pure-u-1 pure-u-md-1-2 pure-div">
-            {!! Form::label('xmin', 'xmin: ') !!}
-            {!! Form::text('coverage[xmin]', null, ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.xmin'])
-            !!}
-        </div>
-        <div class="pure-u-1 pure-u-md-1-2 pure-div">
-            {!! Form::label('ymin', 'ymin: ') !!}
-            {!! Form::text('coverage[ymin]', null, ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.ymin'])
-            !!}
-        </div>
-
-        <div class="pure-u-1 pure-u-md-1-2 pure-div">
-            {!! Form::label('xmax', 'xmax: ') !!}
-            {!! Form::text('coverage[xmax]', null, ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.xmax'])
-            !!}
-        </div>
-        <div class="pure-u-1 pure-u-md-1-2 pure-div">
-            {!! Form::label('ymax', 'ymax: ') !!}
-            {!! Form::text('coverage[ymax]', null, ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.ymax'])
-            !!}
-        </div>
-
-        @if (isset($dataset->elevation_absolut))
-        <div v-show="elevation === 'absolut'" class="pure-u-1 pure-u-md-1">
-            {!! Form::label('elevation_absolut', 'elevation absolut: ') !!}
-            {!! Form::text('coverage[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>
-        @elseif (isset($dataset->elevation_min) && isset($dataset->elevation_max))
-        <div v-show="elevation === 'range'" class="pure-u-1 pure-u-md-1">
-            {!! Form::label('elevation_min', 'elevation min: ') !!}
-            {!! Form::text('coverage[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('coverage[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>
-        @endif
-
-        @if (isset($dataset->depth_absolut))
-        <div v-show="elevation === 'absolut'" class="pure-u-1 pure-u-md-1">
-            {!! Form::label('depth_absolut', 'depth absolut: ') !!}
-            {!! Form::text('coverage[depth_absolut]', null,
-            ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.depth_absolut', 'data-vv-scope' => 'step-2',
-            "v-validate" => "this.isElevationAbsolut ? 'required|integer' : '' " ]) !!}
-        </div>
-        @elseif (isset($dataset->elevation_min) && isset($dataset->elevation_max))
-        <div v-show="elevation === 'range'" class="pure-u-1 pure-u-md-1">
-            {!! Form::label('depth_min', 'depth min: ') !!}
-            {!! Form::text('coverage[depth_min]', null,
-            ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.depth_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('depth_max', 'depth max: ') !!}
-            {!! Form::text('coverage[depth_max]', null,
-            ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.depth_max', 'data-vv-scope' => 'step-2',
-            "v-validate" => "this.isElevationRange ? 'required|integer' : '' "]) !!}
-        </div>
-        @endif
-
-        @if (isset($dataset->depth_absolut))
-        <div v-show="elevation === 'absolut'" class="pure-u-1 pure-u-md-1">
-            {!! Form::label('time_absolut', 'time absolut: ') !!}
-            {!! Form::text('coverage[time_absolut]', null,
-            ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.time_absolut', 'data-vv-scope' => 'step-2',
-            "v-validate" => "this.isElevationAbsolut ? 'required|integer' : '' " ]) !!}
-        </div>
-        @elseif (isset($dataset->elevation_min) && isset($dataset->elevation_max))
-        <div v-show="elevation === 'range'" class="pure-u-1 pure-u-md-1">
-            {!! Form::label('time_min', 'time min: ') !!}
-            {!! Form::text('coverage[time_min]', null,
-            ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.time_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('time_max', 'time max: ') !!}
-            {!! Form::text('coverage[time_max]', null,
-            ['class' => 'pure-u-23-24', 'v-model' => 'form.coverage.time_max', 'data-vv-scope' => 'step-2',
-            "v-validate" => "this.isElevationRange ? 'required|integer' : '' "]) !!}
-        </div>
-        @endif,
-    </div>
-</fieldset> --}}
-
 <fieldset id="fieldset-coverage">
     <legend>Coverage</legend>
     <div class="pure-g">
@@ -535,21 +445,21 @@
             {{-- @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]']) }}
-                    --}}
-                    <input v-bind:name="'references[' +  item.id +'][value]'" class="form-control"
+                    <input v-bind:name="'references[' +  index +'][id]'" readonly class="form-control" v-model="item.id" hidden />
+
+                    <input v-bind:name="'references[' +  index +'][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]']) }}
                     --}}
-                    <input v-bind:name="'references[' +  item.id +'][label]'" class="form-control"
+                    <input v-bind:name="'references[' +  index +'][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,
                     ['placeholder' => '[REFERENCE TYPE]', 'v-model' => 'item.type', "v-validate" => "'required'"]) !!} --}}
-                    <select v-bind:name="'references[' +  item.id +'][type]'" v-model="item.type" class="form-control"
+                    <select v-bind:name="'references[' +  index +'][type]'" v-model="item.type" class="form-control"
                         v-validate="'required'">
                         <option v-for="option in referenceTypes" :value='option'>
                             @{{ option }}
@@ -560,7 +470,7 @@
                 <td>
                     {{-- {!! Form::select('references['.$reference->id.'][relation]', $relationTypes, $reference->relation,
                     ['placeholder' => '[REFERENCE TYPE]', 'v-model' => 'item.relation', "v-validate" => "'required'"]) !!} --}}
-                    <select v-bind:name="'references[' +  item.id +'][relation]'" v-model="item.relation"
+                    <select v-bind:name="'references[' +  index +'][relation]'" v-model="item.relation"
                         class="form-control" v-validate="'required'">
                         <option v-for="option in relationTypes" :value='option'>
                             @{{ option }}
@@ -595,11 +505,12 @@
                 <th style="width: 130px;"></th>
             </tr>
         </thead>
-        <tbody>
-            {{-- @foreach($dataset->subjects as $key => $keyword) --}}
+        <tbody>         
             <tr v-for="(item, index) in form.subjects" :key="item.id">
+                
                 <td>
-                    <input v-bind:name="'subjects[' +  item.id +'][value]'" class="form-control"
+                    <input v-bind:name="'subjects[' +  index +'][id]'" readonly class="form-control" v-model="item.id" hidden />
+                    <input v-bind:name="'subjects[' +  index +'][value]'" class="form-control"
                         placeholder="[KEYWORD VALUE]" v-model="item.value" v-validate="'required'" />
                     {{-- {{ Form::text('keywords['.$keyword->id.'][value]', $keyword->value, ['class' => 'form-control',  'placeholder' => '[KEYWORD VALUE]']) }}
                     --}}
@@ -614,7 +525,7 @@
                             <option value="{{ $option }}">{{ $option }}</option>
                     @endforeach
                     </select> --}}
-                    <input v-bind:name="'subjects[' +  item.id +'][type]'" readonly class="form-control"
+                    <input v-bind:name="'subjects[' +  index +'][type]'" readonly class="form-control"
                         placeholder="[KEYWORD TYPE]" v-model="item.type" v-validate="'required'" />
                 </td>
                 <td>
@@ -623,8 +534,7 @@
                         <i class="fa fa-trash"></i>
                     </button>
                 </td>
-            </tr>
-            {{-- @endforeach --}}
+            </tr>           
         </tbody>
     </table>
     @else
@@ -634,34 +544,65 @@
 
 <fieldset id="fieldset-files">
     <legend>Files</legend>
+
+    {{-- <h3>File Upload</h3>
+    <div class="dropbox">
+        <input type="file" name="uploads" multiple @change="filesChange($event.target.name, $event.target.files)" class="input-file">
+        <p>
+            Drag your file(s) here to begin<br> or click to browse
+        </p>       
+    </div> --}}
+
     <table id="items" class="pure-table pure-table-horizontal">
         <thead>
             <tr>
+                <th>#</th>              
                 <th>Path Name</th>
                 <th>Label</th>
+                <th>New</th>
+                <th style="width: 130px;"></th>
             </tr>
         </thead>
-        <tbody>
-            {{-- @foreach($dataset->files as $key => $file) --}}
+        <tbody>           
             <tr v-for="(file, index) in form.files" :key="file.id">
+                <td>
+                    @{{ index +1 }}
+                </td>               
                 <td>
                     {{-- @if($file->exists() === true)
                     <a href="{{ route('settings.file.download', ['id' => $file->id]) }}"> {{ $file->path_name }} </a>
                     @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="file.id != undefined" v-bind:href=" '/settings/file/download/' + file.id ">
+                       
+                      @{{ file.path_name }}                     
+                    </a>
+                    <span v-else> File name will be generated</span>
+
+                
                 </td>
                 <td>
-                    {{-- {{ 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]"
+                    <input v-bind:name="'files[' +  index +'][id]'" readonly class="form-control" v-model="file.id" hidden />
+                    <input v-bind:name="'files['+index+'][label]'" class="form-control" placeholder="[FILE LABEL]"
                         v-model="file.label" v-validate="'required'" />
                 </td>
-            </tr>
-            {{-- @endforeach --}}
+                <td>
+                    <i v-if="file.file" class="fas fa-file-upload"></i>
+                    <input type="hidden"  v-bind:name="'files['+index+'][file]'" class="form-control" v-bind:file="file.file"/>
+                </td>
+                <td>
+                    <button v-if="file.id == undefined" class="pure-button button-small is-warning"
+                        @click.prevent="removeFile(index)">
+                        <i class="fa fa-trash"></i>
+                </td>
+            </tr>           
         </tbody>
+
+
+      
+
+
     </table>
 </fieldset>
 
@@ -671,4 +612,12 @@
         <i class="fas fa-save"></i>
         <span>{!! $submitButtonText !!}</span>
     </button>
-</div>
+</div>
+
+@if($errors->any())        
+<ul class="alert validation-summary-errors">    
+    @foreach($errors->all() as $error)
+        <li style="margin-left:5px;">{{ $error }}</li>
+    @endforeach
+</ul>
+@endif