Skip to content

Commit

Permalink
Fixing note header menues
Browse files Browse the repository at this point in the history
  • Loading branch information
arcuo committed May 8, 2023
1 parent 40051aa commit 6187d17
Show file tree
Hide file tree
Showing 23 changed files with 674 additions and 1,107 deletions.
5 changes: 2 additions & 3 deletions src/components/App/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,9 @@ const tabletBreakpoint = window.matchMedia('(min-width: 641px) and (max-width: 9

const propTypes = {
removeEventHandlers: PropTypes.func.isRequired,
coAssessor: PropTypes.array.isRequired,
};

const App = ({ removeEventHandlers, coAssessor }) => {
const App = ({ removeEventHandlers }) => {
const store = useStore();
const dispatch = useDispatch();
let timeoutReturn;
Expand Down Expand Up @@ -319,7 +318,7 @@ const App = ({ removeEventHandlers, coAssessor }) => {
<PageReplacementModal />
<LinkModal />
<ContentEditModal />
<FilterAnnotModal coAssessor={[{ id: '1', 'name': 'John' }]} />
<FilterAnnotModal />
<CustomModal />
<Model3DModal />
<ColorPickerModal />
Expand Down
142 changes: 58 additions & 84 deletions src/components/FilterAnnotModal/FilterAnnotModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { useSelector, useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import ShareTypes, { ShareTypeColors } from 'constants/shareTypes';
import { ShareTypeColors } from 'constants/shareTypes';
import { getAnnotationShareType } from 'helpers/annotationShareType';
import getAnnotationAuthor from 'helpers/getAnnotationAuthor';
import core from 'core';
import actions from 'actions';
import selectors from 'selectors';
Expand All @@ -24,7 +25,7 @@ import './FilterAnnotModal.scss';

const TABS_ID = 'filterAnnotModal';

const FilterAnnotModal = ({ coAssessors }) => {
const FilterAnnotModal = () => {
const [isDisabled, isOpen, colorMap, selectedTab, annotationFilters] = useSelector((state) => [
selectors.isElementDisabled(state, DataElements.FILTER_MODAL),
selectors.isElementOpen(state, DataElements.FILTER_MODAL),
Expand All @@ -44,14 +45,14 @@ const FilterAnnotModal = ({ coAssessors }) => {
const [authorFilter, setAuthorFilter] = useState([]);
const [typesFilter, setTypesFilter] = useState([]);
const [colorFilter, setColorFilter] = useState([]);
const [checkRepliesForAuthorFilter, setCheckRepliesForAuthorFilter] = useState(true);
// const [checkRepliesForAuthorFilter, setCheckRepliesForAuthorFilter] = useState(true);
const [filterCount, setFilterCount] = useState(0);
const [ifShowAnnotationStatus, setIfShowAnnotationStatus] = useState(false);

// const [ifShowAnnotationStatus, setIfShowAnnotationStatus] = useState(false);
// CUSTOM WISEFLOW: sharetype filter
const [shareTypeFilter, setShareTypeFilter] = useState([]);
const [coAssessorFilter, setCoAssessorFilter] = useState([]);
const [shareTypesFilter, setShareTypesFilter] = useState([]);

const getIconColor = annot => {
const getIconColor = (annot) => {
const key = mapAnnotationToKey(annot);
const iconColorProperty = colorMap[key]?.iconColor;

Expand Down Expand Up @@ -81,23 +82,26 @@ const FilterAnnotModal = ({ coAssessors }) => {
let author = true;
let color = true;
let sharetype = true;

if (typesFilter.length > 0) {
type = typesFilter.includes(getAnnotationClass(annot));
}

if (authorFilter.length > 0) {
author = authorFilter.includes(core.getDisplayAuthor(annot['Author']));
if (!author && checkRepliesForAuthorFilter) {
const allReplies = annot.getReplies();
for (const reply of allReplies) {
// Short-circuit the search if at least one reply is created by
// one of the desired authors
if (authorFilter.includes(core.getDisplayAuthor(reply['Author']))) {
author = true;
break;
}
}
}
// if (!author && checkRepliesForAuthorFilter) {
// const allReplies = annot.getReplies();
// for (const reply of allReplies) {
// // Short-circuit the search if at least one reply is created by
// // one of the desired authors
// if (authorFilter.includes(core.getDisplayAuthor(reply['Author']))) {
// author = true;
// break;
// }
// }
// }
}

if (colorFilter.length > 0) {
const iconColor = getIconColor(annot);
if (iconColor) {
Expand All @@ -107,41 +111,41 @@ const FilterAnnotModal = ({ coAssessors }) => {
color = colorFilter.includes('#485056');
}
}
if (shareTypeFilter.length > 0) {

if (shareTypesFilter.length > 0) {
// CUSTOM WISEFLOW: get customData sharetype
if (getAnnotationShareType(annot)) {
sharetype = shareTypeFilter.includes(getAnnotationShareType(annot));
sharetype = shareTypesFilter.includes(getAnnotationShareType(annot));
}
}
return type && author && color && sharetype;
}),
);

dispatch(actions.setAnnotationFilters({
includeReplies: checkRepliesForAuthorFilter,
authorFilter,
colorFilter,
typeFilter: typesFilter,
shareTypes: shareTypeFilter,
shareTypesFilter,
}));

fireEvent(
Events.ANNOTATION_FILTER_CHANGED,
{
types: typesFilter,
authors: authorFilter,
colors: colorFilter,
shareTypes: shareTypeFilter,
checkRepliesForAuthorFilter
shareTypes: shareTypesFilter,
}
);
closeModal();
};

const filterClear = () => {
setCheckRepliesForAuthorFilter(false);
setAuthorFilter([]);
setTypesFilter([]);
setColorFilter([]);
setShareTypeFilter([]);
setShareTypesFilter([]);
};

const closeModal = () => {
Expand All @@ -157,6 +161,7 @@ const FilterAnnotModal = ({ coAssessors }) => {
const annotTypesToBeAdded = new Set();
const annotColorsToBeAdded = new Set();
const annotShareTypesToBeAdded = new Set();
const annotCoAssessorsToBeAdded = new Set();
annots.forEach((annot) => {
const displayAuthor = core.getDisplayAuthor(annot['Author']);
if (displayAuthor && displayAuthor !== '') {
Expand All @@ -179,6 +184,11 @@ const FilterAnnotModal = ({ coAssessors }) => {
if (getAnnotationShareType(annot)) {
annotShareTypesToBeAdded.add(getAnnotationShareType(annot));
}

const author = getAnnotationAuthor(annot);
if (author) {
annotCoAssessorsToBeAdded.add(author);
}
});

setAuthors([...authorsToBeAdded]);
Expand All @@ -192,27 +202,27 @@ const FilterAnnotModal = ({ coAssessors }) => {
};
}, [isOpen]);

useEffect(() => {
if (selectedTab === DataElements.ANNOTATION_STATUS_FILTER_PANEL_BUTTON && !ifShowAnnotationStatus) {
dispatch(actions.setSelectedTab(TABS_ID, DataElements.ANNOTATION_USER_FILTER_PANEL_BUTTON));
}
}, [isOpen, selectedTab, ifShowAnnotationStatus]);
// useEffect(() => {
// if (selectedTab === DataElements.ANNOTATION_STATUS_FILTER_PANEL_BUTTON && !ifShowAnnotationStatus) {
// dispatch(actions.setSelectedTab(TABS_ID, DataElements.ANNOTATION_USER_FILTER_PANEL_BUTTON));
// }
// }, [isOpen, selectedTab, ifShowAnnotationStatus]);

useEffect(() => {
setFilterCount((checkRepliesForAuthorFilter ? 1 : 0) + authorFilter.length + colorFilter.length + typesFilter.length + statusFilter.length);
}, [checkRepliesForAuthorFilter, authorFilter, colorFilter, typesFilter, statusFilter]);
setFilterCount(authorFilter.length + colorFilter.length + typesFilter.length + shareTypesFilter.length);
}, [authorFilter, colorFilter, typesFilter, shareTypesFilter]);

useEffect(() => {
setIfShowAnnotationStatus((statuses.length > 1) || (statuses.length === 1 && statuses[0] !== 'None'));
}, [statuses]);
// useEffect(() => {
// setIfShowAnnotationStatus((statuses.length > 1) || (statuses.length === 1 && statuses[0] !== 'None'));
// }, [statuses]);

useEffect(() => {
if (isOpen) {
setCheckRepliesForAuthorFilter(annotationFilters.includeReplies);
console.log(' annotationFilters:', annotationFilters);
setAuthorFilter(annotationFilters.authorFilter);
setColorFilter(annotationFilters.colorFilter);
setTypesFilter(annotationFilters.typeFilter);
setStatusFilter(annotationFilters.statusFilter);
setShareTypesFilter(annotationFilters.shareTypesFilter);
}
}, [isOpen]);

Expand Down Expand Up @@ -318,25 +328,26 @@ const FilterAnnotModal = ({ coAssessors }) => {
<Choice
type="checkbox"
key={index}
checked={shareTypeFilter.includes(val)}
checked={shareTypesFilter.includes(val)}
label={
<div
style={{
backgroundColor: `${ShareTypeColors[val]}`,
padding: `5px 10px`,
borderRadius: `5px`,
color: `#fff`,
padding: '5px 10px',
borderRadius: '5px',
color: '#fff',
}}
>
{t(`option.state.${val.toLocaleLowerCase()}`)}
</div>
}
id={val}
onChange={e => {
if (shareTypeFilter.indexOf(e.target.getAttribute('id')) === -1) {
setShareTypeFilter([...shareTypeFilter, e.target.getAttribute('id')]);
onChange={(e) => {
const targetAttribute = e.target.getAttribute('id');
if (shareTypesFilter.indexOf(targetAttribute) === -1) {
setShareTypesFilter([...shareTypesFilter, targetAttribute]);
} else {
setShareTypeFilter(shareTypeFilter.filter(status => status !== e.target.getAttribute('id')));
setShareTypesFilter(shareTypesFilter.filter((sharetype) => sharetype !== targetAttribute));
}
}}
/>
Expand All @@ -346,35 +357,6 @@ const FilterAnnotModal = ({ coAssessors }) => {
);
};

const renderCoAssessors = () => {
if (!coAssessors) return null;
return (
<div className="filter">
<div className="heading">{t('option.filterAnnotModal.coAssessor')}</div>
<div className="buttons">
{[...coAssessors].map((val, index) => {
return (
<Choice
type="checkbox"
key={index}
label={val.name}
checked={coAssessorFilter.includes(val)}
id={val.id}
onChange={e => {
if (coAssessorFilter.indexOf(e.target.getAttribute('id')) === -1) {
setCoAssessorFilter([...coAssessorFilter, e.target.getAttribute('id')]);
} else {
setCoAssessorFilter(coAssessorFilter.filter(type => type !== e.target.getAttribute('id')));
}
}}
/>
);
})}
</div>
</div>
);
};

const modalClass = classNames({
Modal: true,
FilterAnnotModal: true,
Expand Down Expand Up @@ -427,17 +409,12 @@ const FilterAnnotModal = ({ coAssessors }) => {
</button>
</Tab>
<div className="tab-options-divider" />
<Tab dataElement={DataElements.ANNOTATION_CO_ASSESSOR_FILTER_PANEL_BUTTON}>
<button className="tab-options-button">
{t('option.filterAnnotModal.coAssessor')}
</button>
</Tab>
</div>
<div className="filter-options">
<TabPanel dataElement="annotationUserFilterPanel">
{renderAuthors()}
</TabPanel>
<TabPanel dataElement="annotationShareTypesFilterPanel">
<TabPanel dataElement="annotationShareTypePanel">
{renderShareTypes()}
</TabPanel>
<TabPanel dataElement="annotationColorFilterPanel">
Expand All @@ -446,9 +423,6 @@ const FilterAnnotModal = ({ coAssessors }) => {
<TabPanel dataElement="annotationTypeFilterPanel">
{renderAnnotTypes()}
</TabPanel>
<TabPanel dataElement="annotationCoAssessorFilterPanel">
{renderCoAssessors()}
</TabPanel>
</div>
</Tabs>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/components/NoteContent/NoteContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,7 @@ const NoteContent = ({
isReply={isReply}
isUnread={isUnread}
renderAuthorName={renderAuthorName}
renderAnnotationReference={renderAnnotationReference}
isNoteStateDisabled={isNoteStateDisabled}
isEditing={isEditing}
noteIndex={noteIndex}
Expand Down
12 changes: 4 additions & 8 deletions src/components/NoteHeader/NoteHeader.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import NoteShareType from 'components/NoteShareType';
import NotePopup from 'components/NotePopup';
import NoteState from 'components/NoteState';
import Icon from 'components/Icon';
import NoteUnpostedCommentIndicator from 'components/NoteUnpostedCommentIndicator';
import getLatestActivityDate from 'helpers/getLatestActivityDate';
Expand Down Expand Up @@ -64,7 +64,7 @@ function NoteHeader(props) {
isEditing,
noteIndex,
sortStrategy,
renderAnnotationReference,
renderAnnotationReference,
activeTheme,
isMultiSelected,
isMultiSelectMode,
Expand All @@ -75,7 +75,7 @@ function NoteHeader(props) {

const [t] = useTranslation();
const date = (sortStrategy === NotesPanelSortStrategy.MODIFIED_DATE || (notesShowLastUpdatedDate && sortStrategy !== NotesPanelSortStrategy.CREATED_DATE)) ? getLatestActivityDate(annotation) : annotation.DateCreated;
const numberOfReplies = annotation.getReplies().length;
// const numberOfReplies = annotation.getReplies().length;
let color = annotation[iconColor]?.toHexString?.();

if (activeTheme === Theme.DARK && color && isDarkColorHex(color)) {
Expand Down Expand Up @@ -159,11 +159,7 @@ function NoteHeader(props) {
/>}
<NoteUnpostedCommentIndicator annotationId={annotation.Id} />
{!isNoteStateDisabled && showShareType && !isReply && !isMultiSelectMode && !isGroupMember && isSelected &&
<NoteState
annotation={annotation}
isSelected={isSelected}
noteIndex={noteIndex}
/>
<NoteShareType annotation={annotation} />
}
{!isEditing && isSelected && !isMultiSelectMode && !isGroupMember &&
<NotePopup
Expand Down
Loading

0 comments on commit 6187d17

Please sign in to comment.