From 592e74226fa0bc382af0579baa83f61ce6bf3ba6 Mon Sep 17 00:00:00 2001 From: Douglas Sebastian Date: Sat, 11 Nov 2023 19:02:23 -0300 Subject: [PATCH 1/7] change: remove unused import and comments --- .../GroupTabs/GroupContents/GroupContentMaterials.tsx | 3 +-- src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx | 8 +------- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx index 23cb200a..6d29454f 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContentMaterials.tsx @@ -4,8 +4,7 @@ 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"; diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx index de25c3df..439f954d 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx @@ -1,5 +1,4 @@ import { useContext, useState } from "react"; -import { Link } from "react-router-dom"; import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext } from "@/pages/Group"; import { setStateAsValue } from "@/utils/tsxUtils"; @@ -58,20 +57,15 @@ export function GroupContents() { } function renderContent(content: Folder) { - const linkToFolder = `/capacitacao/folder/${content.id}`; - const imageUrl = content.image?.startsWith("/") ? `${import.meta.env.VITE_UNIVERSIME_API}${content.image}` : content.image; return (
- {/* */} - groupContext?.setCurrentContent(content)} /> - {/* */} + groupContext?.setCurrentContent(content)} />
- {/* {content.name} */}

groupContext?.setCurrentContent(content)}>{content.name}

{content.description}

From e790fd075cd2284ed6f49d100d56a27095492e11 Mon Sep 17 00:00:00 2001 From: Douglas Sebastian Date: Sun, 12 Nov 2023 08:50:37 -0300 Subject: [PATCH 2/7] feat: content options menu --- package-lock.json | 614 ++++++++++++++++++ package.json | 1 + .../GroupContents/GroupContents.less | 100 ++- .../GroupTabs/GroupContents/GroupContents.tsx | 23 +- 4 files changed, 731 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6aaaece8..f3253d57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "universi-front", "version": "0.0.0", "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", @@ -2859,6 +2860,18 @@ "@floating-ui/utils": "^0.1.1" } }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", + "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@floating-ui/utils": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz", @@ -3745,6 +3758,29 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-arrow": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", + "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -3822,6 +3858,104 @@ } } }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dropdown-menu": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz", + "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-menu": "2.0.6", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", + "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz", + "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", @@ -3840,6 +3974,101 @@ } } }, + "node_modules/@radix-ui/react-menu": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz", + "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popper": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", + "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-presence": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", @@ -4032,6 +4261,24 @@ } } }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz", + "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-layout-effect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", @@ -4066,6 +4313,24 @@ } } }, + "node_modules/@radix-ui/react-use-rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", + "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-size": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", @@ -4084,6 +4349,14 @@ } } }, + "node_modules/@radix-ui/rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", + "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@react-aria/ssr": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.7.0.tgz", @@ -7131,6 +7404,17 @@ "sprintf-js": "~1.0.2" } }, + "node_modules/aria-hidden": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", + "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -8751,6 +9035,11 @@ "node": ">=8" } }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "node_modules/detect-package-manager": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz", @@ -9771,6 +10060,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/get-npm-tarball-url": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.0.3.tgz", @@ -14899,6 +15196,51 @@ "node": ">=0.10.0" } }, + "node_modules/react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "dependencies": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz", + "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==", + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-router": { "version": "6.14.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", @@ -14949,6 +15291,28 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -16477,6 +16841,26 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-callback-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", + "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-isomorphic-layout-effect": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", @@ -16503,6 +16887,27 @@ "react-dom": "16.8.0 - 18" } }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", @@ -18988,6 +19393,14 @@ "@floating-ui/utils": "^0.1.1" } }, + "@floating-ui/react-dom": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", + "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", + "requires": { + "@floating-ui/dom": "^1.5.1" + } + }, "@floating-ui/utils": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz", @@ -19664,6 +20077,15 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-arrow": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", + "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + } + }, "@radix-ui/react-collection": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", @@ -19700,6 +20122,53 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-dismissable-layer": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz", + "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + } + }, + "@radix-ui/react-dropdown-menu": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz", + "integrity": "sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-menu": "2.0.6", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + } + }, + "@radix-ui/react-focus-guards": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", + "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, + "@radix-ui/react-focus-scope": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz", + "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + } + }, "@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", @@ -19709,6 +20178,59 @@ "@radix-ui/react-use-layout-effect": "1.0.1" } }, + "@radix-ui/react-menu": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.6.tgz", + "integrity": "sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + } + }, + "@radix-ui/react-popper": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", + "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==", + "requires": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + } + }, + "@radix-ui/react-portal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", + "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + } + }, "@radix-ui/react-presence": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz", @@ -19804,6 +20326,15 @@ "@radix-ui/react-use-callback-ref": "1.0.1" } }, + "@radix-ui/react-use-escape-keydown": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz", + "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + } + }, "@radix-ui/react-use-layout-effect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", @@ -19820,6 +20351,15 @@ "@babel/runtime": "^7.13.10" } }, + "@radix-ui/react-use-rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", + "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==", + "requires": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "1.0.1" + } + }, "@radix-ui/react-use-size": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", @@ -19829,6 +20369,14 @@ "@radix-ui/react-use-layout-effect": "1.0.1" } }, + "@radix-ui/rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", + "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==", + "requires": { + "@babel/runtime": "^7.13.10" + } + }, "@react-aria/ssr": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.7.0.tgz", @@ -22141,6 +22689,14 @@ "sprintf-js": "~1.0.2" } }, + "aria-hidden": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", + "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", + "requires": { + "tslib": "^2.0.0" + } + }, "aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -23348,6 +23904,11 @@ "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==", "dev": true }, + "detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "detect-package-manager": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz", @@ -24172,6 +24733,11 @@ "has-symbols": "^1.0.3" } }, + "get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==" + }, "get-npm-tarball-url": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.0.3.tgz", @@ -27934,6 +28500,27 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "requires": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + } + }, + "react-remove-scroll-bar": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz", + "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==", + "requires": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + } + }, "react-router": { "version": "6.14.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", @@ -27967,6 +28554,16 @@ "use-isomorphic-layout-effect": "^1.1.2" } }, + "react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "requires": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + } + }, "react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -29127,6 +29724,14 @@ "requires-port": "^1.0.0" } }, + "use-callback-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", + "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "requires": { + "tslib": "^2.0.0" + } + }, "use-isomorphic-layout-effect": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", @@ -29141,6 +29746,15 @@ "@juggle/resize-observer": "^3.3.1" } }, + "use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "requires": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + } + }, "util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", diff --git a/package.json b/package.json index 114a1deb..b7cd464b 100644 --- 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/GroupTabs/GroupContents/GroupContents.less b/src/pages/Group/GroupTabs/GroupContents/GroupContents.less index 7dddd426..5a13a534 100644 --- 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; + } + + .content-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 { diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx index 439f954d..d650dd55 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx @@ -1,4 +1,5 @@ import { useContext, useState } from "react"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext } from "@/pages/Group"; import { setStateAsValue } from "@/utils/tsxUtils"; @@ -66,7 +67,27 @@ export function GroupContents() { groupContext?.setCurrentContent(content)} />
-

