Dev

ui/src/components/ContentMapper/contentMapper.interface.ts

@@ -46,6 +46,7 @@ export interface ContentType {
   updateAt: string;
   id?: string;
   status: string;
+  fieldMapping?: FieldMapType[] | [];
 }
 
 export interface FieldMapType {

ui/src/components/ContentMapper/index.scss

@@ -2,6 +2,7 @@
 @import '../../scss/variables';
 
 .content-types-list-wrapper {
+  border-right: 1px solid $color-brand-secondary-lightest;
   display: flex;
   flex-direction: column;
   max-width: 25%;
@@ -26,9 +27,7 @@
   }
 }
 .ct-search-wrapper {
-  align-items: center;
   border-bottom: 1px solid $color-brand-secondary-lightest;
-  display: flex;
   padding: $px-8 $px-12;
   position: relative;
   .Search__v2 {
@@ -62,30 +61,40 @@
 .ct-list {
   border-right: 1px solid $color-brand-secondary-lightest;
   list-style-type: none;
-  margin: 0 0 0 $px-12;
-  padding: 15px 12px 15px 0;
+  padding: 15px 0 15px 0;
   li {
     align-items: center;
-    border: 1px solid transparent;
     cursor: pointer;
     display: flex;
     font-size: $size-font-xl;
     justify-content: space-between;
     line-height: normal;
     min-height: 42px;
-    padding: $px-8 $px-12;
-    &.active-ct {
+    padding: $px-8 $px-4 $px-8 $px-12;
+    &:hover, &.active-ct {
       background-color: $color-brand-white-base;
-      border: 1px solid $color-brand-primary-base;
-      color: $color-brand-primary-base;
+      .cms-title {
+        span {
+          color: $color-brand-primary-base;
+        }
+      }
     }
     .cms-title {
       margin-right: 12px;
-      max-width: 123px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      max-height: 24px;
+      max-width: 155px;
+      white-space: nowrap;
+      .tippy-wrapper {
+        display: flex;
+      }
+      span {
+        color: $color-font-base;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
     .ct-options {
+      justify-content: flex-end;
       min-width: 150px;
     }
   }
@@ -119,7 +128,11 @@
 }
 .table-wrapper {
   flex: 1;
+  .TablePanel {
+    border-left: 0 none;
+  }
   .Table {
+    border-left: 0 none;
     min-height: inherit;
     .Table__body__column {
       padding: 0 1.25rem;
@@ -131,6 +144,9 @@
       font-size: $size-font-small;
       margin: 0;
     }
+    .EmptyStateWrapper {
+      margin-top: $px-20;
+    }
   }
   .import-cta {
     margin: 0;
@@ -143,7 +159,7 @@
   background-color: $color-brand-white-base;
   display: flex;
   justify-content: space-between;
-  padding: 12px;
+  padding: $px-12;
 }
 .action-component-body {
   display: flex;
@@ -178,18 +194,43 @@ div .table-row {
   align-items: center;
   border: 1px solid $color-stepper-title;
   border-radius: $px-8;
-  color: $color-stepper-title;
+  cursor: pointer;
   display: flex;
-  font-size: $size-font-large;
-  padding: $px-4 $px-8;
+  font-size: $size-font-medium;
+  margin-right: $px-12;
+  padding: $px-3 7px;
+  &.mapped {
+    border: 1px solid $color-brand-draft-base;
+    color: $color-brand-draft-base;
+    &.active-filter {
+      background-color: $color-brand-draft-base;
+      color: $color-brand-white-base;
+    }
+  }
+  &.verified {
+    border: 1px solid $color-brand-success-base;
+    color: $color-brand-success-base;
+    &.active-filter {
+      background-color: $color-brand-success-base;
+      color: $color-brand-white-base;
+    }
+  }
+  &.failed {
+    border: 1px solid $color-brand-fail-base;
+    color: $color-brand-fail-base;
+    &.active-filter {
+      background-color: $color-brand-fail-base;
+      color: $color-brand-white-base;
+    }
+  }
   svg {
-    margin-right: 5px;
+    margin-right: $px-4;
   }
 }
 .filter-wrapper {
   background-color: $color-brand-white-base;
   border-radius: $px-4;
-  box-shadow: 0 4px 30px rgba(0,0,0,.25);
+  box-shadow: 0 $px-4 $px-30 rgba(0,0,0,.25);
   position: absolute;
   right: $px-12;
   top: $px-50;
@@ -209,3 +250,8 @@ div .table-row {
     }
   }
 }
+.no-content {
+  line-height: $line-height-default;
+  padding: $px-12;
+  text-align: center;
+}

ui/src/components/ContentMapper/index.tsx

@@ -277,11 +277,6 @@ const ContentMapper = () => {
 
     setContentTypes(data?.contentTypes);
     setFilteredContentTypes(data?.contentTypes);
-    setSelectedContentType(data?.contentTypes?.[0]);
-    setTotalCounts(data?.contentTypes?.[0]?.fieldMapping?.length);
-    setOtherCmsTitle(data?.contentTypes?.[0]?.otherCmsTitle);
-    setContentTypeUid(data?.contentTypes?.[0]?.id);
-    fetchFields(data?.contentTypes[0]?.id, searchText || '');
   };
 
   // Method to get fieldmapping
@@ -603,7 +598,6 @@ const ContentMapper = () => {
       'CheckBox': 'enum'
     };
     const OptionsForRow: optionsType[] = [];
-    // let ContentTypeSchema: ContentTypesSchema | undefined;
 
     if (OtherContentType?.label && contentTypesList) {
       const ContentType: any = contentTypesList?.find(
@@ -923,16 +917,25 @@ const ContentMapper = () => {
 
   // Function to filter content types as per the status
   const handleContentTypeFilter = (e: React.MouseEvent<HTMLElement>) => {
-    const li_list = document.querySelectorAll('.filter-wrapper li');
+    const li_list = document.querySelectorAll('li.status-wrapper');
     if(li_list) {
       li_list.forEach((ele) => {
-        ele?.classList?.remove('active-filter');
+        const selectedEle = document.querySelector(".active-filter");
+        if (selectedEle && selectedEle !== e?.target) {
+          ele?.classList?.remove('active-filter');
+        }
       })
     }
-    (e?.target as HTMLElement) ?.classList?.add('active-filter');
+    (e?.target as HTMLElement)?.classList?.toggle('active-filter');
+
     const filterVal = (e?.target as HTMLElement)?.innerText;
-    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === filterVal)
-    setFilteredContentTypes(filteredCT);
+    const filteredCT = contentTypes?.filter((ct) => CONTENT_MAPPING_STATUS[ct?.status] === filterVal);
+
+    if ((e?.target as HTMLElement)?.classList?.contains('active-filter')) {
+      setFilteredContentTypes(filteredCT)
+    } else {
+      setFilteredContentTypes(contentTypes)
+    }
   }
 
   // Function to close filter panel on click outside
@@ -953,6 +956,8 @@ const ContentMapper = () => {
   }
   const tableHeight = calcHeight();
 
+
+
   return (
     <div className="step-container">
       <div className="d-flex flex-wrap table-container">
@@ -963,52 +968,65 @@ const ContentMapper = () => {
           </div>
 
           <div className='ct-search-wrapper'>
-            <Search
-              placeholder={searchPlaceholder}
-              type="secondary"
-              version="v2"
-              onChange={(search: string) => handleSearch(search)}
-              onClear={true}
-              value={searchContentType}
-              debounceSearch={true}
-            />
-
-            <Button buttonType="light" onClick={handleFilter}>
-              <Icon icon="Filter" version="v2" />
-            </Button>
-            {showFilter && (
-              <div className='filter-wrapper' ref={ref}> 
-                <ul>
+            <div className='d-flex align-items-center pb-3'>
+              <Search
+                placeholder={searchPlaceholder}
+                type="secondary"
+                version="v2"
+                onChange={(search: string) => handleSearch(search)}
+                onClear={true}
+                value={searchContentType}
+                debounceSearch={true}
+              />
+
+              <Button buttonType="light" onClick={handleFilter}>
+                <Icon icon="Filter" version="v2" />
+              </Button>
+              {showFilter && (
+                <div className='filter-wrapper' ref={ref}> 
+                  <ul>
+                    {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
+                      <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
+            <div className='d-flex align-items-center justify-content-end'>
+              <ul className='d-flex'>
                   {Object.keys(CONTENT_MAPPING_STATUS).map((key, keyInd) => (
-                    <li key={`${keyInd?.toString()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
+                    <li key={`${keyInd?.toString()}`}  className={`status-wrapper ${CONTENT_MAPPING_STATUS[key]?.toLocaleLowerCase()}`} onClick={(e) => handleContentTypeFilter(e)}>{CONTENT_MAPPING_STATUS[key]}</li>
                   ))}
-                </ul>
-              </div>
-            )}
+              </ul>
+              {contentTypes && validateArray(contentTypes) && contentTypes?.length }
+            </div>
           </div>
 
-          {filteredContentTypes && validateArray(filteredContentTypes) && (
-            <div className='ct-list-wrapper'>
-            <ul className="ct-list">
-              {filteredContentTypes?.map((content: ContentType, index: number) => {
-                const statusText = CONTENT_MAPPING_STATUS[content?.status];
-                const icon = STATUS_ICON_Mapping[content?.status] || '';
-                return (
-                <li
-                  key={`${index.toString()}`}
-                  className={`${active == index ? 'active-ct' : ''}`}
-                  onClick={() => openContentType(index)}
-                  onKeyDown={() => openContentType(index)}
-                >
-                  <span className='cms-title'>{content?.otherCmsTitle}</span>
-
-                  <div className='d-flex align-items-center ct-options'>
-                    <span className='status-wrapper'>
-                      {icon && <Icon size="mini" icon={icon} version="v2" />}
-                      {statusText}
-                    </span>
-
-                    {active == index && (
+          {filteredContentTypes && validateArray(filteredContentTypes)
+            ? <div className='ct-list-wrapper'>
+              <ul className="ct-list">
+                {filteredContentTypes?.map((content: ContentType, index: number) => {
+                  const icon = STATUS_ICON_Mapping[content?.status] || '';
+                  return (
+                    <li
+                      key={`${index.toString()}`}
+                      className={`${active == index ? 'active-ct' : ''}`}
+                      onClick={() => openContentType(index)}
+                      onKeyDown={() => openContentType(index)}
+                    >
+                      <div className='cms-title'>
+                        <Tooltip content={content?.otherCmsTitle} position="left">
+                          <span>{content?.otherCmsTitle}</span>
+                        </Tooltip>
+                      </div>
+
+
+                      <div className='d-flex align-items-center ct-options'>
+                        <span className=''>
+                          {icon && <Icon size="small" icon={icon} fill={icon === 'CheckedCircle' ? '#0469E3' : ''} />}
+                        </span>
+
+
                         <Dropdown
                           // version="v2"
                           list={[
@@ -1025,21 +1043,18 @@ const ContentMapper = () => {
                         >
                           <Icon icon="DotsThreeLargeVertical" version="v2" />
                         </Dropdown>
-
-                    )}
-                  </div>
-                </li>
-                )
-})}
-            </ul>
+                      </div>
+                    </li>
+                  )
+                })}
+              </ul>
             </div>
-          )}
+            : <div className='no-content'>No Content Types Found.</div>
+          }
         </div>
 
         {/* Content Type Fields */}
         <div className="content-types-fields-wrapper">
-
-
           <div className="table-wrapper">
             <InfiniteScrollTable
               loading={loading}
@@ -1101,9 +1116,8 @@ const ContentMapper = () => {
             <div className='text-end my-3 mx-3 px-1'>
               <Button
                   className="saveButton"
-                  size="medium"
-                  buttonType="secondary"
                   onClick={handleSaveContentType}
+                  version="v2"
                 >
                 Save
               </Button>

ui/src/scss/_variables.scss

@@ -83,6 +83,7 @@ $radii-4: 4px;
 $radii-50: 50%;
 
 $px-2: 0.125rem; // 2px
+$px-3: 0.188rem; // 3px
 $px-4: 0.25rem; // 4px
 $px-5: 0.313rem; //5px
 $px-6: 0.375rem; // 6px