add proper full preview of current assigment

nattvara · Apr 24, 2023 · 481a389 · 481a389
1 parent 5c20051
commit 481a389
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/web-ui/src/pages/assignments/index.less b/web-ui/src/pages/assignments/index.less
@@ -11,3 +11,11 @@
 .full_width {
   width: 100%;
 }
+
+.image_preview {
+  width: 100%;
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  padding: 10px;
+  overflow: hidden;
+}
diff --git a/web-ui/src/pages/assignments/index.tsx b/web-ui/src/pages/assignments/index.tsx
@@ -10,11 +10,16 @@ import {
   Space,
   Typography,
   notification,
+  Image as AntImage,
 } from 'antd';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useParams } from 'umi';
-import apiClient, { ServerErrorResponse, ServerResponse } from '@/http';
+import apiClient, {
+  ServerErrorResponse,
+  ServerResponse,
+  makeUrl,
+} from '@/http';
 import { Image } from '@/types/search';
 import ImageUpload from '@/components/image/image-upload/image-upload';
 import ImageProgress from '@/components/image/image-progress/image-progress';
@@ -99,6 +104,8 @@ export default function AssignmentsIndexPage() {
     fetchImage();
   };
 
+  const previewUrl = makeUrl(`/assignments/image/${id}/img`);
+
   useEffect(() => {
     registerPageLoad();
   }, []);
@@ -174,10 +181,17 @@ export default function AssignmentsIndexPage() {
         <Row>
           <Col sm={24} md={7} className={styles.padding_left_right}>
             <Space direction="vertical" size="large">
+              <Row>
+                <AntImage
+                  src={previewUrl}
+                  className={styles.image_preview}
+                  preview={true}
+                />
+              </Row>
               <Row>
                 <ImageUpload
-                  uploadId={uploadId}
                   noMargin={true}
+                  compact={true}
                   onUploadComplete={(image) => onImageUploadComplete(image)}
                 />
               </Row>