Description
{projectDetailsLoading ? (
- {Array.from({ length: 10 }).map((i) => (
+ {Array.from({ length: 7 }).map((i) => (
))}
) : (
-
+
{projectInfo?.description}
- {descLines >= 10 && (
+ {descLines >= 7 && (
setSeeMore(!seeMore)}
diff --git a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
index de2e793dd4..481541fdef 100644
--- a/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
+++ b/src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx
@@ -59,8 +59,6 @@ const SubmissionsTable = ({ toggleView }) => {
const [paginationPage, setPaginationPage] = useState(1);
const [submittedBy, setSubmittedBy] = useState(null);
- const encodedTaskId = environment.encode(3468);
-
useEffect(() => {
let count = 0;
const filters = Object.keys(filter);
@@ -436,7 +434,7 @@ const SubmissionsTable = ({ toggleView }) => {
{
- navigate(`/project/${encodedId}/tasks/${encodedTaskId}/submission/${row?.meta?.instanceID}`);
+ navigate(`/project/${encodedId}/tasks/${row?.phonenumber}/submission/${row?.meta?.instanceID}`);
}}
/>{' '}
{' '}
diff --git a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx
index 23c48e25be..0b6f53b1c1 100644
--- a/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx
+++ b/src/frontend/src/components/ProjectSubmissions/TaskSubmissionsMap.tsx
@@ -217,17 +217,18 @@ const TaskSubmissionsMap = () => {
const taskSubmissionsPopupUI = (properties: taskFeaturePropertyType) => {
const currentTask = taskInfo?.filter((task) => +task.task_id === properties.uid);
+ if (currentTask?.length === 0) return;
return (
- Task ID: #{currentTask?.[0].task_id}
+ Task ID: #{currentTask?.[0]?.task_id}
- Expected Count: {currentTask?.[0].feature_count}
+ Expected Count: {currentTask?.[0]?.feature_count}
- Submission Count: {currentTask?.[0].submission_count}
+ Submission Count: {currentTask?.[0]?.submission_count}
@@ -284,7 +285,7 @@ const TaskSubmissionsMap = () => {
collapsed={true}
/>
-
+ {taskInfo?.length > 0 &&
}
{dataExtractUrl && isValidUrl(dataExtractUrl) && (
)}
diff --git a/src/frontend/src/components/common/Editor/Editor.tsx b/src/frontend/src/components/common/Editor/Editor.tsx
new file mode 100644
index 0000000000..59cc39d2e8
--- /dev/null
+++ b/src/frontend/src/components/common/Editor/Editor.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { useEditor, EditorContent, FloatingMenu, BubbleMenu } from '@tiptap/react';
+import { Toolbar } from '@/components/common/Editor/Toolbar';
+import StarterKit from '@tiptap/starter-kit';
+import ListItem from '@tiptap/extension-list-item';
+import BulletList from '@tiptap/extension-bullet-list';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import Heading from '@tiptap/extension-heading';
+import Document from '@tiptap/extension-document';
+import Link from '@tiptap/extension-link';
+import Image from '@tiptap/extension-image';
+import './editorStyles.scss';
+
+type RichTextEditorProps = {
+ editorHtmlContent: string;
+ setEditorHtmlContent?: (content: string) => any;
+ editable: boolean;
+};
+
+const extensions = [
+ StarterKit,
+ Document,
+ Paragraph,
+ Text,
+ ListItem,
+ BulletList,
+ OrderedList,
+ Heading,
+ Link.configure({
+ validate: (href) => /^https?:\/\//.test(href),
+ }),
+ Image.configure({
+ inline: true,
+ }),
+];
+
+const RichTextEditor = ({ editorHtmlContent, setEditorHtmlContent, editable }: RichTextEditorProps) => {
+ const editor = useEditor({
+ extensions,
+ content: editorHtmlContent,
+ onUpdate: ({ editor }) => {
+ setEditorHtmlContent && setEditorHtmlContent(editor.getHTML());
+ },
+ editable,
+ });
+
+ if (!editor) {
+ return null;
+ }
+
+ return (
+
+ {editable && }
+
+
+ );
+};
+
+export default RichTextEditor;
diff --git a/src/frontend/src/components/common/Editor/Toolbar.tsx b/src/frontend/src/components/common/Editor/Toolbar.tsx
new file mode 100644
index 0000000000..7c5cf84b11
--- /dev/null
+++ b/src/frontend/src/components/common/Editor/Toolbar.tsx
@@ -0,0 +1,225 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Editor } from '@tiptap/react';
+import AssetModules from '@/shared/AssetModules';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../Dropdown';
+import { Tooltip } from '@mui/material';
+import InputTextField from '@/components/common/InputTextField';
+import Button from '@/components/common/Button';
+
+type ToolbarProps = {
+ editor: Editor | null;
+};
+
+const iconClassName =
+ 'fmtm-duration-300 hover:fmtm-bg-red-100 fmtm-rounded fmtm-cursor-pointer fmtm-p-[2px] fmtm-w-fit';
+
+export const Toolbar = ({ editor }: ToolbarProps) => {
+ const [linkText, setLinkText] = useState('');
+ const [linkDropdownOpen, setLinkDropdownOpen] = useState(false);
+ const [imageURL, setImageURL] = useState('');
+ const [imageDropdownOpen, setImageDropdownOpen] = useState(false);
+
+ const isEditorActive = (editorItem) => {
+ if (editor?.isActive(editorItem)) {
+ return 'fmtm-text-primaryRed fmtm-bg-red-100';
+ }
+ return '';
+ };
+
+ // set link if a link is already linked
+ const previousUrl = editor?.getAttributes('link').href;
+ useEffect(() => {
+ if (previousUrl) {
+ setLinkText(previousUrl);
+ }
+ }, [previousUrl]);
+
+ const setLink = useCallback(() => {
+ const url = linkText;
+ // cancelled
+ if (url === null) {
+ return;
+ }
+ // empty
+ if (url === '') {
+ editor?.chain().focus().extendMarkRange('link').unsetLink().run();
+ return;
+ }
+ // update link
+ editor?.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+ setLinkText('');
+ setLinkDropdownOpen(false);
+ }, [editor, linkText]);
+
+ // add image to editor
+ const addImage = useCallback(() => {
+ if (imageURL) {
+ editor?.chain().focus().setImage({ src: imageURL }).run();
+ }
+ setImageURL('');
+ }, [editor, imageURL]);
+
+ return (
+
+
+
+ editor?.chain().focus().toggleBold().run()}
+ className={`${iconClassName} ${isEditorActive('bold')}`}
+ />
+
+
+ editor?.chain().focus().toggleItalic().run()}
+ className={`${iconClassName} ${isEditorActive('italic')}`}
+ />
+
+
+ editor?.chain().focus().toggleStrike().run()}
+ className={`${iconClassName} ${isEditorActive('strike')}`}
+ />
+
+
+
+
+
+ h
+
+
+
+
+
+ editor?.chain().focus().toggleHeading({ level: 1 }).run()}
+ className={`${iconClassName} fmtm-px-2 ${
+ editor?.isActive('heading', { level: 1 }) ? 'fmtm-text-primaryRed fmtm-bg-red-100' : ''
+ }`}
+ >
+ H1
+
+
+
+
+ editor?.chain().focus().toggleHeading({ level: 2 }).run()}
+ className={`${iconClassName} fmtm-px-2 ${
+ editor?.isActive('heading', { level: 2 }) ? 'fmtm-text-primaryRed fmtm-bg-red-100' : ''
+ }`}
+ >
+ H2
+
+
+
+
+ editor?.chain().focus().toggleHeading({ level: 3 }).run()}
+ className={`${iconClassName} fmtm-px-2 ${
+ editor?.isActive('heading', { level: 3 }) ? 'fmtm-text-primaryRed fmtm-bg-red-100' : ''
+ }`}
+ >
+ H3
+
+
+
+
+
+ editor?.chain().focus().toggleBulletList().run()}
+ className={`${iconClassName} ${isEditorActive('bulletList')}`}
+ />
+
+
+ editor?.chain().focus().toggleOrderedList().run()}
+ className={`${iconClassName} ${isEditorActive('orderedList')}`}
+ />
+
+
+ editor?.chain().focus().toggleCodeBlock().run()}
+ className={`${iconClassName} ${isEditorActive('codeBlock')}`}
+ />
+
+
{
+ setLinkDropdownOpen(state);
+ if (!state) {
+ setLinkText('');
+ }
+ }}
+ >
+
+
+
+
+
+
+ {
+ setLinkText(e.target.value);
+ }}
+ value={linkText}
+ fieldType="text"
+ />
+
+
+
+
+ editor?.chain().focus().toggleBlockquote().run()}
+ className={`${iconClassName} ${isEditorActive('blockquote')}`}
+ />
+
+
+ editor?.chain().focus().setHorizontalRule().run()}
+ className={`${iconClassName}`}
+ />
+
+
setImageDropdownOpen(state)}>
+
+
+
+
+
+
+ {
+ setImageURL(e.target.value);
+ }}
+ value={imageURL}
+ fieldType="text"
+ />
+
+
+
+
+
+
+ editor?.chain().focus().undo().run()} className={`${iconClassName}`} />
+
+
+ editor?.chain().focus().redo().run()} className={`${iconClassName}`} />
+
+
+
+ );
+};
diff --git a/src/frontend/src/components/common/Editor/editorStyles.scss b/src/frontend/src/components/common/Editor/editorStyles.scss
new file mode 100644
index 0000000000..36a57d4f00
--- /dev/null
+++ b/src/frontend/src/components/common/Editor/editorStyles.scss
@@ -0,0 +1,101 @@
+/* Basic editor styles */
+.tiptap {
+ &:focus-visible {
+ outline: none;
+ }
+ padding: 15px;
+ min-height: 200px;
+
+ > * + * {
+ margin-top: 0.75em;
+ }
+
+ ul,
+ ol {
+ padding: 0 1rem;
+ }
+ ol {
+ list-style-type: decimal;
+ }
+ ul {
+ list-style-type: disc;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ line-height: 1.1;
+ }
+ h1 {
+ font-size: xx-large;
+ }
+ h2 {
+ font-size: x-large;
+ }
+ h3 {
+ font-size: larger;
+ }
+
+ code {
+ background-color: rgba(#616161, 0.1);
+ color: #616161;
+ }
+
+ pre {
+ background: #0d0d0d;
+ color: #fff;
+ font-family: 'JetBrainsMono', monospace;
+ padding: 0.75rem 1rem;
+ border-radius: 0.5rem;
+
+ code {
+ color: inherit;
+ padding: 0;
+ background: none;
+ font-size: 0.8rem;
+ }
+ }
+
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ blockquote {
+ padding-left: 1rem;
+ border-left: 2px solid rgba(#0d0d0d, 0.1);
+ }
+
+ hr {
+ border: none;
+ border-top: 2px solid rgba(#0d0d0d, 0.1);
+ margin: 1.5rem 0;
+ }
+ a {
+ color: #0092d1;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+
+ iframe {
+ border: 8px solid #000;
+ border-radius: 4px;
+ min-width: 200px;
+ min-height: 200px;
+ display: block;
+ outline: 0px solid transparent;
+ }
+
+ div[data-youtube-video] {
+ cursor: move;
+ padding-right: 24px;
+ }
+
+ .ProseMirror-selectednode iframe {
+ transition: outline 0.15s;
+ outline: 6px solid #ece111;
+ }
+}
diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
index 7e8df70963..93785541da 100644
--- a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
+++ b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -15,6 +15,7 @@ import { CustomSelect } from '@/components/common/Select';
import { OrganisationService } from '@/api/CreateProjectService';
import { CustomCheckbox } from '@/components/common/Checkbox';
import { organizationDropdownType } from '@/models/createproject/createProjectModel';
+import RichTextEditor from '@/components/common/Editor/Editor';
const ProjectDetailsForm = ({ flag }) => {
const dispatch = useDispatch();
@@ -28,6 +29,7 @@ const ProjectDetailsForm = ({ flag }) => {
hasODKCredentials: item?.odk_central_url ? true : false,
}));
const [hasODKCredentials, setHasODKCredentials] = useState(false);
+ const [editorHtmlContent, setEditorHtmlContent] = useState('');
const submission = () => {
dispatch(CreateProjectActions.SetIndividualProjectDetailsData(values));
@@ -157,6 +159,15 @@ const ProjectDetailsForm = ({ flag }) => {
required
errorMsg={errors.short_description}
/>
+