add upload page & create main

2024-11-22 01:26:46 +03:00 · 2022-08-27 01:37:17 +03:00 · 2022-08-27 01:37:17 +03:00 · 45c0531d19
commit 45c0531d19
parent a40deeedd5
9 changed files with 263 additions and 20 deletions
--- a/Components/ErrorViewer/error.module.css
+++ b/Components/ErrorViewer/error.module.css
@ -0,0 +1,77 @@
+.viewer{
+    background: #FFFFFF;
+    color: rgba(0, 0, 0, 0.85);
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    box-shadow: inset 0px -1px 0px #F0F0F0;
+    padding: 12px 16px;
+    cursor: pointer;
+    width: 100%;
+}
+.card{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap:15px;
+    align-items: center;
+    user-select: none;
+}
+
+.arrow{
+    display: flex;
+    gap:7px
+}
+
+.Text{
+    max-width: 70%;
+    color: rgba(0, 0, 0, 0.45);
+}
+
+.leftSide{
+    display: flex;
+    flex-direction: row;
+    gap:25px
+}
+
+.rightSide{
+    display: flex;
+    flex-direction: row;
+    gap:50px
+}
+
+.fixes{
+    padding-top: 25px;
+    transition: 0.3s;
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    gap:10px;
+    width: 100%;
+    font-family: 'Roboto', sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.45);
+
+}
+
+.paragraphs{
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    gap:10px;
+}
+.paragraph{
+    display: flex;
+    justify-content: left;
+    flex-direction: column;
+    gap:5px;
+}
+
+.correct{
+    width: 110px;
+}
--- a/Components/ErrorViewer/index.tsx
+++ b/Components/ErrorViewer/index.tsx
@ -9,6 +9,7 @@ interface ErrorViewerIE{
    paragraph: string[];
    variants?: string[];
    num: number;
+    correct:boolean
 }

 export const ErrorViewer : React.FC<ErrorViewerIE> = (props) =>{
@ -16,22 +17,33 @@ export const ErrorViewer : React.FC<ErrorViewerIE> = (props) =>{
    

    return(
-        <div>
-            <div>
-                <img src="/images/err.svg"></img>
-                <div>{props.num}</div>
-                <div className={styles.Text}>
-                    {props.errText}
+        <div className={styles.viewer}>
+            <div className={styles.card}>
+                <div className={styles.leftSide}>
+                    <img src={props.correct? "/images/correct.svg":"/images/err.svg"}></img>
+                    <div style={{color:"rgba(0, 0, 0, 0.45)"}}>№{props.num}</div>
+                    <div className={styles.Text}>
+                        {props.errText}
+                    </div>
                </div>
-                <div onClick={()=>setOpen(!open)}>
-                    <img src="/images/arrow.svg"></img>
-                </div>
-            </div>
-            <div style={{display: open? "":"none"}}>
-                <div>
+                <div  className={styles.rightSide}>
+                    <div className={styles.correct}>{props.correct? "Нет замечаний":"Есть замечания"}</div>
+                    <div onClick={()=>setOpen(!open)} className={styles.arrow}>
+                    <span style={{color:"#1890FF"}}>Посмотреть</span>
+                    <img style={{transform: open? "rotate(180deg)":""}} src="/images/arrow.svg"></img>
+                    </div>
+                </div>        
+        </div>
+        
+        {   open?
+            <div className={styles.fixes}>
+                <div className={styles.paragraphs}>
                    {
                        props.paragraph.map(
-                            (value)=><div className={styles.paragraph}>{value}</div>
+                            (value, index)=><div className={styles.paragraph}>
+                                    <div>№{index+1}</div>
+                                    <div className={styles.paragraph}>{value}</div>
+                                </div>
                        )
                    }
                </div>
@ -43,6 +55,9 @@ export const ErrorViewer : React.FC<ErrorViewerIE> = (props) =>{
                    }
                </div>
            </div>
+            :<div></div>
+        }
+            
        </div>
    );
 }
--- a/Components/header/header.module.css
+++ b/Components/header/header.module.css
@ -10,6 +10,8 @@
    justify-content: space-between;
    gap:100px;
    width: 100%;
+    border: 1px solid #F4F7FD;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
 }

 .logo{
@ -44,5 +46,4 @@
    color: #FFFFFF;
    background: #13377D;
    transition: 0.3s;
-
 }
