Merge pull request #93 from shreyas1434shinde/main

Issue #PS-2322 fix: Workspace UI improvements and Fixes
tekdi · Nov 15, 2024 · 25c298d · 25c298d
2 parents e4fb80e + f0f3f56
commit 25c298d
Show file tree

Hide file tree

Showing 9 changed files with 129 additions and 90 deletions.
diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
@@ -86,7 +86,7 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
                   {props.rowData.image ? (
                     <img
                       src={props.rowData.image || '/logo.png'}
-                      height="25px"
+                      height="50px"
                       alt="Image"
                       style={props.column.key === 'name' ? { marginRight: '8px' } : {
                         width: 60,
@@ -96,7 +96,18 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
                       }}
                     />
                   ) : props.column.key === 'name' ? (
-                    <UpReviewTinyImage fontSize="small" style={{ marginRight: '20px' }} />
+                    <img
+                      src={'/logo.png'}
+                      height="25px"
+                      alt="Image"
+                      style={{
+                        width: 60,
+                        height: 40,
+                        borderRadius: "8px",
+                        marginRight: "10px"
+                      }}
+
+                    />
                   ) : (
                     <img
                       src={'/logo.png'}
@@ -113,10 +124,10 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
                   )}
                   <div>
                     <div>
-                      <Typography variant="body1">{props.rowData.name}</Typography>
+                      <Typography variant="body1" sx={{ fontWeight: 500, color: '#1F1B13', fontSize: '14px' }} className='one-line-text'>{props.rowData.name}</Typography>
                     </div>
                     <div>
-                      <Typography variant="body2" color={theme.palette.warning['A200']}>
+                      <Typography variant="body2" sx={{ fontWeight: 400, color: '#635E57', fontSize: '12px' }} className='two-line-text' color={theme.palette.warning['A200']}>
                         {props.column.key === 'name' ? props.rowData.primaryCategory : props.rowData.description}
                       </Typography>
                     </div>
