Skip to content

Commit

Permalink
Merge pull request #675 from openstad/feat/full-size-image-on-click
Browse files Browse the repository at this point in the history 
feat: Add field to choose if resource images can be opened in a new tab
  • Loading branch information
@rudivanhierden
rudivanhierden authored Nov 5, 2024
2 parents 8e71b8a + b3c2fc8 commit 3e17000
Show file tree
Hide file tree
Showing 6 changed files with 183 additions and 108 deletions.
21 changes: 20 additions & 1 deletion apps/admin-server/src/pages/projects/[project]/widgets/resourcedetail/[id]/display.tsx
View file
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
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
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
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

0 comments on commit 3e17000

Please sign in to comment.