Reza_ashrafi
3 years ago
parent
881631da00
commit
3e9b2772ef
46 changed files with 567 additions and 277 deletions
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
|
After Width: | Height: | Size: 751 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 800 B After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 985 B |
|
Before Width: | Height: | Size: 988 B After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 1.2 KiB |
@ -1,158 +1,172 @@ |
|||||||
import React, { useState } from 'react'; |
import React, { useState } from "react"; |
||||||
|
|
||||||
|
|
||||||
import moment from "jalali-moment"; |
import moment from "jalali-moment"; |
||||||
|
|
||||||
import StarRating from "../StarRating"; |
import StarRating from "../StarRating"; |
||||||
import Counter from '../Counter'; |
import Counter from "../Counter"; |
||||||
import Button from '../Button'; |
import Button from "../Button"; |
||||||
|
|
||||||
const QandA = ({comments}) =>{ |
const QandA = ({ comments }) => { |
||||||
const Comment = ({ comment }) => { |
const Comment = ({ comment }) => { |
||||||
const [open, Setopen] = useState(true); |
const [open, Setopen] = useState(true); |
||||||
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); |
const [viewmore, setViewMore] = useState("مشاهده باسخ های بیشتر"); |
||||||
const [numberOfAnswers, setNumberOfAnswers] = useState(1); |
const [numberOfAnswers, setNumberOfAnswers] = useState(1); |
||||||
const [isOpen, setIsOpen] = useState(false) |
const [isOpen, setIsOpen] = useState(false); |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> |
<div className="flex flex-col w-full py-6 border-t-2 border-solid border-gray-200"> |
||||||
<header className="w-full flex flex-row justify-between py-1"> |
<header className="w-full flex flex-row justify-between py-1"> |
||||||
<div className="flex flex-row items-end"> |
<div className="flex flex-row items-end"> |
||||||
|
<div className="flex items-center"> |
||||||
<div className="flex items-center"> |
<strong className="text-lg mx-2">{comment.username}</strong> |
||||||
<strong className="text-lg mx-2">{comment.username}</strong> |
{comment.isCostumer ? ( |
||||||
{comment.isCostumer ? <p className='text-blueC0'>خریدار محصول</p> : null} |
<p className="text-blueC0">خریدار محصول</p> |
||||||
</div> |
) : null} |
||||||
</div> |
|
||||||
<div |
|
||||||
className="flex flex-row divide-x divide-gray-300 divided items-center" |
|
||||||
style={{ direction: "ltr" }} |
|
||||||
> |
|
||||||
<span className="px-2 text-sm text-blue-400"> |
|
||||||
{moment(comment.data).locale("fa").format("YYYY/MM/DD")} |
|
||||||
</span> |
|
||||||
<span className="px-2 text-sm text-blue-400"> |
|
||||||
{comment.date.getHours()} : {comment.date.getMinutes()} |
|
||||||
</span> |
|
||||||
</div> |
</div> |
||||||
</header> |
</div> |
||||||
<div className="flex flex-row py-4"> |
<div |
||||||
<div style={{ width: 60 }} className="min-h-full"></div> |
className="flex flex-row divide-x divide-gray-300 divided items-center" |
||||||
<div className="flex flex-1 flex-col px-3"> |
style={{ direction: "ltr" }} |
||||||
|
> |
||||||
|
<span className="px-2 text-sm text-blue-400"> |
||||||
|
{moment(comment.data).locale("fa").format("YYYY/MM/DD")} |
||||||
|
</span> |
||||||
|
<span className="px-2 text-sm text-blue-400"> |
||||||
|
{comment.date.getHours()} : |
||||||
|
{comment.date.getMinutes()} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
<div className="flex flex-row py-4"> |
||||||
|
<div style={{ width: 60 }} className="min-h-full"></div> |
||||||
|
<div className="flex flex-1 flex-col px-3"> |
||||||
<header className="w-full flex flex-row justify-between items-center"> |
<header className="w-full flex flex-row justify-between items-center"> |
||||||
<div className="flex flex-row items-center"> |
<div className="flex flex-row items-center"> |
||||||
<div className='py-4 px-6 bg-blue-100 text-gray-400 rounded'><h1>برسش</h1></div> |
<div className="py-4 px-6 bg-blue-100 text-gray-400 rounded"> |
||||||
|
<h1>برسش</h1> |
||||||
</div> |
</div> |
||||||
</header> |
</div> |
||||||
<div className='flex items-center justify-between'> |
</header> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
<p className="text-gray-500 m-4">{comment.text}</p> |
<p className="text-gray-500 m-4">{comment.text}</p> |
||||||
<Counter value={456} /> |
<Counter value={456} /> |
||||||
</div> |
|
||||||
<div className="self-end mt-4"> |
|
||||||
|
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
|
<div className="self-end mt-4"></div> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
{comment.answers.length > 0 ? comment.answers.slice(0 , numberOfAnswers).map(e => ( |
|
||||||
<div className="flex flex-row py-1"> |
{comment.answers.length > 0 ? ( |
||||||
<div style={{ width: 60 }} className="min-h-full"></div> |
comment.answers.slice(0, numberOfAnswers).map((e) => ( |
||||||
<div className="flex flex-1 flex-col px-3"> |
<div className="flex flex-row py-1"> |
||||||
<header className="w-full flex flex-row justify-between items-center"> |
<div style={{ width: 60 }} className="min-h-full"></div> |
||||||
<div className="flex flex-row items-center"> |
<div className="flex flex-1 flex-col px-3"> |
||||||
<div className='py-4 px-6 bg-green-100 text-gray-400 rounded'><h1>باسخ</h1></div> |
<header className="w-full flex flex-row justify-between items-center"> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
<div className="py-4 px-6 bg-green-100 text-gray-400 rounded"> |
||||||
|
<h1>باسخ</h1> |
||||||
</div> |
</div> |
||||||
</header> |
</div> |
||||||
<div className='flex items-center justify-between'> |
</header> |
||||||
|
<div className="flex items-center justify-between"> |
||||||
<p className="text-gray-500 m-4">{e.text}</p> |
<p className="text-gray-500 m-4">{e.text}</p> |
||||||
<div> |
<div> |
||||||
<Counter value={456} /> |
<Counter value={456} /> |
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className="self-end mt-4"> |
|
||||||
|
|
||||||
</div> |
</div> |
||||||
|
|
||||||
</div> |
</div> |
||||||
|
<div className="self-end mt-4"></div> |
||||||
</div> |
</div> |
||||||
)) : <header className="w-full flex flex-row justify-between items-center"> |
</div> |
||||||
|
)) |
||||||
|
) : ( |
||||||
|
<header className="w-full flex flex-row justify-between items-center"> |
||||||
<div className="flex w-4/5 flex-row items-center"> |
<div className="flex w-4/5 flex-row items-center"> |
||||||
<div className='py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded'><h1>ارسال باسخ</h1></div> |
<div className="py-4 px-6 bg-green-100 text-gray-400 mx-16 rounded"> |
||||||
|
<h1>ارسال باسخ</h1> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</header>} |
</header> |
||||||
{comment.answers.length > 1 ? <div className='w-full flex justify-center'> |
)} |
||||||
{open ? <Button |
{comment.answers.length > 1 ? ( |
||||||
title={viewmore} |
<div className="w-full flex justify-center"> |
||||||
backgroundColor={"bg-gray-200"} |
{open ? ( |
||||||
border={{ |
<Button |
||||||
color: "#C01919", |
title={viewmore} |
||||||
width: "0px", |
backgroundColor={"bg-gray-200"} |
||||||
}} |
border={{ |
||||||
width="24%" |
color: "#C01919", |
||||||
radius={false} |
width: "0px", |
||||||
onClick={isOpen ? () => {setNumberOfAnswers(1);setViewMore("مشاهده باسخ های بیشتر");setIsOpen(false);} : () => { setNumberOfAnswers(comment.answers.length);setViewMore('بستن باسخ ها');setIsOpen(true)}} |
}} |
||||||
color={"text-gray-500"} |
width="24%" |
||||||
/> : null} |
radius={false} |
||||||
</div> : null} |
onClick={ |
||||||
|
isOpen |
||||||
</div> |
? () => { |
||||||
|
setNumberOfAnswers(1); |
||||||
</> |
setViewMore("مشاهده باسخ های بیشتر"); |
||||||
); |
setIsOpen(false); |
||||||
}; |
} |
||||||
return ( |
: () => { |
||||||
<div className="w-full flex flex-col"> |
setNumberOfAnswers(comment.answers.length); |
||||||
{comments.map((comment, index) => ( |
setViewMore("بستن باسخ ها"); |
||||||
<Comment comment={comment} key={index} /> |
setIsOpen(true); |
||||||
))} |
} |
||||||
|
} |
||||||
|
color={"text-gray-500"} |
||||||
|
/> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
) : null} |
||||||
</div> |
</div> |
||||||
); |
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div className="w-full flex flex-col"> |
||||||
|
{comments.map((comment, index) => ( |
||||||
|
<Comment comment={comment} key={index} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
}; |
}; |
||||||
|
|
||||||
export default QandA; |
export default QandA; |
||||||
|
|
||||||
QandA.defaultProps = { |
QandA.defaultProps = { |
||||||
comments: [ |
comments: [ |
||||||
{ |
{ |
||||||
id: 0, |
id: 0, |
||||||
pid: null, |
pid: null, |
||||||
username: "آرش سامانی", |
username: "آرش سامانی", |
||||||
isCostumer: true, |
isCostumer: true, |
||||||
date: new Date(), |
date: new Date(), |
||||||
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", |
text: "خالد حسینی تو رمان باد بادک باز مینویسه : ﻣﺮﺩ ﺁﻫﺴﺘﻪ ﺩﺭ ﮔﻮﺵ ﻓﺮﺯﻧﺪ ﺗﺎﺯﻩ ﺑﻪ ﺑﻠﻮﻍ ﺭﺳﯿﺪﻩ ﺍﺵ ﺑﺮﺍﯼ ﭘﻨﺪ ﭼﻨﯿﻦ ﻧﺠﻮﺍ ﮐﺮﺩ : ” ﭘﺴﺮﻡ ﺩﺭ ﺯﻧﺪﮔﯽ ﻫﺮﮔﺰ ﺩﺯﺩﯼ ﻧﮑﻦ ” ﭘﺴﺮ ﻣﺘﻌﺠﺐ ﻭ ﻣﺒﻬﻮﺕ ﺑﻪ ﭘﺪﺭ ﻧﮕﺎﻩ ﮐﺮﺩ ﺑﺪﯾﻦ ﻣﻌﻨﺎ ﮐﻪ ﺍﻭ ﻫﺮﮔﺰ ﺩﺳﺖ ﮐﺞ ﻧﺪﺍﺷﺘﻪ ﭘﺪﺭ ﺑﻪ ﻧﮕﺎﻩ ﻣﺘﻌﺠﺐ ﻓﺮﺯﻧﺪ ﻟﺒﺨﻨﺪﯼ ﺯﺩ ﻭ ﺍﺩﺍﻣﻪ ", |
||||||
rate: 4, |
rate: 4, |
||||||
answers: [ |
answers: [ |
||||||
{ |
{ |
||||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' |
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد' |
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها' |
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
text: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است' |
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است", |
||||||
}, |
}, |
||||||
|
], |
||||||
], |
status: true, |
||||||
status: true, |
}, |
||||||
}, |
{ |
||||||
{ |
id: 1, |
||||||
id: 1, |
pid: null, |
||||||
pid: null, |
username: "سورنا عابدی", |
||||||
username: "سورنا عابدی", |
isCostumer: false, |
||||||
isCostumer: false, |
date: new Date(), |
||||||
date: new Date(), |
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ", |
||||||
text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد ", |
rate: 4, |
||||||
rate: 4, |
answers: [], |
||||||
answers: [ |
status: true, |
||||||
], |
}, |
||||||
status: true, |
], |
||||||
}, |
}; |
||||||
|
|
||||||
|
|
||||||
], |
|
||||||
}; |
|
||||||
|
|||||||
@ -0,0 +1,31 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { connect } from "react-redux"; |
||||||
|
import { publicApi } from "../../redux/actions"; |
||||||
|
import Book from "./layouts/Book"; |
||||||
|
|
||||||
|
function AR({ getArList, arList, headerOptions, setHeaderOptions }) { |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setHeaderOptions(headerOptions); |
||||||
|
getArList(); |
||||||
|
|
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col flex-1 gap-4 px-4"> |
||||||
|
{arList.length > 0 && |
||||||
|
arList.map((book, index) => <Book book={book} key={index} />)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const mapStateToProps = (state) => ({ |
||||||
|
arList: state.publicApi.arList, |
||||||
|
}); |
||||||
|
|
||||||
|
const mapDispatchToProps = { |
||||||
|
getArList: publicApi.getArList, |
||||||
|
setHeaderOptions : publicApi.setHeaderOptions, |
||||||
|
}; |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(AR); |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const Book = ({ book }) => { |
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={`https://ar.dnvn.ir/lunch?id=${book.id}`} |
||||||
|
target="_blank" |
||||||
|
className="w-full flex flex-row rounded-md p-2 shadow-lg" |
||||||
|
> |
||||||
|
<img |
||||||
|
src={`https://dnvn.ir/api/v1/file/${book.fileId}`} |
||||||
|
className="rounded-md" |
||||||
|
style={{ |
||||||
|
width: "calc(100vh / 10)", |
||||||
|
height: "calc(100vh / 10 * 3 / 2)", |
||||||
|
}} |
||||||
|
/> |
||||||
|
<storng className="mr-2 mt-2 text-tiny text-blue5F font-semibold"> |
||||||
|
{book.title} |
||||||
|
</storng> |
||||||
|
</a> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Book; |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import React from "react"; |
||||||
|
|
||||||
|
const persian = { |
||||||
|
weight: "وزن", |
||||||
|
pageNumber: "تعداد صفحات", |
||||||
|
pageType: "نوع کاغذ", |
||||||
|
bookNumber: "شماره شابک", |
||||||
|
publisher: "انتشارات", |
||||||
|
author: "نویسنده", |
||||||
|
bookType: "قطع", |
||||||
|
publishedYear: "سال انتشار", |
||||||
|
}; |
||||||
|
|
||||||
|
const Table = ({ specifications }) => { |
||||||
|
return ( |
||||||
|
<ul className="w-full"> |
||||||
|
{Object.keys(specifications).map((specification, index) => ( |
||||||
|
<li className="flex my-3"> |
||||||
|
<div |
||||||
|
className="bg-grayF9 rounded p-3 ml-2 text-blue-600 text-sm" |
||||||
|
style={{ flex: 2 }} |
||||||
|
> |
||||||
|
{persian[specification]} |
||||||
|
</div> |
||||||
|
<div className="bg-grayF9 rounded p-3 text-sm" style={{ flex: 8 }}> |
||||||
|
{specifications[specification]} |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Table; |
||||||
|
|
||||||
|
Table.defaultProps = { |
||||||
|
specifications: { |
||||||
|
weight: "1 کیلوگرم", |
||||||
|
pageNumber: "400 صفحه", |
||||||
|
pageType: "گلاسه", |
||||||
|
bookNumber: "124900985340561870112312499", |
||||||
|
publisher: "رزمندگان", |
||||||
|
author: "یک نویسنده گمنام", |
||||||
|
bookType: "خشتی", |
||||||
|
publishedYear: "1399", |
||||||
|
}, |
||||||
|
}; |
||||||
Loading…
Reference in new issue