Requirements
To properly implement and render the Staff Page, the following dependencies and environments are required:
Frontend Requirements
- HTML with Liquid templating
- Bootstrap (for responsive grid and accordion)
- FontAwesome (for icons)
- jQuery (for dynamic interactions)
Backend Requirements
- Rock RMS API (to fetch dynamic staff data)
- Node.js (for transforming XLSX files into JSON)
- Express.js (for handling file uploads)
- Multer (for file handling)
- xlsx (for parsing Excel files)
- Axios (for sending JSON data via webhook)
- Dotenv (for environment variable management)
User Story
As a church administrator, I want to display a staff directory dynamically on the website, categorized by pastors and other departments, so that visitors can easily find and contact the appropriate staff members.
The pastors section is dynamically generated from the Rock RMS API.
Other departments are organized into an accordion layout via the same API, with the exception of administrators being hardcoded due to ui contraints (background carrd for intuitive hierarchy).
Administrators can upload an Excel (.xlsx) file to update staff records, which will be parsed into JSON and sent to a webhook for processing.
Rendering & Schema
1. Dynamic Pastor Cards
- Data is pulled dynamically using Rock RMS API.
- The list is sorted by priority.
- Only members categorized as "Pastor" are displayed.
- Each pastor card includes:
- Image
- Name
- Title
- Clickable link (redirects to the pastor’s page)
2. Staff Accordion
- The accordion includes hardcoded staff members (like administration) and dynamic groups (like Worship, Missions, etc.).
- Staff members are sorted by title.
- Email addresses are wrapped in a contact form shortcode
{[ emailform ]}.
3. Data Schema for Rock RMS API
Attributes:
- Title: Full Name
- Position: Staff Role
- Group: Department
- Image: Profile Picture URL
- Email: Contact Email
- Phone: Contact Number
- ShowOnPage: Controls visibility in UI (Yes/No)
- Priority: Sorting order for display