Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Add field to choose if resource images can be opened in a new tab #675

Merged
merged 1 commit into from
Nov 5, 2024
Merged

feat: Add field to choose if resource images can be opened in a new tab #675

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button } from '@/components/ui/button';
import {
Form, FormControl,
Form, FormControl, FormDescription,
FormField,
FormItem,
FormLabel,
Expand Down Expand Up @@ -34,6 +34,7 @@ const formSchema = z.object({
displayDocuments: z.boolean(),
documentsTitle: z.string().optional(),
documentsDesc: z.string().optional(),
clickableImage: z.boolean(),
});

export default function WidgetResourceDetailDisplay(
Expand Down Expand Up @@ -66,6 +67,7 @@ export default function WidgetResourceDetailDisplay(
displayStatus: undefinedToTrueOrProp(props?.displayStatus),
displayLikes: undefinedToTrueOrProp(props?.displayLikes),
displayDocuments: undefinedToTrueOrProp(props?.displayDocuments),
clickableImage: props?.clickableImage || false,
documentsTitle: props?.documentsTitle || '',
documentsDesc: props?.documentsDesc || '',
},
Expand Down Expand Up @@ -228,6 +230,23 @@ export default function WidgetResourceDetailDisplay(
)}
/>

<FormField
control={form.control}
name="clickableImage"
render={({ field }) => (
<FormItem>
<FormLabel>
Moet de afbeelding in de dialog klikbaar zijn?
</FormLabel>
<FormDescription>
Als je dit aanvinkt, wordt de afbeelding in de dialog klikbaar en wordt de afbeelding geopend in een nieuw tabblad.
</FormDescription>
{YesNoSelect(field, props)}
<FormMessage />
</FormItem>
)}
/>

<FormField
control={form.control}
name="displayDocuments"
Expand Down
20 changes: 20 additions & 0 deletions apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Button } from '@/components/ui/button';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
Expand Down Expand Up @@ -44,6 +45,7 @@ const formSchema = z.object({
applyText: z.string().optional(),
resetText: z.string().optional(),
displayLikeButton: z.boolean(),
clickableImage: z.boolean(),
// displayRanking: z.boolean(),
// displayLabel: z.boolean(),
// displayShareButtons: z.boolean(),
Expand Down Expand Up @@ -84,6 +86,7 @@ export default function WidgetResourceOverviewDisplay(
applyText: props?.applyText || 'Toepassen',
resetText: props?.resetText || 'Reset',
displayLikeButton: props?.displayLikeButton || false,
clickableImage: props?.clickableImage || false,
// displayRanking: props?.displayRanking || false,
// displayLabel: props?.displayLabel || false,
// displayShareButtons: props?.displayShareButtons || false,
Expand Down Expand Up @@ -516,6 +519,23 @@ export default function WidgetResourceOverviewDisplay(
)}
/>

<FormField
control={form.control}
name="clickableImage"
render={({ field }) => (
<FormItem>
<FormLabel>
Moet de afbeelding in de dialog klikbaar zijn?
</FormLabel>
<FormDescription>
Als je dit aanvinkt, wordt de afbeelding in de dialog klikbaar en wordt de afbeelding geopend in een nieuw tabblad.
</FormDescription>
{YesNoSelect(field, props)}
<FormMessage />
</FormItem>
)}
/>

<Button className="w-fit col-span-full" type="submit">
Opslaan
</Button>
Expand Down
180 changes: 92 additions & 88 deletions apps/admin-server/src/pages/projects/[project]/widgets/resourceoverview/[id]/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,95 +120,99 @@ export default function WidgetResourceOverviewGeneral(
)}
/>

<FormField
control={form.control}
name="itemLink"
render={({ field }) => (
<FormItem>
<FormLabel>
Link (relatief) naar de specifieke inzending
</FormLabel>
<FormControl>
<Input
placeholder="Bijv: /resources/[id]"
type="text"
{...field}
onChange={(e) => {
onFieldChange(field.name, e.target.value);
field.onChange(e);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{ form.watch('displayType') === 'cardrow' && (
<FormField
control={form.control}
name="itemLink"
render={({ field }) => (
<FormItem>
<FormLabel>
Link (relatief) naar de specifieke inzending
</FormLabel>
<FormControl>
<Input
placeholder="Bijv: /resources/[id]"
type="text"
{...field}
onChange={(e) => {
onFieldChange(field.name, e.target.value);
field.onChange(e);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}

<FormField
control={form.control}
name="rawInput"
render={({ field }) => (
<FormItem className="col-span-full">
<FormLabel>
Template voor display: &quot; Creëer je eigen template.&quot;
</FormLabel>
<div className="text-xs pb-4">
<h2>Te gebruiken variabelen:</h2>
<ul className="list-disc">
<li className="ml-4">{`{{projectId}}`}</li>
<li className="ml-4">{`{{user}} -> Bijvoorbeeld {{user.name}}`}</li>
<li className="ml-4">{`{{startDateHumanized}}`}</li>
<li className="ml-4">{`{{status}}`}</li>
<li className="ml-4">{`{{title}}`}</li>
<li className="ml-4">{`{{summary}}`}</li>
<li className="ml-4">{`{{description}}`}</li>
<li className="ml-4">{`{{images}} -> Bijvoorbeeld {{images[nummer].src}}`}</li>
<li className="ml-4">{`{{budget}}`}</li>
<li className="ml-4">{`{{extraData}}`}</li>
<li className="ml-4">{`{{location}}`}</li>
<li className="ml-4">{`{{modBreak}}`}</li>
<li className="ml-4">{`{{modBreakDateHumanized}}`}</li>
<li className="ml-4">{`{{progress}}`}</li>
<li className="ml-4">{`{{createDateHumanized}}`}</li>
<li className="ml-4">{`{{publishDateHumanized}}`}</li>
<li className="ml-4">{`{{resource}} -> Bevat alle data van de resource`}</li>
</ul>
<br/>
<h2>Te gebruiken filters:</h2>
<ul className="list-disc">
<li className="ml-4">{`{{ variable | dump }}: Laat de inhoud van een object zien.`}</li>
<li
className="ml-4">{`{{ variable | cleanArray }}: Maakt van een lijst een tekst met de waardes gescheiden door komma's. Bijvoorbeeld: "['Optie 1', 'Optie 2']" wordt omgezet naar: Optie 1, Optie 2`}</li>
<li
className="ml-4">{`{{ variable | capitalize }}: Zet de eerste letter in hoofdletters.`}</li>
<li
className="ml-4">{`{{ variable | truncate(10) }}: Kort een tekst in tot de opgegeven lengte. Na deze lengte wordt er '...' toegevoegd.`}</li>
<li className="ml-4">{`{{ variable | lowercase }}: Zet een tekst om naar kleine letters.`}</li>
<li className="ml-4">{`{{ variable | uppercase }}: Zet een tekst om naar hoofdletters.`}</li>
<li
className="ml-4">{`{{ variable | replace('zoek', 'vervang') }}: Vervangt een deel van de tekst door iets anders.`}</li>
</ul>
<br/>
<h2>Overige functies:</h2>
<ul className="list-disc">
<li className="ml-4">{`{{ resource | tags }}: Laat alle gekoppelde tags zien gescheiden met komma's`}</li>
<li className="ml-4">{`{{ resource | status }}: Laat alle gekoppelde statussen zien gescheiden met komma's`}</li>
</ul>
</div>
<FormControl>
<Textarea
rows={5}
{...field}
onChange={(e) => {
field.onChange(e);
onFieldChange(field.name, e.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{ form.watch('displayType') === 'raw' && (
<FormField
control={form.control}
name="rawInput"
render={({ field }) => (
<FormItem className="col-span-full">
<FormLabel>
Template voor display: &quot; Creëer je eigen template.&quot;
</FormLabel>
<div className="text-xs pb-4">
<h2>Te gebruiken variabelen:</h2>
<ul className="list-disc">
<li className="ml-4">{`{{projectId}}`}</li>
<li className="ml-4">{`{{user}} -> Bijvoorbeeld {{user.name}}`}</li>
<li className="ml-4">{`{{startDateHumanized}}`}</li>
<li className="ml-4">{`{{status}}`}</li>
<li className="ml-4">{`{{title}}`}</li>
<li className="ml-4">{`{{summary}}`}</li>
<li className="ml-4">{`{{description}}`}</li>
<li className="ml-4">{`{{images}} -> Bijvoorbeeld {{images[nummer].src}}`}</li>
<li className="ml-4">{`{{budget}}`}</li>
<li className="ml-4">{`{{extraData}}`}</li>
<li className="ml-4">{`{{location}}`}</li>
<li className="ml-4">{`{{modBreak}}`}</li>
<li className="ml-4">{`{{modBreakDateHumanized}}`}</li>
<li className="ml-4">{`{{progress}}`}</li>
<li className="ml-4">{`{{createDateHumanized}}`}</li>
<li className="ml-4">{`{{publishDateHumanized}}`}</li>
<li className="ml-4">{`{{resource}} -> Bevat alle data van de resource`}</li>
</ul>
<br/>
<h2>Te gebruiken filters:</h2>
<ul className="list-disc">
<li className="ml-4">{`{{ variable | dump }}: Laat de inhoud van een object zien.`}</li>
<li
className="ml-4">{`{{ variable | cleanArray }}: Maakt van een lijst een tekst met de waardes gescheiden door komma's. Bijvoorbeeld: "['Optie 1', 'Optie 2']" wordt omgezet naar: Optie 1, Optie 2`}</li>
<li
className="ml-4">{`{{ variable | capitalize }}: Zet de eerste letter in hoofdletters.`}</li>
<li
className="ml-4">{`{{ variable | truncate(10) }}: Kort een tekst in tot de opgegeven lengte. Na deze lengte wordt er '...' toegevoegd.`}</li>
<li className="ml-4">{`{{ variable | lowercase }}: Zet een tekst om naar kleine letters.`}</li>
<li className="ml-4">{`{{ variable | uppercase }}: Zet een tekst om naar hoofdletters.`}</li>
<li
className="ml-4">{`{{ variable | replace('zoek', 'vervang') }}: Vervangt een deel van de tekst door iets anders.`}</li>
</ul>
<br/>
<h2>Overige functies:</h2>
<ul className="list-disc">
<li className="ml-4">{`{{ resource | tags }}: Laat alle gekoppelde tags zien gescheiden met komma's`}</li>
<li className="ml-4">{`{{ resource | status }}: Laat alle gekoppelde statussen zien gescheiden met komma's`}</li>
</ul>
</div>
<FormControl>
<Textarea
rows={5}
{...field}
onChange={(e) => {
field.onChange(e);
onFieldChange(field.name, e.target.value);
}}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}

<Button className="w-fit col-span-full" type="submit">
Opslaan
Expand Down
40 changes: 28 additions & 12 deletions packages/resource-detail/src/resource-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ type booleanProps = {
| 'displayTags'
| 'displayStatus'
| 'displayDocuments'
| 'clickableImage'
| 'displaySocials']: boolean | undefined;
};

Expand Down Expand Up @@ -96,6 +97,7 @@ function ResourceDetail({
displayStatus = true,
displaySocials = true,
displayDocuments = true,
clickableImage = false,
documentsTitle = '',
documentsDesc = '',
backUrlText = 'Terug naar het document',
Expand Down Expand Up @@ -205,6 +207,31 @@ function ResourceDetail({

const statusClasses = `${colorClass} ${backgroundColorClass}`.trim();

const renderImage = (src: string, clickableImage: boolean) => {
const imageElement = (
<Image
src={src}
imageFooter={
<div>
<Paragraph className={`osc-resource-detail-content-item-status ${statusClasses}`}>
{resource.statuses
?.map((s: { name: string }) => s.name)
?.join(', ')}
</Paragraph>
</div>
}
/>
);

return clickableImage ? (
<a href={src} target="_blank" rel="noreferrer">
{imageElement}
</a>
) : (
imageElement
);
};

return (
<section>
<div
Expand All @@ -221,18 +248,7 @@ function ResourceDetail({
items={resourceImages}
buttonText={{ next: 'Volgende afbeelding', previous: 'Vorige afbeelding' }}
itemRenderer={(i) => (
<Image
src={i.url}
imageFooter={
<div>
<Paragraph className={`osc-resource-detail-content-item-status ${statusClasses}`}>
{resource.statuses
?.map((s: { name: string }) => s.name)
?.join(', ')}
</Paragraph>
</div>
}
/>
renderImage(i.url, clickableImage)
)}
/>
)}
Expand Down
Loading
Loading