# Smartphone App -- Known Problems

## All Problems, sorted by criticality and category:

## *CRITICAL!*

#### Functionality
- Dialogs for filters are reused from the tablet app, not styled correctly
- When session ends while app is open (on locked phone, for example), no error/relogin screen comes up, just blank overlay...
- Search not implemented
- Transactions not implemented
- Postbox not implemented
- Statusbar (time, batery, etc.) not styled
- App doesn't work properly, if biometric Authentification is not activated - *Possibly fixed, Testing needed*
- Profile picture is a stock image, users initials would be better, the method to extract the initials already exists in the portal
- Gradient icons and gradient text are not visible on ios 12 --> at least add fallback styles.
- Sheet can glitch into safe area and can never be closed again - *Possibly fixed, Testing needed*

#### Code
- Translations with Locale-Service not always used

#### Build
- **Smartphone App can't be uploaded (bundle ID problems, since not all devices are supported anymore for each separate Target)** (https://developer.apple.com/library/archive/qa/qa1623/_index.html -> Replacing Your App in the Store)

---

## *Important, but not critical*
#### Functionality
- No reload data button/Pull down far to reload
- No Theme support, but Toggle in Profilepage exists
- Expertmode Toggle doesn't have functionality attached (could be deleted, no use case for expert mode in app after Login)

#### Backend
- Two separate theme configs would need to be specified; BETTER: For each Color Config: save Themes separately in the same Config, only load one config in the backend that contains both themes, then, the theme switch can be completely performed in the front end without new requests
- Device type "Smartphone" doesn't exist for configuration of Modules/Views, "Tablet" needs to be specified, since both Phone and Tablet App pass the "isMobileApp" check.

#### Widgets
###### Pie Chart
- When deselecting a segment by clicking it again, the total is not displayed correctly afterwards and the size of the segment is not set back to the original size. This problem probably also occurs in the tablet app. --> fix in Tablet App, Smartphone App extends
- "Legend" is just a list, no click events

---

## *Other Small Problems/Longterm Tasks*

#### Functionality
- Not all Widgets have Smartphone support
- Navigation sheet is not styled according to Figma Mock
- qpx-breadcrumbs are used -> No Scrolling but only "..." in long crumb-chains, own component necessary
- Login overlay is never closed
- No Animation between widget Preview click and fullscreen widget (a little bit confusing) -> use hero animations (on app-analytic-elements): https://github.com/DevAndyLee/Angular-Hero is AngularJS! Needs to be converted to Angular (Directive, probably)
- scrollableHorizontal/-Vertical directive might show a small gap in front of the fading gradient --> minDelta Input could be a fix?

#### Code
- Comments not consistently used
- Hardcoded color values in CSS properties
- MobileAppOrDevMode should be refactored. REMEMBER: Tablet AND Phone App need the flag isMobileApp to be true.
- qpx-view included in the qpx-smartphone-view template for data initialization, since the viewcontroller itself could not yet be extracted and separated from the qpx-view. It is not displayed on the screen but unnecessarily contained in the dom.
- CSS properties

    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }

