Create Booking Component [VF 21.4 IG]

Add the tag "<pf-booking >" to html to use this component. Create Booking Component is used specifically for the booking use case. When using the Booking use case, external metadata (booking detail ) can be passed as input into Booking Component, then a placeholder item is created with metadata specified in the Booking Component layout. External metadata will also be included in the created placeholder item. In this component, the save button and reset buttons are removed from the layout. Saving and resetting layout is done via an actionEvent sent as an input into Booking Component. Below are inputs and outputs of this component.

Input	Description	Sample Input
auth-service-url	The url to the identity server authentication service.	http://localhost:19081/Authentication/Core
auth-redirect-url	When the authentication service authenticated the user, the auth service will redirect to this url. Note: this url must be configured as "redirect url" of auth service.	http:// localhost:19081/MetadataEditor/
auth-logout-url	Logout redirect url of auth service.	http:// localhost:19081 /MetadataEditor/
auth-silent-refresh-url	The silent refresh html that oidc client use to refresh the auth token.	http:// localhost:19081/silent-refresh.html
metadata-editor-uri	Currently, the metadata editor does not directly access Vidispine or ConfigPortal api. Instead, requests are made to a proxy "metadata editor host" installed with VidiFlow which then routed to Vidispine or ConfigPortal api. So this is the url of that proxy service.	http://localhost:19081/Platform.Clients/MetadataEditor/ (backslash needed.)
expected-media-type	The expected media type when creating placeholder item. Same with the query param "expectedMediaType" when accessing it via iframe.	video image
header-text	Text shown in header of MetadataEditor	Metadata #
hide-search	Not yet implemented. Can be ignored.
object-id	Item id of the metadata to be edited. Needed when updating metadata. If this value is provided, it will be using update mode. If this value is not provided, the layout will be change to create mode.	pf://systemname/item/VX-237
metadata-generation-service-url	The url of an external service used to generate/update some part of the metadata base on criteria set by the external service.	'http://host.docker.internal:5001/api/autogenerate';

Output	Description	Sample
saveClicked	Triggered when the save button is clicked.
placeholderCreated	When creating item placeholder, this will emit the result whether successful or failed. The structure of the emitted event look like this { success: boolean; errorMessage: string; }	{ success:: true } { success: false errorMessage: "some error" }
generating-metadata	This event will emit when user click on the “generate metadata“ button. This even indicate the generation of metadata started, but does not mean the metadata is finished generating. For that use the following event. This event can be used by user of this component to control behavior such as blocking of “save“ button or blocking the metadata layout while metadata generating is in progress.
metadata-generated	This event will emit when the generation of metadata is completed. If the generation complete successfully it return true. If error occurred when generating the metadata it return false.	true false

Sending External Metadata and actionEvent Input

External metadata and actionEvent must be provided via web component property instead of attribute because any input provided via attribute will be converted to string. Below an example of how to provide External Metadata and actionEvent into Booking Component. Note: If a metadata field exists in the Booking Component's Layout but also exists in the external metadata input, external metadata will take precedence and overwrite the value defined in the layout

In template or .html

CODE

<pf-booking #editor
        [attr.auth-service-url]="authServiceUrl"
        [attr.auth-redirect-url]="authRedirectUrl"
        [attr.auth-logout-url]="authLogoutUrl"
        [attr.auth-silent-refresh-url]="authSilentRefreshUrl"
        [attr.metadata-editor-uri]="metadataEditorUri"
...        
></pf-booking>

In .ts file

CODE

// reference the booking component
@ViewChild('editor') editor: ElementRef;
...
 
// to provide metadata and create the placeholder item
// provide external metadata to externalMetadata property
    this.editor.nativeElement.externalMetadata = [
      {
        name: 'V3_bookingType',
        value: [{
          value: 'type1',
        }],
      }
    ];

    // insert save event for actionEvent to trigger saving
    this.editor.nativeElement.actionEvent =  {
       name: 'save',
   };

   // insert reset event for actionEvent to reset value in booking component layout
    this.editor.nativeElement.actionEvent =  {
       name: 'resetMetadata',
   };

Generate Metadata with external service

User can click on the “generate metadata“ button to generate or update current metadata shown in the metadata layout. The booking component will get all the metadata of current layout and do a POST request to the specified “metadata-generation-service-url“. The external service method need to math the API signature requirement for this function to works correctly.

Method: POST

Query Parameter:

usecaseconfigurationid - the use case configuration id of layout of current booking component.

Accept (body): application/json the metadata of booking layout in Vidicore format

Produce (output): application/json the resulting metadata to be reloaded back to booking layout after manipulation/generation of metadata value. (Vidicore format)

Below is an example of API for generation of Metadata.

CODE

/// <summary>
///  A Http POST request with route of your choice.
/// </summary>
/// <param name="usecaseconfigurationid">Booking component will send the usecase id of the layout as query parameter</param>
/// <param name="metadata">Booking component will send the Metadata (vidispine format) as body of this POST request</param>
/// <returns></returns>
[HttpPost("/api/autogenerate")]
public async Task<IActionResult> AutoGenerateMetadataAsync(
   string usecaseconfigurationid,
   [FromBody]MetadataDocument metadata)
{
    var field = metadata.Timespan[0].Field.Where(f => f.Name == "V3_autogen").FirstOrDefault();
    
    // Perform any Metadata manipulation here. Add/Edit/Delete any metadata field before returning it to booking layout
    //....
    
    return Ok(metadata);
}

You can define the model “MetadataDocument“ base on Vidispine documentation or you could also use the model already define in nuget package “Platform.Integrations.Vidispine.ApiClient“ and class “Platform.Vidispine.ApiClient.Model.Metadata.MetadataDocument“