utils#FadeDiv JavaScript Examples
The following examples show how to use
utils#FadeDiv.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ResourceActivityBuild.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceActivityBuild = (props) => {
const {
resource,
editResourcePopup,
selectType,
type,
setActiveView,
} = props;
return (
<div className="row">
{/* <div className="col-md-3">
<AddResourceSidebar {...props} />
</div> */}
<div className="col-md-12">
<div className="resource-activity">
<div
className="back-button"
style={{ marginLeft: '15px' }}
onClick={() => {
setActiveView('describe');
type.splice(type.indexOf('build', 1));
selectType(type);
}}
>
<FontAwesomeIcon icon="chevron-left" className="mr-2" />
Back
</div>
<FadeDiv>
{resource.newResource.activity.type === 'h5p' && (
<H5PEditor {...props} />
)}
{(resource.newResource.activity.type === 'tinymce' || resource.newResource.activity.type === 'immersive_reader') && (
<TinyEditor {...props} />
)}
{editResourcePopup && (
<H5PEditor
{...props}
h5pParams={JSON.stringify(resource.newResource.params)}
// h5pParams = "{"params":{"interactiveVideo":{"video":{"startScreenOptions":{"title":"Interactive Video","hideStartTitle":false},"textTracks":{"videoTrack":[{"label":"Subtitles","kind":"subtitles","srcLang":"en"}]},"files":[{"path":"https:\/\/www.youtube.com\/watch?v=XI641BhgOnI","mime":"video\/YouTube","copyright":{"license":"U"}}]},"assets":{},"summary":{"task":{"library":"H5P.Summary 1.10","params":{"intro":"Choose the correct statement.","summaries":[{"subContentId":"ff6e0e78-49a5-47b5-b50e-2c36efde0568","tip":""}],"overallFeedback":[{"from":0,"to":100}],"solvedLabel":"Progress:","scoreLabel":"Wrong answers:","resultLabel":"Your result","labelCorrect":"Correct.","labelIncorrect":"Incorrect! Please try again.","alternativeIncorrectLabel":"Incorrect","labelCorrectAnswers":"Correct answers.","tipButtonLabel":"Show tip","scoreBarLabel":"You got :num out of :total points","progressText":"Progress :num of :total"},"subContentId":"f8b52010-0902-4f3d-9396-8387036a36b6","metadata":{"contentType":"Summary","license":"U","title":"Untitled Summary"}},"displayAt":3}},"override":{"autoplay":false,"loop":false,"showBookmarksmenuOnLoad":false,"showRewind10":false,"preventSkipping":false,"deactivateSound":false},"l10n":{"interaction":"Interaction","play":"Play","pause":"Pause","mute":"Mute","unmute":"Unmute","quality":"Video Quality","captions":"Captions","close":"Close","fullscreen":"Fullscreen","exitFullscreen":"Exit Fullscreen","summary":"Open summary dialog","bookmarks":"Bookmarks","endscreen":"Submit screen","defaultAdaptivitySeekLabel":"Continue","continueWithVideo":"Continue with video","playbackRate":"Playback Rate","rewind10":"Rewind 10 Seconds","navDisabled":"Navigation is disabled","sndDisabled":"Sound is disabled","requiresCompletionWarning":"You need to answer all the questions correctly before continuing.","back":"Back","hours":"Hours","minutes":"Minutes","seconds":"Seconds","currentTime":"Current time:","totalTime":"Total time:","singleInteractionAnnouncement":"Interaction appeared:","multipleInteractionsAnnouncement":"Multiple interactions appeared.","videoPausedAnnouncement":"Video is paused","content":"Content","answered":"@answered answered","endcardTitle":"@answered Question(s) answered","endcardInformation":"You have answered @answered questions, click below to submit your answers.","endcardInformationNoAnswers":"You have not answered any questions.","endcardInformationMustHaveAnswer":"You have to answer at least one question before you can submit your answers.","endcardSubmitButton":"Submit Answers","endcardSubmitMessage":"Your answers have been submitted!","endcardTableRowAnswered":"Answered questions","endcardTableRowScore":"Score","endcardAnsweredScore":"answered","endCardTableRowSummaryWithScore":"You got @score out of @total points for the @question that appeared after @minutes minutes and @seconds seconds.","endCardTableRowSummaryWithoutScore":"You have answered the @question that appeared after @minutes minutes and @seconds seconds."}},"metadata":{"title":"ABC https:\/\/www.youtube.com\/watch?v=XI641BhgOnI","license":"U"}}"
h5pLib="H5P.InteractiveVideo 1.21"
/>
)}
</FadeDiv>
</div>
</div>
</div>
);
}
Example #2
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
Creation = (props) => {
const { handleSubmit, editMode } = props;
return (
<div className="team-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">
{editMode ? 'Edit ' : 'Create '}
Team
</h2>
<div className="title-cross" />
</div>
<div className="create-team-wrapper">
<h2 className="describe">
{editMode ? ' Editing your team information ' : ' Start your team by adding a name and description '}
</h2>
<div className="creation-panel">
<form className="create-team-form" onSubmit={handleSubmit}>
<div className="team-info-input">
<div className="team-name">
<Field
name="name"
component={InputField}
label="Team Name"
type="text"
validate={[required, maxName]}
/>
</div>
<div className="team-description">
<Field
name="description"
component={TextareaField}
label="Team Description"
validate={[required, maxDescription]}
/>
</div>
<h2 className="satelliteteaminfo"> Satellite Team Information (Optional)</h2>
<div className="team-name">
<Field
name="noovo_group_title"
component={InputField}
label="Noovo Group Title"
validate={[maxName]}
/>
</div>
</div>
<button
type="submit"
className="create-team-continue-btn"
// onClick={() => {
// if (editMode) {
// handleSubmitInEditMode();
// }
// }}
>
{editMode ? 'Update' : 'Continue'}
</button>
</form>
</div>
</div>
</FadeDiv>
</div>
);
}
Example #3
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
Creation = (props) => {
const { handleSubmit, editMode } = props;
return (
<div className="group-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">
{editMode ? 'Edit ' : 'Create '}
Group
</h2>
<div className="title-cross" />
</div>
<div className="create-group-wrapper">
<h2 className="describe">
{editMode ? ' Editing your group information ' : 'Start your group by adding a name and description'}
</h2>
<div className="creation-panel">
<form className="create-group-form" onSubmit={handleSubmit}>
<div className="group-info-input">
<div className="group-name">
<Field
name="name"
component={InputField}
label="Group Name"
type="text"
validate={[required, maxName]}
/>
</div>
<div className="group-description">
<Field
name="description"
component={TextareaField}
label="Group Description"
validate={[required, maxDescription]}
/>
</div>
</div>
<button type="submit" className="create-group-continue-btn">
Continue
</button>
</form>
</div>
</div>
</FadeDiv>
</div>
);
}
Example #4
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
function AddProjectsPage(props) {
const {
history,
match: { params: { groupId } },
group,
projects,
loadProjects,
loadGroup,
addProjects,
} = props;
useEffect(() => {
loadProjects();
loadGroup(groupId);
}, [loadProjects, loadGroup, groupId]);
const organization = useSelector((state) => state.organization);
const { permission } = organization;
const [selectedProjects, setSelectedProjects] = useState([]);
const [searchProject, setSearchProject] = useState('');
const filteredProjects = projects.filter(
(p) => (group.selectedGroup.projects || []).findIndex((proj) => p.id === proj.id) === -1,
);
const handleSubmit = useCallback((projectIds) => {
addProjects(
groupId,
projectIds,
)
.then(() => {
history.push(`/org/${organization.currentOrganization?.domain}/groups/${groupId}/projects`);
})
.catch(() => {});
}, [addProjects, groupId, history]);
return (
<>
<div className="groups-page">
<FadeDiv className="assign-projects">
<div className="assign-projects-content">
{permission?.Group?.includes('group:add-projects')
? (
<AssignProject
isSaving={group.isLoading}
projects={filteredProjects}
handleSubmit={handleSubmit}
selectedProjects={selectedProjects}
setSelectedProjects={setSelectedProjects}
search={searchProject}
setSearch={setSearchProject}
/>
)
: <Alert variant="danger">You are not authorized to add projects.</Alert>}
</div>
</FadeDiv>
</div>
</>
);
}
Example #5
| Source File: ResourceSelectActivity.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceSelectActivity = (props) => {
const { handleSubmit, onChangeActivity } = props;
const questionsContent = questions.map((activity) => (
<div className="col-md-3" key={activity.id}>
<label className="question-label">
<Field
name="activity"
component={ResourceActivityTypeField}
type="radio"
value={activity.h5pLib}
onChange={(e) => onChangeActivity(activity, e)}
validate={[required]}
/>
<div className="activity-item">
<div className="activity-img">
<img src={activity.icon} className="activity-icon" alt="" />
<img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
</div>
<div className="activity-content">
<span>{activity.text}</span>
<p>{activity.description}</p>
</div>
</div>
</label>
</div>
));
return (
<div className="row">
<div className="col-md-3">
<EditResourceSidebar {...props} />
</div>
<div className="col-md-9">
<div className="resource-question">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Select the activity you want to build from the options below:</h2>
</div>
</div>
<div className="row">
<form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
{questionsContent}
<div className="col-md-12">
<button type="submit" className="add-resource-continue-btn">Continue</button>
</div>
</form>
</div>
</FadeDiv>
</div>
</div>
</div>
);
}
Example #6
| Source File: ResourceActivityType.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceActivityType = (props) => {
const {
handleSubmit,
onChangeActivityType,
} = props;
const activitiesContent = activities.map((activity) => (
<div className="col-md-3" key={activity.id}>
<label className="activity-label">
<Field
name="activityType"
component={ResourceActivityTypeField}
type="radio"
value={activity.id}
onChange={onChangeActivityType}
validate={[required]}
/>
<div className="activity-item">
<div className="activity-img">
<img src={activity.icon} className="activity-icon" alt="" />
<img src={activity.overlayIcon} className="overlay-activity-icon" alt="" />
</div>
<div className="activity-content">
<span>
{activity.title}
</span>
</div>
</div>
</label>
</div>
));
return (
<div className="row">
<div className="col-md-3">
<EditResourceSidebar {...props} />
</div>
<div className="col-md-9">
<div className="resource-activity">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Select the type of activity you want to create?</h2>
<div className="activity-content">
<p>
Create memorable learning experiences from one of the activity types below:
</p>
</div>
</div>
</div>
<form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
{activitiesContent}
<div className="row">
<div className="col-md-12">
<button type="submit" className="add-resource-continue-btn">Continue</button>
</div>
</div>
</form>
</FadeDiv>
</div>
</div>
</div>
);
}
Example #7
| Source File: ResourceActivityBuild.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceActivityBuild = (props) => {
const {
resource: { editResource },
selectType,
type,
setActiveView,
} = props;
return (
<div className="row">
<div className="col-md-12">
<div className="resource-activity">
<div
className="back-button"
style={{ marginLeft: 15 }}
onClick={() => {
setActiveView('describe');
type.splice(type.indexOf('build', 1));
selectType(type);
}}
>
<FontAwesomeIcon icon="chevron-left" className="mr-2" />
Back
</div>
<FadeDiv>
{/*
{newResource.activity.type === 'h5p' && (
<H5PEditor {...props} />
)}
*/}
{editResource.params && editResource.params.data !== '' ? (
<H5PEditor
{...props}
h5pParams={JSON.stringify(editResource.params)}
h5pLib={editResource.editor}
/>
) : (
<h3>Loading...</h3>
)}
</FadeDiv>
</div>
</div>
</div>
);
}
Example #8
| Source File: ResourceActivityType.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ResourceActivityType = (props) => {
const {
resource,
loadResourceTypes,
selectType,
type,
setActiveView,
} = props;
const { types: activityTypes } = resource;
useEffect(() => {
loadResourceTypes();
}, [loadResourceTypes]);
const { handleSubmit, onChangeActivityType } = props;
const activityTypesContent = activityTypes?.map((activityType) => (
<div className="col-md-3" key={activityType.id}>
<label className="activity-label">
<Field
name="activityType"
component={ResourceActivityTypeField}
type="radio"
value={`${activityType.id}`}
onChange={() => {
onChangeActivityType(activityType.id);
selectType([...type, 'select']);
setActiveView('select');
}}
validate={[required]}
/>
<div className="activity-item">
<div
className="activity-img"
style={{ backgroundImage: `url(${global.config.resourceUrl}${activityType.image})` }}
/>
<div className="activity-content">
<span>{activityType.title}</span>
</div>
</div>
</label>
</div>
));
return (
<div className="row">
{/* <div className="col-md-3">
<AddResourceSidebar {...props} />
</div> */}
<div className="col-md-12">
<div className="resource-activity">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Pick Activity Type</h2>
<div className="activity-content">
<p>
Create memorable learning experiences from one of the
activity types below:
</p>
</div>
</div>
</div>
<form
className="row meta-form"
onSubmit={handleSubmit}
autoComplete="off"
>
{activityTypesContent}
</form>
</FadeDiv>
</div>
</div>
</div>
);
}
Example #9
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
// TODO: need to clean up attribute
function DeletePopup(props) {
const {
ui,
selectedProject,
hideDeletePopup,
deleteProject,
deletePlaylist,
deleteResource,
} = props;
// remove popup when escape is pressed
const escFunction = useCallback((event) => {
if (event.keyCode === 27) {
hideDeletePopup(event);
}
}, [hideDeletePopup]);
useEffect(() => {
document.addEventListener('keydown', escFunction, false);
return () => {
document.removeEventListener('keydown', escFunction, false);
};
}, [escFunction]);
const deleteEntity = useCallback((deleteType, id) => () => {
if (deleteType === 'Project') {
deleteProject(id);
} else if (deleteType === 'Playlist') {
deletePlaylist(selectedProject.id, id);
} else if (deleteType === 'Activity') {
deleteResource(id);
}
}, [selectedProject, deleteProject, deletePlaylist, deleteResource]);
return (
<FadeDiv className="popup">
<div className="modal fade" role="dialog" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-body">
<h5>{`Delete "${ui.title}"?`}</h5>
<p>
{`You're about to permanently delete this ${ui.deleteType} and all of its data.`}
</p>
<p>Do you want to continue?</p>
</div>
<div className="modal-footer">
<button
type="submit"
className="btn btn-sm btn-danger"
onClick={deleteEntity(ui.deleteType, ui.id)}
>
Delete
</button>
<button
type="button"
className="btn btn-sm btn-default"
data-dismiss="modal"
onClick={hideDeletePopup}
>
Cancel
</button>
</div>
</div>
</div>
</div>
</FadeDiv>
);
}
Example #10
| Source File: ResourceDescribeActivity.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
ResourceDescribeActivity = (props) => {
const {
resource,
handleSubmit,
uploadResourceThumbnailDefault,
saveFormData,
} = props;
const [modalShow, setModalShow] = useState(false);
const openFile = useRef();
useEffect(() => {
uploadResourceThumbnailDefault(resource.editResource.metadata.thumbUrl);
}, [resource.editResource.metadata.thumbUrl, uploadResourceThumbnailDefault]);
useEffect(() => {
const { title, subjectId, educationLevelId } = resource.editResource.metadata;
const subject = subjectId
? subjects.find((subj) => subj.subject === subjectId)
: { subject: title ? ' ' : '', value: '' };
const educationLvl = educationLevelId
? educationLevels.find((eduLvl) => eduLvl.name === educationLevelId)
: { name: title ? ' ' : '', value: '' };
const { metaTitle: savedTitle, metaEducationLevels, metaSubject } = resource.formData;
const values = {
metaTitle: savedTitle || title,
metaSubject: metaSubject || { ...subject },
metaEducationLevels: metaEducationLevels || { ...educationLvl },
};
saveFormData(values);
}, [saveFormData, resource.editResource.metadata]);
return (
<div className="row">
<div className="col-md-12">
<div className="resource-question">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">Describe Activity:</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="describe-activity-wrapper">
<form className="meta-form" onSubmit={handleSubmit} autoComplete="off">
<div className="row">
<div className="col-md-12">
<div className="meta-title">
<Field
name="metaTitle"
component={MetaTitleInputField}
type="text"
label="Title"
// validate={[required]}
defaultValue={resource.formData.metaTitle}
resource={resource.formData}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="meta-subjects">
<label><h2>Subject</h2></label>
<Field
name="metaSubject"
component={MetaSubjectsField}
data={subjects}
valueField="value"
textField="subject"
defaultValue={resource.formData.metaSubject}
resource={resource.formData}
/>
</div>
</div>
<div className="col-md-6">
<div className="meta-education-levels">
<label><h2>Education Level</h2></label>
<Field
name="metaEducationLevels"
component={MetaEducationLevelInputField}
data={educationLevels}
valueField="value"
textField="name"
defaultValue={resource.formData.metaEducationLevels}
resource={resource.formData}
/>
</div>
</div>
</div>
<div className="upload-thumbnail check">
<div className="upload_placeholder">
<label style={{ display: 'none' }}>
<input
ref={openFile}
type="file"
accept="image/png,image/jpeg"
onChange={(e) => {
if (e.target.files.length === 0) {
return true;
}
if (!(e.target.files[0].type.includes('png') || e.target.files[0].type.includes('jpg')
|| e.target.files[0].type.includes('gif') || e.target.files[0].type.includes('jpeg'))) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
uploadThumb(e, props);
}
}}
/>
<span>Upload</span>
</label>
<span className="validation-error">
{imageValidation}
</span>
<div>
{resource.progress}
{resource.editResource.metadata.thumbUrl ? (
<div className="thumb-display">
<div
className="success"
style={{
color: 'green',
marginBottom: '20px',
fontSize: '20px',
}}
>
Image Uploaded:
</div>
<div
className="imgbox"
style={{
backgroundImage: resource.editResource.metadata.thumbUrl.includes('pexels.com')
? `url(${resource.editResource.metadata.thumbUrl})`
: `url(${global.config.resourceUrl}${resource.editResource.metadata.thumbUrl})`,
}}
/>
</div>
) : (
<div className="new-box">
<h2>Default Selected thumbnail</h2>
<div className="imgbox">
{/* eslint-disable-next-line max-len */}
<img
src="https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
alt=""
/>
</div>
</div>
)}
</div>
<div className="button-flex">
<h2>Change thumbnail from below options</h2>
<div
className="pexel"
onClick={() => setModalShow(true)}
>
<img src={pexel} alt="pexel" />
<p>Select from Pexels</p>
</div>
<div
className="gallery"
onClick={() => {
openFile.current.click();
}}
>
<img src={computer} alt="" />
<p>Upload a Photo From your computer</p>
</div>
</div>
</div>
</div>
<p className="disclaimer">
Activity Image dimension should be
{' '}
<strong>290px width and 200px height. </strong>
Maximum File size allowed is
{' '}
<strong>100MB.</strong>
</p>
<div className="row">
<div className="col-md-12">
<button type="submit" className="add-resource-continue-btn">Save & Continue</button>
</div>
</div>
</form>
</div>
</div>
</div>
</FadeDiv>
</div>
</div>
<PexelsAPI
show={modalShow}
resourceName={
resource
&& resource.newResource
&& resource.newResource.activity
&& resource.newResource.activity.title
}
searchName="abstract"
onHide={() => setModalShow(false)}
/>
</div>
);
}
Example #11
| Source File: ResourceSelectActivity.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
ResourceSelectActivity = (props) => {
const {
resource,
handleSubmit,
// goBackToActivity,
onChangeActivity,
loadResourceItems,
saveSearchKey,
selectType,
type,
setActiveView,
} = props;
const [activities, setActivities] = useState([]);
const [searchActivities, setSearchActivities] = useState([]);
const [activeType, setActiveType] = useState('');
const [modalShow, setModalShow] = useState(false);
const [currentActivity, setCurrentActivity] = useState(null);
const searchActivity = useCallback(
(e) => {
const data = searchActivities.filter((activity) => activity.title.toLowerCase().includes(e.target.value.toLowerCase()));
setActivities(data);
saveSearchKey(e.target.value.toLowerCase());
},
[saveSearchKey, searchActivities]
);
// useEffect(() => {
// searchActivity({ target: { value: resource.searchKey } });
// }, [resource.searchKey, searchActivities, searchActivity]);
useEffect(() => {
// get activity type items
loadResourceItems(resource.newResource.activityTypeId)
.then((activityItems) => {
const { searchKey } = resource;
if (searchKey) {
const data = activityItems.filter((activity) => activity.title.toLowerCase().includes(searchKey));
setActivities(data);
} else {
setActivities(activityItems);
}
setSearchActivities(activityItems);
})
.catch(() => {});
}, [loadResourceItems, resource.newResource.activityTypeId]);
const questionsContent = activities.map((activity) => (
<div className="col-lg-4 col-xl-3 responsive-pad" key={activity.id}>
<div className="activity-item with_options">
<label className="question-label">
<Field
name="activity"
component={ResourceActivityTypeField}
type="radio"
value={activity.h5pLib || activity.type}
onChange={(e) => {
onChangeActivity(activity, e);
setActiveView('describe');
selectType([...type, 'describe']);
}}
validate={[required]}
/>
<div className="content">
<div
className="activity-img"
style={{
backgroundImage: activity.image.includes('pexels.com') ? `url(${activity.image})` : `url(${global.config.resourceUrl}${activity.image})`,
}}
/>
<div className="activity-content">
<span>{activity.title}</span>
<p>{activity.description}</p>
</div>
</div>
</label>
<div className="option_section">
<div
className="option_type"
onClick={() => {
setCurrentActivity(activity);
setActiveType('demo');
setModalShow(true);
}}
>
<FontAwesomeIcon icon="desktop" className="mr-2" />
Demo
</div>
<div
className="option_type"
onClick={() => {
setCurrentActivity(activity);
setActiveType('video');
setModalShow(true);
}}
>
<FontAwesomeIcon icon="play-circle" />
Video
</div>
</div>
</div>
</div>
));
return (
<>
<div className="row">
{/* <div className="col-md-3">
<AddResourceSidebar {...props} />
</div> */}
<div className="col-md-12">
<div className="resource-question">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">
Select the activity you want to build from the options below:
<div
className="back-button"
onClick={() => {
setActiveView('type');
type.splice(type.indexOf('select', 1));
selectType(type);
}}
>
<FontAwesomeIcon icon="chevron-left" className="mr-2" />
Back
</div>
</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="shadowbox">
<div className="search-box">
<input type="text" placeholder="Search activity" onChange={searchActivity} defaultValue={resource.searchKey} />
<FontAwesomeIcon icon="search" />
</div>
</div>
</div>
</div>
<div>
<form className="row meta-form" onSubmit={handleSubmit} autoComplete="off">
<div className="scroll-blog">
<div className="row">{questionsContent}</div>
</div>
</form>
</div>
</FadeDiv>
</div>
</div>
</div>
<MyVerticallyCenteredModal show={modalShow} onHide={() => setModalShow(false)} activity={currentActivity} activeType={activeType} />
</>
);
}
Example #12
| Source File: ResourceDescribeActivity.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
ResourceDescribeActivity = (props) => {
const {
resource,
handleSubmit,
// goBackToActivity,
selectType,
type,
setActiveView,
} = props;
const [modalShow, setModalShow] = useState(false);
const openFile = useRef();
return (
<div className="row">
{/* <div className="col-md-3">
<AddResourceSidebar {...props} />
</div> */}
<div className="col-md-12">
<div className="resource-question">
<FadeDiv>
<div className="row">
<div className="col-md-12">
<h2 className="title">
Describe Activity:
<div
className="back-button"
onClick={() => {
setActiveView('select');
type.splice(type.indexOf('describe', 1));
selectType(type);
}}
>
<FontAwesomeIcon icon="chevron-left" className="mr-2" />
Back
</div>
</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className="describe-activity-wrapper">
<form
className="meta-form"
onSubmit={handleSubmit}
autoComplete="off"
>
<div className="flex-form-imag-upload">
<div>
<div className="row">
<div className="col-md-12">
<div className="meta-title">
<Field
name="metaTitle"
component={MetaTitleInputField}
type="text"
label="Title"
// validate={!resource.formData.metaTitle ? null : undefined}
defaultValue={resource.formData.metaTitle}
resource={resource.formData}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6">
<div className="meta-subjects">
<label>
<h2>Subject</h2>
</label>
<Field
name="metaSubject"
component={MetaSubjectsField}
data={subjects}
valueField="value"
textField="subject"
defaultValue={resource.formData.metaSubject}
resource={resource.formData}
/>
</div>
</div>
<div className="col-md-6">
<div className="meta-education-levels">
<label>
<h2>Education Level</h2>
</label>
<Field
name="metaEducationLevels"
component={MetaEducationLevelInputField}
data={educationLevels}
valueField="value"
textField="name"
defaultValue={resource.formData.metaEducationLevels}
resource={resource.formData}
/>
</div>
</div>
</div>
</div>
</div>
<div className="upload-thumbnail check">
<div className="upload_placeholder">
<label style={{ display: 'none' }}>
<input
ref={openFile}
type="file"
accept="image/png,image/jpeg"
onChange={(e) => {
if (e.target.files.length === 0) {
return true;
}
if (!(e.target.files[0].type.includes('png') || e.target.files[0].type.includes('jpg')
|| e.target.files[0].type.includes('gif') || e.target.files[0].type.includes('jpeg'))) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Invalid file selected.',
});
} else if (e.target.files[0].size > 100000000) {
Swal.fire({
icon: 'error',
title: 'Error',
text: 'Selected file size should be less then 100MB.',
});
} else {
uploadThumb(e, props);
}
}}
/>
<span>Upload</span>
</label>
<span className="validation-error">
{imageValidation}
</span>
<div>
{resource.progress}
{resource.newResource.metadata.thumbUrl ? (
<div className="thumb-display">
<div
className="success"
style={{
color: 'green',
marginBottom: '20px',
fontSize: '20px',
}}
>
Image Uploaded:
</div>
<div
className="imgbox"
style={{
backgroundImage: resource.newResource.metadata.thumbUrl.includes('pexels.com')
? `url(${resource.newResource.metadata.thumbUrl})`
: `url(${global.config.resourceUrl}${resource.newResource.metadata.thumbUrl})`,
}}
/>
</div>
) : (
<div className="new-box">
<h2>Default Selected thumbnail</h2>
<div className="imgbox">
{/* eslint-disable-next-line max-len */}
<img
src="https://images.pexels.com/photos/593158/pexels-photo-593158.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280"
alt=""
/>
</div>
</div>
)}
</div>
<div className="button-flex">
<h2>Change thumbnail from below options</h2>
<div
className="pexel"
onClick={() => setModalShow(true)}
>
<img src={pexel} alt="pexel" />
<p>Select from Pexels</p>
</div>
<div
className="gallery"
onClick={() => {
openFile.current.click();
}}
>
<img src={computer} alt="" />
<p>Upload a Photo From your computer</p>
</div>
</div>
</div>
</div>
<p className="disclaimer">
Activity Image dimension should be
{' '}
<strong>290px width and 200px height. </strong>
Maximum File size allowed is
{' '}
<strong>100MB.</strong>
</p>
<div className="row">
<div className="col-md-12">
<button type="submit" className="add-resource-continue-btn">
Save & Continue
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</FadeDiv>
</div>
</div>
<PexelsAPI
show={modalShow}
resourceName={
resource
&& resource.newResource
&& resource.newResource.activity
&& resource.newResource.activity.title
}
searchName={
resource
&& resource.newResource
&& resource.newResource.activity
&& !!resource.newResource.activity.activity_thumbnail_text
? resource.newResource.activity.activity_thumbnail_text
: resource.newResource.activity.title
}
onHide={() => setModalShow(false)}
/>
</div>
);
}
Example #13
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function AssignProject(props) {
const { isSaving, projects, handleSubmit, selectedProjects, setSelectedProjects, search, setSearch } = props;
const onChange = useCallback(
(e) => {
setSearch(e.target.value);
},
[setSearch]
);
const [filteredProjects, setFilteredProjects] = useState([]);
const selectProject = useCallback(
(projectId) => {
const newProjects = [...selectedProjects];
const projectIndex = newProjects.indexOf(projectId);
if (projectIndex === -1) {
setSelectedProjects([...newProjects, projectId]);
} else {
newProjects.splice(projectIndex, 1);
setSelectedProjects(newProjects);
}
},
[selectedProjects]
);
const onFinish = useCallback(() => {
handleSubmit(selectedProjects);
}, [selectedProjects, handleSubmit]);
useEffect(() => {
if (projects) {
setFilteredProjects(projects.filter((project) => project.name.toLowerCase().includes(search.toLowerCase())));
}
}, [projects, search]);
const finishButton = (
<button type="button" className="create-group-submit-btn" disabled={isSaving} onClick={onFinish}>
Finish
{isSaving && <FontAwesomeIcon icon="spinner" />}
</button>
);
return (
<div className="group-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">Add/Assign Project</h2>
<div className="title-cross" />
{finishButton}
</div>
<div className="assign-project-wrapper">
<div className="search-box">
<input type="text" placeholder="Filter by name" value={search} onChange={onChange} />
</div>
<div className="assign-projects">
{filteredProjects.length > 0 ? (
filteredProjects.map((project) => (
<div key={project.id} className="assign-project-item" onClick={() => selectProject(project.id)}>
<div
className="project-img"
style={{
backgroundImage: project?.thumb_url?.includes('pexels.com') ? `url(${project.thumb_url})` : `url(${global.config.resourceUrl}${project.thumb_url})`,
}}
/>
<div className="assign-project-radio">{selectedProjects.indexOf(project.id) > -1 && <span className="checkmark" />}</div>
<div className="assign-project-title">{project.name}</div>
</div>
))
) : (
<div> No Project Found. </div>
)}
</div>
{finishButton}
</div>
</FadeDiv>
</div>
);
}
Example #14
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function InviteGroup(props) {
const {
// team,
isInviting,
nextStep,
user: authUser,
selectedMembers,
setSelectedMembers,
// setInvitedMembers,
} = props;
// const [search, setSearch] = useState('');
// const [selectedMembers, setSelectedMembers] = useState([]);
// const [filteredMembers, setFilteredMembers] = useState([]);
const [showInvite, setShowInvite] = useState(false);
const [errorMsg, setErrorMsg] = useState(null);
// const onChange = useCallback((e) => {
// setSearch(e.target.value);
// }, []);
// useEffect(() => {
// setFilteredMembers(selectedMembers.filter((mem) => (
// mem.name.toLowerCase().includes(search.toLowerCase())
// || mem.email.toLowerCase().includes(search.toLowerCase())
// )));
// }, [search, selectedMember]);
// const invitedUsers = selectedMembers || [];
const handleInvite = useCallback((users, note) => {
setSelectedMembers([...selectedMembers, ...users.map((u) => ({ ...u, note }))]);
setShowInvite(false);
}, [selectedMembers]);
return (
<div className="group-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">Invite Group Members</h2>
<div className="title-cross" />
</div>
Invite at least 1 or more member to your group
<div className="invite-member-wrapper">
<div className="search-box">
{/*
<input
type="text"
placeholder="Filter by name"
value={search}
onChange={onChange}
/>
*/}
<InviteDialogGroup
handleInvite={handleInvite}
visible={showInvite}
setShowInvite={setShowInvite}
authUser={{ ...authUser, role: 'owner' }}
users={selectedMembers}
/>
</div>
<div className="member-list">
{/*
<div className="member-list-content">
{invitedUsers.map((user) => (
<MemberItem
key={user.id}
invited
isInviting={isInviting}
user={user}
/>
))}
</div>
*/}
<div className="member-list-content">
{selectedMembers.map((user) => (
<MemberItem
key={user.id}
invited
isInviting={isInviting}
selected={false}
user={user}
selectMember={setSelectedMembers}
// inviteUser={handleInvite}
/>
))}
</div>
</div>
<div style={{ color: 'red' }}>
{errorMsg}
</div>
<button
type="button"
className="create-group-continue-btn"
onClick={() => {
// setInvitedMembers(selectedMembers.map(
// // eslint-disable-next-line no-restricted-globals
// ({ id, ...mem }) => ({ id: isNaN(id) ? 0 : id, ...mem }),
// ));
if (selectedMembers.length > 0) {
nextStep();
} else {
setErrorMsg('Invite at least 1 member');
}
}}
>
Continue
</button>
</div>
</FadeDiv>
</div>
);
}
Example #15
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function AddProjectsPage(props) {
const {
history,
match: {
params: { teamId },
},
team,
projects,
loadProjects,
loadTeam,
addProjects,
} = props;
const historyback = useHistory();
const dispatch = useDispatch();
const organization = useSelector((state) => state.organization);
const { activeOrganization } = organization;
const { teamPermission } = useSelector((state) => state.team);
useEffect(() => {
if (activeOrganization) {
loadProjects();
}
loadTeam(teamId);
}, [loadProjects, loadTeam, teamId, activeOrganization]);
// Fetch team permission if page reloads
useEffect(() => {
if (Object.keys(teamPermission).length === 0 && organization?.currentOrganization?.id && teamId) {
dispatch(getTeamPermission(organization?.currentOrganization?.id, teamId));
}
}, [team]);
const [selectedProjects, setSelectedProjects] = useState([]);
const [searchProject, setSearchProject] = useState('');
const filteredProjects = projects.filter((p) => (team.selectedTeam.projects || []).findIndex((proj) => p.id === proj.id) === -1);
const handleSubmit = useCallback(
(projectIds) => {
addProjects(teamId, projectIds).then((result) => {
history.push(`/org/${organization.currentOrganization?.domain}/teams/${teamId}/projects`);
Swal.fire({
icon: 'success',
title: result?.message,
});
});
},
[addProjects, teamId, history]
);
return (
<>
<div className="side-wrapper-team-projects">
<div className="bread-crumb">
<div className="main-flex-top">
<div>
<span>Team</span>
<FontAwesomeIcon icon="angle-right" />
<span>Add Project</span>
</div>
</div>
<Link to="#" className="back-button-main-page" onClick={() => historyback.goBack()}>
<FontAwesomeIcon icon="chevron-left" />
Back
</Link>
</div>
</div>
<div className="teams-page">
<br />
<br />
<FadeDiv className="assign-projects">
<div className="assign-projects-content">
{teamPermission?.Team?.includes('team:add-project') ? (
<AssignProject
isSaving={team.isLoading}
projects={filteredProjects}
handleSubmit={handleSubmit}
selectedProjects={selectedProjects}
setSelectedProjects={setSelectedProjects}
search={searchProject}
setSearch={setSearchProject}
/>
) : (
<Alert variant="danger"> You are not authorized to add projects.</Alert>
)}
</div>
</FadeDiv>
</div>
</>
);
}
Example #16
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function AssignProject(props) {
const { isSaving, projects, handleSubmit, selectedProjects, setSelectedProjects, search, setSearch } = props;
const dispatch = useDispatch();
const onChange = useCallback(
(e) => {
setSearch(e.target.value);
},
[setSearch]
);
const [filteredProjects, setFilteredProjects] = useState(null);
const selectProject = useCallback(
(projectId, projectName) => {
dispatch(selectedProjectForCloning(projectName));
const newProjects = [...selectedProjects];
const projectIndex = newProjects.indexOf(projectId);
if (projectIndex === -1) {
setSelectedProjects([...newProjects, projectId]);
} else {
newProjects.splice(projectIndex, 1);
setSelectedProjects(newProjects);
}
},
[selectedProjects]
);
const onFinish = useCallback(() => {
handleSubmit(selectedProjects);
}, [selectedProjects, handleSubmit]);
useEffect(() => {
if (projects) {
setFilteredProjects(projects.filter((project) => project.name.toLowerCase().includes(search.toLowerCase())));
}
}, [projects, search]);
const finishButton = (
<button type="button" className="create-team-submit-btn" disabled={isSaving} onClick={onFinish}>
Finish
{isSaving && <FontAwesomeIcon icon="spinner" />}
</button>
);
return (
<div className="team-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">Add/Assign Project</h2>
<div className="title-cross" />
{filteredProjects?.length > 0 ? finishButton : null}
</div>
<div className="assign-project-wrapper">
<div className="search-box">
<input type="text" placeholder="Filter by name" value={search} onChange={onChange} />
</div>
<div className="assign-projects">
{filteredProjects ? (
filteredProjects.length > 0 ? (
filteredProjects.map((project) => (
<div
key={project.id}
className="assign-project-item"
onClick={() => {
if (selectedProjects.length === 0 || selectedProjects[0] === project.id) {
selectProject(project.id, project.name);
} else {
Swal.fire({
icon: 'warning',
title: 'Action Prohibited',
text: 'You are only allowed to select 1 project.',
});
}
}}
>
<div
className="project-img"
style={{
backgroundImage: project.thumb_url?.includes('pexels.com') ? `url(${project.thumb_url})` : `url(${global.config.resourceUrl}${project.thumb_url})`,
}}
/>
<div className="assign-project-radio">{selectedProjects.indexOf(project.id) > -1 && <span className="checkmark" />}</div>
<div className="assign-project-title">{project.name}</div>
</div>
))
) : (
<Alert variant="warning"> No Project Found. </Alert>
)
) : (
<Alert variant="primary">Loading...</Alert>
)}
</div>
{filteredProjects?.length > 0 ? finishButton : null}
</div>
</FadeDiv>
</div>
);
}
Example #17
| Source File: index.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
function InviteTeam(props) {
const {
// team,
isInviting,
nextStep,
user: authUser,
selectedMembers,
setSelectedMembers,
// setInvitedMembers,
} = props;
// const [search, setSearch] = useState('');
// const [selectedMembers, setSelectedMembers] = useState([]);
// const [filteredMembers, setFilteredMembers] = useState([]);
const [showInvite, setShowInvite] = useState(false);
const [errorMsg, setErrorMsg] = useState(null);
// const onChange = useCallback((e) => {
// setSearch(e.target.value);
// }, []);
// useEffect(() => {
// setFilteredMembers(selectedMembers.filter((mem) => (
// mem.name.toLowerCase().includes(search.toLowerCase())
// || mem.email.toLowerCase().includes(search.toLowerCase())
// )));
// }, [search, selectedMember]);
// const invitedUsers = selectedMembers || [];
const handleInvite = useCallback((users, note) => {
setSelectedMembers([...selectedMembers, ...users.map((u) => ({ ...u, note }))]);
setShowInvite(false);
}, [selectedMembers]);
return (
<div className="team-information">
<FadeDiv>
<div className="title-box">
<h2 className="title">Invite Team Members</h2>
<div className="title-cross" />
</div>
Invite at least 1 or more member to your team
<div className="invite-member-wrapper">
<div className="search-box">
{/*
<input
type="text"
placeholder="Filter by name"
value={search}
onChange={onChange}
/>
*/}
<InviteDialog
handleInvite={handleInvite}
visible={showInvite}
setShowInvite={setShowInvite}
authUser={{ ...authUser, role: 'owner' }}
users={selectedMembers}
/>
</div>
<div className="member-list">
{/*
<div className="member-list-content">
{invitedUsers.map((user) => (
<MemberItem
key={user.id}
invited
isInviting={isInviting}
user={user}
/>
))}
</div>
*/}
<div className="member-list-content">
{selectedMembers.map((user) => (
<MemberItem
key={user.id}
invited
isInviting={isInviting}
selected={false}
user={user}
selectMember={setSelectedMembers}
// inviteUser={handleInvite}
/>
))}
</div>
</div>
<div style={{ color: 'red' }}>
{errorMsg}
</div>
<button
type="button"
className="create-team-continue-btn"
onClick={() => {
// setInvitedMembers(selectedMembers.map(
// // eslint-disable-next-line no-restricted-globals
// ({ id, ...mem }) => ({ id: isNaN(id) ? 0 : id, ...mem }),
// ));
if (selectedMembers.length > 0) {
nextStep();
} else {
setErrorMsg('Invite at least 1 member');
}
}}
>
Continue
</button>
</div>
</FadeDiv>
</div>
);
}
