Create new feature to enable creation of new activities

[souad988]

Summary

step1 (activity creation and edit work):

Add multiStep form with a verification progress bar for each step accessible only by educators and staff members to let them create new activities.
the form is composed of 10 fields:
Title, Motivation, Learning goals, Materials used, Facilitation tips, Activity images, video(url Or video file), making steps(description, image) , inspiring person(fullName, biography, image), inspiring examples(image, description, credit)
Making steps and Inspiring examples are composed of sub Fields and are extensible (array of steps) users can add as many as needed
and the same form is used for editing an activity

Screenshots

Edit activity screenshots:

Changes

frontend:

• Add UploadFile, Input, InputText, MaterialsUsed and FormLabel components
• Add CreateActivity, CreateActivity_step1, CreateActivity_step2 and CreateActivity_step3 views
• Add UploadFileScripts, InputScripts, InputTextScripts and CreateActivityScripts js files to separate services from the views.
• Add CreateActivityStyles that contains all form and form sub Components (UploadFile, FormLabel ...) styles.

backend:

• Add new django app named activities to zubhub_backend/zubhub folder.
• Create Activity, Image, InspiringArtist, ActivityMakingStep, ActivityImage, InspiringExample models to activities/models.py.
• Create ActivitySerializer, ImageSerializer, InspiringArtistSerializer, ActivityMakingStepSerializer, ActivityImageSerializer, InspiringExampleSerializer to activities/serializers.py.
• Add ActivityCreateAPIView and ActivityUpdateAPIView classes to activities/views.py.
• Add IsStaffOrModeratorOrEducator class that inherits from django rest_framework BasePermission class to activities/permissions.py.

Requests / Responses

Request
PATCH activities/${id}/update/ Returns created Activity Object and 403 unauthorized error if request sent by users other than the owner.

