Skip to content

Commit

Permalink
Add DamFileDownloadLinkBlock (#1228)
Browse files Browse the repository at this point in the history
Can be used to download a DAM file or open it in a new tab.

---------

Co-authored-by: Florian Ragger <florian.ragger@vivid-planet.com>
Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
  • Loading branch information
3 people committed Jun 5, 2024
1 parent 0597b1e commit 3ee8c7a
Show file tree
Hide file tree
Showing 15 changed files with 508 additions and 7 deletions.
9 changes: 9 additions & 0 deletions .changeset/green-years-drum.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@comet/cms-admin": minor
"@comet/cms-site": minor
"@comet/cms-api": minor
---

Add a `DamFileDownloadLinkBlock` that can be used to download a file or open it in a new tab

Also, add new `/dam/files/download/:hash/:fileId/:filename` endpoint for downloading assets.
9 changes: 7 additions & 2 deletions demo/admin/src/common/blocks/LinkBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { createLinkBlock, ExternalLinkBlock, InternalLinkBlock } from "@comet/cms-admin";
import { createLinkBlock, DamFileDownloadLinkBlock, ExternalLinkBlock, InternalLinkBlock } from "@comet/cms-admin";
import { NewsLinkBlock } from "@src/news/blocks/NewsLinkBlock";

export const LinkBlock = createLinkBlock({
supportedBlocks: { internal: InternalLinkBlock, external: ExternalLinkBlock, news: NewsLinkBlock },
supportedBlocks: {
internal: InternalLinkBlock,
external: ExternalLinkBlock,
news: NewsLinkBlock,
damFileDownload: DamFileDownloadLinkBlock,
},
});
60 changes: 58 additions & 2 deletions demo/api/block-meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,60 @@
}
]
},
{
"name": "DamFileDownloadLink",
"fields": [
{
"name": "file",
"kind": "NestedObject",
"object": {
"fields": [
{
"name": "id",
"kind": "String",
"nullable": false
},
{
"name": "name",
"kind": "String",
"nullable": false
},
{
"name": "fileUrl",
"kind": "String",
"nullable": false
}
]
},
"nullable": true
},
{
"name": "openFileType",
"kind": "Enum",
"enum": [
"NewTab",
"Download"
],
"nullable": false
}
],
"inputFields": [
{
"name": "fileId",
"kind": "String",
"nullable": true
},
{
"name": "openFileType",
"kind": "Enum",
"enum": [
"NewTab",
"Download"
],
"nullable": false
}
]
},
{
"name": "DamImage",
"fields": [
Expand Down Expand Up @@ -741,7 +795,8 @@
"blocks": {
"internal": "InternalLink",
"external": "ExternalLink",
"news": "NewsLink"
"news": "NewsLink",
"damFileDownload": "DamFileDownloadLink"
},
"nullable": false
}
Expand Down Expand Up @@ -770,7 +825,8 @@
"blocks": {
"internal": "InternalLink",
"external": "ExternalLink",
"news": "NewsLink"
"news": "NewsLink",
"damFileDownload": "DamFileDownloadLink"
},
"nullable": false
}
Expand Down
6 changes: 4 additions & 2 deletions demo/api/src/common/blocks/linkBlock/link.block.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { ExternalLinkBlock } from "@comet/blocks-api";
import { createLinkBlock, InternalLinkBlock } from "@comet/cms-api";
import { createLinkBlock, DamFileDownloadLinkBlock, InternalLinkBlock } from "@comet/cms-api";
import { NewsLinkBlock } from "@src/news/blocks/news-link.block";

export const LinkBlock = createLinkBlock({ supportedBlocks: { internal: InternalLinkBlock, external: ExternalLinkBlock, news: NewsLinkBlock } });
export const LinkBlock = createLinkBlock({
supportedBlocks: { internal: InternalLinkBlock, external: ExternalLinkBlock, news: NewsLinkBlock, damFileDownload: DamFileDownloadLinkBlock },
});
15 changes: 14 additions & 1 deletion demo/site/src/blocks/LinkBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
import { ExternalLinkBlock, InternalLinkBlock, OneOfBlock, PropsWithData, SupportedBlocks, withPreview } from "@comet/cms-site";
import {
DamFileDownloadLinkBlock,
ExternalLinkBlock,
InternalLinkBlock,
OneOfBlock,
PropsWithData,
SupportedBlocks,
withPreview,
} from "@comet/cms-site";
import { LinkBlockData } from "@src/blocks.generated";
import { NewsLinkBlock } from "@src/news/blocks/NewsLinkBlock";
import * as React from "react";
Expand All @@ -19,6 +27,11 @@ const supportedBlocks: SupportedBlocks = {
{children}
</NewsLinkBlock>
),
damFileDownload: ({ children, title, ...props }) => (
<DamFileDownloadLinkBlock data={props} title={title}>
{children}
</DamFileDownloadLinkBlock>
),
};

