New frontend.

frontend/src/components/bills/Create.vue

@@ -65,7 +65,15 @@
               <GenericTextarea :disabled="submitting" field-name="notes" :title="$t('form.notes')" v-model="notes" :errors="errors.notes"
                                v-on:set-field="storeField($event)"/>
 
-              <GenericAttachments :disabled="submitting" :title="$t('form.attachments')" field-name="attachments" :errors="errors.attachments"/>
+              <GenericAttachments :disabled="submitting" :title="$t('form.attachments')" field-name="attachments" :errors="errors.attachments"
+                                  v-on:selected-attachments="selectedAttachments($event)"
+                                  v-on:selected-no-attachments="selectedNoAttachments($event)"
+                                  v-on:uploaded-attachments="uploadedAttachments($event)"
+                                  :upload-trigger="uploadTrigger"
+                                  :upload-object-type="uploadObjectType"
+                                  :upload-object-id="uploadObjectId"
+
+              />
 
               <GenericTextInput :disabled="submitting" v-model="skip" field-name="skip" :errors="errors.skip" :title="$t('form.skip')"
                                 v-on:set-field="storeField($event)"/>
@@ -144,9 +152,15 @@ export default {
 
       // optional fields
       notes: '',
-      skip: 0,
+      skip: '0',
       group_title: '',
 
+      // has attachments to upload?
+      hasAttachments: false,
+      uploadTrigger: false,
+      uploadObjectId: 0,
+      uploadObjectType: 'Bill',
+
 
       // optional fields:
       location: {},
@@ -181,6 +195,12 @@ export default {
       }
       this[payload.field] = payload.value;
     },