body {
-"title":"Weaving loom",
-"motivation":"<h5><span style=\"color: rgb(75, 75, 90);\">Let's make a loom and use it to weave a mat from things around us. This activity guide introduces the basic concept of weaving and sheds light on how handloom clothing and textiles are made.</span></h5>",
-"learning_goals":"<ul><li>Getting familiar with the process of making a loom and understanding how it works</li><li>Exploring a wide variety of weaving techniques, patterns, materials and woven objects</li><li>Developing and expressing creative ideas</li></ul>",
-"materials_used":"Waste cardboard - 8 or 11 inch,Thick threads available at home,Ruler to measure,Scissors,Pencil,Paper,Strips of old cloths",
-"materials_used_image:{"file_url":"http://localhost:8001/project_images/slB1XfRJ5JQVr2bAe6MXZ","public_id":"project_images/slB1XfRJ5JQVr2bAe6MXZ"},
-"facilitation_tips":"<p>Demonstrate the activity with help from the demo video and encourage students to look around in their home or nature and share:</p>",
-"images":[{"image":{"file_url":"http://localhost:8001/project_images/zi00wV495zAZc1wyzdsnI","public_id":"project_images/zi00wV495zAZc1wyzdsnI"}}],
-"making_steps":[{"image":{"file_url":"http://localhost:8001/project_images/RrLA1Q1NlSQrdIwSLfUvA","public_id":"project_images/RrLA1Q1NlSQrdIwSLfUvA"},"description":"<p>1. Draw a 1-inch border at the top and bottom</p><p>of the board and mark 1-1⁄2 cm marks on</p><p>these borders. After that, mark the midpoint</p><p>on the top and bottom edge. Join the dots on</p><p>both sides to form a zigzag design.</p>","step_order":1},
{"image":{"file_url":"http://localhost:8001/project_images/qndtzslLBLFfp7PjqHQ9l","public_id":"project_images/qndtzslLBLFfp7PjqHQ9l"},"description":"<p>2. Next, take the scissor and cut out the top</p><p>part of the pattern. Cut on both sides, and</p><p>your frame for weaving will be ready.</p>","step_order":2}],
-"inspiring_examples":[{"image":{"file_url":"http://localhost:8001/project_images/39XavVbTrTejlgGK3vjPa","public_id":"project_images/39XavVbTrTejlgGK3vjPa"},"description":"Silk tapestry from the “Tree of life” series by artist SG Vasudev","credit":"Artist Vasudev"},
{"image":{"file_url":"http://localhost:8001/project_images/Uus9TymHSZkJblCsYeYH6","public_id":"project_images/Uus9TymHSZkJblCsYeYH6"},"description":"Inkle loom for weaving braided tapes and ribbons.","credit":"Cynthia M. Parkhill, CC BY-SA 3.0"},
{"image":{"file_url":"http://localhost:8001/project_images/xxn4eiZhQCPfDQuserpFH","public_id":"project_images/xxn4eiZhQCPfDQuserpFH"},"description":"Fabric tour of India– from Kashmir to Kanyakumari, every region in India has its handloom techniques used to weave many unique fabrics.","credit":"@ruuhbythebrandstore"},
{"image":{"file_url":"http://localhost:8001/project_images/IQCmhCZTPuv-jc8jX6S7L","public_id":"project_images/IQCmhCZTPuv-jc8jX6S7L"},"description":"Round loom for circular weaving.","credit":"Artist Jennifer @CraftSanity"},
{"image":{"file_url":"http://localhost:8001/project_images/3Jg6tuyJuMB59s38jnJIQ","public_id":"project_images/3Jg6tuyJuMB59s38jnJIQ"},"description":"Digital desktop loom to allow downloading fabric patterns and weaving clothing from a home computer.","credit":"Artist Pamel Liou"},
{"image":{"file_url":"http://localhost:8001/project_images/yA0jc2D9RMWyqRyx5hsTE","public_id":"project_images/yA0jc2D9RMWyqRyx5hsTE"},"description":"Wooden loom for making rugs.","credit":"Srishti Sethi"},],
-"inspiring_artist":{"id":41,"name":"Nikita Gandhi","short_biography":"<p><span style=\"color: rgb(75, 75, 90);\">Nikita Gandhi (Tinker fellow, Unstructured Studio)</span></p>","image":{"file_url":"http://localhost:8001/project_images/hbR7L0RJSHaXw7i7yw6Ki","public_id":"project_images/hbR7L0RJSHaXw7i7yw6Ki"}},
-"video":"https://www.youtube.com/embed/8NsaXruAjJ8"
}

