forked from gigascience/gigadb-website
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update GigaDB file upload author's view to use Javascript Vue components
The Gigadb javascript application (located in ``gigadb/app/client/web``) for uploading files built and then deployed in ``js/`` directory is added to the view by registering it as client script in the Yii view layout (uploader_layout.php) used by the view for AuthorisedDatasetController.php's filesUpload.php view. In the view, we make sure we have a <div> with the same id (#gigadb-fuw) as the Javascript application (see ``gigadb/app/client/web/src/index.js``) for the Javascript app to work in the page and inside we can use the JS component (see ``gigadb/app/client/web/src/components/DatasetInfoComponent.vue``) as a Custom Element (<dataset-info>). Updated acceptance test scenario to reflect the variation in terminology so we can show the different stages in File Upload Wizard. Updated the FUW docs to indicate the command to test, build and deploy the Javascript application: ``` $ docker-compose run --rm js ``` The deployed Javascript application (js/fuw-*) is .gitignored as it's a build artefact and dependencies integrity is performed with ``gigadb/app/client/web/package-lock.json``. Some work in progress (@wip) for acceptance scenario and its implementation was added to test the flow between the file uploading stage and the file meta-data annotation stage. Improved the CSS on ``filesUpload.php`` to match the GigaDB's new look for public pages.
- Loading branch information
Showing
6 changed files
with
103 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -70,6 +70,7 @@ terraform.tfstate* | |
| output | ||
| *.retry | ||
| vault | ||
| js/fuw-* | ||
|
|
||
| # docs | ||
| docs/apidocs/phpdoc-cache-* | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,58 @@ | ||
| <?php ?> | ||
| <div id="gigadb-dataset-uploader"> | ||
| <h1>{{ message}} for dataset {{ doi }}</h1> | ||
| <form id="dataset-metadata-form"> | ||
| <input id="dataset" type="hidden" v-bind:value="doi"> | ||
| </form> | ||
| <div id="drag-drop-area"></div> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function(event) { | ||
| <div class="content"> | ||
| <div class="container"> | ||
| <section class="page-title-section"> | ||
| <div id="gigadb-fuw"> | ||
| <div class="page-title"> | ||
| <ol class="breadcrumb pull-right"> | ||
| <li><a href="/">Home</a></li> | ||
| <li class="active">File Upload Wizard</li> | ||
| </ol> | ||
| <dataset-info identifier="<?= $identifier ?>" /> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <form id="dataset-metadata-form"> | ||
| <input id="dataset" type="hidden" v-bind:value="doi"> | ||
| </form> | ||
| <div id="drag-drop-area"></div> | ||
| <script> | ||
| document.addEventListener("DOMContentLoaded", function(event) { | ||
|
|
||
| var app = new Vue({ | ||
| el: '#gigadb-dataset-uploader', | ||
| data: { | ||
| doi: <?php echo "'".$identifier."'"; ?>, | ||
| message: 'GigaDB File Uploader', | ||
| seen: true, | ||
| todos: [ | ||
| { text: 'Buy jacket' }, | ||
| { text: 'Call Dad' }, | ||
| { text: 'Feed the cat' } | ||
| ] | ||
| }, | ||
| methods: { | ||
| reverseMessage: function() { | ||
| this.message = this.message.split('').reverse().join('') | ||
| } | ||
| } | ||
| }); | ||
| var uppy = Uppy.Core() | ||
| .use(Uppy.Dashboard, { | ||
| inline: true, | ||
| target: '#drag-drop-area', | ||
| hideAfterFinish: true, | ||
| showProgressDetails: true, | ||
| hideUploadButton: false, | ||
| hideRetryButton: false, | ||
| hidePauseResumeButton: false, | ||
| hideCancelButton: false, | ||
| proudlyDisplayPoweredByUppy: false, | ||
| metaFields: [ | ||
| { id: 'name', name: 'Name', placeholder: 'file name' }, | ||
| { id: 'description', name: 'Description', placeholder: 'describe what the file is about' } | ||
| ], | ||
| locale: {} | ||
| }) | ||
| .use(Uppy.Form, { | ||
| target: "#dataset-metadata-form", | ||
| getMetaFromForm: true, | ||
| addResultToForm: false, | ||
| triggerUploadOnSubmit: false, | ||
| submitOnSuccess: false | ||
| }) | ||
| // .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}); | ||
| .use(Uppy.Tus, { endpoint: '/files/' }); | ||
|
|
||
| var uppy = Uppy.Core() | ||
| .use(Uppy.Dashboard, { | ||
| inline: true, | ||
| target: '#drag-drop-area', | ||
| hideAfterFinish: true, | ||
| showProgressDetails: true, | ||
| hideUploadButton: false, | ||
| hideRetryButton: false, | ||
| hidePauseResumeButton: false, | ||
| hideCancelButton: false, | ||
| proudlyDisplayPoweredByUppy: false, | ||
| metaFields: [ | ||
| { id: 'name', name: 'Name', placeholder: 'file name' }, | ||
| { id: 'description', name: 'Description', placeholder: 'describe what the file is about' } | ||
| ], | ||
| locale: {} | ||
| }) | ||
| .use(Uppy.Form, { | ||
| target: "#dataset-metadata-form", | ||
| getMetaFromForm: true, | ||
| addResultToForm: false, | ||
| triggerUploadOnSubmit: false, | ||
| submitOnSuccess: false | ||
| }) | ||
| // .use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}); | ||
| .use(Uppy.Tus, { endpoint: '/files/' }); | ||
| uppy.on('complete', function(result) { | ||
| console.log('Upload complete! We’ve uploaded these files:', result.successful); | ||
| }); | ||
|
|
||
| uppy.on('complete', function(result) { | ||
| console.log('Upload complete! We’ve uploaded these files:', result.successful); | ||
| }); | ||
|
|
||
| }); | ||
| </script> | ||
| }); | ||
| </script> | ||
| </section> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters