feat(library-management): add h5p-library-management to settings

client/src/services/LibraryAdministrationService.ts

@@ -0,0 +1,113 @@
+import type {
+    IInstalledLibrary,
+    ILibraryAdministrationOverviewItem
+} from '@lumieducation/h5p-server';
+
+/**
+ * The data model used to display the library list.
+ */
+export interface ILibraryViewModel extends ILibraryAdministrationOverviewItem {
+    details?: IInstalledLibrary & {
+        dependentsCount: number;
+        instancesAsDependencyCount: number;
+        instancesCount: number;
+        isAddon: boolean;
+    };
+    isDeleting?: boolean;
+    isShowingDetails?: boolean;
+}
+
+/**
+ *
+ */
+export class LibraryAdministrationService {
+    constructor(private baseUrl: string) {}
+
+    public async deleteLibrary(library: ILibraryViewModel): Promise<void> {
+        const response = await fetch(
+            `${this.baseUrl}/${library.machineName}-${library.majorVersion}.${library.minorVersion}`,
+            {
+                method: 'DELETE'
+            }
+        );
+
+        if (response.ok) {
+            return;
+        }
+        throw new Error(
+            `Could not delete library: ${response.status} - ${response.text}`
+        );
+    }
+
+    public async getLibraries(): Promise<ILibraryViewModel[]> {
+        const response = await fetch(this.baseUrl);
+        if (response.ok) {
+            return response.json();
+        }
+        throw new Error(
+            `Could not get library list: ${response.status} - ${response.statusText}`
+        );
+    }
+
+    public async getLibrary(
+        library: ILibraryViewModel
+    ): Promise<
+        IInstalledLibrary & {
+            dependentsCount: number;
+            instancesAsDependencyCount: number;
+            instancesCount: number;
+            isAddon: boolean;
+        }
+    > {
+        const response = await fetch(
+            `${this.baseUrl}/${library.machineName}-${library.majorVersion}.${library.minorVersion}`
+        );
+        if (response.ok) {
+            return response.json();
+        }
+        throw new Error(
+            `Could not get library details: ${response.status} - ${response.statusText}`
+        );
+    }
+
+    public async patchLibrary(
+        library: ILibraryViewModel,
+        changes: Partial<ILibraryViewModel>
+    ): Promise<ILibraryViewModel> {
+        const response = await fetch(
+            `${this.baseUrl}/${library.machineName}-${library.majorVersion}.${library.minorVersion}`,
+            {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json;charset=UTF-8'
+                },
+                body: JSON.stringify(changes)
+            }
+        );
+        if (response.ok) {
+            return { ...library, ...changes };
+        }
+        throw new Error(
+            `Could not patch library: ${response.status} - ${response.statusText}`
+        );
+    }
+
+    public async postPackage(
+        file: File
+    ): Promise<{ installed: number; updated: number }> {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch(this.baseUrl, {
+            method: 'POST',
+            body: formData
+        });
+        if (response.ok) {
+            const result = await response.json();
+            return { installed: result.installed, updated: result.updated };
+        }
+        throw new Error(
+            `Could not upload package with libraries: ${response.status} - ${response.statusText}`
+        );
+    }
+}

client/src/views/Settings.tsx

@@ -25,8 +25,9 @@ import ListItemText from '@material-ui/core/ListItemText';
 
 import CloseIcon from '@material-ui/icons/Close';
 import SettingsIcon from '@material-ui/icons/Settings';
+import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
 // import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
-import AccountBoxIcon from '@material-ui/icons/AccountBox';
+// import AccountBoxIcon from '@material-ui/icons/AccountBox';
 import UpdateIcon from '@material-ui/icons/Update';
 
 import SettingsList from './components/Settings/GeneralSettingsList';
@@ -49,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) =>
         },
         root: {
             display: 'flex',
-            marginLeft: '100px'
+            paddingLeft: drawerWidth
         },
         heading: {
             fontSize: theme.typography.pxToRem(15),
@@ -72,6 +73,7 @@ const useStyles = makeStyles((theme: Theme) =>
         },
         drawer: {
             width: drawerWidth,
+            marginRight: '20px',
             flexShrink: 0
         },
         drawerPaper: {
@@ -138,7 +140,8 @@ export default function FullScreenDialog() {
                 </AppBar>
                 <Drawer
                     className={classes.drawer}
-                    variant="permanent"
+                    variant="persistent"
+                    open={true}
                     classes={{
                         paper: classes.drawerPaper
                     }}
@@ -176,27 +179,27 @@ export default function FullScreenDialog() {
                                 primary={t('settings.menu.updates')}
                             />
                         </ListItem>
-                        {/* <ListItem
+                        <ListItem
                             button
-                            key="h5p-libraries"
-                            onClick={() => setSection('h5p-libraries')}
-                               style={{
-                                backgroundColor:
-                                    section === 'general'
-                                        ? '#EFEFEF'
-                                        : '#FFFFFF',
-                                color: '#3498db'
-                            }}
+                            key="h5p-library-administration"
+                            onClick={() =>
+                                setSection('h5p-library-administration')
+                            }
+                            className={classnames({
+                                [classes.selected]:
+                                    section === 'h5p-library-administration'
+                            })}
                         >
                             <ListItemIcon>
                                 <LibraryBooksIcon />
                             </ListItemIcon>
                             <ListItemText
-                                primary={t('settings.menu.h5p-libraries')}
+                                primary={t(
+                                    'settings.menu.h5p-library-administration'
+                                )}
                             />
                         </ListItem>
-                        */}
-                        <ListItem
+                        {/* <ListItem
                             button
                             key="account"
                             onClick={() => setSection('account')}
@@ -210,7 +213,7 @@ export default function FullScreenDialog() {
                             <ListItemText
                                 primary={t('settings.menu.account')}
                             />
-                        </ListItem>
+                        </ListItem> */}
                     </List>
                 </Drawer>
                 <DialogContent className={classes.bg}>
@@ -226,9 +229,9 @@ export default function FullScreenDialog() {
                                         case 'updates':
                                             return <UpdateSettings />;
 
-                                        case 'h5p-libraries':
+                                        case 'h5p-library-administration':
                                             return (
-                                                <SettingsLibraryManagement />
+                                                <SettingsLibraryManagement endpointUrl="/api/v1/h5p/libraries" />
                                             );
 
                                         case 'account':