@@ -127,21 +138,21 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
             else if (props.column.key === "status") {
               if (props.rowData.status === "Draft") {
                 return (
-                  <Typography variant="body2" color={'#987100'}>
+                  <Typography sx={{ fontSize: '14px', fontWeight: 500 }} variant="body2" color={'#987100'}>
                     {props.rowData.status}
                   </Typography>
                 )
               }
               if (props.rowData.status === "Review") {
                 return (
-                  <Typography variant="body2" color={'#BA1A1A'}>
+                  <Typography sx={{ fontSize: '14px', fontWeight: 500 }} variant="body2" color={'#BA1A1A'}>
                     {props.rowData.status}
                   </Typography>
                 )
               }
               if (props.rowData.status === "Live") {
                 return (
-                  <Typography variant="body2" color={'#06A816'}>
+                  <Typography sx={{ fontSize: '14px', fontWeight: 500 }} variant="body2" color={'#06A816'}>
                     {props.rowData.status}
                   </Typography>
                 )
@@ -167,7 +178,7 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
                       {/* <Image src={'/logo.png'} alt="" /> */}
                       <img
                         src={'/delete.png'}
-                        height="25px"
+                        height="20px"
                         alt="Image"
 
                       />
@@ -197,7 +208,7 @@ const KaTableComponent: React.FC<CustomTableProps> = ({ data, columns, handleDel
 
                     <img
                       src={'/delete.png'}
-                      height="25px"
+                      height="20px"
                       alt="Image"
 
                     />

diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
@@ -8,7 +8,7 @@ const Loader: React.FC<{ showBackdrop: boolean; loadingText: string }> = ({
   const Spinner = () => {
     return (
       <>
-        <CircularProgress color="inherit" />
+        <CircularProgress sx={{ color: "#0000" }} />
         <br />
         <Typography variant="h4">{loadingText}...</Typography>
       </>

diff --git a/src/pages/workspace/content/allContents/index.tsx b/src/pages/workspace/content/allContents/index.tsx
@@ -28,11 +28,20 @@ import { Table as KaTable } from 'ka-table';
 import { DataType } from 'ka-table/enums';
 import "ka-table/style.css";
 import KaTableComponent from "@/components/KaTableComponent";
+// const columns = [
+//   { key: 'name', title: 'Content', dataType: DataType.String, width: "450px" },
+//   { key: 'lastUpdatedOn', title: 'Last Updated', dataType: DataType.String, width: "300px" },
+//   { key: 'status', title: 'Status', dataType: DataType.String, width: "300px" },
+//   { key: 'contentAction', title: 'Action', dataType: DataType.String, width: "200px" },
+
+// ]
 const columns = [
-  { key: 'name', title: 'Content', dataType: DataType.String, width: "450px" },
-  { key: 'lastUpdatedOn', title: 'Last Updated', dataType: DataType.String, width: "300px" },
-  { key: 'status', title: 'Status', dataType: DataType.String, width: "300px" },
-  { key: 'contentAction', title: 'Action', dataType: DataType.String, width: "200px" },
+  { key: 'name', title: 'TITLE & DESCRIPTION', dataType: DataType.String, width: "450px" },
+  { key: 'contentType', title: 'CONTENT TYPE', dataType: DataType.String, width: "250px" },
+  { key: 'status', title: 'STATUS', dataType: DataType.String, width: "100px" },
+  { key: 'lastUpdatedOn', title: 'LAST MODIFIED', dataType: DataType.String, width: "180px" },
+  { key: 'contentAction', title: 'ACTION', dataType: DataType.String, width: "100px" },
+
 
 ]
 const AllContentsPage = () => {
@@ -143,7 +152,7 @@ const AllContentsPage = () => {
   useEffect(() => {
     const filteredArray = contentList.map(item => ({
       image: item?.appIcon,
-
+      contentType: item.primaryCategory,
       name: item.name,
       primaryCategory: item.primaryCategory,
       lastUpdatedOn: timeAgo(item.lastUpdatedOn),
@@ -188,35 +197,37 @@ const AllContentsPage = () => {
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <WorkspaceText />
       <Box p={3}>
-        <Box sx={{ background: "#FFFFFF" }} p={2}>
-          <Typography variant="h4" sx={{ fontWeight: "bold", fontSize: "16px" }}>All My Contents</Typography>
+        <Box sx={{ background: "#fff", borderRadius: '8px', boxShadow: "0px 2px 6px 2px #00000026", pb: '15px' }}>
+          <Box p={2}>
+            <Typography variant="h4" sx={{ fontWeight: "bold", fontSize: "16px" }}>All My Contents</Typography>
+          </Box>
+          {/* <Typography mb={2}>Here you see all your content.</Typography> */}
+
+          <Box mb={3}>
+            <SearchBox
+              placeholder="Search by title..."
+              onSearch={handleSearch}
+              onFilterChange={handleFilterChange}
+              onSortChange={handleSortChange}
+            />
+          </Box>
+
+
+          {loading ? (
+            <Loader showBackdrop={true} loadingText={"Loading"} />
+          ) : contentList && contentList.length > 0 ? (
+            contentList &&
+            contentList.length > 0 && (
+              <>
+                <Box className="table-ka-container">
+                  <KaTableComponent columns={columns} tableTitle="all-content" data={data} />
+                </Box>
+              </>
+            )
+          ) : (
+            <NoDataFound />
+          )}
         </Box>
-        {/* <Typography mb={2}>Here you see all your content.</Typography> */}
-
-        <Box mb={3}>
-          <SearchBox
-            placeholder="Search by title..."
-            onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
-          />
-        </Box>
-
-
-        {loading ? (
-          <Loader showBackdrop={true} loadingText={"Loading"} />
-        ) : contentList && contentList.length > 0 ? (
-          contentList &&
-          contentList.length > 0 && (
-            <>
-              <Box className="table-ka-container">
-                <KaTableComponent columns={columns} tableTitle="all-content" data={data} />
-              </Box>
-            </>
-          )
-        ) : (
-          <NoDataFound />
-        )}
 
 
       </Box>

diff --git a/src/pages/workspace/content/create/index.tsx b/src/pages/workspace/content/create/index.tsx
@@ -127,38 +127,39 @@ const CreatePage = () => {
           flexWrap="wrap"
         >
           <Grid container spacing={2}>
-              {cardData.map((card, index) => (
-                <Grid item xs={12} sm={6} md={4} key={index}>
-                  <Paper
-                    key={index}
-                    elevation={3}
-                    onClick={card.onClick}
-                    sx={{
-                      padding: "1rem",
-                      borderRadius: "8px",
-                      textAlign: "left",
-                      cursor: "pointer",
-                      flex: "1 1 180px",
-                      // maxWidth: "220px",
-                      border: "solid 1px #D0C5B4",
-                      boxShadow: 'none',
-                      "&:hover": {
-                        backgroundColor: theme.palette.action.hover,
-                      },
-                    }}
-                  >
-                    {card?.icon}
-                    <Typography variant="h3" sx={{ mt: 1, fontWeight: "bold", fontSize: '14px' }}>
-                      {card?.title}
-                    </Typography>
-                    <Typography variant="body2" color="textSecondary" sx={{mt: 1, mb: 0}}>
-                      {card?.description}
-                    </Typography>
-                  </Paper>
-                </Grid>
-              ))}
+            {cardData.map((card, index) => (
+              <Grid item xs={12} sm={6} md={4} lg={4} xl={3} key={index}>
+                <Paper
+                  key={index}
+                  elevation={3}
+                  onClick={card.onClick}
+                  sx={{
+                    padding: "1rem",
+                    borderRadius: "8px",
+                    textAlign: "left",
+                    cursor: "pointer",
+                    flex: "1 1 180px",
+                    // maxWidth: "220px",
+                    minHeight: "114px",
+                    border: "solid 1px #D0C5B4",
+                    boxShadow: 'none',
+                    "&:hover": {
+                      backgroundColor: theme.palette.action.hover,
+                    },
+                  }}
+                >
+                  {card?.icon}
+                  <Typography className="one-line-text" variant="h3" sx={{ mt: 1, fontWeight: "bold", fontSize: '14px' }}>
+                    {card?.title}
+                  </Typography>
+                  <Typography variant="body2" className="two-line-text" color="textSecondary" sx={{ mt: 1, mb: 0 }}>
+                    {card?.description}
+                  </Typography>
+                </Paper>
+              </Grid>
+            ))}
           </Grid>
-          
+
         </Box>
       </Box>
     </Layout>

diff --git a/src/pages/workspace/content/draft/index.tsx b/src/pages/workspace/content/draft/index.tsx
@@ -27,11 +27,11 @@ import Paper from '@mui/material/Paper';
 import { timeAgo } from "@/utils/Helper";
 
 const columns = [
-  { key: 'title_and_description', title: 'Title & Description', dataType: DataType.String, width: "450px" },
-  { key: 'contentType', title: 'Content Type', dataType: DataType.String, width: "300px" },
-  { key: 'status', title: 'Status', dataType: DataType.String, width: "300px" },
-  { key: 'lastUpdatedOn', title: 'Last Modified', dataType: DataType.String, width: "300px" },
-  { key: 'action', title: 'Action', dataType: DataType.String, width: "200px" },
+  { key: 'title_and_description', title: 'TITLE & DESCRIPTION', dataType: DataType.String, width: "450px" },
+  { key: 'contentType', title: 'CONTENT TYPE', dataType: DataType.String, width: "250px" },
+  { key: 'status', title: 'STATUS', dataType: DataType.String, width: "100px" },
+  { key: 'lastUpdatedOn', title: 'LAST MODIFIED', dataType: DataType.String, width: "180px" },
+  { key: 'action', title: 'ACTION', dataType: DataType.String, width: "100px" },
 
 
 ]

diff --git a/src/pages/workspace/content/publish/index.tsx b/src/pages/workspace/content/publish/index.tsx
@@ -26,11 +26,11 @@ import KaTableComponent from "@/components/KaTableComponent";
 import { timeAgo } from "@/utils/Helper";
 
 const columns = [
-  { key: 'title_and_description', title: 'Title & Description', dataType: DataType.String, width: "450px" },
-  { key: 'contentType', title: 'Content Type', dataType: DataType.String, width: "300px" },
-  { key: 'status', title: 'Status', dataType: DataType.String, width: "300px" },
-  { key: 'lastUpdatedOn', title: 'Last Modified', dataType: DataType.String, width: "300px" },
-  { key: 'action', title: 'Action', dataType: DataType.String, width: "200px" },
+  { key: 'title_and_description', title: 'TITLE & DESCRIPTION', dataType: DataType.String, width: "450px" },
+  { key: 'contentType', title: 'CONTENT TYPE', dataType: DataType.String, width: "250px" },
+  { key: 'status', title: 'STATUS', dataType: DataType.String, width: "100px" },
+  { key: 'lastUpdatedOn', title: 'LAST MODIFIED', dataType: DataType.String, width: "180px" },
+  { key: 'action', title: 'ACTION', dataType: DataType.String, width: "100px" },
 
 
 ]

diff --git a/src/pages/workspace/content/submitted/index.tsx b/src/pages/workspace/content/submitted/index.tsx
@@ -25,11 +25,11 @@ import { DataType } from 'ka-table/enums';
 import KaTableComponent from "@/components/KaTableComponent";
 import { timeAgo } from "@/utils/Helper";
 const columns = [
-  { key: 'title_and_description', title: 'Title & Description', dataType: DataType.String, width: "450px" },
-  { key: 'contentType', title: 'Content Type', dataType: DataType.String, width: "300px" },
-  { key: 'status', title: 'Status', dataType: DataType.String, width: "300px" },
-  { key: 'lastUpdatedOn', title: 'Last Modified', dataType: DataType.String, width: "300px" },
-  { key: 'action', title: 'Action', dataType: DataType.String, width: "200px" },
+  { key: 'title_and_description', title: 'TITLE & DESCRIPTION', dataType: DataType.String, width: "450px" },
+  { key: 'contentType', title: 'CONTENT TYPE', dataType: DataType.String, width: "250px" },
+  { key: 'status', title: 'STATUS', dataType: DataType.String, width: "100px" },
+  { key: 'lastUpdatedOn', title: 'LAST MODIFIED', dataType: DataType.String, width: "180px" },
+  { key: 'action', title: 'ACTION', dataType: DataType.String, width: "100px" },
 
 
 ]

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -75,4 +75,20 @@ h6,
 span,
 p .css-1ydl6z0-MuiTypography-root {
   font-family: Poppins, sans-serif !important;
+}
+
+.two-line-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.one-line-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/src/utils/app.constant.ts b/src/utils/app.constant.ts
@@ -10,7 +10,7 @@ export enum ContentType {
 
 export const SortOptions = ["Modified On", "Created On"];
 
-export const LIMIT = 6;
+export const LIMIT = 10;
 export const ChannelID = "test-k12-channel";
 
 export const PrimaryCategoryValue = [