SignInSheet.vue
This page renders the Sign-In App (nav-item: None, only accessible by link from the Copyright Logo in the footer). Will redirect to Login page if the user is not logged in.
Used Components
- 1️⃣
MemberSignIn - 2️⃣
SignInTable - 3️⃣
SignInTableGuest - 4️⃣
SignInSheetHeader - 5️⃣
GuestsSignIn - 6️⃣
Sales - 7️⃣
SalesTable - 8️⃣
ScanQrCode - 9️⃣
SellItem - 🔟
Reports
Used Stores
useThisRunStoreuseConnectivityStoreuseSignInMembersStoreuseSignInGuestsStoreuseOnsiteSalesStoreuseCashExpensesStore
Functions
loadComponent
Dynamically imports a Vue.js component by its name. There were some issues in dev mode showing weird errors in the console and tabs / pages not loading properly. This function fixed it by ensuring that the component is loaded correctly and checking for prop types.
Parameters:
name: - The name of the component to load.
getPageContent
Fetches and processes the page content for the Sign-In App. This function retrieves data from the backend API /sign-in-page endpoint, then extracts and sets up the tabs and components to be displayed on the page. It dynamically loads Vue.js components specified in the tab data and maps them to their respective tab IDs for rendering.
- Sets the initial tab based on the query parameter or defaults to the first tab.
- Dynamically imports components and associates them with tab IDs.
- Updates the global pageContent and componentInstances references.
Handles errors by logging them and ensures the loading state is updated.
handleVisibilityChange
Handles visibility change events on the page and evaluates the conditions for background synchronization (document visibility, online status, and no pending sync tasks). This ensures that the background synchronization process is started / stopped when the page becomes visible or hidden.
completeSync
Completes the background synchronization process for the Sign-In App. This asynchronous function logs the current time and initiates the process of fetching updated registration data from the backend, specifically for members, guests, and onsite sales associated with the current run date. The function exits early if no valid run date is available from thisRunsStore. It ensures that member and guest registration data, and onsite sales data are up-to-date by calling their respective fetch methods.
evaluateSyncConditions
Evaluates the conditions to determine if the background synchronization should be started or stopped.
The conditions are:
1. The user is online
2. There are no pending sync tasks; if we do not check this stores will be dehydrated!
3. The document is visible
If all conditions are met, the background synchronization is started. Otherwise, it is stopped.
isValidWednesday
Checks if the given string is date string and a valid Wednesday in the format YYYY-MM-DD
Parameters:
dateString: - The date string to check
Reactivity
(anonymous) (watch)
Function ensures that restriction for the 'hare' user are properly applied. If user logs in as 'hare' the page content needs to be reloaded in order to constrain the page content to 'MemberSignIn' and 'GuestsSignIn'
(anonymous) (watch)
Function ensures that restriction for the 'OnCash' user are properly applied. If user logs in as 'OnCash' the page content needs to be reloaded in order to add the 'Reports' tab to the page content
(anonymous) (watch)
Watch for changes in connectivity conditions (isOnline and hasPendingSyncTasks) and evaluate the background sync conditions
(anonymous) (watchEffect)
Watch for changes in the route.query.tab and update the pageContent.tab accordingly
Parameters:
newTab: - The new tab ID
(anonymous) (watchEffect)
Watch for changes in the pageContent.tab and the content of the page with a router.replace accordingly
Parameters:
pageContent.value.tab: - The new tab ID