wip: Add spreadsheet component

[michaelbukachi]

What is the Purpose?

This PR adds a new spreadsheet component

• Add basic styling
• Allow sortable columns
• Allow column reordering and save position
• Add new input '+' icon that sticks to the bottom of the last row when table is NOT long
• allow users to add data per column for new row (similar to adding new project)
• allow users to do in-line edit of data (same as h-table)
• allow users to hide/show column and save the selection
• if column is a known set of options, display a dropdown: Spreadsheet + H Table components: Ability to filter a column by its dropdown values (if it is a dropdown field) (built in element) #241
• Add validation errors for relevant input types
• add view/edit event/hook

What was the approach?

Briefly describe the approach used to address the issue

Are there any concerns to addressed further before or after merging this PR?

State some additional info if any. For instance running install or setting some environment variable(s)

Mentions?

Mention persons you'd like to review this PR

Issue(s) affected?

Fix #365

[andrewtpham]

@michaelbukachi tested and the drag/drop feature is awesome! Looking forward to testing the other features 🚀

[andrewtpham]

@michaelbukachi Tested:

• ✅ when you filter by more than two or more columns, the filter is working as expected and the correct rows are displayed.
• 🚧 when you filter by a column, and select another column to filter, options that are not shown should be disabled. See GIF example I filter on address and select two filter options. Then I select on name to filter on the names but I still see Ben as an option to select. This option can still be displayed in the dropdown but we should disable this option so that users dont try to select it. Currently when it is selected, it breaks the first column filter.
  

[michaelbukachi]

@michaelbukachi Tested:

* white_check_mark when you filter by more than two or more columns, the filter is working as expected and the correct rows are displayed.

* construction when you filter by a column, and select another column to filter, options that are not shown should be disabled. See GIF example I filter on address and select two filter options. Then I select on `name` to filter on the names but I still see `Ben` as an option to select. This option can still be displayed in the dropdown but we should disable this option so that users dont try to select it. Currently when it is selected, it breaks the first column filter.
  ![spreadsheet-multiple-filter](https://user-images.githubusercontent.com/4407063/185980825-03010fc1-75ff-496e-adbd-5efdf996416c.gif)
        
          [
            
              ![spreadsheet-multiple-filter](https://user-images.githubusercontent.com/4407063/185980825-03010fc1-75ff-496e-adbd-5efdf996416c.gif)
            
          ](https://user-images.githubusercontent.com/4407063/185980825-03010fc1-75ff-496e-adbd-5efdf996416c.gif)
          
          
            
              
                
              
              
                
                
              
            
            [
              
                
              
            ](https://user-images.githubusercontent.com/4407063/185980825-03010fc1-75ff-496e-adbd-5efdf996416c.gif)

@andrewtpham The funny thing is this is also the default behaviour on the H-Table/El-table 🤔 .

[andrewtpham]

@michaelbukachi oh ok, thanks for pointing that out. Then I'll create a separate issue for this to solve under h-table. This is the new issue: #363

Besides updating the sort functionality so that all columns change when a user sorts 1 column, what else needs to be done?

[ninetteadhikari]

for adding new rows we can follow the current setup of Projects list.

• One input field will be and the bottom of the page
• Data would be saved to specified column
• on 'enter' data will be saved to the specified column
• rest of the column data will be added/edited by the user later

[andrewtpham]

Hey @michaelbukachi do you think you'll have time this week to wrap up the PR? Then we can start on the FE

[andrewtpham]

@michaelbukachi the new spreadsheet component is looking good! What's left do to in this first iteration?

[ninetteadhikari]

For column filters:

• show only the distinct data that are in the table column

@andrewtpham to share data types to be set for the spreadsheet columns.

[andrewtpham]

@michaelbukachi The data types we should support in the spreadsheet are:

• integer
• decimal
• boolean (this is a boolean and can display TRUE or FALSE). This is displayed as a checkbox.
• category (this is a dropdown from another object. For example the project object has the status field as a related object)
• text
• date
• percentage

We can these in the future:

• geolocation (decimal format with comma-separated, space-separated, or semi-colon-separated)
• url

[ninetteadhikari]

for category field:

• currently the dropdown options will be added in the code. For future iteration we can look at how user can add dropdown options

[andrewtpham]

Hey @michaelbukachi, was testing based on your last commit. Should I be able to add the wrong data type in these 3 columns?

[ninetteadhikari]

Validations:

• instead of not allowing users to add incorrect input, expected behavior would be for the user add incorrect input and show an error message

[andrewtpham]

@michaelbukachi updated the designs to display an entire row when the add icon is selected:

[ninetteadhikari]

Note:

• Date component: currently the html date is not showing. need to check why this is failing and alternatively maybe use element ui datepicker or another component
• For date format we can following the project list page format YYYY-MM-DD. We can keep it flexible so we can change the format later if needed.
• Add data type in the column header

[andrewtpham]

Note:

• use h-datepicker for date columns
• use h-select for category columns

[andrewtpham]

Tested and it looks great! Well done 🙇‍♂️

[andrewtpham]

@michaelbukachi if you're okay, let's merge this and then we can open a separate PR to add the following:

• Allow sortable columns
• Allow column reordering and save position
• Allow users to hide/show column and save the selection
• Add view/edit event/hook (not sure if its done yet) - add logic to double-click functionality

[michaelbukachi]

@andrewtpham Sure thing. No problem.