Merge pull request #239 from universi-me/feat#237/deletar-conteudo-e-…

…material FEAT #237: Menu de opções para deletar Conteúdo e Material
universi-me · Nov 14, 2023 · f4adf12 · f4adf12
2 parents 6100267 + 046b0b6
commit f4adf12
Show file tree

Hide file tree

Showing 9 changed files with 972 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@types/youtube": "^0.0.47",

diff --git a/src/pages/Group/Group.tsx b/src/pages/Group/Group.tsx
@@ -49,7 +49,9 @@ export function GroupPage() {
 
     async function refreshGroupData() {
         const data = await fetchGroupPageData({ groupPath: page.group?.path });
-        setContext(makeContext(data));
+        const newContext = makeContext(data);
+        setContext(newContext);
+        return newContext;
     }
 
     function makeContext(data: GroupPageLoaderResponse): NonNullable<GroupContextType> {

diff --git a/src/pages/Group/GroupContext.tsx b/src/pages/Group/GroupContext.tsx
@@ -20,7 +20,7 @@ export type GroupContextType = null | {
         groups:        Group[];
     };
 
-    refreshData: () => Promise<any>;
+    refreshData: () => Promise<NonNullable<GroupContextType>>;
 };
 
 export const GroupContext = createContext<GroupContextType>(null);
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.less b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.less
@@ -73,6 +73,88 @@
                     text-align: justify;
                 }
             }
+
+            .material-options-button {
+                margin-right: 1rem;
+                margin-left: auto;
+
+                display: flex;
+                padding-bottom: 3px;
+                align-items: center;
+                justify-content: center;
+
+                border: none;
+                border-radius: 50%;
+                background-color: transparent;
+
+                font-size: 1.5rem;
+                height: 2rem;
+                aspect-ratio: 1;
+
+                will-change: background-color;
+                cursor: pointer;
+
+                &:hover {
+                    background-color: #C1C1C1;
+                }
+            }
+
+            .material-options {
+                background-color: @card-background-color;
+                border-radius: .625rem;
+                padding: .25rem .5rem;
+
+                min-width: 7rem;
+
+                .material-options-arrow {
+                    fill: @card-background-color;
+                }
+
+                .dropdown-options-item {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    width: 100%;
+
+                    padding: .25rem .5rem;
+                    border-radius: .625rem;
+
+                    font-size: .9rem;
+
+                    cursor: pointer;
+
+                    &:hover {
+                        background-color: @button-hover-color;
+                        outline: none;
+
+                        &.delete {
+                            background-color: @alert-color;
+                            color: @font-color-v1;
+                        }
+                    }
+
+                    &[data-disabled] {
+                        color: @font-disabled-color;
+
+                        &:hover {
+                            background-color: transparent;
+                        }
+                    }
+
+                    &:not(:last-child) {
+                        margin-bottom: .25rem;
+                    }
+
+                    .right-slot {
+                        width: fit-content;
+                        margin-left: auto;
+
+                        &.bi {
+                            font-size: 1.2em;
+                        }
+                    }
+                }
+            }
         }
     }
