WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'suggested-task-page' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-07-07 01:51:34 +00:00
committed by Gogs
parent b5573aedd0 6126564547
commit f4bd4e4c7d
2 changed files with 88 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyPopup/SuggestTask.jsx
+70 -9
View File
@@ -1,9 +1,10 @@
import { useState } from "react";
import { useLocation } from "react-router-dom";
import ModalCom from "../Helpers/ModalCom";
import { Form, Formik } from "formik";
import {Form, Formik } from "formik";
import InputCom from "../Helpers/Inputs/InputCom";
import usersService from "../../services/UsersService";
import Icons from "../Helpers/Icons";
const DEFAULT_IMAGE = require("../../assets/images/family/default.jpg");
const SuggestTask = ({ details, onClose, situation }) => {
@@ -13,7 +14,12 @@ const SuggestTask = ({ details, onClose, situation }) => {
msg: "",
state: "",
});
// default image
const [suggestedNextStep, setSuggestedNextStep] = useState("Send Task");
const switchNextStep = (value) => {
setSuggestedNextStep(value);
};
const selectedImage = details?.selectedImage || DEFAULT_IMAGE;
const initialValues = {
title: details?.title || "",
@@ -79,16 +85,19 @@ const SuggestTask = ({ details, onClose, situation }) => {
</svg>
</button>
</div>
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
<Formik
initialValues={initialValues}
onSubmit={pathname !== "/manage-family" && handleSubmit}
>
{(props) => {
return (
<Form>
<div className="p-5 w-full bg-white rounded-md flex justify-between">
{/* Image Section */}
<div className="p-4 w-full md:w-2/4 md:border-r-2">
<div
className="w-full h-[236px] p-6 bg-gray-400 rounded-xl overflow-hidden"
style={{
// background: `url(${selectedImage}) 0% 0% / cover no-repeat`,
background: `url(${selectedImage}) center / contain no-repeat`,
}}
></div>
@@ -141,10 +150,10 @@ const SuggestTask = ({ details, onClose, situation }) => {
<textarea
id="description"
rows="5"
className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[130px] ${
className={`input-field pt-2 placeholder:text-base text-dark-gray dark:text-white w-full ${
pathname === "/manage-family"
? "px-2"
: "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]"
? "px-2 h-[110px]"
: "bg-slate-100 px-3 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px] h-[130px]"
}`}
style={{ resize: "none" }}
name="description"
@@ -153,6 +162,48 @@ const SuggestTask = ({ details, onClose, situation }) => {
onBlur={props.handleBlur}
/>
</div>
{/* Radio buttons for family */}
{pathname === "/manage-family" && (
<div className="h-[20px] w-full border-t dark:border-[#5356fb29] border-light-purple relative">
<div id="my-radio-group" className="sr-only">
Parent suggested next step
</div>
<div
role="group"
className="flex items-center justify-between py-2"
aria-labelledby="parent-suggested-radio-group"
>
{[
{ title: "Send Task" },
{ title: "Duplicate" },
{ title: "Not Now" },
].map(({ title }, idx) => (
<label key={idx} htmlFor="parent-suggested">
<input
type="radio"
name="parent-suggested"
value={title}
checked={title == suggestedNextStep}
onChange={switchNextStep}
className={`transition duration-150 ease-in-out parent-suggest`}
/>
<span
className={`ml-1 ${
title == "Not Now"
? "text-red-500"
: title == "Duplicate"
? "text-purple"
: "text-black"
} font-semibold`}
>
{title}
</span>
</label>
))}
</div>
</div>
)}
</div>
</div>
<div className="w-full h-[70px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
@@ -164,11 +215,11 @@ const SuggestTask = ({ details, onClose, situation }) => {
>
<span className="text-gradient"> Cancel</span>
</button>
{pathname !== "/manage-family" && (
{pathname !== "/manage-family" ? (
<button
type="submit"
disabled={props.isSubmitting}
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full transition duration-150 ease-in-out"
>
{submitTask.loading
? "Submitting Task"
@@ -178,6 +229,16 @@ const SuggestTask = ({ details, onClose, situation }) => {
? "An Error Occurred"
: "Send to Parents"}
</button>
) : (
<button className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full flex items-center transition duration-150 ease-in-out">
{suggestedNextStep == "Send Task" ? (
<>
Continue <Icons name="chevron-right" />
</>
) : (
"Complete"
)}
</button>
)}
</div>
</div>
src/components/Helpers/Icons.jsx
+18 -3
View File
@@ -1,8 +1,8 @@
import React from "react";
import ATMCard from '../../assets/images/card.svg'
import VisaCard from '../../assets/images/visa.svg'
import MasterCard from '../../assets/images/master.svg'
import ATMCard from "../../assets/images/card.svg";
import VisaCard from "../../assets/images/visa.svg";
import MasterCard from "../../assets/images/master.svg";
export default function Icons({ name }) {
return (
@@ -472,6 +472,21 @@ export default function Icons({ name }) {
>
<rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
</svg>
) : name === "chevron-right" ? (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
className="w-4 h-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
) : name === "right-arrow" ? (
<svg
width="24"