In this part 2 of the Vidispine VidiCore Development Toolkit tutorial, you will learn how to start using the components, make API calls to the Vidispine VidiCore API and finally import a file into the repository.
Introduction
In this blog post, we are going to set up and configure our project to implement the vdt-vue-components and use few of them to list all storages for our instance, list all importable files for the selected storage and import the selected files from that storage.
...
All code can be found in the companion Github repo howto-build-vdt-applications. If you haven’t set up your system yet, head over to part 1 of the tutorial.
This post
| Table of Contents |
|---|
VDT-VUE-Components focused on
Install VDT UI Components
What you need to do is head over to your application folder and, depending on if you are using yarn or npm, run one of the commands below to install.
...
If you also want to change the components and learn how they actually work, you will also need to make sure you get access to the GitHub repository, and then clone and link your application.
Building the application
Create a new file in ‘src/components’ and name it Import.vue. Leave it for now and instead head into the ‘router’ folder and open the index.js file within. Import the newly created Import.vue and create a new object within ‘routes’, this will enable you to navigate to ‘https://localhost:4000/import’. Then, head into the ‘assets’ folder and then ‘scss’ to find ‘base.scss’. Open it and add a new import, enabling the stylesheet for the VDT components.
...
With all of the above implemented, a list with importable files should be displayed.
Adding the VDTlist component
Although already functioning properly, let’s use the list component included in the vdt-vue-components repository instead. This specific component requires three properties to function, an array of assets, an array of columns, and an array of selected files, along with some optional properties should you wish to utilize them as well. Firstly, we create an array of columns, the ‘key’ property is the path metadata within the file.
...
The list should now look a bit more structured with column headers and checkboxes, making each file selectable. The initially empty ‘selectedAssets’ array should also update each time a file is selected, and functions as the basis in the import function.
Adding import functionality
Since the API call for the import is made from within the application it needs some functionality to handle that. ‘axios’ is the solution for that, which is also used in the imported functions. The ‘JobPollService’ is optional, but helps keep track of the import process and updates its status continuously. The ‘destroyed()’ function resets all intervals upon import completion.
...
Your code should now look like Import.vue in the howto-build-vdt-applications Github repository. You should now see an import-button after the file list, and if you select a file and import it will be imported into your Vidispine VidiCore instance. Check for yourself that your file is imported by pointing your browser to:
...