groupContext?.setCurrentContent(content)}>{content.name}

+
+

groupContext?.setCurrentContent(content)}>{content.name}

+ + + + + + + + Editar + + + Excluir + + + + + +

{content.description}

From 44cfa6fc1dea5b8bae8f4c30f690869e91056cdb Mon Sep 17 00:00:00 2001 From: Douglas Sebastian Date: Sun, 12 Nov 2023 09:08:03 -0300 Subject: [PATCH 3/7] feat: delete content --- .../GroupTabs/GroupContents/GroupContents.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx index d650dd55..9f4aea81 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx @@ -1,6 +1,8 @@ import { useContext, useState } from "react"; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; +import UniversimeApi from "@/services/UniversimeApi"; +import * as SwalUtils from "@/utils/sweetalertUtils"; import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext } from "@/pages/Group"; import { setStateAsValue } from "@/utils/tsxUtils"; import { ProfileImage } from "@/components/ProfileImage/ProfileImage"; @@ -80,7 +82,7 @@ export function GroupContents() { Editar - + Excluir @@ -93,4 +95,29 @@ export function GroupContents() { ); } + + function makeOnClickDelete(contentId: string) { + return function() { + SwalUtils.fireModal({ + showCancelButton: true, + + cancelButtonText: "Cancelar", + confirmButtonText: "Excluir", + confirmButtonColor: "var(--alert-color)", + + text: "Tem certeza que deseja excluir este conteúdo?", + icon: "warning", + }).then(res => { + if (res.isConfirmed) { + UniversimeApi.Capacity.removeFolder({id: contentId}) + .then(res => { + if (!res.success) + return; + + groupContext?.refreshData(); + }); + } + }); + } + } } From 74ab6f7f25e7e8c4a550b8a13e467bfa0369f1ed Mon Sep 17 00:00:00 2001 From: Douglas Sebastian Date: Sun, 12 Nov 2023 10:10:11 -0300 Subject: [PATCH 4/7] feat: dynamic option render --- .../GroupTabs/GroupContents/GroupContents.tsx | 110 +++++++++++++----- 1 file changed, 79 insertions(+), 31 deletions(-) diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx index 9f4aea81..74bdac20 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx @@ -1,4 +1,4 @@ -import { useContext, useState } from "react"; +import { ReactNode, useContext, useState } from "react"; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import UniversimeApi from "@/services/UniversimeApi"; @@ -21,6 +21,28 @@ export function GroupContents() { return ; } + const OPTIONS_DEFINITION: OptionInMenu[] = [ + { + 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: handleDeleteContent, + hidden() { + return groupContext?.group.admin.id !== groupContext?.loggedData.profile.id; + }, + } + ] + + const hasAvailableOption = undefined !== OPTIONS_DEFINITION.find(def => !def.hidden && !def.disabled); + return (
@@ -71,6 +93,8 @@ export function GroupContents() {

groupContext?.setCurrentContent(content)}>{content.name}

+ + { !hasAvailableOption ? null :

{content.description}

@@ -96,28 +115,57 @@ export function GroupContents() { ); } - function makeOnClickDelete(contentId: string) { - return function() { - SwalUtils.fireModal({ - showCancelButton: true, - - cancelButtonText: "Cancelar", - confirmButtonText: "Excluir", - confirmButtonColor: "var(--alert-color)", - - text: "Tem certeza que deseja excluir este conteúdo?", - icon: "warning", - }).then(res => { - if (res.isConfirmed) { - UniversimeApi.Capacity.removeFolder({id: contentId}) - .then(res => { - if (!res.success) - return; - - groupContext?.refreshData(); - }); - } - }); - } + function renderOption(content: Folder, option: OptionInMenu) { + if (option.hidden) + return null; + + const className = "content-options-item" + (option.className ? ` ${option.className}` : ""); + const disabled = option.disabled ? option.disabled() : undefined; + const onSelect = disabled ? undefined : makeOnSelect(content, option.onSelect); + const key = option.text?.toString(); + + return + { option.text } + { option.biIcon ? : null } + + } + + function makeOnSelect(data: Folder, callback?: (data: Folder) => any) { + return callback + ? function() { callback(data); } + : undefined; + } + + function handleDeleteContent(content: Folder) { + SwalUtils.fireModal({ + showCancelButton: true, + + cancelButtonText: "Cancelar", + confirmButtonText: "Excluir", + confirmButtonColor: "var(--alert-color)", + + text: "Tem certeza que deseja excluir este conteúdo?", + icon: "warning", + }).then(res => { + if (res.isConfirmed) { + UniversimeApi.Capacity.removeFolder({id: content.id}) + .then(res => { + if (!res.success) + return; + + groupContext?.refreshData(); + }); + } + }); } } + +type OptionInMenu = { + text: ReactNode; + biIcon?: string; + className?: string; + + onSelect?: (data: Folder) => any; + disabled?: () => boolean; + hidden?: () => boolean; +}; From 49c94578301f825d8318e3dc0e9190601383cad6 Mon Sep 17 00:00:00 2001 From: Douglas Sebastian Date: Sun, 12 Nov 2023 10:51:16 -0300 Subject: [PATCH 5/7] change: moved functions to dropdown utils module --- .../GroupTabs/GroupContents/GroupContents.tsx | 36 ++----------------- src/utils/dropdownMenuUtils.tsx | 31 ++++++++++++++++ 2 files changed, 34 insertions(+), 33 deletions(-) create mode 100644 src/utils/dropdownMenuUtils.tsx diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx index 74bdac20..5506b678 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useContext, useState } from "react"; +import { useContext, useState } from "react"; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import UniversimeApi from "@/services/UniversimeApi"; @@ -6,6 +6,7 @@ import * as SwalUtils from "@/utils/sweetalertUtils"; import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext } from "@/pages/Group"; import { setStateAsValue } from "@/utils/tsxUtils"; import { ProfileImage } from "@/components/ProfileImage/ProfileImage"; +import { type OptionInMenu, renderOption } from "@/utils/dropdownMenuUtils" import type { Folder } from "@/types/Capacity"; import "./GroupContents.less"; @@ -21,7 +22,7 @@ export function GroupContents() { return ; } - const OPTIONS_DEFINITION: OptionInMenu[] = [ + const OPTIONS_DEFINITION: OptionInMenu[] = [ { text: "Editar", biIcon: "pencil-fill", @@ -115,27 +116,6 @@ export function GroupContents() { ); } - function renderOption(content: Folder, option: OptionInMenu) { - if (option.hidden) - return null; - - const className = "content-options-item" + (option.className ? ` ${option.className}` : ""); - const disabled = option.disabled ? option.disabled() : undefined; - const onSelect = disabled ? undefined : makeOnSelect(content, option.onSelect); - const key = option.text?.toString(); - - return - { option.text } - { option.biIcon ? : null } - - } - - function makeOnSelect(data: Folder, callback?: (data: Folder) => any) { - return callback - ? function() { callback(data); } - : undefined; - } - function handleDeleteContent(content: Folder) { SwalUtils.fireModal({ showCancelButton: true, @@ -159,13 +139,3 @@ export function GroupContents() { }); } } - -type OptionInMenu = { - text: ReactNode; - biIcon?: string; - className?: string; - - onSelect?: (data: Folder) => any; - disabled?: () => boolean; - hidden?: () => boolean; -}; diff --git a/src/utils/dropdownMenuUtils.tsx b/src/utils/dropdownMenuUtils.tsx new file mode 100644 index 00000000..569c4a88 --- /dev/null +++ b/src/utils/dropdownMenuUtils.tsx @@ -0,0 +1,31 @@ +import { ReactNode } from "react"; +import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; + +export type OptionInMenu = { + text: NonNullable; + biIcon?: string; + className?: string; + + onSelect?: (data: T) => any; + disabled?: () => boolean; + hidden?: () => boolean; +}; + +export function renderOption(data: T, option: OptionInMenu) { + if (option.hidden) + return null; + + const className = "content-options-item" + (option.className ? ` ${option.className}` : ""); + const disabled = option.disabled ? option.disabled() : undefined; + const key = option.text.toString(); + const onSelect = function() { + return !disabled && option.onSelect + ? option.onSelect(data) + : undefined; + }; + + return + { option.text } + { option.biIcon ? : null } + +} From bf3f7fc02cd876d8882b406afbf1bb07956600a2 Mon Sep 17 00:00:00 2001 From: Douglas Sebastian Date: Sun, 12 Nov 2023 11:16:13 -0300 Subject: [PATCH 6/7] fix: check for available option --- .../GroupTabs/GroupContents/GroupContents.tsx | 6 ++--- src/utils/dropdownMenuUtils.tsx | 22 ++++++++++++++----- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx index 5506b678..9f2b47eb 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.tsx @@ -6,7 +6,7 @@ import * as SwalUtils from "@/utils/sweetalertUtils"; import { EMPTY_LIST_CLASS, GroupContentMaterials, GroupContext } from "@/pages/Group"; import { setStateAsValue } from "@/utils/tsxUtils"; import { ProfileImage } from "@/components/ProfileImage/ProfileImage"; -import { type OptionInMenu, renderOption } from "@/utils/dropdownMenuUtils" +import { type OptionInMenu, renderOption, hasAvailableOption } from "@/utils/dropdownMenuUtils" import type { Folder } from "@/types/Capacity"; import "./GroupContents.less"; @@ -42,8 +42,6 @@ export function GroupContents() { } ] - const hasAvailableOption = undefined !== OPTIONS_DEFINITION.find(def => !def.hidden && !def.disabled); - return (
@@ -95,7 +93,7 @@ export function GroupContents() {

groupContext?.setCurrentContent(content)}>{content.name}

- { !hasAvailableOption ? null : + { !hasAvailableOption(OPTIONS_DEFINITION) ? null : + + + + { OPTIONS_DEFINITION.map(def => renderOption(material, def)) } + + + + }
); } @@ -247,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 index 5a13a534..4897e098 100644 --- a/src/pages/Group/GroupTabs/GroupContents/GroupContents.less +++ b/src/pages/Group/GroupTabs/GroupContents/GroupContents.less @@ -99,7 +99,7 @@ fill: @card-background-color; } - .content-options-item { + .dropdown-options-item { display: flex; flex-direction: row; align-items: center; diff --git a/src/utils/dropdownMenuUtils.tsx b/src/utils/dropdownMenuUtils.tsx index 7522f1ec..619333a9 100644 --- a/src/utils/dropdownMenuUtils.tsx +++ b/src/utils/dropdownMenuUtils.tsx @@ -15,7 +15,7 @@ export function renderOption(data: T, option: OptionInMenu) { if (isHidden(option)) return null; - const className = "content-options-item" + (option.className ? ` ${option.className}` : ""); + const className = "dropdown-options-item" + (option.className ? ` ${option.className}` : ""); const disabled = isDisabled(option); const key = option.text.toString(); const onSelect = function() {