are used for all scrolling containers, but not stored in a own class. Instead, they are copy/pasted into each own container class... :( EDIT: now in own class `.removeScrollbar`, but the class is not used everywhere -> full-text-search of the properties, deletion of the properties in the other classes, addition of the`.removeScrollbar` class where needed.
- Naming conventions not always respected
- fonts and icons not the same as in Mock
- Expression has changed after it has been checked error on asset title in top label
- import statements use relative paths/absolute paths/ @app ... paths -> inconsistent
- Login screen code is imported from Tablet version --> Dependency! Tablet CSS Assets must be included in Smartphone Version. FIX: Copy Code into own SmartphoneLoginScreen Components

#### Widgets
###### Pie Chart
- Inner label can be too long and overlap with circle
- In fullscreen mode, the size of the label is not adapted and quite small
- The spacing between two segments is generated by a border with the same color as the background. Therefore, background effects like gradients are not possible anymore.

###### Line Chart
- Legend Icon is round rect, but cannot be styled and has different size than List Widget Icon

---
---
---
---
## All Problems (again), sorted only by category:

## Functionality
- Dialogs for filters are reused from the tablet app, not styled correctly
- ~~Textoverflow not scrollable and no visual hint~~
- No reload data button
- No Theme support, but Toggle in Profilepage exists
- Expertmode Toggle doesn't have functionality attached
- When session ends while app is open (on locked phone, for example), no error/relogin screen comes up, just blank overlay...
- Search not implemented
- Transactions not implemented
- Postbox not implemented
- Not all Widgets have Smartphone support
- Navigation sheet is not styled according to Figma Mock
- qpx-breadcrumbs are used -> No Scrolling but only "..." in long crumb-chains, own component necessary
- Login overlay is never closed
- Sheet can glitch into safe area and can never be closed again - *Possibly fixed, Testing needed*
- ~~Rotating device changing from Portrait to Landscape and back messes up the layout even in Portrait Mode (probably due to safe area~~
- ~~Generally, safe areas are a problem on devices with out these areas, possible fix: use max(_normal-padding_, _safe-area-padding_) in CSS. Currently, only the Safe area padding is used, which can be 0 on certain device~~
- ~~On these devices, the height of 100% is slightly larger, than the screen size (even though the body has a box-sizing: border-box; that usually causes this problem), resulting in a tiny bit of scrolling on the entire screen~~
- ~~Navigationtable is displayed as any other widget, no filterWidgets used in qpx-smartphone-view~~
- Statusbar (time, batery, etc.) not styled
- App doesn't work properly, if biometric Authentification is not activated
- Profile picture is a stock image, users initials would be better, the method to extract the initials already exists in the portal
- No Animation between widget Preview click and fullscreen widget (a little bit confusing) -> use hero animations (on app-analytic-elements): https://github.com/DevAndyLee/Angular-Hero is AngularJS! Needs to be converted to Angular (Directive, probably)
- Gradient icons and gradient text are not visible on ios 12 --> at least add fallback styles.
- scrollableHorizontal/-Vertical directive might show a small gap in front of the fading gradient --> minDelta Input could be a fix?

---

## Backend
- Two separate theme configs would need to be specified; BETTER: For each Color Config: save Themes separately in the same Config, only load one config in the backend that contains both themes, then, the theme switch can be completely performed in the front end without new requests
- Device type "Smartphone" doesn't exist for configuration of Modules/Views, "Tablet" needs to be specified, since both Phone and Tablet App pass the "isMobileApp" check.

---

## Code
- Comments not consistently used
- Hardcoded color values in CSS properties
- Translations with Locale-Service not always used
- MobileAppOrDevMode should be refactored. REMEMBER: Tablet AND Phone App need the flag isMobileApp to be true.
- qpx-view included in the qpx-smartphone-view template for data initialization, since the viewcontroller itself could not yet be extracted and separated from the qpx-view. It is not displayed on the screen but unnecessarily contained in the dom.
- CSS properties

    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }

are used for all scrolling containers, but not stored in a own class. Instead, they are copy/pasted into each own container class... :( EDIT: now in own class `.removeScrollbar`, but the class is not used everywhere -> full-text-search of the properties, deletion of the properties in the other classes, addition of the`.removeScrollbar` class where needed.
- Naming conventions not always respected
- fonts and icons not the same as in Mock
- Expression has changed after it has been checked error on asset title in top label
- import statements use relative paths/absolute paths/ @app ... paths -> inconsistent
- Login screen code is imported from Tablet version --> Dependency! Tablet CSS Assets must be included in Smartphone Version. FIX: Copy Code into own SmartphoneLoginScreen Components

---

## Build
- ~~No Scripts for Smartphone App build -> using Tablet environment and config~~
- ~~Landscape mode allowed in Build setting~~
- Smartphone App can't be uploaded (bundle ID problems, since not all devices are supported anymore for each separate Target) (https://developer.apple.com/library/archive/qa/qa1623/_index.html -> Replacing Your App in the Store)

---

## Widgets
#### Pie Chart
- Inner label can be too long and overlap with circle
- ***When deselecting a slice by clicking it again, the total is not displayed correctly afterwards and the size of the segment is not set back to the original size. This problem probably also occurs in the tablet app. --> fix in Tablet App, Smartphone App extends***
- In fullscreen mode, the size of the label is not adapted and quite small
- The spacing between two segments is generated by a border with the same color as the background. Therefore, background effects like gradients are not possible anymore.
- ***"Legend" is just a list, no click events***

#### Lists
- ~~Values are truncated very early, but tooltip was disabled~~

#### Line Chart
- Legend Icon is round rect, but cannot be styled and has different size than List Widget Icon