-}
+}
diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx
@@ -1,15 +1,16 @@
 import { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import UniversimeApi from "@/services/UniversimeApi";
 import * as SwalUtils from "@/utils/sweetalertUtils";
 import { EMPTY_LIST_CLASS, GroupContext } from "@/pages/Group";
 import { setStateAsValue } from "@/utils/tsxUtils";
-import { ContentStatusEnum, type Content, ContentStatus, ContentType } from "@/types/Capacity";
-import YouTube from "react-youtube";
+import { ContentStatusEnum, type Content } from "@/types/Capacity";
 
 import "./GroupContentMaterials.less";
 import { VideoPopup } from "@/components/VideoPopup/VideoPopup";
 import { ContentStatusEdit_RequestDTO } from "@/services/UniversimeApi/Capacity";
+import { renderOption, type OptionInMenu, hasAvailableOption } from "@/utils/dropdownMenuUtils";
 
 export function GroupContentMaterials() {
     const groupContext = useContext(GroupContext);
@@ -33,6 +34,26 @@ export function GroupContentMaterials() {
 
     const groupName = <div onClick={() => groupContext.setCurrentContent(undefined)} style={{cursor: "pointer", display: "inline"}}>{groupContext.group.name}</div>
 
+    const OPTIONS_DEFINITION: OptionInMenu<Content>[] = [
+        {
+            text: "Editar",
+            biIcon: "pencil-fill",
+            disabled() { return true; },
+            hidden() {
+                return groupContext?.group.admin.id !== groupContext?.loggedData.profile.id;
+            },
+        },
+        {
+            text: "Excluir",
+            biIcon: "trash-fill",
+            className: "delete",
+            onSelect: handleDeleteMaterial,
+            hidden() {
+                return groupContext?.group.admin.id !== groupContext?.loggedData.profile.id;
+            },
+        }
+    ];
+
     return (
         <section id="materials" className="group-tab">
             <div className="heading top-container">
@@ -133,6 +154,21 @@ export function GroupContentMaterials() {
                 }
                     <p className="material-description">{material.description}</p>
                 </div>
+
+            { !hasAvailableOption(OPTIONS_DEFINITION) ? null :
+                <DropdownMenu.Root>
+                    <DropdownMenu.Trigger asChild>
+                        <button className="material-options-button">
+                            <i className="bi bi-three-dots-vertical" />
+                        </button>
+                    </DropdownMenu.Trigger>
+
+                    <DropdownMenu.Content className="material-options" side="left">
+                        { OPTIONS_DEFINITION.map(def => renderOption(material, def)) }
+                        <DropdownMenu.Arrow className="material-options-arrow" height=".5rem" width="1rem" />
+                    </DropdownMenu.Content>
+                </DropdownMenu.Root>
+            }
             </div>
         );
     }
@@ -248,6 +284,35 @@ export function GroupContentMaterials() {
 
     }
 
+    function handleDeleteMaterial(material: Content) {
+        SwalUtils.fireModal({
+            showCancelButton: true,
+
+            cancelButtonText: "Cancelar",
+            confirmButtonText: "Remover",
+            confirmButtonColor: "var(--alert-color)",
+
+            text: "Tem certeza que deseja remover este conteúdo deste grupo?",
+            icon: "warning",
+        }).then(res => {
+            if (res.isConfirmed) {
+                const folderId = groupContext?.currentContent?.id!;
+
+                UniversimeApi.Capacity.removeContentFromFolder({ folderId, contentIds: material.id })
+                    .then(res => {
+                        if (!res.success)
+                            return;
+
+                        groupContext?.refreshData()
+                            .then(data => {
+                                setTimeout(() => {
+                                    data.setCurrentContent(data.folders.find(c => c.id === folderId));
+                                }, 0);
+                            });
+                    });
+            }
+        });
+    }
 }
 
 

diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.less b/src/pages/Group/GroupTabs/GroupContents/GroupContents.less
@@ -46,16 +46,104 @@
             }
 
             .info {
+                width: 100%;
                 margin-left: 3rem;
 
                 color: @font-color-v2;
-                .content-name {
-                    color: inherit;
-                    text-decoration: none;
-                    font-weight: @font-weight-semibold;
-                    font-size: 1.5rem;
 
-                    cursor: pointer;
+                .content-name-wrapper {
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .content-name {
+                        color: inherit;
+                        text-decoration: none;
+                        font-weight: @font-weight-semibold;
+                        font-size: 1.5rem;
+
+                        cursor: pointer;
+                    }
+
+                    .content-options-button {
+                        display: flex;
+                        padding-bottom: 3px;
+                        align-items: center;
+                        justify-content: center;
+
+                        border: none;
+                        border-radius: 50%;
+                        background-color: transparent;
+
+                        font-size: 1.5rem;
+                        height: 2rem;
+                        aspect-ratio: 1;
+
+                        will-change: background-color;
+                        cursor: pointer;
+                        &:hover {
+                            background-color: #C1C1C1;
+                        }
+                    }
+
+                    .content-options {
+                        background-color: @card-background-color;
+                        border-radius: .625rem;
+                        padding: .25rem .5rem;
+
+                        min-width: 7rem;
+
+                        .content-options-arrow {
+                            fill: @card-background-color;
+                        }
+
+                        .dropdown-options-item {
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+                            width: 100%;
+
+                            padding: .25rem .5rem;
+                            border-radius: .625rem;
+
+                            font-size: .9rem;
+
+                            cursor: pointer;
+
+                            &:hover {
+                                background-color: @button-hover-color;
+                                outline: none;
+
+                                &.delete {
+                                    background-color: @alert-color;
+                                    color: @font-color-v1;
+                                }
+                            }
+
+                            &[data-disabled] {
+                                color: @font-disabled-color;
+
+                                &:hover {
+                                    background-color: transparent;
+                                }
+                            }
+
+                            &:not(:last-child) {
+                                margin-bottom: .25rem;
+                            }
+
+                            .right-slot {
+                                width: fit-content;
+                                margin-left: auto;
+
+                                &.bi {
+                                    font-size: 1.2em;
+                                }
+                            }
+                        }
+                    }
                 }
 
                 .content-description {