interface LinkBlockProps extends PropsWithData<LinkBlockData> {
Expand Down
1 change: 1 addition & 0 deletions packages/admin/admin/src/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,5 @@ export const messages = defineMessages({
filter: { id: "comet.generic.filter", defaultMessage: "Filter" },
copyUrl: { id: "comet.generic.copyUrl", defaultMessage: "Copy URL" },
deleteItem: { id: "comet.generic.deleteItem", defaultMessage: "Delete Item" },
empty: { id: "comet.generic.empty", defaultMessage: "Empty" },
});
130 changes: 130 additions & 0 deletions packages/admin/cms-admin/src/dam/blocks/DamFileDownloadLinkBlock.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import { gql } from "@apollo/client";
import { Field, FinalFormSelect, messages } from "@comet/admin";
import { Delete } from "@comet/admin-icons";
import { AdminComponentButton, AdminComponentPaper, BlockCategory, BlockInterface, BlocksFinalForm, createBlockSkeleton } from "@comet/blocks-admin";
import { Box, Divider, MenuItem, Typography } from "@mui/material";
import * as React from "react";
import { FormattedMessage } from "react-intl";

import { DamFileDownloadLinkBlockData, DamFileDownloadLinkBlockInput } from "../../blocks.generated";
import { CmsBlockContext } from "../../blocks/CmsBlockContextProvider";
import { DamPathLazy } from "../../form/file/DamPathLazy";
import { FileField } from "../../form/file/FileField";
import { GQLDamFileDownloadLinkFileQuery, GQLDamFileDownloadLinkFileQueryVariables } from "./DamFileDownloadLinkBlock.generated";

export const DamFileDownloadLinkBlock: BlockInterface<DamFileDownloadLinkBlockData, DamFileDownloadLinkBlockData, DamFileDownloadLinkBlockInput> = {
...createBlockSkeleton(),

name: "DamFileDownloadLink",

displayName: <FormattedMessage id="comet.blocks.damFileDownloadLink" defaultMessage="CMS Asset" />,

previewContent: (state) => (state.file ? [{ type: "text", content: state.file?.name }] : []),

category: BlockCategory.Media,

defaultValues: () => ({
openFileType: "Download",
}),

state2Output: (state) => ({
fileId: state.file?.id ?? undefined,
openFileType: state.openFileType,
}),

output2State: async (output, { apolloClient }: CmsBlockContext): Promise<DamFileDownloadLinkBlockData> => {
const ret: DamFileDownloadLinkBlockData = {
openFileType: output.openFileType,
};

if (output.fileId === undefined) {
return ret;
}

const { data } = await apolloClient.query<GQLDamFileDownloadLinkFileQuery, GQLDamFileDownloadLinkFileQueryVariables>({
query: gql`
query DamFileDownloadLinkFile($id: ID!) {
damFile(id: $id) {
id
name
fileUrl
}
}
`,
variables: { id: output.fileId },
});

const { damFile } = data;

ret.file = {
id: damFile.id,
name: damFile.name,
fileUrl: damFile.fileUrl,
};

return ret;
},

definesOwnPadding: true,

AdminComponent: ({ state, updateState }) => {
return (
<BlocksFinalForm<{
openFileType: DamFileDownloadLinkBlockData["openFileType"];
file?: DamFileDownloadLinkBlockData["file"];
}>
onSubmit={(newValues) => {
updateState({
file: newValues.file ?? undefined,
openFileType: newValues.openFileType,
});
}}
initialValues={{
file: state.file,
openFileType: state.openFileType ?? "Download",
}}
>
{state.file === undefined ? (
<Field name="file" component={FileField} fullWidth />
) : (
<AdminComponentPaper disablePadding>
<Box padding={3}>
<Typography variant="subtitle1">{state.file.name}</Typography>
<Typography variant="body1" color="textSecondary">
<DamPathLazy fileId={state.file.id} />
</Typography>
</Box>
<Divider />
<AdminComponentButton startIcon={<Delete />} onClick={() => updateState({ ...state, file: undefined })}>
<FormattedMessage {...messages.empty} />
</AdminComponentButton>
</AdminComponentPaper>
)}
<Divider />
<AdminComponentPaper>
<Field
name="openFileType"
fullWidth
label={<FormattedMessage id="comet.blocks.damFileDownloadLink.openFileType" defaultMessage="Open file" />}
>
{(props) => (
<>
<FinalFormSelect {...props}>
<MenuItem value="Download">
<FormattedMessage
id="comet.blocks.damFileDownloadLink.openFileType.download"
defaultMessage="as a download"
/>
</MenuItem>
<MenuItem value="NewTab">
<FormattedMessage id="comet.blocks.damFileDownloadLink.openFileType.newTab" defaultMessage="in a new tab" />
</MenuItem>
</FinalFormSelect>
</>
)}
</Field>
</AdminComponentPaper>
</BlocksFinalForm>
);
},
};
1 change: 1 addition & 0 deletions packages/admin/cms-admin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export type { ContentScopeConfigProps } from "./contentScope/useContentScopeConf
export { useContentScopeConfig } from "./contentScope/useContentScopeConfig";
export { CronJobsPage } from "./cronJobs/CronJobsPage";
export { JobRuntime } from "./cronJobs/JobRuntime";
export { DamFileDownloadLinkBlock } from "./dam/blocks/DamFileDownloadLinkBlock";
export { DamImageBlock } from "./dam/blocks/DamImageBlock";
export { DamConfigProvider } from "./dam/config/DamConfigProvider";
export { damDefaultAcceptedMimeTypes } from "./dam/config/damDefaultAcceptedMimeTypes";
Expand Down
54 changes: 54 additions & 0 deletions packages/api/cms-api/block-meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,60 @@
}
]
},
{
"name": "DamFileDownloadLink",
"fields": [
{
"name": "file",
"kind": "NestedObject",
"object": {
"fields": [
{
"name": "id",
"kind": "String",
"nullable": false
},
{
"name": "name",
"kind": "String",
"nullable": false
},
{
"name": "fileUrl",
"kind": "String",
"nullable": false
}
]
},
"nullable": true
},
{
"name": "openFileType",
"kind": "Enum",
"enum": [
"NewTab",
"Download"
],
"nullable": false
}
],
"inputFields": [
{
"name": "fileId",
"kind": "String",
"nullable": true
},
{
"name": "openFileType",
"kind": "Enum",
"enum": [
"NewTab",
"Download"
],
"nullable": false
}
]
},
{
"name": "DamImage",
"fields": [
Expand Down
Loading

0 comments on commit 3ee8c7a

Please sign in to comment.