Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: notes | Multiple Categories deletion feature #770

Closed
wants to merge 5 commits into from
Closed

feat: notes | Multiple Categories deletion feature #770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
14d1ff5
Multiple Notes deletion feature
Jazzxe Apr 30, 2024
82e0960
fix: restore the file_upload
ArkadiK94 May 3, 2024
5a1829b
Added Multiselect toggler
Jazzxe May 9, 2024
19b4b21
Merge branch 'notesDeleteFeature' of https://github.com/Jazzxe/TheCyb…
Jazzxe May 9, 2024
459a3e0
Merge branch 'dev' into notesDeleteFeature
ArkadiK94 Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@
}
},
"plugins": ["react", "no-relative-import-paths"],
"settings": {
"react": {
"version": "detect"
}
},
"rules": {
"react/prop-types": "off",
"no-relative-import-paths/no-relative-import-paths": [
Expand Down
239 changes: 119 additions & 120 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,123 +1,122 @@
{
"homepage": "https://thecyberhub.org/",
"name": "thecyberhub.org",
"private": true,
"version": "0.53.14",
"type": "module",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"dev": "vite",
"build": "NODE_OPTIONS=\"--max-old-space-size=4096\" vite build",
"preview": "vite preview",
"prepare": "husky install",
"lint:fix": "eslint --fix --ext .js,.jsx .",
"lint:css": "stylelint **/*.jsx",
"lint:css-fix": "stylelint **/*.jsx --fix",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"@radix-ui/react-slot": "^1.0.2",
"@reduxjs/toolkit": "^2.2.4",
"@uiw/react-md-editor": "^4.0.4",
"add-to-calendar-button-react": "^2.6.14",
"axios": "^1.6.8",
"chart.js": "^4.4.2",
"crypto-js": "^4.2.0",
"date-fns": "^3.6.0",
"dompurify": "^3.1.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.0.14",
"fs-extra": "^11.2.0",
"highlight.js": "^11.9.0",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
"jwt-decode": "^4.0.0",
"moment": "^2.30.1",
"path": "^0.12.7",
"path-to-regexp": "^6.2.2",
"react-calendar-heatmap": "^1.9.0",
"react-chartjs-2": "^5.2.0",
"react-chatbot-kit": "^2.2.2",
"react-csv": "^2.2.2",
"react-day-picker": "^8.10.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^2.0.5",
"react-icons": "^5.2.1",
"react-infinite-scroll-component": "^6.1.0",
"react-markdown": "^9.0.1",
"react-quill": "^2.0.0",
"react-redux": "^9.1.2",
"react-router": "^6.23.1",
"react-router-dom": "^6.23.1",
"react-scroll": "^1.9.0",
"react-spinners": "^0.13.8",
"react-spinners-kit": "^1.9.1",
"react-syntax-highlighter": "^15.5.0",
"react-toastify": "^10.0.5",
"react-transition-group": "^4.4.5",
"rehype-sanitize": "^6.0.0",
"remark-gfm": "^4.0.0",
"sass": "^1.77.1",
"styled-components": "^6.1.11",
"validator": "^13.12.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.5.0",
"@storybook/addon-essentials": "^8.1.5",
"@storybook/addon-interactions": "^8.1.5",
"@storybook/addon-links": "^8.1.5",
"@storybook/addon-onboarding": "^8.1.5",
"@storybook/blocks": "^8.1.5",
"@storybook/react": "^8.1.5",
"@storybook/react-vite": "^8.1.5",
"@storybook/test": "^8.1.5",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.0.0",
"eslint-plugin-no-relative-import-paths": "^1.5.4",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-storybook": "^0.8.0",
"gh-pages": "^6.1.1",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"postcss": "^8.4.38",
"postcss-styled-syntax": "^0.6.4",
"prettier": "^3.2.5",
"prop-types": "^15.8.1",
"storybook": "^8.1.5",
"stylelint": "^16.5.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-plugin-styled-components": "^1.0.3",
"tailwindcss": "^3.4.3",
"vite": "^5.2.11"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
"homepage": "https://thecyberhub.org/",
"name": "thecyberhub.org",
"private": true,
"version": "0.53.14",
"type": "module",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"dev": "vite",
"build": "NODE_OPTIONS=\"--max-old-space-size=4096\" vite build",
"preview": "vite preview",
"prepare": "husky install",
"lint:fix": "eslint --fix --ext .js,.jsx . && stylelint **/*.jsx --fix",
"lint:css": "stylelint **/*.jsx",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"dependencies": {
"@radix-ui/react-slot": "^1.0.2",
"@reduxjs/toolkit": "^2.2.4",
"@uiw/react-md-editor": "^4.0.4",
"add-to-calendar-button-react": "^2.6.14",
"axios": "^1.6.8",
"chart.js": "^4.4.2",
"crypto-js": "^4.2.0",
"date-fns": "^3.6.0",
"dompurify": "^3.1.3",
"dotenv": "^16.4.5",
"framer-motion": "^11.0.14",
"fs-extra": "^11.2.0",
"highlight.js": "^11.9.0",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
"jwt-decode": "^4.0.0",
"moment": "^2.30.1",
"path": "^0.12.7",
"path-to-regexp": "^6.2.2",
"react-calendar-heatmap": "^1.9.0",
"react-chartjs-2": "^5.2.0",
"react-chatbot-kit": "^2.2.2",
"react-csv": "^2.2.2",
"react-day-picker": "^8.10.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^2.0.5",
"react-icons": "^5.2.1",
"react-infinite-scroll-component": "^6.1.0",
"react-markdown": "^9.0.1",
"react-quill": "^2.0.0",
"react-redux": "^9.1.2",
"react-router": "^6.23.1",
"react-router-dom": "^6.23.1",
"react-scroll": "^1.9.0",
"react-spinners": "^0.13.8",
"react-spinners-kit": "^1.9.1",
"react-syntax-highlighter": "^15.5.0",
"react-toastify": "^10.0.5",
"react-transition-group": "^4.4.5",
"rehype-sanitize": "^6.0.0",
"remark-gfm": "^4.0.0",
"sass": "^1.77.1",
"styled-components": "^6.1.11",
"validator": "^13.12.0"
},
"devDependencies": {
"@chromatic-com/storybook": "^1.5.0",
"@storybook/addon-essentials": "^8.1.5",
"@storybook/addon-interactions": "^8.1.5",
"@storybook/addon-links": "^8.1.5",
"@storybook/addon-onboarding": "^8.1.5",
"@storybook/blocks": "^8.1.5",
"@storybook/react": "^8.1.5",
"@storybook/react-vite": "^8.1.5",
"@storybook/test": "^8.1.5",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.19",
"eslint": "^8.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-standard": "^17.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.0.0",
"eslint-plugin-no-relative-import-paths": "^1.5.4",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.34.1",
"eslint-plugin-storybook": "^0.8.0",
"gh-pages": "^6.1.1",
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"postcss": "^8.4.38",
"postcss-styled-syntax": "^0.6.4",
"prettier": "^3.2.5",
"prop-types": "^15.8.1",
"storybook": "^8.1.5",
"stylelint": "^16.5.0",
"stylelint-config-standard": "^36.0.0",
"stylelint-plugin-styled-components": "^1.0.3",
"tailwindcss": "^3.4.3",
"vite": "^5.2.11"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --cache --fix",
"stylelint --fix"
],
"*.{js,jsx,css,md}": "prettier --write"
},
"eslintConfig": {
"settings": {
"react": {
"version": "detect"
}
}
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --cache --fix",
"stylelint --fix"
],
"*.{js,jsx,css,md}": "prettier --write"
},
"eslintConfig": {
"settings": {
"react": {
"version": "detect"
}
}
}
}
57 changes: 57 additions & 0 deletions src/components/Dashboard/Notetaker/Category/CategoryElements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,59 @@
import styled from "styled-components";
export const ToggleButton = styled.button`
ArkadiK94 marked this conversation as resolved.
Show resolved Hide resolved
color: white;
margin-top: auto;

/* Push the button to the bottom */
`;

