Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72565

Implement configurable view for reports on narrow viewports

    XMLWordPrintable

Details

    • Improvement
    • Resolution: Fixed
    • Minor
    • 4.0
    • 4.0
    • Report builder
    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • Hide

      Setup

      1. Login as admin
      2. Navigate to Users > Accounts > Upload users in site administration
      3. Upload 72565-Users.csvto create test users
      4. Navigate to Reports > Report builder > Custom reports in site administration
      5. Press New report
      6. Create a new report from the Users report source
      7. Press 'Settings > Sorting'
      8. Tick 'Username' column

      Card view with default settings

      1. Press 'Settings > Card view'
      2. Confirm that 'Columns visible' value is '1' and 'First column title' is 'No'
      3. Press 'Preview'
      4. Resize the browser window to a small screen size < 576 px
      5. Confirm that table is now shown as cards
      6. Confirm cards only show first report column (Alvin Smith, Simon Jones, ...)
      7. Confirm column title 'FULL NAME' is not shown in the cards
      8. Press first card 'Alvin Smith' toggle button
      9. Confirm 'USERNAME' column title is shown
      10. Confirm 'user001' is shown
      11. Confirm 'EMAIL ADDRESS' column title is shown
      12. Confirm 'user001@example.com' is shown
      13. Resize the browser window again to a larger screen size > 576 px
      14. Confirm report table is shown correctly

      Card view with custom settings

      1. Press 'Edit'
      2. Press 'Settings > Card view'
      3. Set 'Columns visible' to '3'
      4. Set 'First column title' to 'Yes'
      5. Press 'Save changes'
      6. Press 'Preview'
      7. Resize the browser window to a small screen size < 576 px
      8. Confirm cards show every report column
      9. Confirm column title 'FULL NAME' is shown in the cards
      10. Confirm cards do not show toggle buttons
      11. Resize the browser window again to a larger screen size > 576 px
      12. Press 'Edit'
      13. Use the Search element to find the Country column
      14. Press the + button to add the column
      15. Confirm 'Columns visible' selector has now 4 items
      16. Press 'Preview'
      17. Resize the browser window to a small screen size < 576 px
      18. Confirm cards show toggle buttons
      19. Press first card 'Alvin Smith' toggle button
      20. Confirm 'COUNTRY' column title is shown
      21. Confirm 'Spain' is shown
      Show
      Setup Login as admin Navigate to Users > Accounts > Upload users in site administration Upload 72565-Users.csv to create test users Navigate to Reports > Report builder > Custom reports in site administration Press New report Create a new report from the Users report source Press 'Settings > Sorting' Tick 'Username' column Card view with default settings Press 'Settings > Card view' Confirm that 'Columns visible' value is '1' and 'First column title' is 'No' Press 'Preview' Resize the browser window to a small screen size < 576 px Confirm that table is now shown as cards Confirm cards only show first report column (Alvin Smith, Simon Jones, ...) Confirm column title 'FULL NAME' is not shown in the cards Press first card 'Alvin Smith' toggle button Confirm 'USERNAME' column title is shown Confirm 'user001' is shown Confirm 'EMAIL ADDRESS' column title is shown Confirm 'user001@example.com' is shown Resize the browser window again to a larger screen size > 576 px Confirm report table is shown correctly Card view with custom settings Press 'Edit' Press 'Settings > Card view' Set 'Columns visible' to '3' Set 'First column title' to 'Yes' Press 'Save changes' Press 'Preview' Resize the browser window to a small screen size < 576 px Confirm cards show every report column Confirm column title 'FULL NAME' is shown in the cards Confirm cards do not show toggle buttons Resize the browser window again to a larger screen size > 576 px Press 'Edit' Use the Search element to find the Country column Press the + button to add the column Confirm 'Columns visible' selector has now 4 items Press 'Preview' Resize the browser window to a small screen size < 576 px Confirm cards show toggle buttons Press first card 'Alvin Smith' toggle button Confirm 'COUNTRY' column title is shown Confirm 'Spain' is shown

    Description

      As mikelmartíncorrales implemented in WP-2757 for Workplace, however this was finished well after the editor being written for MDL-70795 was close to completion

      This work will allow users to configure, via the report editing interface, how their custom report will be displayed when viewed on a small device (it's "Card view") such as a mobile device

      Configuration of such will be via "Settings > Card view" panel, below "Conditions | Filters | Sorting" configuration:

      • Number of columns [int: how many columns are displayed in the card view]
      • Show first column title [bool: whether the first column title is displayed in the card view]

      Expected outcome:

      When viewing the report on a narrow device:

      A toggle is displayed to allow me to expand/collapse the whole card beyond the initial number of configured columns:

      Attachments

        1. 1.png
          1.png
          51 kB
        2. 2.png
          2.png
          4 kB
        3. 3.png
          3.png
          8 kB
        4. 72565-Users.csv
          6 kB
        5. MDL-72565_custom_Step 15.png
          MDL-72565_custom_Step 15.png
          114 kB
        6. MDL-72565_custom_Step 18.png
          MDL-72565_custom_Step 18.png
          61 kB
        7. MDL-72565_custom_Step 20-21.png
          MDL-72565_custom_Step 20-21.png
          61 kB
        8. MDL-72565_custom_Step 8-10.png
          MDL-72565_custom_Step 8-10.png
          62 kB
        9. MDL-72565_default_Step 14.png
          MDL-72565_default_Step 14.png
          92 kB
        10. MDL-72565_default_Step 2.png
          MDL-72565_default_Step 2.png
          108 kB
        11. MDL-72565_default_Step 5-7.png
          MDL-72565_default_Step 5-7.png
          54 kB
        12. MDL-72565_default_Step 9-12.png
          MDL-72565_default_Step 9-12.png
          56 kB
        13. Screenshot_2021-10-18 Users.png
          Screenshot_2021-10-18 Users.png
          2 kB

        Issue Links

          Activity

            People

              mikelmartíncorrales Mikel Martín Corrales
              pholden Paul Holden
              Paul Holden Paul Holden
              Victor Déniz Falcón Victor Déniz Falcón
              Angelia Dela Cruz Angelia Dela Cruz
              Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 week, 7 hours
                  1w 7h

                  Clockify

                    Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.