Response
HTTP/1.1 200 OK

 {
"id":"bb554dc9-a554-4a0b-9578-967fd2e72ca6",
"inspired_projects":[{"id":"e15e0c93-95b3-41d6-9c9e-40a4bad63205",
"creator":{"id":"e7230086-ece7-49ea-b26f-abf7fa7c93ae","username":"souad988","avatar":"https://robohash.org/souad988","comments":[],"bio":"My name is souad and I'm from morocco","followers":[],"following_count":0,"projects_count":19,"members_count":null,"tags":["educator","moderator"],"badges":["Flying Bird","Getting Famous"]},"title":"waving loom 2","description":"<p>description</p>","images":[{"image_url":"http://localhost:8001/project_images/wJ9fzBnlT5Vvl6MnPvkUg","public_id":"project_images/wJ9fzBnlT5Vvl6MnPvkUg"}],"video":"","materials_used":"aya,doha","tags":[],"category":"Art","likes":[],"saved_by":[],"views_count":1,"comments":[],"created_on":"2022-10-11T22:14:19.913747Z","publish":{"type":4,"visible_to":[]}},{"id":"d5a7048e-f295-4594-8477-51b9f023fa49","creator":{"id":"e7230086-ece7-49ea-b26f-abf7fa7c93ae","username":"souad988","avatar":"https://robohash.org/souad988","comments":[],"bio":"My name is souad and I'm from morocco","followers":[],"following_count":0,"projects_count":19,"members_count":null,"tags":["educator","moderator"],"badges":["Flying Bird","Getting Famous"]},"title":"waving loom 3","description":"<p>desc</p>","images":[{"image_url":"http://localhost:8001/project_images/In_nsc4-DDnfAgPjz_pAQ","public_id":"project_images/In_nsc4-DDnfAgPjz_pAQ"}],"video":"","materials_used":"fkl","tags":[],"category":"Games","likes":[],"saved_by":[],"views_count":1,"comments":[],"created_on":"2022-10-11T22:17:25.298460Z","publish":{"type":4,"visible_to":[]}}],"creators":[{"id":"d561adbe-f3b8-4913-90e8-e826bdb758d4","username":"yassine","avatar":"http://localhost:8001/avatar/yassine","comments":[],"bio":"hello","followers":[],"following_count":1,"projects_count":5,"members_count":null,"tags":["educator"],"badges":["Hatchling"]}],
"title":"Weaving loom Edit",
"motivation":"<h5><span style=\"color: rgb(75, 75, 90);\">Let's make a loom and use it to weave a mat from things around us. This activity guide introduces the basic concept of weaving and sheds light on how handloom clothing and textiles are made.</span></h5>",
"images":[{"image":{"file_url":"http://localhost:8001/project_images/zi00wV495zAZc1wyzdsnI","public_id":"project_images/zi00wV495zAZc1wyzdsnI"}}],
"video":"https://www.youtube.com/embed/8NsaXruAjJ8",
"materials_used":"Waste cardboard - 8 or 11 inch,Thick threads available at home,Ruler to measure,Scissors,Pencil,Paper,Strips of old cloths",
"facilitation_tips":"<p>Demonstrate the activity with help from the demo video and encourage students to look around in their home or nature and share:</p><p><br></p><p><br></p><p><br></p><ul><li>What examples can you find of weaving around you? (e.g., the nest woven by birds, a fruit basket in the kitchen)</li><li>What are the materials used in weaving?</li><li>What are the materials used to make warp and weft? (e.g., birds use hay, leaves, twigs, and many things around them)</li><li>What can become a frame for weaving (e.g., cloth hanger, an old photo frame)</li><li>What can become a warp and weft for that frame? (e.g., old t-shirt strip, saree)</li></ul><p>Browse through the facilitator guide for tips and tricks to engage participants in maker activities in a virtual or physical learning space.</p>",
"category":null,
"learning_goals":"<ul><li>Getting familiar with the process of making a loom and understanding how it works</li><li>Exploring a wide variety of weaving techniques, patterns, materials and woven objects</li><li>Developing and expressing creative ideas</li></ul>","saved_by":["e7230086-ece7-49ea-b26f-abf7fa7c93ae","d561adbe-f3b8-4913-90e8-e826bdb758d4"],
"views_count":0,
"saved_count":0,
"inspiring_artist":{"id":41,"name":"Nikita Gandhi","short_biography":"<p><span style=\"color: rgb(75, 75, 90);\">Nikita Gandhi (Tinker fellow, Unstructured Studio)</span></p>","image":{"file_url":"http://localhost:8001/project_images/hbR7L0RJSHaXw7i7yw6Ki","public_id":"project_images/hbR7L0RJSHaXw7i7yw6Ki"}},
"created_on":"2022-08-28T15:07:11.063563Z",
"publish":true,
"making_steps":[{"image":{"file_url":"http://localhost:8001/project_images/RrLA1Q1NlSQrdIwSLfUvA","public_id":"project_images/RrLA1Q1NlSQrdIwSLfUvA"},"description":"<p>1. Draw a 1-inch border at the top and bottom</p><p>of the board and mark 1-1⁄2 cm marks on</p><p>these borders. After that, mark the midpoint</p><p>on the top and bottom edge. Join the dots on</p><p>both sides to form a zigzag design.</p>","step_order":1},{"image":{"file_url":"http://localhost:8001/project_images/qndtzslLBLFfp7PjqHQ9l","public_id":"project_images/qndtzslLBLFfp7PjqHQ9l"},"description":"<p>2. Next, take the scissor and cut out the top</p><p>part of the pattern. Cut on both sides, and</p><p>your frame for weaving will be ready.</p>","step_order":2},{"image":{"file_url":"http://localhost:8001/project_images/0g7i8QAR0_GZpakFXWdTo","public_id":"project_images/0g7i8QAR0_GZpakFXWdTo"},"description":"<p>3. Now take any thick thread and tie it to one</p><p>end of the loom. Run the thread across the</p><p>loom, turn it around and bring it back over</p><p>the triangle and continue doing that till you</p><p>have parallel strings across the board.</p>","step_order":3},{"image":{"file_url":"http://localhost:8001/project_images/ExnUiAJDHfmcZ_jpKMVu4","public_id":"project_images/ExnUiAJDHfmcZ_jpKMVu4"},"description":"<p>4. When you reach the last triangle, cut the</p><p>thread and tie it off. Let the threads be</p><p>medium tight, leaving enough space for you</p><p>to pull them up for weaving. After this, you</p><p>can choose bits of threads, strips of cotton</p><p>cloth, or the same warp thread to start your</p><p>weaving.</p>","step_order":4},{"image":null,"description":"<p>Basic Weave Pattern</p><p>As you keep weaving, push the threads tighter to the top. When your thread</p><p>finishes, tie a new thread, do a double knot so that it</p><p>doesn't come out, and keep weaving. Keep using</p><p>different strips of cloth or thread and continue till</p><p>you reach the end.</p><p><br></p><p>In the end, tie three warp threads together with a</p><p>small thread and then cut the warp thread looped on</p><p>the board. Then you will have the finished mat!</p><p><br></p><p>Design</p><p>You can try other patterns by drawing them first on a simple paper in a grid</p><p>format. In the pictures on the right, the black square is the weft, and white is</p><p>the warp. Whenever it is black, take the thread below the weft. This way, you</p><p>can draw your designs on the paper grid and weave them on your board!</p>","step_order":5}],
"inspiring_examples":[{"image":{"file_url":"http://localhost:8001/project_images/39XavVbTrTejlgGK3vjPa","public_id":"project_images/39XavVbTrTejlgGK3vjPa"},"description":"Silk tapestry from the “Tree of life” series by artist SG Vasudev","credit":"Artist Vasudev"},{"image":{"file_url":"http://localhost:8001/project_images/Uus9TymHSZkJblCsYeYH6","public_id":"project_images/Uus9TymHSZkJblCsYeYH6"},"description":"Inkle loom for weaving braided tapes and ribbons.","credit":"Cynthia M. Parkhill, CC BY-SA 3.0"},{"image":{"file_url":"http://localhost:8001/project_images/xxn4eiZhQCPfDQuserpFH","public_id":"project_images/xxn4eiZhQCPfDQuserpFH"},"description":"Fabric tour of India– from Kashmir to Kanyakumari, every region in India has its handloom techniques used to weave many unique fabrics.","credit":"@ruuhbythebrandstore"},{"image":{"file_url":"http://localhost:8001/project_images/IQCmhCZTPuv-jc8jX6S7L","public_id":"project_images/IQCmhCZTPuv-jc8jX6S7L"},"description":"Round loom for circular weaving.","credit":"Artist Jennifer @CraftSanity"},{"image":{"file_url":"http://localhost:8001/project_images/3Jg6tuyJuMB59s38jnJIQ","public_id":"project_images/3Jg6tuyJuMB59s38jnJIQ"},"description":"Digital desktop loom to allow downloading fabric patterns and weaving clothing from a home computer.","credit":"Artist Pamel Liou"},{"image":{"file_url":"http://localhost:8001/project_images/yA0jc2D9RMWyqRyx5hsTE","public_id":"project_images/yA0jc2D9RMWyqRyx5hsTE"},"description":"Wooden loom for making rugs.","credit":"Srishti Sethi"},{"image":{"file_url":"http://localhost:8001/project_images/YNaTLFC09-lOR_ebwtZlR","public_id":"project_images/YNaTLFC09-lOR_ebwtZlR"},"description":"Kullu shawls woven with wool are famous for their geometrical patterns and bright colors.","credit":"Antima Khanna"}],
"materials_used_image":{"file_url":"http://localhost:8001/project_images/slB1XfRJ5JQVr2bAe6MXZ","public_id":"project_images/slB1XfRJ5JQVr2bAe6MXZ"}
}

