LocalStorage, Copy&Paste, Modals, Scrollbar, Highlight

[MaxiLein]

Summary

• Moved the user preferences from cookie to localstorage (closes Make a prefs zustand store #113, closes Use LocalStorage instead of cookies for browser state #103, closes The process card in the list view generates an error on first load #104 )
• Added Copy-Paste, as well as the delete functionality and modal to the process list
• Added Scrollbar Custom component (vertical scroll)
• Added highlight for search-input

Details

User-Preferences:

• The User-Preferences are now accessible and changeable via the useUserPreferences hook.
  • preferences is an object with, as of for now, value-type of: any.
  • the default preferences settings, as well as their type can be adjusted if needed ( src/management-system-v2/lib/user-preferences.ts )
  • addPreferences will overwrite a preferences if already existent or add a new one if not - preferences that are already set but not included in addPreferences will remain

Current default values:

const defaultPreferences: PreferencesType = {
  /* Default User-Settings: */
  /* 
    Delete user-preferences in localstorage, after adding a preference-setting
    The new default won't be set otherwise
  */
  'show-process-meta-data': true,
  'icon-view-in-process-list': false,
  'process-list-columns': ['', 'Process Name', 'Description', 'Last Edited'],
  'ask-before-deleting-multiple': true,
  'ask-before-deleting-single': true,
  'ask-before-copying': true,
  'process-copy-modal-accordion': true,
};

Usage:

import { useUserPreferences } from '@/lib/user-preferences';

const { preferences, addPreferences } = useUserPreferences();

/* For better readability I suggest to use renaming for all the preferences you wish to use */
const {'ask-before-copying': renamePref} = preferences

// ...

{ preferences['some-preference'] && 
<div
    onClick={
            () => { addPreference( {'some-preferences': !preferences['some-preference'] } ) 
        } 
    }
>
    Some-Preference
</div>}

Copy & Paste and Delete:

• Users can delete processes via the buttons or via del
  • depending whether the user is deleting on or multiple processes a modal will pop up
  • failed deletes (multiple) can be retried
• Users can copy and paste processes via ctrl-c + ctrl-v
  • the row copy button does not work yet (tbd)
  • A model opens and lets the user edit name and description before creating a copy

All modals can be set to not open and proceed with defaults via a checkbox by the user (userpreference).

Scrollbar:

• Browsers have different scrollbars and different scrollbar properties making it hard to have unique looking scrollbars independant of the user's browser
  • Adding the css-class Hide-Scroll-Bar will remove all browser set scrollbars

/* Hide scrollbar for IE, Edge and Firefox */
.Hide-Scroll-Bar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.Hide-Scroll-Bar::-webkit-scrollbar {
  display: none;
}

- For a vertical scroll I added the ScrollBar-Component
    - It's rendered accordingly to the scroll of its child
    - The scrollbar is draggable

Usage:

import ScrollBar from '@components/scrollbar';

// ...


      <div style={{width: '100px', height: '100px'}}> {/* The element wrapped around the Scrollbar should determine the dimensions */}
        <ScrollBar width='10px'> {/* The Scrollbar does add the `Hide-Scroll-Bar` class */}
          <div>
            Scrollable Content
          </div>
        </ScrollBar>
      </div>

Highlighting:

• Added highlighting for the process-list (icon/list-view)
• The highlighting is currently case sensitive

---

Adressing comments

Since this pull request includes the changes of #123 and #125 I will address their comments here:

• User preferences localstorage #123 (comment) → removed file
• User preferences localstorage #123 (comment) → The min-value of 100vh gave the overall page a greater height than 100vh → we removed min-height; Setting the height is not necessary → removed
• User preferences localstorage #123 (comment) → removed the comment and other unused stuff
• User preferences localstorage #123 (comment) → removed dir
• User preferences localstorage #123 (comment) → removed wrong auto-import