export const CategoriesSidebarCheckbox = styled.input.attrs({ type: "checkbox" })`
display: none; /* Hide the checkbox */

/* Ensure there is a label following this input in your component structure */
+ label {
position: relative;
padding-left: 25px; /* Space for custom visual checkbox */
cursor: pointer;
display: inline-block;

&::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
border-radius: 50%; /* Round shape */
background: white;
border: 1px solid #ccc;
transition: all 0.3s;
}

&::after {
content: "";
position: absolute;
top: 45%;
left: 13.25%;
transform: translate(-50%, -50%); /* Perfect center alignment */
width: 4px;
height: 4px;
border-radius: 50%; /* Round dot */
background: orange;
transition: opacity 0.3s;
opacity: 0; /* Initially hidden */
}
}

&:checked + label&::before {
border-color: orange; /* Change border color when checked */
}

&:checked + label&::after {
opacity: 1; /* Show the dot when checked */
box-shadow: 0 0 5px 2px orange;
}
`;

export const CategoriesSidebarContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -62,6 +117,8 @@ export const CategoryItemElementContainer = styled.div`
`;

export const CategoryItemElement = styled.li`
display: flex;
flex-direction: row;
position: relative;
width: 100%;
padding: 10px;
Expand Down
20 changes: 19 additions & 1 deletion src/components/Dashboard/Notetaker/Category/CategoryItem.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,14 @@ import {
CategoryMenuButtonLabel,
CategoryMenuButtons,
CategoryOptionsMenuContainer,
CategoriesSidebarCheckbox,
} from "./CategoryElements";
import { deleteNotesCategory, updateNotesCategory } from "src/features/notes/notesCategory/notesCategorySlice";
import {
AddSelectedCategory,
RemoveCategory,
deleteNotesCategory,
updateNotesCategory,
} from "src/features/notes/notesCategory/notesCategorySlice";
import "src/components/Dashboard/Notetaker/NoteApp.css";
import ModifyCategory from "./ModifyCategory";
import { toast } from "react-toastify";
Expand All @@ -27,6 +33,7 @@ const CategoryItem = ({
defaultCategory,
onEditCategory,
stillEditing,
showCheckbox,
}) => {
const dispatch = useDispatch();
const [isCategoryMenuOpen, setIsCategoryMenuOpen] = useState(false);
Expand Down Expand Up @@ -85,8 +92,19 @@ const CategoryItem = ({
) : (
<CategoryItemElementContainer>
<CategoryItemElement onClick={() => onPick(category)} $isPicked={isPicked}>
{showCheckbox && ( // Conditionally render the checkbox based on the showCheckbox prop
<CategoriesSidebarCheckbox
id={`checkbox-${id}`}
onChange={(e) => {
e.target.checked ? dispatch(AddSelectedCategory(id)) : dispatch(RemoveCategory(id));
}}
/>
)}
{showCheckbox && <label htmlFor={`checkbox-${id}`}></label>}{" "}
ArkadiK94 marked this conversation as resolved.
Show resolved Hide resolved
{/* Conditionally render the label based on the showCheckbox prop */}
<CategoryItemShortTitle>{category.name.slice(0, 23)}</CategoryItemShortTitle>
</CategoryItemElement>

<CategoryOptionsMenuContainer>
<SlOptionsVertical
size="16"
Expand Down
1 change: 1 addition & 0 deletions src/components/Dashboard/Notetaker/Category/CategoryList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const CategoryList = ({
defaultCategory,
onEditCategory,
editCategoryId,
showCheckboxes, // New prop to control whether to show checkboxes
}) => {
const dispatch = useDispatch();
return (
Expand Down
Loading