Request
POST activities/create/ Returns created Activity Object and 403 unauthorized error if request sent by users other than educators moderators or staff members.

body {
"title":"new activity for PR",
"motivation":"<p>motivation text</p>",
"learning_goals":"<p>some learning goals</p>",
"materials_used":"material1,material2",
"facilitation_tips":"<p>some to make it easy</p>",
"images":[{"image":{"file_url":"http://localhost:8001/project_images/CiQeFdEjRNOXrAlRY7NXw","public_id":"project_images/CiQeFdEjRNOXrAlRY7NXw"}},{"image":{"file_url":"http://localhost:8001/project_images/JDr_LtpS0ogfiX8fRdQgy","public_id":"project_images/JDr_LtpS0ogfiX8fRdQgy"}},{"image":{"file_url":"http://localhost:8001/project_images/MjixRRDwZDXV6zZxznxtN","public_id":"project_images/MjixRRDwZDXV6zZxznxtN"}}],
"making_steps":[{"description":"<p>step description </p>","image":{"file_url":"http://localhost:8001/project_images/wJuz_hQhkGCOipoSKvvGm","public_id":"project_images/wJuz_hQhkGCOipoSKvvGm"},"step_order":1}],
"inspiring_examples":[{"description":"description of example first image","credit":"@credit ","image":{"file_url":"http://localhost:8001/project_images/TCZfPBSg-O1ZmOe5mgWEV","public_id":"project_images/TCZfPBSg-O1ZmOe5mgWEV"}}],
"inspiring_artist":{"name":"artist name","short_biography":"<p>artist biography</p>","image":{"file_url":"http://localhost:8001/project_images/nTRjQ4mxjcKftpJQsDJbl","public_id":"project_images/nTRjQ4mxjcKftpJQsDJbl"}}}

