From e241f16a1c4ab993863d71b35726404dd6e40811 Mon Sep 17 00:00:00 2001
From: Alex Jennings <alexjennings@users.noreply.github.com>
Date: Mon, 10 Nov 2025 10:31:51 +0000
Subject: [PATCH] WIP export template

---
 .../exporttemplate/ExportTemplateDialog.jsx   |  43 +++
 .../exporttemplate/ExportTemplateForm.jsx     | 331 ++++++++++++++++++
 src/containers/ExportTemplateList.jsx         |  84 +++++
 src/formactions/exporttemplate.js             |  33 ++
 4 files changed, 491 insertions(+)
 create mode 100644 src/components/exporttemplate/ExportTemplateDialog.jsx
 create mode 100644 src/components/exporttemplate/ExportTemplateForm.jsx
 create mode 100644 src/containers/ExportTemplateList.jsx
 create mode 100644 src/formactions/exporttemplate.js

diff --git a/src/components/exporttemplate/ExportTemplateDialog.jsx b/src/components/exporttemplate/ExportTemplateDialog.jsx
new file mode 100644
index 0000000..ca442a8
--- /dev/null
+++ b/src/components/exporttemplate/ExportTemplateDialog.jsx
@@ -0,0 +1,43 @@
+import Dialog from '@material-ui/core/Dialog';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { compose } from 'redux';
+
+import * as formActions from '../../formactions/exporttemplate';
+import withUI from '../../hoc/withUI';
+import DialogContent from '../ui/DialogContent';
+import WizardForm from '../ui/WizardForm';
+
+import ExportTemplateForm from './ExportTemplateForm';
+
+function ExportTemplateDialog({ templateName, open, onClose, onSuccess, openSnackBar, onFail }) {
+  const onSubmitSuccess = (response, dispatch, props) => {
+    const { locationName } = response;
+    const messageContent = `Export Location ${locationName} Created`;
+    openSnackBar({ messageContent });
+    onClose();
+    if (onSuccess) onSuccess(response, dispatch, props);
+  };
+  const onSubmitFail = (error, dispatch, props) => {
+    const messageContent = 'Error Creating Export Template';
+    openSnackBar({ messageContent, messageColor: 'secondary' });
+    if (onFail) onSuccess(error, dispatch, props);
+  };
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth={false}>
+      <DialogTitle>New Export Template</DialogTitle>
+      <DialogContent>
+        <WizardForm
+          FormComponent={ExportTemplateForm}
+          documentName="exportLocationDocument"
+          onSubmit={formActions.onUpdateExportTemplate}
+          onSubmitSuccess={onSubmitSuccess}
+          onSubmitFail={onSubmitFail}
+          onCancel={onClose}
+          templateName={templateName}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default compose(withUI)(ExportTemplateDialog);
diff --git a/src/components/exporttemplate/ExportTemplateForm.jsx b/src/components/exporttemplate/ExportTemplateForm.jsx
new file mode 100644
index 0000000..93e3c5b
--- /dev/null
+++ b/src/components/exporttemplate/ExportTemplateForm.jsx
@@ -0,0 +1,331 @@
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Typography from '@material-ui/core/Typography';
+import { reduxForm } from 'redux-form';
+
+import { required } from '../../utils/FieldValidation';
+import { TextField } from '../form';
+import { loadShapeTagOptions } from '../shapetag/ShapeTagSelect';
+import BoolCheckbox from '../ui/BoolCheckbox';
+import ChipInput from '../ui/ChipInput';
+import CodeField from '../ui/CodeField';
+import Field from '../ui/Field';
+import FieldArray from '../ui/FieldArray';
+import FormSection from '../ui/FormSection';
+import { StatefulAsyncSelect } from '../ui/Select';
+
+const ExportTemplateArchiveType = ['ZIP', 'TAR'].map((value) => ({ value, label: value }));
+const ExportTemplateCompressType = ['GZ', 'BZIP2'].map((value) => ({ value, label: value }));
+
+function ExportTemplateArchive() {
+  return (
+    <>
+      <Field
+        name="method"
+        label="Method"
+        component={StatefulAsyncSelect}
+        isClearable
+        fullWidth
+        isMulti
+        options={ExportTemplateArchiveType}
+        creatable
+      />
+
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateCollection() {
+  return (
+    <>
+      <Field name="collectionId" label="collectionId" component={TextField} fullWidth />
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateItem() {
+  return (
+    <>
+      <Field name="itemId" label="itemId" component={TextField} fullWidth />
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateComponent() {
+  return <ExportTemplateType />;
+}
+
+function ExportTemplateComponentFile() {
+  return <ExportTemplateType />;
+}
+
+function ExportTemplateCompress() {
+  return (
+    <>
+      <Field
+        name="method"
+        label="Method"
+        component={StatefulAsyncSelect}
+        isClearable
+        fullWidth
+        isMulti
+        options={ExportTemplateCompressType}
+        creatable
+      />
+
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateDummy() {
+  return <ExportTemplateType />;
+}
+
+function ExportTemplateExternal() {
+  return (
+    <>
+      <Field name="uri" label="uri" component={ChipInput} simple fullWidth />
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateFolder() {
+  return <ExportTemplateType />;
+}
+
+function ExportTemplateTextContent() {
+  return (
+    <>
+      <FieldArray
+        name="exportTemplateChoiceGroup"
+        label="Export Template Choice Group"
+        // eslint-disable-next-line no-use-before-define
+        component={ExportTemplateChoiceGroup}
+      />
+      <FormControlLabel
+        control={<Field name="scripttags" component={BoolCheckbox} />}
+        label="scripttags"
+      />
+    </>
+  );
+}
+
+function ExportTemplateIterate() {
+  return (
+    <>
+      <Field
+        name="value"
+        label="value"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/javascript',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateLibrary() {
+  return (
+    <>
+      <Field name="libraryId" label="libraryId" component={TextField} fullWidth />
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateSequence() {
+  return (
+    <>
+      <FormSection name="document" component={ExportTemplateTextContent} />
+
+      <FormControlLabel
+        control={<Field name="generate" component={BoolCheckbox} />}
+        label="generate"
+      />
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateShape() {
+  return (
+    <>
+      <Field
+        name="shapeTag"
+        label="shapeTag"
+        component={StatefulAsyncSelect}
+        loadOptions={loadShapeTagOptions}
+        cacheOptions
+        isClearable
+        fullWidth
+        isMulti
+        creatable
+      />
+      <FormControlLabel
+        control={<Field name="generate" component={BoolCheckbox} />}
+        label="generate"
+      />
+    </>
+  );
+}
+
+function ExportTemplateText() {
+  return (
+    <>
+      <FormSection name="content" component={ExportTemplateTextContent} />
+      <Field
+        name="xslt"
+        label="xslt"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/xml',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+      <Field
+        name="script"
+        label="script"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/javascript',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+
+      <Field
+        name="xml"
+        label="xml"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/xml',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+      <ExportTemplateType />
+    </>
+  );
+}
+
+function ExportTemplateChoiceGroup() {
+  return (
+    <>
+      <FieldArray name="archive" label="archive" component={ExportTemplateArchive} />
+      <FieldArray name="collection" label="collection" component={ExportTemplateCollection} />
+      <FieldArray name="component" label="component" component={ExportTemplateComponent} />
+      <FieldArray
+        name="componentfile"
+        label="componentfile"
+        component={ExportTemplateComponentFile}
+      />
+      <FieldArray name="compress" label="compress" component={ExportTemplateCompress} />
+      <FieldArray name="dummy" label="dummy" component={ExportTemplateDummy} />
+      <FieldArray name="external" label="external" component={ExportTemplateExternal} />
+      <FieldArray name="folder" label="folder" component={ExportTemplateFolder} />
+      <FieldArray name="item" label="item" component={ExportTemplateItem} />
+      <FieldArray name="iterate" label="iterate" component={ExportTemplateIterate} />
+      <FieldArray name="library" label="library" component={ExportTemplateLibrary} />
+      <FieldArray name="sequence" label="sequence" component={ExportTemplateSequence} />
+      <FieldArray name="shape" label="shape" component={ExportTemplateShape} />
+      <FieldArray name="text" label="text" component={ExportTemplateText} />
+
+      <Field name="path" label="Path" component={TextField} fullWidth />
+    </>
+  );
+}
+
+function ExportTemplateType() {
+  return (
+    <>
+      <FieldArray
+        name="exportTemplateChoiceGroup"
+        label="Export Template Choice Group"
+        component={ExportTemplateChoiceGroup}
+      />
+      <Field
+        name="tag"
+        label="Tag"
+        component={StatefulAsyncSelect}
+        loadOptions={loadShapeTagOptions}
+        cacheOptions
+        isClearable
+        fullWidth
+        isMulti
+        creatable
+      />
+      <Field name="dependency" label="Dependency" component={ChipInput} simple fullWidth />
+      <Field name="filter" label="Filter" component={TextField} fullWidth />
+      <Field
+        name="filter"
+        label="Filter"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/javascript',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+
+      <Field
+        name="pre"
+        label="Pre"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/javascript',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+      <Field
+        name="preRender"
+        label="preRender"
+        component={CodeField}
+        options={{
+          theme: 'material',
+          mode: 'application/javascript',
+          lineWrapping: true,
+          lineNumbers: true,
+        }}
+      />
+    </>
+  );
+}
+
+function ExportTemplateForm({ templateName, error, handleSubmit }) {
+  return (
+    <form onSubmit={handleSubmit}>
+      {error && <Typography color="error">{error}</Typography>}
+      {!templateName && (
+        <Field
+          name="templateName"
+          label="Template Name"
+          component={TextField}
+          validate={[required]}
+          fullWidth
+        />
+      )}
+
+      <FormSection name="exportTemplateDocument" component={ExportTemplateType} />
+      <button type="submit" hidden />
+    </form>
+  );
+}
+
+export default reduxForm()(ExportTemplateForm);
diff --git a/src/containers/ExportTemplateList.jsx b/src/containers/ExportTemplateList.jsx
new file mode 100644
index 0000000..c4d11cb
--- /dev/null
+++ b/src/containers/ExportTemplateList.jsx
@@ -0,0 +1,84 @@
+import { PureComponent } from 'react';
+
+import { compose } from 'redux';
+
+import { exportlocation as api } from '@vidispine/vdt-api';
+
+import ExportLocationDialog from '../components/exportlocation/ExportLocationDialog';
+import TitleHeader from '../components/ui/TitleHeader';
+import UriListCard from '../components/ui/UriListCard';
+import withUI from '../hoc/withSnackbar';
+
+const EXPORTTEMPLATE_CREATE_MODAL = 'EXPORTTEMPLATE_CREATE_MODAL';
+
+class ExportTemplateList extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.onRefresh = this.onRefresh.bind(this);
+    this.onRefreshError = this.onRefreshError.bind(this);
+    this.state = {
+      uriListDocument: undefined,
+    };
+  }
+
+  componentDidMount() {
+    this.onRefresh();
+    document.title = 'VidiCore Admin | Export Template';
+  }
+
+  onRefresh() {
+    try {
+      api
+        .getConfiguration()
+        .then((response) => this.setState({ uriListDocument: response.data }))
+        .catch((error) => this.onRefreshError(error));
+    } catch (error) {
+      this.onRefreshError(error);
+    }
+  }
+
+  onRefreshError() {
+    const { openSnackBar } = this.props;
+    const messageContent = 'Error Loading Export Templates';
+    openSnackBar({ messageContent, messageColor: 'secondary' });
+  }
+
+  render() {
+    const { uriListDocument } = this.state;
+    const { history } = this.props;
+
+    return (
+      <>
+        <TitleHeader
+          title="Export Template"
+          helpTo="/item/export-templates.html"
+          createModal={EXPORTTEMPLATE_CREATE_MODAL}
+          onRefresh={this.onRefresh}
+          code={uriListDocument}
+          codeModal="URIListDocument"
+          menuList={[
+            {
+              label: 'Create Export Template',
+              modalName: EXPORTTEMPLATE_CREATE_MODAL,
+            },
+          ]}
+        />
+        {uriListDocument && (
+          <UriListCard
+            uriListDocument={uriListDocument}
+            linkTo={(uri) => `/export-template/${uri}/`}
+            titleCase
+          />
+        )}
+        <ExportLocationDialog
+          dialogName={EXPORTTEMPLATE_CREATE_MODAL}
+          onSuccess={(exportTemplate) => {
+            history.push(`/export-template/${exportTemplate}`);
+          }}
+        />
+      </>
+    );
+  }
+}
+
+export default compose(withUI)(ExportTemplateList);
diff --git a/src/formactions/exporttemplate.js b/src/formactions/exporttemplate.js
new file mode 100644
index 0000000..2d1fded
--- /dev/null
+++ b/src/formactions/exporttemplate.js
@@ -0,0 +1,33 @@
+import { exporttemplate as ExportTemplateApi } from '@vidispine/vdt-api';
+
+import withSubmissionError from './withSubmissionError';
+
+export const onListExportTemplate = withSubmissionError((form) => {
+  const { queryParams } = form;
+  return ExportTemplateApi.listExportTemplate({
+    queryParams,
+  });
+});
+
+export const onUpdateExportTemplate = withSubmissionError((form, dispatch, props) => {
+  const { exportTemplateDocument } = form;
+  const templateName = props.templateName || form.templateName;
+  return ExportTemplateApi.updateExportTemplate({
+    templateName,
+    exportTemplateDocument,
+  });
+});
+
+export const onTestExportTemplate = withSubmissionError((form) => {
+  const { queryParams } = form;
+  return ExportTemplateApi.createExportTemplateTest({
+    queryParams,
+  });
+});
+
+export const onRenderExportTemplate = withSubmissionError((form) => {
+  const { queryParams } = form;
+  return ExportTemplateApi.createExportTemplateTestRender({
+    queryParams,
+  });
+});