910b641750
feat(patient): add edit functionality to patient form - Modify genPatientEntity to accept existing patient data for updates - Add handleActionEdit handler for edit mode - Update form to handle both create and edit modes - Rename patient ref to patientDetail for clarity refactor(patient): update marital status codes and job options mapping - Change marital status enum values to standardized codes (S, M, D, W) - Simplify job options and marital status options mapping using mapToComboboxOptList - Add error handling in patient data loading ajust styling text based on combobox wip: edit patient redirect refactor(models): update type definitions and form field handling - Add field-name prop to SelectDob component for better form handling - Update Person and Patient interfaces to use null for optional fields - Add maritalStatus_code field to Person interface - Improve type safety by replacing undefined with null for optional fields fix casting radio str to boolean and parsing date error
SIMRS - FE
RSSA - Front End
Important
Read this following instructions before doing your job
Framework Guide
Configuration
nuxt.config.ts
Nuxt configuration file.env
Some environment variables
Directory Structure for app/
app.vue: Main layoutcomponents: Contains all reusable UI components.components/content: Entry point for business logic and workflows. Pages or routes call these content components to handle API requests and process application logiccomponents/app: View-layer components that manage and present data. These are used withincontent/to render or handle specific parts of the UI, and return results back to the contentcomponents/pub: Public/shared components used across different parts of the app.composables: Contains reusable logic and utility functions (e.g. composables, hooks)..layouts: Reusable UI layout patterns used across pages.models: Contains data definitions or interfaces.schemas: Contains JSON schemas used for validation.services: Contains reusable API calls and business logic.
Directory Structure for app/pages
pages/auth: Authentication related pages.pages/(features): Grouped feature modules that reflect specific business content or domains.
Directory Structure for server/
server/api: API or proxy requests
Workflows
The basic development workflow follows these steps:
Define Your Data in models/
- Create data definitions or interfaces.
- These should represent the structure of the data used across your app.
Build UI Components in components/app
- Create reusable UI and app specific components.
- Keep components pure, avoid making HTTP requests directly within them.
- They receive data via props and emit events upward.
Business Logic in components/content
- This layer connects the UI with the logic (API calls, validations, navigation).
- It composes components from
components/app/,components/pub/, and other content. - Also responsible for managing state, side effects, and interactions.
Create Pages in pages/
- Define permissions and guards for each page.
- Pages load the appropriate content from
components/content/. - They do not contain UI or logic directly, just route level layout or guards.
Validation
-
UI level validation in
components/app. help users avoid mistakes before submitting.- Lightweight/instant validation related to UX.
- Basic formatting (email regex, numeric-only, password length).
- Showing error messages directly under the field.
-
Business level validation in
components/flow. cannot rely only on the UI, since it often requires server-side checks or rules that may change.- More complex validation rules tied to business logic.
Code Conventions
- Under the script setup block, putting things in group with the following order:
- Imports → all dependencies, sorted by external, alias (~), and relative imports.
- Props & Emits → clearly define component inputs & outputs.
- State & Computed → all ref, reactive, and computed variables grouped together.
- Lifecycle Hooks → grouped by mounting → updating → unmounting order.
- Functions → async first (fetching, API calls), then utility & event handlers.
- Watchers → if needed, put them at the bottom.
- Template → keep clean and minimal logic, use methods/computed instead of inline JS.
- Declaration Naming
- Uses PascalCase for
typenaming - Uses camelCase for
variableandconstnaming - Underscore can be used to indicates that a variable has derived from an attribute of an object
for example:person_nameindicates it is an attributenamefrom objectperson
- Uses PascalCase for
- Looping
- Uses
i,j,kas variable forforlooping index - Uses
itemas object instantition forforEachloop callback - Uses
itemas object instantition forv-forloop callback in the template
- Uses
Git Workflows
The basic git workflow follows these steps:
- Create a new branch on
dev- branch name should be
feat/<feature-name>orfix/<bug-name>
- branch name should be
- Make your changes
- Commit your changes
- commit msg format:
[type]: [description]typecan befeat,fix,docs,style,refactor,perf,test,build,ci,chore,revertdescriptionshould be a brief description of the changes- Example:
feat: add new feature
- commit msg format:
- Push your changes to
dev - Create a pull request from
devtomain