Response
HTTP/1.1 200 OK

{"id":"17e10f8d-2b23-4534-a68e-5787b4b54f6c",
"inspired_projects":[],
"creators":[{"id":"d561adbe-f3b8-4913-90e8-e826bdb758d4","username":"yassine","avatar":"http://localhost:8001/avatar/yassine","comments":[],"bio":"hello","followers":[],"following_count":1,"projects_count":5,"members_count":null,"tags":["educator"],"badges":["Hatchling"]}],"title":"new activity for PR","motivation":"<p>motivation text</p>","images":[{"image":{"file_url":"http://localhost:8001/project_images/CiQeFdEjRNOXrAlRY7NXw","public_id":"project_images/CiQeFdEjRNOXrAlRY7NXw"}},{"image":{"file_url":"http://localhost:8001/project_images/JDr_LtpS0ogfiX8fRdQgy","public_id":"project_images/JDr_LtpS0ogfiX8fRdQgy"}},{"image":{"file_url":"http://localhost:8001/project_images/MjixRRDwZDXV6zZxznxtN","public_id":"project_images/MjixRRDwZDXV6zZxznxtN"}}]
,"video":null,
"materials_used":"material1,material2",
"facilitation_tips":"<p>some to make it easy</p>",
"category":null,
"learning_goals":"<p>some learning goals</p>",
"saved_by":[],
"views_count":0,
"saved_count":0,
"inspiring_artist":{"id":70,"name":"artist name","short_biography":"<p>artist biography</p>","image":{"file_url":"http://localhost:8001/project_images/nTRjQ4mxjcKftpJQsDJbl","public_id":"project_images/nTRjQ4mxjcKftpJQsDJbl"}},"created_on":"2022-11-07T21:51:52.382587Z",
"publish":false,
"making_steps":[{"image":{"file_url":"http://localhost:8001/project_images/wJuz_hQhkGCOipoSKvvGm","public_id":"project_images/wJuz_hQhkGCOipoSKvvGm"},"description":"<p>step description </p>","step_order":1}],
"inspiring_examples":[{"image":{"file_url":"http://localhost:8001/project_images/TCZfPBSg-O1ZmOe5mgWEV","public_id":"project_images/TCZfPBSg-O1ZmOe5mgWEV"},"description":"description of example first image","credit":"@credit"}],
"materials_used_image":null
}

