ray
50 lines
2.7 KiB
Markdown
50 lines
2.7 KiB
Markdown
# Settings Modal Architecture
|
|
|
|
The `settings.js` `initializeSettings()` function expects a full tabbed settings modal with these element IDs:
|
|
|
|
## Required elements
|
|
|
|
### Modal shell
|
|
- `settings-modal` — main modal container
|
|
- `settings-close-btn` — close button
|
|
|
|
### Tab navigation
|
|
- `business-info-tab-btn`, `service-advisor-tab-btn`, `financial-tab-btn`, `messages-tab-btn`, `services-tab-btn`
|
|
- Tab contents: `business-info-tab`, `service-advisor-tab`, `financial-tab`, `messages-tab`, `services-tab`
|
|
|
|
### Save buttons
|
|
- `business-info-save-btn`, `service-advisor-save-btn`, `financial-save-btn`, `messages-save-btn`
|
|
|
|
### Input fields (Business Info)
|
|
- `settings-business-name`, `settings-business-address`, `settings-business-phone`
|
|
|
|
### Input fields (Service Advisor)
|
|
- `settings-service-advisor`, `settings-advisor-phone`
|
|
|
|
### Input fields (Financial)
|
|
- `tax-rate-input`, `settings-shop-charge`, `settings-shop-charge-explanation`
|
|
|
|
### Input fields (Messages)
|
|
- `settings-header-message`, `settings-footer-message`, `settings-quote-footer-note`
|
|
- `settings-estimate-valid-days`, `settings-warranty-text`, `settings-terms-text`
|
|
- `settings-default-parts-delivery`
|
|
|
|
### Service management (in Services tab)
|
|
- `service-search-input-settings` — search within settings
|
|
- `add-service-btn` — opens add modal
|
|
- `services-list` — rendered list
|
|
- `add-service-modal-settings`, `add-service-name`, `add-service-price`, `add-service-recommendation`, `add-service-explanation`, `ai-write-btn-add-service`, `add-service-save-btn`, `add-service-cancel-btn`
|
|
- `service-edit-modal-settings`, `service-edit-name-settings`, `service-edit-price-settings`, `service-edit-recommendation-settings`, `service-edit-explanation-settings`, `ai-write-btn-settings`, `service-edit-save-btn-settings`, `service-edit-cancel-btn-settings`
|
|
|
|
## Behavior
|
|
|
|
If ANY required element is missing, `initializeSettings()` returns early with a console error and `settings-btn` gets no click handler. This is why the gear icon does nothing on pages without the full modal.
|
|
|
|
## Repair-orders.html fix
|
|
|
|
The repair-orders.html page had `account-settings-modal` (profile/preferences) and `site-settings-modal` (display/notifications/system) but lacked the full `settings-modal`. Solution: inserted the complete 5-tab modal + 2 sub-modals (add service, edit service) before the script tags. All element IDs must match exactly what settings.js expects.
|
|
|
|
## Service list rendering pitfall
|
|
|
|
`renderServicesList()` in settings.js originally displayed only `service.recommendation` — it never rendered `service.explanation`. The data was saved to Firestore correctly but invisible in the list. Fix: add explanation display as italic text below the recommendation line.
|