kylelambert101/mc-manager

Electron app for managing a music collection database in CSV format

mc-manager's Issues

Force light theme

The app looks bad when chromium uses its dark theme (black bars around the light-colored app content). While alternative themes would be useful at some point in the future, they're not needed now.

Force electron to use the light them only when building and loading this application.

Headers only stay aligned when top row is shown

Expected Behavior

Headers stay aligned with data columns during horizontal scrolling no mater how much vertical scroll is done

Current Behavior

Headers stay aligned with data columns during horizontal scroll if the data is not vertically scrolled. If the data is scrolled down any amount, it can be scrolled horizontally without maintaining header alignment.

Possible Solution

Header alignment syncing seems to be related to the TooltipHost code in CSVDataList - the fix for this might be related to that.

Steps to Reproduce (for bugs)

Load more than a page's worth of data and scroll down any amount, then try scrolling horizontally.

Inline 'include' toggle

Allow the user to toggle the boolean value of the include field with a checkbox in each row.

• Change include column to display checkbox instead of true/false
• Connect onChange events to update the redux store

Include Checkbox click takes too long

Expected Behavior

Clicking an Include checkbox immediately changes the visual state of the box

Current Behavior

Include checkboxes don't change visual state for a few seconds after they are clicked.

Possible Solution

The toggle redux reducer seems to run pretty quickly, so I'm guessing it's a render issue. Unfortunately, the devtools aren't loading properly in the electron app so it's tough to trace render issues.

Steps to Reproduce (for bugs)

Load a CSV file and click the Include checkbox for one or more rows.

Title bar and Command bar should not scroll horizontally

Expected Behavior

Title bar and command bar should remain locked in position when data is scrolled horizontally

Current Behavior

Loading data and scrolling horizontally (without scrolling vertically first) causes the title bar and command bar to scroll with the data, disappearing off the left side of the screen. Scrolling vertically first locks the bars in place and demonstrates expected behavior

Possible Solution

Since the Sticky behaves correctly once vertical scrolling occurs, it seems like it might be related to the state of the ScrollablePane - that could be a good place to start.

Steps to Reproduce (for bugs)

1. Load data wider than screen width
2. Scroll horizontally without scrolling down first

List Sorting

Implement a way for the user to sort the data list

• User should be able to sort data by one or more columns, each ascending or descending
• Save should preserve the active row order when writing to the file (in other words, rearranged rows should be stored in the new order in the redux state and thereby persisted to the CSV file in that order upon save)
• User should be able to reset row sort order without resetting other pending changes in the dataset

Run CSV Data Analysis

• Calculate statistics about music data
• Expose some kind of query-compatible dataset to the user

Show/Hide Columns

It would be neat if columns could be automatically shown/hidden for the data list view.

• Implement a way by which columns can be hidden
• Automatically hide Original File Location column
• Expose options to the user (series of checkboxes) to select columns for show/hide

Process New Song List

Implement a way for users to add new csv rows to the dataset and persist it to the source file

• Provide a text area for user to type or paste a string of new CSV data
• Upon submission, validate that the text is a valid CSV string and can be parsed successfully into one or more songs
• After parsing, show a summary to the user of the new data (number of songs, preview grid?)
• Alert the user if the new song already exists in the grid (keyed on new_file_name)
• Insert the new songs to the active dataset obeying the current sort rules (if no sort is specified, add songs to the top of the list)
• Do not allow songs to be inserted if they are already in the dataset (keyed on new_file_name)

Data Schema Restrucure

Update the application to be compatible with the new CSV file format:

• Remove the ID column and auto-generate IDs when the file is loaded
• Rename the Include column to be named Active

Reset Button

Add a button to reset the state of the data grid to the initial state loaded from the file (or saved to the file)
Back-end

• Add a backup of the initial data state to the redux store
• Set the backup when a file is loaded
• Set the backup when changes are saved to the file
• Add a reset action in redux to overwrite active data with the backup

Front-end

• Add Reset Button (unnecessary - the Cancel Changes button already exists)
• Add Confirmation Dialog ("Are you sure you want to discard your changes?")
• Connect Reset Button to the redux reset action

Format ID column

As the only column to be left of the include checkboxes, ID would look best if it was formatted differently from the rest of the data. It might even be good to format it such that it fades into the background. I'm thinking some combination of the following might be good:

• faded color
• larger font
• monospaced

• Update ID column style

Process New Song Files

