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

Merge branch 'manage-active-job-delivery-date' of WrenchBoard/Users-Wrench into master

Browse Source
This commit is contained in:
Olusesan Ameye
2023-06-28 01:06:13 +00:00
committed by Gogs
parent 9c342f87f7 ff7e8ea1ab
commit 5f4c40a318
3 changed files with 62 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddJob/AddJob.jsx
+27 -18
View File
@@ -1,11 +1,11 @@
import React, { useState, useEffect } from "react";
import { Field, Form, Formik } from "formik";
import React, { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
import * as Yup from "yup";
import usersService from "../../services/UsersService";
import { tableReload } from "../../store/TableReloads";
import InputCom from "../Helpers/Inputs/InputCom";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import usersService from "../../services/UsersService";
import { useDispatch } from "react-redux";
import { tableReload } from "../../store/TableReloads";
import { Field, Form, Formik } from "formik";
import * as Yup from "yup";
const validationSchema = Yup.object().shape({
country: Yup.string()
@@ -137,7 +137,6 @@ function AddJob({ popUpHandler, categories }) {
getUserCurrency();
}, []);
return (
<div className="add-job p-5 w-full bg-white rounded-md flex flex-col justify-between">
<Formik
@@ -163,7 +162,11 @@ function AddJob({ popUpHandler, categories }) {
id="country"
name="country"
value={props.values.country}
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
props.errors.country && props.touched.country
? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
}`}
onChange={props.handleChange}
onBlur={props.handleBlur}
>
@@ -259,7 +262,11 @@ function AddJob({ popUpHandler, categories }) {
<textarea
id="Job Delivery Details"
rows="5"
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
props.errors.job_detail && props.touched.job_detail
? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
} rounded-[10px]`}
style={{ resize: "none" }}
name="job_detail"
value={props.values.job_detail}
@@ -294,16 +301,13 @@ function AddJob({ popUpHandler, categories }) {
<span className="text-[13.975px]">{value}</span>
</label>
))}
<span className="h-5 text-sm italic text-[#cf3917]">
{props.errors.category &&
props.touched.category &&
"please select a category"}
</span>
</div>
</div>
{/* <div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.job_detail && props.touched.job_detail && (
<p className="text-sm text-red-500">
{props.errors.job_detail}
</p>
)}
</div> */}
</div>
<div className="field w-full mb-[5px]">
@@ -322,7 +326,12 @@ function AddJob({ popUpHandler, categories }) {
<Field
component="select"
name="timeline_days"
className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
}`}
value={props.values.timeline_days}
>
<option value="">Select Duration</option>
src/components/Helpers/Inputs/InputCom/index.jsx
+18 -15
View File
@@ -1,6 +1,6 @@
import React, { useRef } from "react";
import Icons from "../../Icons";
import { Link } from "react-router-dom";
import Icons from "../../Icons";
export default function InputCom({
label,
@@ -22,7 +22,7 @@ export default function InputCom({
spanTag,
inputBg,
direction,
errorBorder
errorBorder,
}) {
const inputRef = useRef(null);
// Entry Validation
@@ -41,8 +41,8 @@ export default function InputCom({
// for Patterns
const inputPatterns = () => {
const inputConfig = inputConfigs[inputRef?.current?.name]?.pattern;
return inputConfig || ""
}
return inputConfig || "";
};
return (
<div className={`input-com ${parentClass}`}>
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
@@ -52,16 +52,16 @@ export default function InputCom({
htmlFor={name}
>
{label}
{spanTag &&
spanTag == '*' ?
{spanTag && spanTag == "*" ? (
<span className="text-red-700 text-sm tracking-wide">
{' '}{spanTag}
{" "}
{spanTag}
</span>
:
) : (
<span className="text-green-700 text-sm tracking-wide">
{spanTag}
</span>
}
)}
</label>
)}
{forgotPassword && (
@@ -74,7 +74,11 @@ export default function InputCom({
)}
</div>
<div
className={`input-wrapper border ${errorBorder ? "border-red-500 border-[0.5px] animate-shake" : "border border-[#f5f8fa] dark:border-[#5e6278]"} w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
className={`input-wrapper border ${
errorBorder
? "border-[#ff0a0a63] border-[2px] shadow-red-500 animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
} w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
>
<input
placeholder={placeholder}
@@ -96,11 +100,9 @@ export default function InputCom({
/>
{iconName && (
<div className="absolute right-6 bottom-[10px] z-10 flex gap-2">
{
iconName.split(' ').map((item, index)=>(
<Icons key={index} name={item} />
))
}
{iconName.split(" ").map((item, index) => (
<Icons key={index} name={item} />
))}
</div>
)}
{passIcon && (
@@ -126,6 +128,7 @@ const inputConfigs = {
province: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
city: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
amount: { minLength: 1, maxLength: 9, pattern: "[0-9]+" },
description: { minLength: 5, maxLength: 250 },
};
/* Numbers Only: <input type="text" pattern="[0-9]*" /> strictly numbers
src/components/jobPopout/EditJobPopout.jsx
+17 -11
View File
@@ -61,7 +61,7 @@ const EditJobPopOut = ({
let initialValues = {
// initial values for formik
country: details.currency,
price: details?.price,
price: details?.price * 0.01,
title: details?.title,
description: details?.description,
job_detail: details?.job_detail,
@@ -228,7 +228,11 @@ const EditJobPopOut = ({
<textarea
id="Job Delivery Details"
rows="5"
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] border border-[#dce4e9] rounded-[10px]`}
className={`input-field px-6 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
props.errors.job_detail && props.touched.job_detail
? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
} rounded-[10px]`}
style={{ resize: "none" }}
name="job_detail"
value={props.values.job_detail}
@@ -263,16 +267,13 @@ const EditJobPopOut = ({
<span className="text-[13.975px]">{value}</span>
</label>
))}
<span className="h-5 text-sm italic text-[#cf3917]">
{props.errors.category &&
props.touched.category &&
"please select a category"}
</span>
</div>
</div>
{/* <div className={`${!props.errors && "invisible"} h-5`}>
{props.errors.job_detail && props.touched.job_detail && (
<p className="text-sm text-red-500">
{props.errors.job_detail}
</p>
)}
</div> */}
</div>
<div className="field w-full mb-6">
@@ -293,7 +294,12 @@ const EditJobPopOut = ({
<Field
component="select"
name="timeline_days"
className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
props.errors.timeline_days &&
props.touched.timeline_days
? "border-[#ff0a0a63] shadow-red-500 border-[2px] animate-shake"
: "border border-[#f5f8fa] dark:border-[#5e6278]"
}`}
value={props.values.timeline_days}
>
<option value="">Select Duration</option>