+    selectedAttachments: function (e) {
+      this.hasAttachments = true;
+    },
+    selectedNoAttachments: function (e) {
+      this.hasAttachments = false;
+    },
     submitForm: function (e) {
       e.preventDefault();
       this.submitting = true;
@@ -192,19 +212,17 @@ export default {
       axios.post(url, submission)
           .then(response => {
             this.errors = lodashClonedeep(this.defaultErrors);
-            // console.log('success!');
             this.returnedId = parseInt(response.data.data.id);
             this.returnedTitle = response.data.data.attributes.name;
-            this.successMessage = this.$t('firefly.stored_new_bill_js', {ID: this.returnedId, name: this.returnedTitle});
-            // stay here is false?
-            if (false === this.createAnother) {
-              window.location.href = (window.previousURL ?? '/') + '?bill_id=' + this.returnedId + '&message=created';
-              return;
+
+            if (this.hasAttachments) {
+              // upload attachments. Do a callback to a finish up method.
+              //alert('must now upload!');
+              this.uploadObjectId = this.returnedId;
+              this.uploadTrigger = true;
             }
-            this.submitting = false;
-            if (this.resetFormAfter) {
-              // console.log('reset!');
-              this.name = '';
+            if(!this.hasAttachments) {
+              this.finishSubmission();
             }
           })
           .catch(error => {
@@ -213,6 +231,22 @@ export default {
             // display errors!
           });
     },
+    uploadedAttachments: function(e) {
+      this.finishSubmission();
+    },
+    finishSubmission: function() {
+      this.successMessage = this.$t('firefly.stored_new_bill_js', {ID: this.returnedId, name: this.returnedTitle});
+      // stay here is false?
+      if (false === this.createAnother) {
+        window.location.href = (window.previousURL ?? '/') + '?bill_id=' + this.returnedId + '&message=created';
+        return;
+      }
+      this.submitting = false;
+      if (this.resetFormAfter) {
+        // console.log('reset!');
+        this.name = '';
+      }
+    },
     parseErrors: function (errors) {
       this.errors = lodashClonedeep(this.defaultErrors);
       // console.log(errors);
@@ -239,13 +273,13 @@ export default {
         submission.latitude = this.location.lat;
         submission.zoom_level = this.location.zoomLevel;
       }
-      if('' !== this.end_date) {
+      if ('' !== this.end_date) {
         submission.end_date = this.end_date;
       }
-      if('' !== this.extension_date) {
+      if ('' !== this.extension_date) {
         submission.extension_date = this.extension_date;
       }
-      if('' !== this.notes) {
+      if ('' !== this.notes) {
         submission.notes = this.notes;
       }
 

frontend/src/components/form/GenericAttachments.vue

@@ -34,6 +34,12 @@
           type="file"
           :disabled=disabled
       />
+      <span class="input-group-btn">
+            <button
+                class="btn btn-default"
+                type="button"
+                v-on:click="clearAtt"><span class="far fa-trash-alt"></span></button>
+        </span>
     </div>
     <span v-if="errors.length > 0">
       <span v-for="error in errors" class="text-danger small">{{ error }}<br/></span>
@@ -63,17 +69,104 @@ export default {
         return [];
       }
     },
-  },
-  methods: {
-    selectedFile: function() {
-      this.$emit('selected-attachments');
+    uploadTrigger: {
+      type: Boolean,
+      default: false
     },
+    uploadObjectType: {
+      type: String,
+      default: ''
+    },
+    uploadObjectId: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
-      localValue: this.value
+      localValue: this.value,
+      uploaded: 0,
+      uploads: 0,
     }
   },
+  watch: {
+    uploadTrigger: function (value) {
+      if (true === value) {
+        // this.createAttachment().then(response => {
+        //   this.uploadAttachment(response.data.data.id, new Blob([evt.target.result]));
+        // });
+
+        // new code
+        console.log('start of new');
+        let files = this.$refs.att.files;
+        this.uploads = files.length;
+        // loop all files and create attachments.
+        for (let i in files) {
+          if (files.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
+            console.log('Now at file ' + (parseInt(i) + 1) + ' / ' + files.length);
+            // read file into file reader:
+            let current = files[i];
+            let fileReader = new FileReader();
+            let theParent = this; // dont ask me why i need to do this.
+            fileReader.onloadend = evt => {
+              if (evt.target.readyState === FileReader.DONE) {
+                console.log('I am done reading file ' + (parseInt(i) + 1));
+                this.createAttachment(current.name).then(response => {
+                  console.log('Created attachment. Now upload (1)');
+                  return theParent.uploadAttachment(response.data.data.id, new Blob([evt.target.result]));
+                }).then(theParent.countAttachment);
+              }
+            }
+            fileReader.readAsArrayBuffer(current);
+          }
+        }
+        if (0 === files.length) {
+          console.log('No files to upload. Emit event!');
+          this.$emit('uploaded-attachments', this.transaction_journal_id);
+        }
+        // Promise.all(promises).then(response => {
+        //   console.log('All files uploaded. Emit event!');
+        //   this.$emit('uploaded-attachments', this.transaction_journal_id);
+        // });
+
+        // end new code
+
+
+      }
+    },
+  },
+  methods: {
+    countAttachment: function () {
+      this.uploaded++;
+      // console.log('Uploaded ' + this.uploaded + ' / ' + this.uploads);
+      if (this.uploaded >= this.uploads) {
+        // console.log('All files uploaded. Emit event for ' + this.transaction_journal_id + '(' + this.index + ')');
+        this.$emit('uploaded-attachments', this.transaction_journal_id);
+      }
+    },
+    uploadAttachment: function (attachmentId, data) {
+      this.created++;
+      // console.log('Now in uploadAttachment()');
+      const uploadUri = './api/v1/attachments/' + attachmentId + '/upload';
+      return axios.post(uploadUri, data)
+    },
+    createAttachment: function (name) {
+      const uri = './api/v1/attachments';
+      const data = {
+        filename: name,
+        attachable_type: this.uploadObjectType,
+        attachable_id: this.uploadObjectId,
+      };
+      return axios.post(uri, data);
+    },
+    selectedFile: function () {
+      this.$emit('selected-attachments');
+    },
+    clearAtt: function () {
+      this.$refs.att.value = '';
+      this.$emit('selected-no-attachments');
+    },
+  }
 }
 </script>