add enable_likes behaviour and polish code

Author: iFlameing

backend/src/kitconcept/intranet/behaviors/configure.zcml

@@ -18,6 +18,13 @@
       provides=".blocks_settings.ITTWBlocksSettings"
       />
 
+  <plone:behavior
+      name="kitconcept.enable_likes"
+      title="Enable Like functionality"
+      description="Enables the like functionality for content objects"
+      provides=".enable_likes.IEnableLikes"
+      />
+
   <plone:behavior
       name="kitconcept.intranet.votes"
       title="Saves userID who liked an item"

backend/src/kitconcept/intranet/behaviors/enable_likes.py

@@ -0,0 +1,16 @@
+from kitconcept.intranet import _
+from plone.autoform.interfaces import IFormFieldProvider
+from plone.supermodel import model
+from zope import schema
+from zope.interface import provider
+
+
+@provider(IFormFieldProvider)
+class IEnableLikes(model.Schema):
+
+    enable_likes = schema.Bool(
+        title=_("Enable Likes"),
+        description=_("Enable Likes for this Content Object"),
+        required=False,
+        default=True,
+    )

backend/src/kitconcept/intranet/profiles/default/types/Document.xml

@@ -13,6 +13,7 @@
     <element value="kitconcept.intranet.organisational_unit" />
     <element value="kitconcept.intranet.lcm" />
     <element value="kitconcept.intranet.votes" />
+    <element value="kitconcept.enable_likes" />
   </property>
 
 </object>

frontend/packages/volto-intranet/src/components/Rating/Rating.jsx

@@ -64,11 +64,19 @@ const DotFormattedDate = ({ date, className, locale }) => {
     </FormattedDate>
   );
 };
+
+// I will remove it once I update the useLiveData function of VLT.
+function useLiveData(field) {
+  const formData = useSelector((state) => state.form.global?.[field]);
+  return formData;
+}
 const Rating = (props) => {
   const location = useLocation();
   const content = useSelector((state) => state.content.data);
   const pathname = location.pathname;
-  const allow_discussion = content?.allow_discussion;
+  const allow_discussion =
+    useLiveData('allow_discussion') || content?.allow_discussion;
+  const enable_likes = useLiveData('enable_likes') || content?.enable_likes;
   const votes = content?.votes;
   const loggedIn = useSelector((state) => state.userSession.token, shallowEqual)
     ? true
@@ -136,37 +144,39 @@ const Rating = (props) => {
     <Container className="content-engagement">
       <div className="engagement-container">
         <div className="engagement-section">
-          <div className={cx('likes-section', { anon: !loggedIn })}>
-            {loggedIn ? (
-              <Button aria-label="liked" onClick={() => onLike()}>
-                <div className="icon-wrapper">
-                  {liked ? (
-                    <Icon
-                      name={thumbsFilledSVG}
-                      size="33px"
-                      className="liked"
-                    />
-                  ) : (
+          {enable_likes && (
+            <div className={cx('likes-section', { anon: !loggedIn })}>
+              {loggedIn ? (
+                <Button aria-label="liked" onClick={() => onLike()}>
+                  <div className="icon-wrapper">
+                    {liked ? (
+                      <Icon
+                        name={thumbsFilledSVG}
+                        size="33px"
+                        className="liked"
+                      />
+                    ) : (
+                      <Icon name={thumbsSVG} size="33px" />
+                    )}
+                  </div>
+                </Button>
+              ) : (
+                <Link
+                  aria-label="unliked"
+                  to={`${pathname}/login`}
+                  title={intl.formatMessage(messages.loginToLike)}
+                >
+                  <div className="icon-wrapper">
                     <Icon name={thumbsSVG} size="33px" />
-                  )}
-                </div>
-              </Button>
-            ) : (
-              <Link
-                aria-label="unliked"
-                to={`${pathname}/login`}
-                title={intl.formatMessage(messages.loginToLike)}
-              >
-                <div className="icon-wrapper">
-                  <Icon name={thumbsSVG} size="33px" />
-                </div>
-              </Link>
-            )}
-            <div className="likes-count">
-              <span>({amount})</span>
+                  </div>
+                </Link>
+              )}
+              <div className="likes-count">
+                <span>({amount})</span>
+              </div>
             </div>
-          </div>
-          {(allow_discussion || comment_count >= 0) && (
+          )}
+          {(allow_discussion || comment_count > 0) && (
             <div className="comments-section">
               <Button aria-label="comments">
                 <div className="icon-wrapper">

frontend/packages/volto-intranet/src/theme/components/rating.scss

@@ -1,14 +1,9 @@
 .content-engagement {
-  position: relative;
-  display: block;
-  width: calc(100cqw - 40px);
-  max-width: inherit;
   padding-top: 30px;
   padding-bottom: 80px;
   border-color: var(--theme-foreground-color);
   border-top: 1px solid;
   margin-top: 80px;
-  content: '';
   @include default-container-width();
   @include adjustMarginsToContainer($default-container-width);
 }
@@ -33,6 +28,10 @@
     align-items: center;
     margin-right: 30px;
 
+    button {
+      cursor: pointer;
+    }
+
     .likes-count,
     .comments-count {
       span {
@@ -42,11 +41,18 @@
       }
     }
   }
+
+  .comments-section {
+    button {
+      cursor: default;
+    }
+  }
 }
 .content-metadata {
   display: flex;
   flex: 1;
   justify-content: flex-end;
+  gap: 50px;
   .created,
   .modified {
     font-size: 14px;
@@ -58,7 +64,4 @@
       display: flex;
     }
   }
-  .created {
-    margin-right: 50px;
-  }
 }