Few changes to banner logic and enable/disable button logic

openstad · Jan 5, 2024 · 3979491 · 3979491
1 parent d22adf2
commit 3979491
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 26 deletions.
diff --git a/packages/comments/src/comments.tsx b/packages/comments/src/comments.tsx
@@ -11,6 +11,7 @@ import loadWidget from '@openstad-headless/lib/load-widget';
 
 import { BaseProps } from '../../types/base-props';
 import { ProjectSettingProps } from '../../types/project-setting-props';
+import hasRole from '@openstad/lib/has-role';
 
 export type CommentsWidgetProps = BaseProps &
   ProjectSettingProps &

diff --git a/packages/comments/src/main.tsx b/packages/comments/src/main.tsx
@@ -27,6 +27,7 @@ const config: CommentsWidgetProps = {
   isReplyingEnabled: import.meta.env.VITE_IS_REPLYING_ENABLED != 'false',
   requiredUserRole: import.meta.env.VITE_REQUIRED_USER_ROLE,
   userNameFields: eval(import.meta.env.VITE_USER_NAME_FIELDS),
+  isClosed: import.meta.env.VITE_VOTING_IS_CLOSED,
 };
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

diff --git a/packages/comments/src/parts/comment-form.tsx b/packages/comments/src/parts/comment-form.tsx
@@ -62,33 +62,38 @@ function CommentForm({
               Inloggen
             </Button>
           </Banner>
-        ) : null}
-
-        {hasRole(currentUser, 'member') &&
-        !hasRole(currentUser, 'admin') &&
-        !props.isReplyingEnabled ? (
-          <Banner className="big">
-            <Spacer size={2} />
-            <h6>
-              De reactiemogelijkheid is gesloten, u kunt niet meer reageren
-            </h6>
-            <Spacer size={2} />
-          </Banner>
-        ) : null}
+        ) : (
+          <>
+            {!hasRole(currentUser, 'moderator') && !props.isReplyingEnabled ? (
+              <Banner className="big">
+                <Spacer size={2} />
+                <h6>
+                  De reactiemogelijkheid is gesloten, u kunt niet meer reageren
+                </h6>
+                <Spacer size={2} />
+              </Banner>
+            ) : null}
 
-        {hasRole(currentUser, 'admin') && !props.isReplyingEnabled ? (
-          <Banner>
-            <Spacer size={2} />
-            <h6>
-              Reageren is gesloten, maar je kunt nog reageren vanwege je rol als
-              admin
-            </h6>
-            <Spacer size={2} />
-          </Banner>
-        ) : null}
+            {hasRole(currentUser, 'moderator') &&
+            !props.isReplyingEnabled &&
+            !props.hideReplyAsAdmin ? (
+              <>
+                <Banner>
+                  <Spacer size={2} />
+                  <h6>
+                    Reageren is gesloten, maar je kunt nog reageren vanwege je
+                    rol als moderator
+                  </h6>
+                  <Spacer size={2} />
+                </Banner>
+                <Spacer size={2} />
+              </>
+            ) : null}
+          </>
+        )}
 
         {(hasRole(currentUser, 'member') && props.isReplyingEnabled) ||
-        hasRole(currentUser, 'admin') ? (
+        hasRole(currentUser, 'moderator') ? (
           <>
             <Input
               className="comment-description-inputfield"

diff --git a/packages/comments/src/parts/comment.tsx b/packages/comments/src/parts/comment.tsx
@@ -16,6 +16,7 @@ function Comment({
   requiredUserRole = 'member',
   userNameFields = ['displayName'],
   showDateSeperately = false,
+  hideReplyAsAdmin = false,
   ...props
 }: CommentPropsType) {
   const args = {
@@ -127,7 +128,7 @@ function Comment({
                     : 'ri-thumb-up-line'
                 }
                 onClick={() => args.comment.submitLike()}>
-                Mee eens ({args.comment.yes || 0})
+                Mee eens (<span>{args.comment.yes || 0}</span>)
               </GhostButton>
             ) : (
               <GhostButton disabled icon="ri-thumb-up-line">
@@ -161,6 +162,7 @@ function Comment({
           <div className="input-container">
             <CommentForm
               {...args}
+              hideReplyAsAdmin={true}
               comment={{ parentId: args.comment.id }}
               submitComment={(e) => {
                 args.submitComment(e);

diff --git a/packages/comments/src/types/comment-props.ts b/packages/comments/src/types/comment-props.ts
@@ -11,4 +11,5 @@ export type CommentProps = {
   requiredUserRole: string;
   userNameFields: Array<string>;
   showDateSeperately?: boolean;
+  hideReplyAsAdmin?: boolean;
 };
diff --git a/packages/ui/src/button/index.css b/packages/ui/src/button/index.css
@@ -19,7 +19,8 @@
     gap: .5rem;
     border: none;
     background-color: var(--osc-background);
-    color: var(--osc-foreground)
+    color: var(--osc-foreground);
+    cursor: pointer;
 }
 
 .osc button.ghost.active i{