Closed DanielZambSB closed 2 months ago
citty getter/setter with select done
Date Processed Logic:
DATE PROCESSED AND DATE APROVED IMPLEMENTED, CHANGES TO DB (+ A COLUMN 'DATEAPPROVAL')
FIXED BUG TO VIEW REALTIME UPDATE
CITY SETTER NEEDS HABILITY TO UPDATE THE CITIES ARRAY IF THE CITY IS NOT FOUND INSIDE THE ARR, THEN THAT PART WOULD BE COMPLETE
Related Files:
Related JS Functions
parseInquiryDetails()
reloadCities()
addCityBtn()
removeCityBtn()
updateCityBtn()
notificationDateButton()
notificationWppInterventorBtn()
Getters and Setters
goToEmailListBtn()
editDetail()
saveDetail()
editInquiryDetailBtn()
and goToOTModuleBtn()
Related GS Functions
compareStringDate()
createInquiryDB()
readInquiryDB()
updateInquiryDB()
deleteInquiryDB()
parseInquiryDetails
FunctionThe parseInquiryDetails
function is crucial for retrieving and parsing specific inquiry details from a cached array based on a given identifier (ID). This function operates through the following key steps:
id
and a cachedArray
containing potential inquiry data as inputs.cachedArray
and the provided id
to track the process.cachedArray
up to a predefined limit (16 items).This function is essential for accessing and structuring detailed inquiry data, which can then be utilized for further processing or display within the application. It is designed to ensure that only relevant parts of the data are parsed and any issues during the process are promptly reported to enhance user experience and debugging efficiency.
reloadCities
FunctionThe reloadCities
function is designed to refresh and repopulate the city selection dropdown in a web application, pulling data directly from an external source via a Google Apps Script. Here's a step-by-step breakdown of its functionality:
citySelect
dropdown and resets the ciudades
array and ciudadesAData
object which are used to store city names and their corresponding data.readCities
to fetch city data.ciudades
array and ciudadesAData
object with the city's text and ID.select2
plugin to refresh the dropdown with the new city data, applying specific settings like theme and dropdown behavior to enhance the user interface.This function is crucial for maintaining an up-to-date and user-friendly city selection dropdown, ensuring that users have access to the latest data and can make their selections accordingly.
click
Event Handler on #addCityBtn
The jQuery event handler attached to #addCityBtn
facilitates the process of adding a new city to a dropdown menu through a series of interactive dialogues and backend integrations. Here’s a detailed breakdown of its workflow:
createCity
is called to handle the addition of the new city to a backend system. This function expects the city name to be passed in uppercase format.ciudades
array and ciudadesAData
object for local tracking, and the dropdown menu (#citySelect
) is updated accordingly.This event handler enhances user interaction by providing immediate feedback and dynamically updating the user interface based on backend operations, making the city management system more responsive and user-friendly.
click
Event Handler on #removeCityBtn
The jQuery event handler attached to #removeCityBtn
is designed to facilitate the deletion of a city from a dropdown menu with a confirmation mechanism to ensure intentional deletion. The function operates as follows:
Retrieving City Information: Upon clicking the 'Remove City' button, the currently selected city's name and corresponding ID are retrieved from the dropdown menu and a local data object, respectively.
User Confirmation Prompt: A SweetAlert dialog prompts the user to confirm the deletion by typing the city's name. This serves as a validation step to prevent accidental deletions.
Confirmation Handling:
deleteCity
is invoked to handle the removal of the city from the backend system using the city's ID.Success and Error Handling:
reloadCities
to reflect the change.Cancellation Handling: If the user denies the action or inputs an incorrect city name, a message is displayed noting that the city was not deleted.
This event handler enhances the user interface by providing robust mechanisms for confirming city deletions and immediate feedback, making the city management system more secure and interactive.
click
Event Handler on #updateCityBtn
The jQuery event handler attached to #updateCityBtn
manages the process of updating the name of a selected city in a dropdown menu. This is accomplished through a user interaction flow that confirms the change and then communicates with a backend service. Here’s a detailed breakdown of its functionality:
Retrieve Current City Information: Initially, the handler retrieves the current city's name and ID from the citySelect
dropdown menu and a local data map (ciudadesAData
).
User Input Prompt: A SweetAlert dialog prompts the user to input a new name for the city. It includes a validation step to ensure the new name is different from the current one.
Confirmation Handling:
updateCity
is called to update the city name in the backend system using the city's ID and the new name (converted to uppercase).Success and Error Handling:
reloadCities
to reflect the updated name.#cityForm
) is briefly blurred for visual effect to signify the update process, and then focused again once the city dropdown is updated.Post-Update Adjustments: After a delay, the city dropdown is updated to show the newly updated city as selected, and the form's visual blur is removed.
This event handler enhances the user interface by providing a clear and interactive process for updating city names, ensuring data integrity and improving user experience through dynamic feedback and visual effects.
click
Event Handler on #notificationDateButton
The jQuery event handler attached to #notificationDateButton
manages the setting of reminders through a user interface that involves date selection. Here's a detailed breakdown of its workflow:
User Input Prompt: When the button is clicked, a SweetAlert dialog prompts the user to select a time for the reminder. This includes a custom input field for date and time selection using flatpickr
, a lightweight and powerful datetime picker.
Date Picker Configuration:
radicationDate
) and end (quotationDate
) dates, the date picker is configured with constraints such as minimum and maximum dates and times.translateDate
) is invoked to convert it into a recognizable format before initializing the date picker.Handling Date Selection:
date
upon the closure of the picker dialog.Confirmation Handling:
createEventForInquiry
is called to save the reminder in the system, associated with specific inquiry details.Success and Error Handling:
Cancellation Handling: If the user denies the action, a cancellation message confirms that no reminder was set.
This event handler enhances the user interface by providing a detailed and interactive process for setting reminders, ensuring that users can easily schedule and manage reminders linked to specific inquiries.
click
Event Handler on #notificationWppInterventorBtn
The jQuery event handler attached to #notificationWppInterventorBtn
orchestrates the process of sending communication messages (email and WhatsApp) to an intervener based on user-entered and pre-populated data. Here’s how it functions:
User Interaction for Data Verification: Upon clicking the button, a SweetAlert dialogue prompts the user to verify or complete the intervener’s contact details, such as phone number, email, and other relevant inquiry details.
Dynamic Form Configuration:
Communication Preferences Handling:
Data Validation and Message Sending:
requestSendTemplate
for WhatsApp and sendEmailComunication
for email).Success and Error Handling:
Cancellation Handling: If the user cancels the operation, an alert notifies them that the communication was not sent.
This event handler enhances the application’s functionality by allowing direct and personalized communication with interveners, supporting both immediate and verified message dispatching. It ensures data integrity and user confirmation before sending critical communication.
The provided JavaScript functions are essential for managing UI interactions in a web application concerning the enabling/disabling of input fields and buttons, as well as setting and retrieving values from these fields related to inquiry details. Here's a brief description of each function's role:
#emailDetailInquiryModule
and the #citySelect
dropdown, preventing the user from modifying the content.#emailDetailInquiryModule
and the #citySelect
dropdown, allowing the user to edit the content.disableDetailButtons()
.inquiry
object. This includes text inputs, text areas, badges for categories, and selection of the city from a dropdown. It sets the inquiry's detailed information such as title, description, emails, dates, and other relevant fields.inquiryDetail
object. This function handles inputs like descriptions, dates, emails, and others, ensuring that they are captured and stored correctly, possibly for further processing or validation.These functions are critical for a dynamic web application where user interaction with data is frequent, ensuring that data integrity is maintained while providing a responsive user experience.
click
Event Handler on #goToEmailListBtn
The jQuery event handler attached to #goToEmailListBtn
manages the transition from viewing detailed inquiry information back to the corresponding list of inquiries, with visual cues to locate the previously viewed inquiry. Here’s how it operates:
Context and Screen Transition:
inboxContext.currentInbox
) to determine which inbox or screen to display, helping manage transitions across potentially multiple views or inboxes.switchScreens
, a function to change the current view based on the inbox type (main
or others).Highlighting the Previously Viewed Inquiry:
Visual Feedback:
Update and Cleanup:
detailInquiryOptions.editInquiry
to false
, indicating that any edit operations are concluded.saveDetail(false)
to handle any potential data changes, ensuring no inadvertent edits are committed when leaving the detailed view.Ensuring Smooth User Experience:
editDetail
FunctionThe editDetail
function in the web application is responsible for enabling the editing of details in the inquiry view. This function adjusts the user interface to facilitate user interaction and data entry. Here's how it functions:
UI Button Update: Transforms the "Edit" button into a "Save" button, changing its class to reflect the action that will be taken upon the next click. This provides a visual cue to the user that the inquiry is in edit mode and changes can be saved.
Enabling and Disabling Inputs:
enableValues()
to enable text inputs and textareas within the detail view, allowing the user to modify existing data.disableDetailButtons()
to disable other control buttons during the editing process to prevent conflicting actions.Date Range Picker Initialization:
flatpickr
to handle date inputs, providing a range selector for picking start and end dates from a calendar.detailInquiryOptions.dateArray
upon picker closure, ensuring that the chosen dates are stored for further actions like saving or processing.Error Handling and Data Translation:
google.script.run
).Dynamic Content Management:
saveDetail
FunctionThe saveDetail
function manages the process of saving or updating inquiry details within the web application. It toggles the user interface from edit mode back to view mode and commits changes to the backend system if specified. Here's a detailed breakdown of its operation:
UI Button Update: Transforms the "Save" button back to an "Edit" button, changing its class to reflect that the inquiry details are no longer in edit mode but can be edited again. This provides a clear visual indication to the user that the inquiry details are now set and the edit session has ended.
Disabling and Enabling Inputs:
disableValues()
to disable text inputs and textareas within the detail view, preventing further modifications.enableDetailButtons()
to re-enable other control buttons after the editing process, allowing normal operations.Handling Date Inputs:
detailInquiryOptions.dateArray
using flatpickr
, ensuring they are formatted correctly as "d/m/Y" for display and storage.dateArray
) to reset the state for future edits.Retrieving and Displaying Updated Values:
getDetailValues()
to capture all edited values from the input fields, preparing them for potential backend updates.Backend Update Conditional:
updateFlag
is true, indicating whether the changes should be saved to the backend.inquiryList
with the new details from the response, ensuring the frontend matches the backend state.Success and Error Handling:
This function is crucial for ensuring data integrity and providing a seamless user experience during the editing and updating of inquiry details. It ensures that all changes are either committed or discarded based on user actions and provides clear feedback on the outcome of those actions.
#editInquiryDetailBtn
and #goToOTModuleBtn
#editInquiryDetailBtn
Click Event HandlerThe jQuery event handler attached to #editInquiryDetailBtn
toggles the editing state of an inquiry detail view. This function is designed to switch between editing and viewing modes dynamically based on user interaction. Here's how it operates:
detailInquiryOptions.editInquiry
flag to its opposite state (true to false or vice versa), which indicates whether the detail view is in edit mode.detailInquiryOptions.editInquiry
is true), calls editDetail()
to enable form fields and adjust the interface for user editing.detailInquiryOptions.editInquiry
is false), calls saveDetail(true)
to save the changes made during the edit session to the backend database and revert the interface back to view mode.#goToOTModuleBtn
Click Event HandlerThe event handler on #goToOTModuleBtn
manages the transition from the current screen to the OT (Order Tracking) module, with a prerequisite check for communication actions. It ensures that necessary steps are completed before allowing the user to proceed. Here’s the function breakdown:
detailInquiryOptions.commsSent
).fillingInquiryDataSoFar()
to populate the OT module with the latest inquiry data.switchScreens("OT")
to change the current view to the OT module.equalizeCardHeights()
to adjust the heights of UI cards for visual consistency.saveDetail(false)
to ensure no uncommitted edits are carried over.These handlers enhance the application's interactivity and data integrity, ensuring that users follow necessary procedures and maintain accurate state transitions between different modules and views.
compareStringDate
FunctionThe compareStringDate
function is designed to compare two dates, where the first date (d1
) is provided as a string in the "DD/MM/YYYY" format, and the second date (d2
) is a JavaScript Date
object. This function is useful for scenarios where date comparisons are required to determine the chronological order of events or validate time-based conditions. Here's a breakdown of its functionality:
Parsing and Preparation:
d1
is split into its constituent parts (day, month, year), and these are used to construct a new Date
object, date1
.Date
object date2
is adjusted to remove the time component, focusing the comparison strictly on the date.Comparison Logic:
date1
and date2
.date1
is later than date2
, it logs a message indicating this and returns 1
.date1
is earlier than date2
, it logs a message to that effect and returns -1
.0
.This function is essential for applications where dates need to be compared for sorting, filtering, or conditional workflows based on temporal data.
createInquiryDB
FunctionThe createInquiryDB
function is integral to managing inquiry records in a Google Sheets-based database system. This function either creates a new inquiry record or updates an existing one based on the presence of an ID within the inquiry object. Here's a detailed breakdown of its operation:
Initialization:
Check for Existing Record:
inquiry
object contains an 'id' field. If it does, this implies that the record exists and needs to be updated rather than created. It then delegates to updateTemplateObjectToDB
for handling the update.ID and Date Handling:
Data Preparation and Row Construction:
keysOrder
), extracting values from the inquiry
object. If a key is present in the inquiry
, its value is stringified; if not, an empty string is used. This prepares a structured array of inquiry data for insertion.Appending to Spreadsheet:
inquiry
object with the new ID, ensuring that the in-memory representation is accurate and up-to-date.Return Value:
This function is essential for applications that require a robust and straightforward method to manage inquiry data using Google Sheets, offering a scalable and easy-to-integrate solution for environments where traditional databases are not feasible or preferred.
readInquiryDB
FunctionThe readInquiryDB
function is a key component of the inquiry management system, designed to retrieve specific inquiry records from a Google Sheets-based database by their unique ID. Here's an in-depth look at how this function operates:
Initialization:
Search for Inquiry by ID:
A:A
) where inquiry IDs are stored and uses Google Sheets' createTextFinder
method to search for the specific inquiry ID (pId
). This method is set to match the entire cell content to ensure exact matches only.Data Retrieval:
Data Parsing and Structuring:
keysOrder
) to map each cell to a corresponding attribute of an inquiry object.Logging and Return:
This function is crucial for applications that require reliable retrieval of specific records from a dataset based on unique identifiers. It supports functionalities such as viewing detailed inquiry records, editing existing records, or auditing changes.
updateInquiryDB
FunctionThe updateInquiryDB
function plays a critical role in managing inquiry data by updating existing records within a Google Sheets-based database. This function ensures that any modifications to an inquiry are reflected accurately in the database, maintaining data integrity and relevancy. Here’s a detailed breakdown of its operation:
Initialization:
Data Preparation:
keysOrder
), which represents the expected structure of inquiry data. For each key, it retrieves the corresponding value from the newInquiry
object. If the key exists, the value is stringified (to ensure consistency in how data is stored); if it does not exist, an empty string is used as a placeholder.Search for Existing Record:
createTextFinder
method to search the ID column for the provided pId
, ensuring the inquiry to be updated is correctly identified.Updating the Record:
updatedData
) that includes the inquiry ID, the current date (formatted as a JSON string), and the array of new data values.setValues
method to update the row in the sheet corresponding to the found ID with the new data array. This method replaces the entire row's data, ensuring that all changes are applied.Logging and Feedback:
This function is essential for applications requiring consistent and up-to-date record-keeping, especially in dynamic environments where inquiry details may frequently change. It supports robust data management practices by ensuring that updates are accurately and efficiently processed.
deleteInquiryDB
FunctionThe deleteInquiryDB
function is designed to safely remove inquiry records from a Google Sheets-based database while maintaining a history of deletions for audit and recovery purposes. Here’s a detailed breakdown of its operation:
Initialization and Access:
BD_seguimiento
for current inquiry records and BD_deleted_records
for tracking deletions.Search for the Inquiry Record:
createTextFinder
to search for the inquiry ID (pId
) within the BD_seguimiento
sheet. This method is configured to match the entire cell content accurately.Handling the Deletion ID:
BD_deleted_records
sheet to ensure that each deleted record can be uniquely identified and later reviewed if necessary.Deletion and History Recording:
BD_seguimiento
sheet, effectively removing the inquiry from active records.BD_deleted_records
sheet with the deletion ID, the deletion date, and the data of the deleted inquiry. This ensures that there is a historical record of what was deleted, which can be crucial for audits or data recovery.Final Operations and Return:
This function is essential for maintaining the integrity and cleanliness of the database while ensuring that deletions are traceable and reversible if necessary. It supports compliance with data management policies that require record keeping even for deleted entries.
#
Is your feature request related to a problem? Please describe. The current system lacks a detailed view for individual inquiries, preventing users from accessing comprehensive information and performing necessary actions on them. Users cannot create, view, edit, or delete inquiry details within the platform, which leads to an over-reliance on external processes and reduces overall efficiency.
Describe the solution you'd like The implementation of an Inquiry Detail View feature is needed to allow users to:
Describe alternatives you've considered While no alternatives have been considered due to the specific needs of our system, I am open to exploring third-party tools or plugins that could integrate seamlessly with our existing platform and provide these features if they can offer a quicker deployment and cost-effective solution.
Additional context A detailed view of inquiries is vital for our support team to manage and resolve maintenance issues effectively. This feature should be accessible from the listing module and designed with usability in mind, ensuring that all user roles can perform the necessary actions without extensive training. Additionally, it would be beneficial to include an audit trail feature within the detail view to track all changes made over the lifecycle of an inquiry.