step2 (activities and activity_details views):

• Add activity component witch is a card displaying an image of the activity icons of it's creators the title number of projects created based on the activity and a button to let users bookmark it.
• Add activities view to display list of published activities to all users as well as unpublished ones to staff members to let them review and publish new activities, and display users own created activities published and unpublished.
• Create activity details view to display content of the activity.
• Add build this activity button to activity details view to redirect user to project creation form and update this form and project model to handle this functionality.

Screenshots / Demo

Loom.Message.-.8.November.2022.mp4

[tuxology]

Hello @souad988 Thanks a lot for this awesome PR. Its amazing that almost everything in the PR works as it is intended to. We begin first by doing a review of the overall functionality. We will then follow up by doing a more thorough code review. Here is some lightweight feedback/changes first:

1. Invalid result when searching something in search bar shows breadCrumb.link.search in breadcrumb
2. If no activity exists and you click Browse Activities, we see blank page. We should Show either an Oops page or the welcome page we show when no project is on ZubHub.
3. In activity creation form, Motivation section has lowercase motivation. Should be Motivation.
4. In Quill, the default font shown to user is Arial. We know it does render as Raleway when activity is created, but can we render Raleway when we edit in Quill? (its fine if not possible/long edit)
5. "Linked project" button/chip takes us to the activity page. Should it not send us to a list of linked projects?
6. In activity detail, below title, we see "made by XYZuser in 10 days". Can we add link to XYZuser's profile there?
7. Maybe all primary text color currently #15141A should be changed to #000000 just so its uniform with text and headings in Projects page.
8. Can we make z-index: 1 for the breadcrumb bar?

[souad988]

Hello @tuxology Thanks for your review, I have fixed almost all mentioned issue and we still need to discuss the suggested solution for breadCrumbs navigation since there is an issue their I'm fetching project's title from the store while if I'm selecting a project form user profile the store is not updated so we need to have one source of information for now if a value is not found It just doesn't display it's link (if a user is redirected from pdf file of an activity that was deleted or if I'm trying to open an incorrect activity link) , please run the code and let me know your opinion.

1 .Invalid result when searching something in search bar shows breadCrumb.link.search in breadcrumb : done
2 .If no activity exists and you click Browse Activities, we see blank page. We should Show either an Oops page or the welcome page we show when no project is on ZubHub : done
3. In activity creation form, Motivation section has lowercase motivation. Should be Motivation : done
4. In Quill, the default font shown to user is Arial. We know it does render as Raleway when activity is created, but can we render Raleway when we edit in Quill? (its fine if not possible/long edit) : not yet done
5 ."Linked project" button/chip takes us to the activity page. Should it not send us to a list of linked projects? working on
6 .In activity detail, below title, we see "made by XYZuser in 10 days". Can we add link to XYZuser's profile there? done
7 .Maybe all primary text color currently #15141A should be changed to #000000 just so its uniform with text and headings in Projects page : done
8 .Can we make z-index: 1 for the breadcrumb bar? done

[souad988]

Add activity linked projects view and link in activity card.

[tuxology]

Time to merge this! 🤞

[souad988]

Time to merge this! 🤞

yaaay 🥳🥳! I can't wait to see my work online, Looking forward to improving it.