Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gsinghjay/hccc-smartsheet-to-component

Export Smartsheet data and convert it to component data for Modern Campus CMS.
https://github.com/gsinghjay/hccc-smartsheet-to-component

Last synced: about 2 months ago
JSON representation

Export Smartsheet data and convert it to component data for Modern Campus CMS.

Awesome Lists containing this project

README 

        
# HCCC SmartSheet to Component Generator



A web-based tool that converts Excel/SmartSheet data into a specific component format for the HCCC system. This tool provides an interactive interface for mapping data fields and generating component code in the required format.



## Project Structure



```

├── index.html              # Main HTML interface

├── styles.css             # Global styles and UI components

├── js/

│   ├── main.js           # Application entry point

│   ├── App.js            # Main application logic

│   ├── config.js         # Configuration and field mappings

│   ├── DataProcessor.js  # Data processing and transformation

│   ├── FieldMapper.js    # Field mapping and row selection

│   ├── FileHandler.js    # File upload and XLSX processing

│   └── UIRenderer.js     # UI rendering and updates

```



## Core Components



### Frontend Interface (`index.html`)

- Provides a three-step interface for file upload, field mapping, and code generation

- Integrates Bootstrap for responsive design

- Includes code preview sections with syntax highlighting

- Implements copy-to-clipboard functionality



### Styling (`styles.css`)

- Defines styles for the step progress indicator

- Implements mapping interface styles

- Provides code preview container styling

- Includes responsive design adjustments



### JavaScript Modules



#### `main.js`

- Application entry point

- Initializes the main App class

- Sets up event listeners for DOM content loaded



#### `App.js`

- Main application orchestrator

- Manages the workflow between components

- Handles state transitions between steps

- Implements component code generation

- Manages clipboard operations



#### `config.js`

- Defines field mappings between system IDs and human-readable labels

- Stores UI element IDs and configurations

- Centralizes configuration for easy updates



#### `DataProcessor.js`

- Processes raw Excel data

- Handles data transformation and validation

- Implements field value processing logic

- Manages special field processing (e.g., certifications)



#### `FieldMapper.js`

- Manages the field mapping interface

- Handles row selection functionality

- Provides data preview capabilities

- Validates mapping requirements



#### `FileHandler.js`

- Handles file upload operations

- Processes XLSX files using SheetJS

- Validates file types and formats

- Provides progress feedback



#### `UIRenderer.js`

- Manages UI updates and rendering

- Handles progress indicators

- Displays error and success messages

- Updates preview sections



## Data Flow



1. **File Upload**

   - User uploads Excel/SmartSheet file

   - FileHandler processes and validates the file

   - Data is converted to JSON format



2. **Field Mapping**

   - User maps Excel columns to required fields

   - System provides preview of mapped values

   - User can select specific rows for processing



3. **Code Generation**

   - System generates component code in format:

     ```

     ~[com[25306 1 72{"version":72,"data":{...}}]]~

     ```

   - Preview shows both JSON and component format

   - User can copy either format to clipboard



## Required Format



The system generates component code in the following format:

```

~[com[25306 1 72{"version":72,"data":{

    "field_id": "value",

    ...

}}]]~

```



## Dependencies



- **Bootstrap 5.3.2**: UI framework for responsive design

- **SheetJS (XLSX)**: Excel file processing

- **Prism.js**: Code syntax highlighting



## Usage



1. **Upload File**

   - Click "Upload File" button

   - Select Excel/SmartSheet file

   - System validates file format



2. **Map Fields**

   - Match Excel columns to required fields

   - Select specific row for processing

   - Preview mapped values



3. **Generate Code**

   - Click "Generate Code" button

   - Review generated JSON and component code

   - Copy required format to clipboard



## Development



### Setting Up

1. Clone the repository

2. Open `index.html` in a modern browser

3. No build process required (vanilla JavaScript)



### Adding New Fields

1. Update `config.js` with new field mappings

2. Add any special processing in `DataProcessor.js`

3. Update UI components if needed



### Modifying Component Format

1. Update `generateComponentCode` method in `App.js`

2. Adjust preview formatting in `UIRenderer.js`

3. Update tests if applicable



## Contributing



1. Fork the repository

2. Create a feature branch

3. Commit changes

4. Push to the branch

5. Create a Pull Request