--- a/pages/api/interface.ts
+++ b/pages/api/interface.ts
@ -0,0 +1,3 @@
+export interface dtoIE{
+    
+}
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -5,23 +5,74 @@ import { FileUploader } from '../Components/FileUploader'
 import { Header } from '../Components/header'
 import styles from '../styles/Home.module.css'
 import 'antd/dist/antd.css';
+import { ItemSelect, SelectItemIE } from '../Components/ItemSelect'
+import { useState } from 'react'
+
+

 const Home: NextPage = () => {
+  const [file, setFile] = useState()
+  let files = JSON.parse(localStorage.getItem("files") as string)
+  // let data ={
+  //   "Цель предоставления субсидии": [
+  //     "1. {2} Настоящие Правила устанавливают цели, условия и порядок предоставления субсидии из федерального бюджета Фонду \"Центр стратегических разработок\" (далее - Фонд) в целях оценки эффектов от реализации инвестиционных проектов в сфере транспорта в рамках государственной программы Российской Федерации \"Экономическое развитие и инновационная экономика\" (далее - субсидия). {2}"
+  //   ],
+  //   "Размещение информации на едином портале бюджетной системы Российской Федерации": [
+  //     "2. {3} Предоставление субсидии осуществляется в пределах лимитов бюджетных обязательств, доведенных в установленном порядке до Министерства экономического развития Российской Федерации как получателя средств федерального бюджета на цели, указанные в пункте 1 настоящих Правил. {3}"
+  //   ],
+  //   "Требования к участникам отбора": [
+  //     "8. {11} Фонд по состоянию на 1-е число месяца, предшествующего месяцу, в котором заключается соглашение о предоставлении субсидии, должен соответствовать следующим требованиям: {11}"
+  //   ],
+  //   "Перечень документов, представляемых получателем субсидии для подтверждения соответствия требованиям": [
+  //     "9. {19} Для заключения соглашения о предоставлении субсидии Фонд представляет в Министерство экономического развития Российской Федерации документы, подписанные руководителем Фонда (иным уполномоченным лицом), подтверждающие соответствие Фонда каждому из требований, предусмотренных пунктом 8 настоящих Правил. {19}"
+  //   ],
+  //   "Размер субсидии и (или) порядок расчета размера субсидии": [
+  //     "6. {4} Субсидия предоставляется на финансовое обеспечение затрат, связанных с достижением целей, указанных в пункте 1 настоящих Правил, в том числе понесенных Фондом в текущем финансовом году до заключения соглашения о предоставлении субсидии (при наличии документов, подтверждающих фактически произведенные затраты), в размере, определяемом по формуле: {4}",
+  //     "7. {22} Размер субсидии (Рсуб) определяется в пределах лимитов бюджетных обязательств, утвержденных и доведенных в установленном порядке до Министерства экономического развития Российской Федерации как получателя средств федерального бюджета на цели, указанные в пункте 1 настоящих Правил. {22}"
+  //   ],
+  //   "Условия и порядок заключения соглашения": [
+  //     "3. {24} Субсидия предоставляется на основании соглашения о предоставлении субсидии, заключаемого между Министерством экономического развития Российской Федерации и Фондом (далее - соглашение о предоставлении субсидии). {24}",
+  //     "4. {24} Соглашение о предоставлении субсидии содержит в том числе: {24}",
+  //     "5. {24} Соглашение о предоставлении субсидии и дополнительные соглашения к нему, предусматривающие внесение изменений, или дополнительное соглашение о расторжении соглашения о предоставлении субсидии заключаются в государственной интегрированной информационной системе управления общественными финансами \"Электронный бюджет\" в соответствии с типовой формой, установленной Министерством финансов Российской Федерации.{24}"
+  //   ],
+  //   "Условия": []
+  // }
+  
+
+  let i = 1;
+  let cards = new Array<JSX.Element>()
+
+  for(var name in data) { 
+     cards.push(
+      <ErrorViewer
+        num={i}
+        paragraph={(data as any)[name][0]==undefined? ["Выявлено отсутсвие данного модуля"]:(data as any)[name]}
+        errText={name}
+        correct={(data as any)[name][0]==undefined? false:true}
+      ></ErrorViewer>
+     )
+     i++
+  } 
+
+
  return (
    <div className={styles.container}>
      <Head>
-        <title>Create Next App</title>
+        <title>Загрузите файл</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <Header></Header>
        
-          <div className={}>
-            
+          <div className={styles.selector}>
+            <ItemSelect 
+              onChange={(val)=>setFile(val as any)}
+              items={files}
+            ></ItemSelect>
          </div>
-          <div>
-
+          <div className={styles.pagination}>
+              {cards}
          </div>
      </main>
    </div>
--- a/pages/upload.tsx
+++ b/pages/upload.tsx
@ -0,0 +1,43 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import { ErrorViewer } from '../Components/ErrorViewer'
+import { FileUploader } from '../Components/FileUploader'
+import { Header } from '../Components/header'
+import styles from '../styles/Home.module.css'
+import 'antd/dist/antd.css';
+import { ItemSelect, SelectItemIE } from '../Components/ItemSelect'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+
+
+const Upload: NextPage = () => {
+  const [files, setFiles] = useState(new Array())
+  let router = useRouter()
+  
+  const onNext = () =>{
+    localStorage.setItem("files", JSON.stringify(files))
+    
+    router.push("/")
+  }
+  
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className={styles.main}>
+        <Header></Header>
+        <div className={styles.upload}>
+            <FileUploader onResponse={(file)=>setFiles([...files, file])}></FileUploader>
+            <div className={styles.btn} onClick={()=>onNext()}>Далее</div>
+        </div>
+          
+      </main>
+    </div>
+  )
+}
+
+export default Upload
--- a/public/images/correct.svg
+++ b/public/images/correct.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 1.00049C4.13438 1.00049 1 4.13486 1 8.00049C1 11.8661 4.13438 15.0005 8 15.0005C11.8656 15.0005 15 11.8661 15 8.00049C15 4.13486 11.8656 1.00049 8 1.00049ZM11.0234 5.71455L7.73281 10.2771C7.68682 10.3412 7.62619 10.3935 7.55595 10.4296C7.48571 10.4657 7.40787 10.4845 7.32891 10.4845C7.24994 10.4845 7.17211 10.4657 7.10186 10.4296C7.03162 10.3935 6.97099 10.3412 6.925 10.2771L4.97656 7.57705C4.91719 7.49424 4.97656 7.37861 5.07812 7.37861H5.81094C5.97031 7.37861 6.12187 7.45518 6.21562 7.58643L7.32812 9.13018L9.78438 5.72393C9.87813 5.59424 10.0281 5.51611 10.1891 5.51611H10.9219C11.0234 5.51611 11.0828 5.63174 11.0234 5.71455Z" fill="#52C41A"/>
+</svg>
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@ -0,0 +1,50 @@
+.selector{
+    width: 20%;
+    height: calc(100vh - 120px);
+    padding: 50px;
+    padding-left: 100px;
+    display: flex;
+    justify-content: right;
+}
+.pagination{
+    width: calc(80% - 100px);
+    height: calc(100vh - 120px);
+    padding: 50px;
+    overflow-y: scroll;
+}
+
+.main{
+    padding-top: 120px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.btn{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 24px;
+    gap: 10px;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 28px;
+    cursor: pointer;
+
+    
+    color: #13377D;
+    background: #F4F7FD;
+    border: 1px solid #13377D;
+    border-radius: 8px;
+    transition: 0.3s;
+}
+
+.upload{
+    display: flex;
+    flex-direction: column;
+    gap:25px;
+    padding-top: 210px;
+    justify-content: center;
+    align-items: center;
+}
--- a/styles/globals.css
+++ b/styles/globals.css
@ -5,7 +5,7 @@ body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
-
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 a {
  color: inherit;
  text-decoration: none;