Merge pull request #1178 from deepa-s-13/Dev-2.0

OBPAS: Added view more button for lengthy comments in Timeline
upyog · Jul 4, 2024 · e0b2eed · e0b2eed
2 parents c87adfb + d37e9ea
commit e0b2eed
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 5 deletions.
diff --git a/...o-ui-internals/packages/modules/obps/src/pages/citizen/BpaApplicationDetail/BPACaption.js b/...o-ui-internals/packages/modules/obps/src/pages/citizen/BpaApplicationDetail/BPACaption.js
@@ -1,10 +1,11 @@
-import React from "react";
+import React,{useState} from "react";
 import { useTranslation } from "react-i18next";
 import { TelePhone, DisplayPhotos } from "@upyog/digit-ui-react-components";
 import BPAReason from "./BPAReason";
 
 const BPACaption = ({ data,OpenImage }) => {
   const { t } = useTranslation();
+  const [viewMore, setviewMore] = useState(false);
   return (
     <div>
       {data.date && <p>{data.date}</p>}
@@ -16,7 +17,34 @@ const BPACaption = ({ data,OpenImage }) => {
       {data?.wfComment ? <div>{data?.wfComment?.map( e => 
       <div className="TLComments">
         <h3>{t("WF_COMMON_COMMENTS")}</h3>
-        <p>{e}</p>
+        {!viewMore && (
+        <div>
+         <p style={{overflow:"hidden", textOverflow:"ellipsis",display:"-webkit-box", WebkitLineClamp:1, WebkitBoxOrient:"vertical"}}>{e}</p>
+          {e.length>36?(<button
+            type="button"
+            onClick={() => {
+              setviewMore(true);
+            }}
+            style={{color:"#800000"}}
+          >
+            {t("View More")}
+          </button>):null}
+        </div>
+      )}
+      {viewMore && (
+        <div >
+          <p style={{overflow:"visible"}}>{e}</p>
+          <button
+            type="button"
+            onClick={() => {
+              setviewMore(false);
+            }}
+            style={{color:"#800000"}}
+          >
+            {t("View Less")}
+          </button>
+        </div>
+      )}
       </div>
       )}</div> : null}
       {data?.thumbnailsToShow?.thumbs?.length > 0 ? <div className="TLComments">

diff --git a/.../micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLCaption.js b/.../micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLCaption.js
@@ -1,10 +1,11 @@
-import React from "react";
+import React,{useState} from "react";
 import { useTranslation } from "react-i18next";
 import { TelePhone, DisplayPhotos, UnMaskComponent } from "@upyog/digit-ui-react-components";
 import Reason from "./Reason";
 
 const TLCaption = ({ data,OpenImage,privacy={}}) => {
 
+  const [viewMore, setviewMore] = useState(false);
   const { t } = useTranslation();
   return (
     <div>
@@ -18,8 +19,36 @@ const TLCaption = ({ data,OpenImage,privacy={}}) => {
       {data.comment && <Reason otherComment={data?.otherComment} headComment={data?.comment}></Reason>}
       {data?.wfComment ? <div>{data?.wfComment?.map( e => 
       <div className="TLComments">
-        <h3>{t("WF_COMMON_COMMENTS")}</h3>
-        <p style={{overflowX:"scroll"}}>{e}</p>
+        <h3>{t("WF_COMMON_COMMENTS")}</h3>        
+        {!viewMore && (
+        <div>
+         <p style={{overflow:"hidden", textOverflow:"ellipsis",display:"-webkit-box", WebkitLineClamp:1, WebkitBoxOrient:"vertical"}}>{e}</p>
+          {e.length>36?(<button
+            type="button"
+            onClick={() => {
+              setviewMore(true);
+            }}
+            style={{color:"#800000"}}
+          >
+            {t("View More")}
+          </button>):null}
+        </div>
+      )}
+      {viewMore && (
+        <div >
+          <p style={{overflow:"visible"}}>{e}</p>
+          <button
+            type="button"
+            onClick={() => {
+              setviewMore(false);
+            }}
+            style={{color:"#800000"}}
+          >
+            {t("View Less")}
+          </button>
+        </div>
+      )}
+
       </div>
       )}</div> : null}
       {data?.thumbnailsToShow?.thumbs?.length > 0 ? <div className="TLComments">