Merge pull request #124 from open-schools/feature/SCHOOL-822/backpage…

…-component add logic back in url, fix photo in query[id]
open-schools · Apr 25, 2024 · b1821d3 · b1821d3
2 parents 08e019f + 44f38c8
commit b1821d3
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 13 deletions.
diff --git a/apps/schools/domains/circle/components/currentCircle/index.tsx b/apps/schools/domains/circle/components/currentCircle/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import router from 'next/router'
+import router, { useRouter } from 'next/router'
 import { Col, Row, Typography } from 'antd'
 import Image from 'next/image'
 import Link from 'next/link'
@@ -32,9 +32,12 @@ const CurrentCircle = () => {
     const [searchRequestText, setSearchRequestText] = useState('')
     const [mutation, isDeleteFinished] = useDeleteCircleMutation()
     const uuid = getUuidFromUrl()
+    const router = useRouter()
 
     const { organizationId } = useOrganization()
 
+    const backQuery = `&back=true`
+
     const { data: circle, error: circleError } = useGetCircleQuery({ circle_id: uuid[0] })
     const { data: students, isLoading } = useGetCircleStudentsQuery({
         circle_id: uuid[0],
@@ -85,7 +88,7 @@ const CurrentCircle = () => {
                         <div>Всего</div>
                         <span></span>
                         <Link
-                            href={`/query?circles=${circle?.circle.name ?? ''}`}
+                            href={`/query?circles=${circle?.circle.name ?? ''}${backQuery}`}
                             className={styles.colorCountAllQueries}
                         >
                             {countAllQueries}
@@ -95,7 +98,7 @@ const CurrentCircle = () => {
                         <div>Принято</div>
                         <span></span>
                         <Link
-                            href={`/query?statuses=${QueryStatuses.ACCEPTED}&circles=${circle?.circle.name}`}
+                            href={`/query?statuses=${QueryStatuses.ACCEPTED}&circles=${circle?.circle.name}${backQuery}`}
                             className={styles.colorCountAcceptedQueries}
                         >
                             {queriesCount.ACCEPTED}
@@ -105,7 +108,7 @@ const CurrentCircle = () => {
                         <div>На рассмотрении</div>
                         <span></span>
                         <Link
-                            href={`/query?statuses=${QueryStatuses.IN_PROGRESS}&circles=${circle?.circle.name}`}
+                            href={`/query?statuses=${QueryStatuses.IN_PROGRESS}&circles=${circle?.circle.name}${backQuery}`}
                             className={styles.colorCountInProgressQueries}
                         >
                             {queriesCount.IN_PROGRESS}

diff --git a/apps/schools/domains/common/components/backPage/index.tsx b/apps/schools/domains/common/components/backPage/index.tsx
@@ -1,13 +1,18 @@
 import React from 'react'
-import { Row, Typography } from 'antd'
+import { Typography } from 'antd'
 import styles from './styles/styles.module.scss'
 import { BackPageProps } from './interface'
 import classNames from 'classnames'
 import { useRouter } from 'next/router'
 import { ArrowLeftOutlined } from '@ant-design/icons'
 
-export const BackPage: React.FC<BackPageProps> = ({ className, path, onClick, text = 'Назад' }) => {
+export const BackPage: React.FC<BackPageProps> = ({ className, path, onClick, text = 'Назад', returnable = false }) => {
     const router = useRouter()
+    const { back } = router.query
+
+    if (!(typeof window !== 'undefined') || window.history.length <= 1 || (!back && returnable)) {
+        return <div className={classNames(styles.emptyBackPage, className)}></div>
+    }
 
     const goBack = () => {
         path ? router.push(path) : router.back()

diff --git a/apps/schools/domains/common/components/backPage/interface.ts b/apps/schools/domains/common/components/backPage/interface.ts
@@ -3,4 +3,5 @@ export interface BackPageProps {
     path?: string
     onClick?: () => void
     text?: string
+    returnable?: boolean
 }
diff --git a/apps/schools/domains/common/components/backPage/styles/styles.module.scss b/apps/schools/domains/common/components/backPage/styles/styles.module.scss
@@ -1,5 +1,10 @@
 @import '@domains/common/components/styles/abstracts/_variables.scss';
 
+.emptyBackPage {
+  display: none;
+  visibility: hidden;
+}
+
 .backPage {
   width: fit-content;
   display: flex;

diff --git a/apps/schools/domains/query/components/currentQuery/styles/styles.module.scss b/apps/schools/domains/query/components/currentQuery/styles/styles.module.scss
@@ -15,7 +15,7 @@
   margin-bottom: 50px;
 
   .imageCard {
-    margin-top: -64px;
+    margin-top: -56px;
 
     @media (max-width: 1600px) {
       .image {

diff --git a/apps/schools/domains/query/components/queryList/index.tsx b/apps/schools/domains/query/components/queryList/index.tsx
@@ -178,7 +178,7 @@ export function QueryList() {
                     },
                     status: ({ text }) => {
                         return (
-                            <Tag color={StatusDictionary[text].antdColor} key={text}>
+                            <Tag color={StatusDictionary[text].antdColor} className={styles.tags} key={text}>
                                 {StatusDictionary[text].text}
                             </Tag>
                         )

diff --git a/apps/schools/domains/query/components/queryList/styles/styles.module.scss b/apps/schools/domains/query/components/queryList/styles/styles.module.scss
@@ -53,4 +53,8 @@
   :active, :focus {
     opacity: .8;
   }
+}
+
+.tags {
+  border-radius: 8px;
 }
diff --git a/apps/schools/pages/query/index.tsx b/apps/schools/pages/query/index.tsx
@@ -2,10 +2,9 @@ import React from 'react'
 import Head from 'next/head'
 import { PageContent } from '@domains/common/components/containers/PageContent'
 
-import {
-    OrganizationRequired,
-} from '@domains/common/components/containers/OrganizationRequired'
-import {QueryList} from "@domains/query/components/queryList";
+import { OrganizationRequired } from '@domains/common/components/containers/OrganizationRequired'
+import { QueryList } from '@domains/query/components/queryList'
+import { BackPage } from '@domains/common/components/backPage'
 
 const QueriesPage = () => {
     return (
@@ -15,7 +14,8 @@ const QueriesPage = () => {
             </Head>
             <PageContent>
                 <OrganizationRequired>
-                    <QueryList/>
+                    <BackPage returnable={true} />
+                    <QueryList />
                 </OrganizationRequired>
             </PageContent>
         </>