• Get a new song (or songs) from the user
• Process the target file(s) to pull tag metadata
• Capture Purchase/Add date from user
• Add song data to the in-memory dataset
• Verify integration with export feature (#3)

Progress Bar

It would be really cool to have a progress bar as the songs are being loaded into redux.

• Adjust loading code to add one song at a time to redux and report progress (or start by reporting total)
• Implement ProgressBar component
• Feed progress from redux into ProgressBar component and render in place of datalist while isLoading === true

Undefined column

There is currently a column of 'undefined' values at the end of the DetailsList. Investigate and fix it.

Basic Display Improvements

Make some basic improvements to how the song data looks in the main list.

• Auto-expand columns
• Allow horizontal and vertical scrolling
• (Optional) Alternate line colors or color-code by "day" column [Moved to #13]

Import a CSV File

• Get a CSV File from the user
• Load the CSV Data
• Display the contents in a table/list view

ID Refactor

IDs are only used behind the scenes to identify particular rows, so they don't need to be visible to the user, nor do they need to be shifted when new songs are added. Make the following changes to how IDs are processed and stored:

• Hide the ID column by default for both the main view list and the AddSongs preview list
• Assign negative IDs to new songs as they are added, subtracting 1 from the minimum ID for each new song
• Do not reassign IDs of existing rows when new songs are added
• Refactor updates to match songs using new_file_name instead of id

Optional auto-sort when adding songs

Give the user the option to automatically apply sorting to the list when new songs are added

• Update Add songs dialog with checkbox for auto-sorting (default off - no auto-sort)
• If checkbox is selected, re-apply current sorting rules to the dataset after the new songs are added

Migrate to in-browser application

Up until now, the application has been running on top of electron as a desktop app. It may be useful to keep this functionality, but I'd like to see this running as a deployed in-browser app managed in GitHub Pages.

• Update project dependencies for web app instead of electron app
• Configure github pages deploy pipeline
• Research options for maintaining both an electron and in-browser version of the app

ID Column is extra wide before a file is loaded

Expected Behavior

ID Column remains small and another column (possibly Duration) expands to fill the horizontal space

Current Behavior

ID Column expands to fill horizontal space in the list, making it huge before data is loaded

Possible Solution

DetailsList prop layoutMode can be set to DetailsListMode.fixedColumns to fix this issue, but that causes another issue where the columns are not resized when a file is loaded.

Options:

1. Change the layoutMode to justified when a file is loaded, use fixedColumns if no data is loaded
2. Find a way to specify for each column whether it can be resized (or give ID/other columns a maxWidth)

Steps to Reproduce (for bugs)

Open the application with a window width large enough to show all columns plus extra space.

MultiSelect `Active` Toggle

Add a feature so that you can change the active value of multiple rows by Shift-Clicking the rows and then clicking the Active toggle in one of the selected rows. It would be confusing for the click to toggle each row individually (invert the set), so the behavior should be as follows:

1. If all selected rows have the same active value, toggle the value for all of them
2. If the selected rows have a mix of active values,
   -> First click should set all rows active = true
   -> Second click should set all rows active = false
   -> Third click should restore all rows to their original values
   -> Additional clicks should loop through the above options

Implement CSV Output

Export changes to the music dataset to the original CSV File

• Provide some way for the user to make changes to the in-memory dataset
• Connect Save button to a save file dialogue (Not needed at the moment - just saving to original file)
• Automatically target the original save file?
• Push changes from in-memory dataset to the target file
• Update cached song data upon Save

README

Project needs a README.md file

View Options

Implement the following features as well as a View Options panel so the user can toggle them on and off
View Options:

• Alternate row background colors by column value (dropdown, auto-select Day)
• Highlight/grey out based on "keep" selections
• Show/Hide Columns (Maybe provide a 'recommended' setup with file locations hidden)
• "Newest First" view ordered by date, then new_file_name

Panel:

• Stored state for view options selections
• Frontend to display state settings
• Allow state changes based on panel events

Song Edit Dialogue

Implement an edit window for an individual song record

• Allow user to select a song from the main data list, click "Edit" and then open the dialogue
• List all song fields in editable form
• Persist any changes to the in-memory data

Automatic Tests are failing

Tests that run for each project check-in are failing. Investigate and figure out what's going wrong. I'm guessing it's a holdover from the original ERB template that needs to be updated for this individual project.

Unit Tests

Project needs unit tests for existing functionality. Add tests for the following:

• Basic "it renders" tests for all components
• Confirm that clicking a checkbox in SongDatalist causes that row's value to toggle on/off
• Confirm that Save button persists to redux
• Confirm that Save saves to a file?
• Confirm that cancel changes restores the original data state
• Confirm that addsongs > new data shows preview data in the grid (known valid data should allow for prediction about grid rows)
• Confirm that addsongs > new data is validated properly
• Confirm that addsongs > new data > submit adds the data to the full collection
• Confirm that addsongs > new data > submit with autosort drops data into collection in the proper order
• Confirm that loading bar shows up and disappears at the right time
• Confirm that clicking column headers changes sort columns for all three toggle positions
• Confirm that clicking column headers in a particular order sorts the data correctlyH

Rename `master` branch to `main`

Rename master to main to align with current principles

Dev Tools aren't working

Redux and React devtools extensions aren't working in electron dev mode. There may be an update down the road for electron-devtools-installer that can fix this issue.