127 lines
3.4 KiB
TypeScript
127 lines
3.4 KiB
TypeScript
import {
|
|
Field,
|
|
FieldLabel,
|
|
Help,
|
|
Line,
|
|
TextInput,
|
|
} from "@contentstack/venus-components"
|
|
import { ChangeEvent, useState } from "react"
|
|
import { ImageVaultDAMConfig } from "~/utils/imagevault"
|
|
|
|
import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types"
|
|
|
|
export type ConfigFormProps = {
|
|
values: Partial<ImageVaultDAMConfig>
|
|
setInstallationData: (data: IInstallationData) => void
|
|
}
|
|
|
|
export default function ConfigForm({
|
|
values,
|
|
setInstallationData,
|
|
}: ConfigFormProps) {
|
|
const [finalValues, setFinalValues] = useState(values)
|
|
|
|
return (
|
|
<div style={{ display: "grid", gap: "18px", margin: "18px" }}>
|
|
<Field style={{}}>
|
|
<FieldLabel version="v2" htmlFor="baseUrl">
|
|
Base url for contentstack
|
|
</FieldLabel>
|
|
<Help text="Including the region. Used as publishing source on ImageVault" />
|
|
<TextInput
|
|
id="baseUrl"
|
|
name="baseUrl"
|
|
type="url"
|
|
value={finalValues.baseUrl}
|
|
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
|
|
setFinalValues((prev) => ({
|
|
...prev,
|
|
baseUrl: evt.target.value,
|
|
}))
|
|
|
|
setInstallationData({
|
|
configuration: {
|
|
...finalValues,
|
|
baseUrl: evt.target.value,
|
|
},
|
|
serverConfiguration: {},
|
|
})
|
|
}}
|
|
required={true}
|
|
willBlurOnEsc={true}
|
|
placeholder="Base url for Contentstack....."
|
|
version="v2"
|
|
width="large"
|
|
/>
|
|
</Field>
|
|
|
|
<Line type="dashed" />
|
|
|
|
<Field>
|
|
<FieldLabel version="v2" htmlFor="formatId">
|
|
Format Id for images
|
|
</FieldLabel>
|
|
<Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
|
|
<TextInput
|
|
id="formatId"
|
|
name="formatId"
|
|
type="number"
|
|
value={finalValues?.formatId}
|
|
required={true}
|
|
willBlurOnEsc={true}
|
|
placeholder="Id for selected format..."
|
|
version="v2"
|
|
width="large"
|
|
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
|
|
setFinalValues((prev) => ({
|
|
...prev,
|
|
formatId: evt.target.value,
|
|
}))
|
|
|
|
setInstallationData({
|
|
configuration: {
|
|
...finalValues,
|
|
formatId: evt.target.value,
|
|
},
|
|
serverConfiguration: {},
|
|
})
|
|
}}
|
|
/>
|
|
</Field>
|
|
|
|
<Line type="dashed" />
|
|
|
|
<Field>
|
|
<FieldLabel version="v2" htmlFor="v">
|
|
Url to ImageVault
|
|
</FieldLabel>
|
|
<TextInput
|
|
id="imageVaultUrl"
|
|
name="imageVaultUrl"
|
|
type="url"
|
|
value={finalValues.imageVaultUrl}
|
|
required={true}
|
|
willBlurOnEsc={true}
|
|
placeholder="www..."
|
|
version="v2"
|
|
width="large"
|
|
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
|
|
setFinalValues((prev) => ({
|
|
...prev,
|
|
imageVaultUrl: evt.target.value,
|
|
}))
|
|
|
|
setInstallationData({
|
|
configuration: {
|
|
...finalValues,
|
|
imageVaultUrl: evt.target.value,
|
|
},
|
|
serverConfiguration: {},
|
|
})
|
|
}}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
)
|
|
}
|