grdelina-directus-amenities

A Directus bundle with two custom interfaces built to make the Grdelina amenities model pleasant to edit for non-technical clients.

1. Icon Picker (Lucide) — grdelina-icon-picker

For a string / text field (used on amenity_types.icon).

• Searchable grid of Lucide icons (~1600), searched by name and synonyms.
• Custom SVG tab for pasting a raw <svg> when Lucide doesn't have it.
• Stores a complete, ready-to-render <svg> string — 24×24, fill="none", stroke="currentColor", 2px round — matching the website's icon convention, so <span set:html={amenity.icon} /> on the site needs no changes.
• Lucide picks are tagged data-lucide="<name>" on the root <svg> so the picker can show which icon is currently selected.
• Pasted SVG is sanitised (script tags and on* / javascript: attributes stripped) before saving.

Field option: Placeholder (text shown on the empty button).

2. Amenity List — grdelina-amenity-list

For an M2M alias field (used on apartments.included_amenities and villas.included_amenities).

• Each amenity is one row: icon + a single-language label (the editor's own Directus language, falling back to the base language, then en-US, then the first translation) + remove button.
• Add amenities opens a drawer with a searchable list of all amenity_types (icon + label); click to add or remove.
• Drag rows to reorder.
• New amenity — the drawer has a create panel: the Lucide icon picker plus one name field per active language (or a single field with "same text for every language" for cases like TV / Wifi). Creates the amenity_types row with its translations, then links it into the current item.
• Edit amenity — a pencil on each list row (and on hover on each drawer row) opens the same form prefilled from the amenity's current translations; saves with PATCH /items/amenity_types/:id. Edits the shared amenity for every apartment/villa that uses it.
• Staged editing: the link to the current item isn't written until the parent's own Save — emits Directus's { create, update, delete } nested-relational payload, same contract as the Photo Grid extension. (A newly-created amenity_types row itself is saved immediately, like an uploaded file — only the link is staged.)

Field options: Junction collection (e.g. apartments_amenity_types), Parent id field (e.g. apartments_id), Related id field (default amenity_types_id), Translation label field (default label).

Creating brand-new amenity types is still done in the Amenities (amenity_types) collection — this interface links existing ones.

Build & deploy

npm ci
npm run build      # -> dist/app.js (+ dist/api.js)
npm run validate

The Directus container has no git — deploy is wget + tar (same as the photo-grid extension), then a plain Restart of the Directus service:

cd /directus/extensions
rm -rf grdelina-directus-amenities
wget -O amen.tar.gz https://github.com/franzkaizen/grdelina-directus-amenities/archive/refs/heads/main.tar.gz
mkdir -p grdelina-directus-amenities
tar -xzf amen.tar.gz -C grdelina-directus-amenities --strip-components=1
rm amen.tar.gz