Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 mahdi
|
2961a7d041 | 2 years ago |
44 changed files with 1530 additions and 5455 deletions
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 520 B |
|
Before Width: | Height: | Size: 835 B |
|
Before Width: | Height: | Size: 293 B |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 820 B |
|
Before Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 392 B |
|
Before Width: | Height: | Size: 924 B |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 923 B |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 672 B |
|
Before Width: | Height: | Size: 555 B |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
@ -1,169 +0,0 @@ |
|||||||
import React, { useState } from "react"; |
|
||||||
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; |
|
||||||
|
|
||||||
function Accordion({ finalSpaceCharacters }) { |
|
||||||
const [characters, updateCharacters] = useState(finalSpaceCharacters); |
|
||||||
|
|
||||||
function handleOnDragEnd(result) { |
|
||||||
if (!result.destination) return; |
|
||||||
|
|
||||||
const items = Array.from(characters); |
|
||||||
const [reorderedItem] = items.splice(result.source.index, 1); |
|
||||||
items.splice(result.destination.index, 0, reorderedItem); |
|
||||||
|
|
||||||
updateCharacters(items); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<section className="w-full mt-7"> |
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}> |
|
||||||
<Droppable droppableId="characters"> |
|
||||||
{(provided) => ( |
|
||||||
<section |
|
||||||
className="characters w-full flex flex-col gap-y-4" |
|
||||||
id="container" |
|
||||||
{...provided.droppableProps} |
|
||||||
ref={provided.innerRef} |
|
||||||
> |
|
||||||
{characters.map((item, index) => ( |
|
||||||
<Draggable key={item.id} draggableId={item.id} index={index}> |
|
||||||
{(provided) => ( |
|
||||||
<div |
|
||||||
className="flex flex-col" |
|
||||||
ref={provided.innerRef} |
|
||||||
{...provided.draggableProps} |
|
||||||
{...provided.dragHandleProps} |
|
||||||
> |
|
||||||
<div className="flex items-center w-full "> |
|
||||||
<img |
|
||||||
src="images/blue-hamburger-menu.jpeg" |
|
||||||
alt="" |
|
||||||
className="w-4 ml-2" |
|
||||||
/> |
|
||||||
<div className="w-full flex flex-row items-center justify-between px-3 py-4 bg-[#EEF5FF] rounded-sm cursor-pointer"> |
|
||||||
<p className="flex-1 mr-3 text-sm text-[#234F8E]"> |
|
||||||
{item.title} |
|
||||||
</p> |
|
||||||
<div className="bg-[#D4E7FF] p-2 rounded-sm"> |
|
||||||
<img |
|
||||||
src="images/blue-cancle-icon.svg" |
|
||||||
alt="" |
|
||||||
className="w-3 " |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
{provided.placeholder} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</Draggable> |
|
||||||
))} |
|
||||||
{provided.placeholder} |
|
||||||
</section> |
|
||||||
)} |
|
||||||
</Droppable> |
|
||||||
</DragDropContext> |
|
||||||
</section> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default Accordion; |
|
||||||
Accordion.defaultProps = { |
|
||||||
finalSpaceCharacters: [ |
|
||||||
{ |
|
||||||
id: "1", |
|
||||||
title: |
|
||||||
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
|
||||||
video: 4, |
|
||||||
min: 30, |
|
||||||
subItems: [ |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "شرکت های بزرگ خیلی خوب هستند", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: "2", |
|
||||||
title: |
|
||||||
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
|
||||||
video: 4, |
|
||||||
min: 30, |
|
||||||
subItems: [ |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "شرکت های بزرگ خیلی خوب هستند", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: "3", |
|
||||||
name: "KVN", |
|
||||||
thumb: "/images/kvn.png", |
|
||||||
title: |
|
||||||
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", |
|
||||||
video: 4, |
|
||||||
min: 30, |
|
||||||
|
|
||||||
subItems: [ |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "شرکت های بزرگ خیلی خوب هستند", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: "4", |
|
||||||
name: "Mooncake", |
|
||||||
thumb: "/images/kvn.png", |
|
||||||
title: |
|
||||||
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", |
|
||||||
video: 4, |
|
||||||
min: 30, |
|
||||||
subItems: [ |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "شرکت های بزرگ خیلی خوب هستند", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
id: "5", |
|
||||||
title: |
|
||||||
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
|
||||||
video: 4, |
|
||||||
min: 30, |
|
||||||
subItems: [ |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "شرکت های بزرگ خیلی خوب هستند", |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
import React, { useState } from "react"; |
|
||||||
import fixNumbers from "./fixNumbers"; |
|
||||||
|
|
||||||
const Input = ({ |
|
||||||
defaultValue, |
|
||||||
set, |
|
||||||
label, |
|
||||||
borderClassname, |
|
||||||
inputClassname, |
|
||||||
placeholderClass, |
|
||||||
activePlaceholderClass, |
|
||||||
type, |
|
||||||
maxLength, |
|
||||||
max, |
|
||||||
min, |
|
||||||
register, |
|
||||||
onClick, |
|
||||||
icon, |
|
||||||
}) => { |
|
||||||
const [value, setValue] = useState(defaultValue); |
|
||||||
console.log(value); |
|
||||||
return ( |
|
||||||
<div |
|
||||||
onClick={onClick} |
|
||||||
className={ |
|
||||||
"h-full w-full flex flex-row items-center rounded relative bg-[#F9F9F9] " + |
|
||||||
borderClassname + |
|
||||||
(value ? " bg-white border rounded " : " bg-white ") |
|
||||||
} |
|
||||||
> |
|
||||||
<div |
|
||||||
className={ |
|
||||||
"text-xs absolute transition-all duration-300 pointer-events-none px-3 text-[#00253A] transform -translate-x-[4px]" + |
|
||||||
(value |
|
||||||
? ` ${activePlaceholderClass} + top-[-10px]` |
|
||||||
: ` ${placeholderClass} + top-[10px]`) |
|
||||||
} |
|
||||||
> |
|
||||||
{label} |
|
||||||
</div> |
|
||||||
{type !== "textarea" ? ( |
|
||||||
<input |
|
||||||
{...register} |
|
||||||
maxLength={maxLength} |
|
||||||
value={value} |
|
||||||
type={"text"} |
|
||||||
onInput={(e) => { |
|
||||||
let value = e.target.value; |
|
||||||
if (type === "number") |
|
||||||
value = fixNumbers(value).replace(/[^\d.-]/g, ""); |
|
||||||
if (maxLength && value.length > maxLength) |
|
||||||
value = value.slice(0, maxLength); |
|
||||||
if (!isNaN(max) && +e.target.value > max) value = max; |
|
||||||
if (!isNaN(min) && +e.target.value < min) value = min; |
|
||||||
e.target.value = value; |
|
||||||
}} |
|
||||||
className={`rtl w-full h-full outline-0 text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${inputClassname}
|
|
||||||
${!value ? "bg-[#F9F9F9] " : "bg-white"} `}
|
|
||||||
onChange={(e) => setValue(e.target.value)} |
|
||||||
inputMode={type === "number" ? "numeric" : ""} |
|
||||||
/> |
|
||||||
) : ( |
|
||||||
<textarea |
|
||||||
{...register} |
|
||||||
className={`rtl w-full h-full text-[#00253A] p-4 outline-0 resize-none text-xs rounded-md border-transparent focus:border-transparent focus:ring-transparent ${ |
|
||||||
!value ? "bg-[#F9F9F9] " : "bg-white" |
|
||||||
}`}
|
|
||||||
onChange={(e) => setValue(e.target.value)} |
|
||||||
> |
|
||||||
{value} |
|
||||||
</textarea> |
|
||||||
)} |
|
||||||
{icon && <img src={icon} alt="calender" className="ml-2" />} |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Input; |
|
||||||
|
|
||||||
Input.defaultProps = { |
|
||||||
inputClassname: "", |
|
||||||
placeholderClass: "text-[#bdc3c7]", |
|
||||||
activePlaceholderClass: "text-blue-600 bg-white", |
|
||||||
icon: false, |
|
||||||
}; |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
const persianNumbers = [ |
|
||||||
/۰/g, |
|
||||||
/۱/g, |
|
||||||
/۲/g, |
|
||||||
/۳/g, |
|
||||||
/۴/g, |
|
||||||
/۵/g, |
|
||||||
/۶/g, |
|
||||||
/۷/g, |
|
||||||
/۸/g, |
|
||||||
/۹/g, |
|
||||||
], |
|
||||||
arabicNumbers = [/٠/g, /١/g, /٢/g, /٣/g, /٤/g, /٥/g, /٦/g, /٧/g, /٨/g, /٩/g], |
|
||||||
fixNumbers = function (str) { |
|
||||||
if (typeof str === "string") { |
|
||||||
for (var i = 0; i < 10; i++) { |
|
||||||
str = str.replace(persianNumbers[i], i).replace(arabicNumbers[i], i); |
|
||||||
} |
|
||||||
} |
|
||||||
return str; |
|
||||||
}; |
|
||||||
export default fixNumbers; |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import { useForm } from "react-hook-form"; |
|
||||||
|
|
||||||
import Accordion from "../Accordion"; |
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
|
|
||||||
const Checklist = () => { |
|
||||||
return ( |
|
||||||
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pl-5"> |
|
||||||
<p className=" font-bold text-blue-600 text-left text-xs mb-2"> |
|
||||||
تابع انتخاب |
|
||||||
</p> |
|
||||||
<div className="flex flex-col gap-y-4"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "افزودن چک لیست" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<Accordion /> |
|
||||||
</div> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pr-5"> |
|
||||||
<p className="font-bold text-[#00253A] text-sm mb-4">شرایط ایجاد</p> |
|
||||||
<div className="flex flex-col gap-y-4"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب سرویس" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب تابع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<hr className="border border-gray-200 w-full my-5" /> |
|
||||||
<p className="font-bold text-[#00253A] text-sm mb-4">تابع فیلتر</p> |
|
||||||
<div className="flex flex-col gap-y-4"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب سرویس" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب تابع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Checklist; |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const CircleInCircle = ({ parentClassName, childClassName }) => { |
|
||||||
return ( |
|
||||||
<div className={` ${parentClassName} w-5 h-5 rounded-full relative `}> |
|
||||||
<div |
|
||||||
className={`${childClassName} w-2 h-2 rounded-full absolute left-1/2 bottom-1/2 transform -translate-x-1/2 translate-y-1/2`} |
|
||||||
></div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default CircleInCircle; |
|
||||||
|
|
||||||
CircleInCircle.defaultProps = { |
|
||||||
parentClassName: "bg-red-200", |
|
||||||
childClassName: "bg-red-600", |
|
||||||
}; |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
|
|
||||||
const Condition = () => { |
|
||||||
return ( |
|
||||||
<div className="w-full flex flex-row items-center justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pl-5 "> |
|
||||||
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]"> |
|
||||||
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pr-5"> |
|
||||||
<div className="flex flex-col gap-y-7"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "محدودیت شبکه" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ |
|
||||||
title: |
|
||||||
"شناسه فرآیندهایی که باعث ابطال وظایف با فرآیند های فعلی می شود", |
|
||||||
}, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ |
|
||||||
title: "رفرنس هایی که شناسه ی آن ها ظروری است", |
|
||||||
}, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ |
|
||||||
title: "رفرنس هایی که باید در یک گردش کار یکتا باشند", |
|
||||||
}, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Condition; |
|
||||||
@ -0,0 +1,33 @@ |
|||||||
|
// it has style inside index.scss ---> // Start FormInput Component && end FormInput Component
|
||||||
|
|
||||||
|
import React from "react"; |
||||||
|
import CustomSelectBox from "../CustomSelectBox"; |
||||||
|
|
||||||
|
const FormInput = ({ items }) => { |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-row items-center justify-between mx-auto rounded-sm shadow-sm divide-x-2 divide-gray-400 divide-x-reverse "> |
||||||
|
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
||||||
|
<CustomSelectBox /> |
||||||
|
</div> |
||||||
|
<div className="flex-grow flex-1 flex flex-col gap-y-4 px-4"> |
||||||
|
<CustomSelectBox /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default FormInput; |
||||||
|
|
||||||
|
FormInput.defaultProps = { |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
title: "mahdi", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "mahdi", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "mahdi", |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -1,50 +0,0 @@ |
|||||||
import React, { useState } from "react"; |
|
||||||
|
|
||||||
import Button from "../Button"; |
|
||||||
import Tabbar from "../Tabbar"; |
|
||||||
|
|
||||||
const Modal = ({ activeTab, children }) => { |
|
||||||
const [openModal, setOpenModal] = useState(false); |
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Button |
|
||||||
className={`bg-[#046AE8] text-white rounded p-2 text-xs`} |
|
||||||
iconHolderClassName={"bg-transparent mr-1"} |
|
||||||
iconClassName={"w-5"} |
|
||||||
icon={"images/blue-edit-icon.svg"} |
|
||||||
text={"ویرایش"} |
|
||||||
onClick={() => setOpenModal(true)} |
|
||||||
/> |
|
||||||
<div |
|
||||||
className={`w-screen h-screen flex items-center justify-center bg-gray-600 bg-opacity-60 backdrop-filter backdrop-blur-sm fixed left-0 top-0 duration-300 transition-all ${ |
|
||||||
openModal ? "flex" : "hidden pointer-events-none" |
|
||||||
}`}
|
|
||||||
> |
|
||||||
<div className="min-w-[900px] w-fit min-h-[700px] flex flex-col justify-between bg-white border border-gray-400 rounded"> |
|
||||||
<div |
|
||||||
className="p-3 flex flex-col" |
|
||||||
onClick={(e) => e.stopPropagation()} |
|
||||||
> |
|
||||||
<Button |
|
||||||
className="w-fit p-1.5 self-end bg-[#D11B1B] rounded-sm mb-7" |
|
||||||
text={false} |
|
||||||
icon={"images/white-cancel.svg"} |
|
||||||
iconHolderClassName={"mr-0"} |
|
||||||
onClick={() => setOpenModal(false)} |
|
||||||
/> |
|
||||||
<Tabbar /> |
|
||||||
</div> |
|
||||||
<div className="w-full flex flex-col items-end p-2 bg-[#e2dfdf]"> |
|
||||||
<Button |
|
||||||
className="w-fit p-2 bg-[#3C58EA] text-white rounded-md text-sm" |
|
||||||
text={"ذخیره و ثبت اطلاعات"} |
|
||||||
iconHolderClassName={"mr-0"} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Modal; |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import { useForm } from "react-hook-form"; |
|
||||||
|
|
||||||
import Accordion from "../Accordion"; |
|
||||||
import Input from "../AnimatedInput/Input"; |
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
|
|
||||||
const Mokatebat = () => { |
|
||||||
const { register, getValues } = useForm(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pl-5"> |
|
||||||
<div className="flex flex-col gap-y-4"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "قالب نامه" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "جامعه هدف" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<Input |
|
||||||
register={register("lastName")} |
|
||||||
label="متن پیامک اطلاع رسانی" |
|
||||||
type="textarea" |
|
||||||
borderClassname={`border border-red-[#E3E3E3] `} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<p className=" font-bold text-[#00253A] text-sm mt-4 mb-2"> |
|
||||||
تابع انتخاب |
|
||||||
</p> |
|
||||||
<div className="flex flex-col gap-y-4"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب سرویس" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب تابع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
{/* <Accordion /> */} |
|
||||||
</div> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pr-5"> |
|
||||||
<div> |
|
||||||
<p className="font-bold text-[#00253A] text-sm">شرایط ایجاد</p> |
|
||||||
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]"> |
|
||||||
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className="mt-4"> |
|
||||||
<p className="font-bold text-[#00253A] text-sm">شرایط امضا</p> |
|
||||||
<div className="font-bold text-center p-4 rounded-sm border border-[#DBDBDB] text-[#333333]"> |
|
||||||
اینجا قرار است بیام از react-monaco-editor استفاده کنم{" "} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Mokatebat; |
|
||||||
@ -0,0 +1,7 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const Popup = () => { |
||||||
|
return <div>Popup</div>; |
||||||
|
}; |
||||||
|
|
||||||
|
export default Popup; |
||||||
@ -1,23 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import Accordion from "../Accordion"; |
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
|
|
||||||
const Questions = () => { |
|
||||||
// const [selectedQuestion, setSelectedQuestion] = useState(null);
|
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="w-full"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب سوال" }, |
|
||||||
{ title: "سوال شماره ۱" }, |
|
||||||
{ title: "سوال شماره ۲" }, |
|
||||||
{ title: "سوال شماره ۳" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<Accordion /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Questions; |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
|
|
||||||
const RadioButton = () => { |
|
||||||
return ( |
|
||||||
<div className="relative"> |
|
||||||
<div className="flex items-center justify-between rounded py-4 bg-[#FBFBFB] focus:bg-[#f5f5f5] border border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
|
||||||
<div className="flex items-center justify-center flex-1 pl-5"> |
|
||||||
<input |
|
||||||
id="default-radio-1" |
|
||||||
type="radio" |
|
||||||
value="" |
|
||||||
name="default-radio" |
|
||||||
class="w-4 h-4 cursor-pointer" |
|
||||||
checked="checked" |
|
||||||
/> |
|
||||||
<label for="default-radio-1" class="mr-2 text-xs text-[#00253A]"> |
|
||||||
بله |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
<div className="flex items-center justify-center flex-1 pl-5"> |
|
||||||
<input |
|
||||||
id="default-radio-2" |
|
||||||
type="radio" |
|
||||||
value="" |
|
||||||
name="default-radio" |
|
||||||
class="w-4 h-4 cursor-pointer" |
|
||||||
/> |
|
||||||
<label for="default-radio-2" class="mr-2 text-xs text-[#00253A]"> |
|
||||||
خیر |
|
||||||
</label> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="absolute top-0 transform -translate-y-2.5 -translate-x-2 px-2 z-10 bg-white"> |
|
||||||
<p className="text-xs text-[#00253A]">آیا قابلیت ارجاع دارد؟</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default RadioButton; |
|
||||||
@ -1,105 +0,0 @@ |
|||||||
// import React from "react";
|
|
||||||
// import { render } from "react-dom";
|
|
||||||
// import MonacoEditor, { MonacoDiffEditor } from "react-monaco-editor";
|
|
||||||
|
|
||||||
// class CodeEditor extends React.Component {
|
|
||||||
// constructor() {
|
|
||||||
// super();
|
|
||||||
// this.state = {
|
|
||||||
// code: "// type your code... \n",
|
|
||||||
// theme: "vs-light",
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
|
|
||||||
// onChange = (newValue) => {
|
|
||||||
// console.log("onChange", newValue); // eslint-disable-line no-console
|
|
||||||
// };
|
|
||||||
|
|
||||||
// editorDidMount = (editor) => {
|
|
||||||
// // eslint-disable-next-line no-console
|
|
||||||
// console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
|
|
||||||
// this.editor = editor;
|
|
||||||
// };
|
|
||||||
|
|
||||||
// changeEditorValue = () => {
|
|
||||||
// if (this.editor) {
|
|
||||||
// this.editor.setValue("// code changed! \n");
|
|
||||||
// }
|
|
||||||
// };
|
|
||||||
|
|
||||||
// changeBySetState = () => {
|
|
||||||
// this.setState({ code: "// code changed by setState! \n" });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// setDarkTheme = () => {
|
|
||||||
// this.setState({ theme: "vs-dark" });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// setLightTheme = () => {
|
|
||||||
// this.setState({ theme: "vs-light" });
|
|
||||||
// };
|
|
||||||
|
|
||||||
// render() {
|
|
||||||
// const { code, theme } = this.state;
|
|
||||||
// const options = {
|
|
||||||
// selectOnLineNumbers: true,
|
|
||||||
// roundedSelection: false,
|
|
||||||
// readOnly: false,
|
|
||||||
// cursorStyle: "line",
|
|
||||||
// automaticLayout: false,
|
|
||||||
// };
|
|
||||||
// return (
|
|
||||||
// <div>
|
|
||||||
// <div>
|
|
||||||
// <button onClick={this.changeEditorValue} type="button">
|
|
||||||
// Change value
|
|
||||||
// </button>
|
|
||||||
// <button onClick={this.changeBySetState} type="button">
|
|
||||||
// Change by setState
|
|
||||||
// </button>
|
|
||||||
// <button onClick={this.setDarkTheme} type="button">
|
|
||||||
// Set dark theme
|
|
||||||
// </button>
|
|
||||||
// <button onClick={this.setLightTheme} type="button">
|
|
||||||
// Set light theme
|
|
||||||
// </button>
|
|
||||||
// </div>
|
|
||||||
// <hr />
|
|
||||||
// <MonacoEditor
|
|
||||||
// height="400"
|
|
||||||
// language="javascript"
|
|
||||||
// value={code}
|
|
||||||
// options={options}
|
|
||||||
// onChange={this.onChange}
|
|
||||||
// editorDidMount={this.editorDidMount}
|
|
||||||
// theme={theme}
|
|
||||||
// />
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const ReactMonacoEditor = () => {
|
|
||||||
// return (
|
|
||||||
// <div>
|
|
||||||
// <h2>Monaco Editor Sample (controlled mode)</h2>
|
|
||||||
// <CodeEditor />
|
|
||||||
// <hr />
|
|
||||||
// <h2>Another editor (uncontrolled mode)</h2>
|
|
||||||
// {/* <AnotherEditor /> */}
|
|
||||||
// <hr />
|
|
||||||
// <h2>Another editor (showing a diff)</h2>
|
|
||||||
// {/* <DiffEditor /> */}
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
// export default ReactMonacoEditor;
|
|
||||||
|
|
||||||
import React from "react"; |
|
||||||
|
|
||||||
const ReactMonacoEditor = () => { |
|
||||||
return <div>ReactMonacoEditor</div>; |
|
||||||
}; |
|
||||||
|
|
||||||
export default ReactMonacoEditor; |
|
||||||
@ -1,136 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import { useForm } from "react-hook-form"; |
|
||||||
|
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
import Input from "../AnimatedInput/Input"; |
|
||||||
import CircleInCircle from "../CircleInCircle"; |
|
||||||
import RadioButton from "../RadioButton"; |
|
||||||
|
|
||||||
const Settingss = ({ status }) => { |
|
||||||
const { register } = useForm(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="w-full flex flex-row items-start justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
|
||||||
<div className="flex-grow flex-1 flex flex-col gap-y-7 pl-5"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "نام فرآیند" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<Input |
|
||||||
register={register("lastName")} |
|
||||||
label="توضیحات" |
|
||||||
type="textarea" |
|
||||||
borderClassname={`border border-red-[#E3E3E3] `} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "اولویت دهی" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "نوع فرآیند" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<div className="flex items-center justify-between rounded py-2 bg-[#FBFBFB] border focus:bg-[#f5f5f5] border-[#DBDBDB] focus:border-[#DBDBDB] focus:ring-transparent"> |
|
||||||
<p className="text-xs text-[#00253A] mr-5">وضیعت</p> |
|
||||||
<div className="ml-1"> |
|
||||||
<CircleInCircle |
|
||||||
parentClassName={`w-5 h-5 ${ |
|
||||||
status ? "bg-green-600" : "bg-red-600" |
|
||||||
}`}
|
|
||||||
childClassName={false} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<RadioButton /> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب نقش های قابل ارجاع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب نقش انجام دهنده" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pr-5 gap-y-7"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "فرآیند مرجع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "فرآیندهای لینک" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<div className="w-full flex items-center gap-x-3"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "زمان تاخیر" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "مهلت انجام" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className="w-full flex items-center gap-x-3"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "تایید خودکار" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انقضا" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Settingss; |
|
||||||
|
|
||||||
Settingss.defaultProps = { |
|
||||||
status: true, |
|
||||||
}; |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
import React, { useState } from "react"; |
|
||||||
import Button from "../Button"; |
|
||||||
import Checklist from "../Checklist"; |
|
||||||
import Condition from "../Condition"; |
|
||||||
import Mokatebat from "../Mokatebat"; |
|
||||||
import Questions from "../Questions"; |
|
||||||
import Settingss from "../Settingss"; |
|
||||||
import Tavabee from "../Tavabee"; |
|
||||||
|
|
||||||
const Tabbar = ({ tabs }) => { |
|
||||||
const [activeTab, setActiveTab] = useState(); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="flex flex-col "> |
|
||||||
<div className="flex items-center"> |
|
||||||
{tabs.map((tab, index) => ( |
|
||||||
<Button |
|
||||||
key={index} |
|
||||||
text={tab.title} |
|
||||||
className={`${tab.className} ${ |
|
||||||
activeTab === tab |
|
||||||
? "bg-[#F1F3FF] text-[#3C58EA]" |
|
||||||
: "bg-white text-[#333333]" |
|
||||||
} w-full p-3 text-xs border border-b-2 border-t-2 border-[#3C58EA]`}
|
|
||||||
icon={activeTab === tab ? "images/blue-correct-thick-icon.svg" : ""} |
|
||||||
onClick={() => setActiveTab(tab)} |
|
||||||
/> |
|
||||||
))} |
|
||||||
</div> |
|
||||||
<div className={`rounded w-full text-white flex items-center mt-5`}> |
|
||||||
{activeTab?.components} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Tabbar; |
|
||||||
|
|
||||||
Tabbar.defaultProps = { |
|
||||||
tabs: [ |
|
||||||
{ |
|
||||||
title: "تنظیمات", |
|
||||||
className: "rounded-tr-md rounded-br-md border-r-2", |
|
||||||
components: <Settingss />, |
|
||||||
active: true, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "سوالات", |
|
||||||
className: "", |
|
||||||
components: <Questions />, |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "چک لیست", |
|
||||||
className: "", |
|
||||||
components: <Checklist />, |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "مکاتبات", |
|
||||||
className: "", |
|
||||||
components: <Mokatebat />, |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "توابع", |
|
||||||
className: "", |
|
||||||
components: <Tavabee />, |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "شرایط و اجرا", |
|
||||||
className: "rounded-tl-md rounded-bl-md border-l-2", |
|
||||||
components: <Condition />, |
|
||||||
active: false, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
@ -1,53 +0,0 @@ |
|||||||
import React from "react"; |
|
||||||
import CustomSelectBox from "../CustomSelectBox"; |
|
||||||
|
|
||||||
const Tavabee = () => { |
|
||||||
return ( |
|
||||||
<div className="w-full flex flex-row items-center justify-between divide-x-2 divide-[#E3E3E3] divide-x-reverse"> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pl-5"> |
|
||||||
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع شروع</p> |
|
||||||
<div className="flex flex-col gap-y-7"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب سرویس" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب تابع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className="flex-grow flex-1 flex flex-col pr-5"> |
|
||||||
<p className="mb-4 mt-2 font-bold text-[#00253A] text-sm">تابع پایان</p> |
|
||||||
<div className="flex flex-col gap-y-7"> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب سرویس" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
<CustomSelectBox |
|
||||||
options={[ |
|
||||||
{ title: "انتخاب تابع" }, |
|
||||||
{ title: "شماره 1" }, |
|
||||||
{ title: "شماره 2" }, |
|
||||||
{ title: "شماره 3" }, |
|
||||||
]} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Tavabee; |
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue