Merge pull request #322 from answerdev/feat/1.0.9/ui

feat: add top hide function

i18n/en_US.yaml

@@ -797,6 +797,7 @@ ui:
     btn: Add question
     answers: answers
   question_detail:
+    action: Action
     Asked: Asked
     asked: asked
     update: Modified
@@ -835,13 +836,14 @@ ui:
         li1_2: Back up any statements you make with references or personal experience.
         header_2: But <strong>avoid</strong> ...
         li2_1: Asking for help, seeking clarification, or responding to other answers.
-
     reopen:
       confirm_btn: Reopen
       title: Reopen this post
       content: Are you sure you want to reopen?
-      success: This post has been reopened
-
+    pin:
+      title: Pin this post
+      content: Are you sure you wish to pinned globally? This post will appear at the top of all post lists.
+      confirm_btn: Pin
   delete:
     title: Delete this post
     question: >-
@@ -855,7 +857,6 @@ ui:
       of accepted answers can result in your account being blocked from answering.
       Are you sure you wish to delete?
     other: Are you sure you wish to delete?
-    tip_question_deleted: This post has been deleted
     tip_answer_deleted: This answer has been deleted
   btns:
     confirm: Confirm
@@ -871,6 +872,7 @@ ui:
     reject: Reject
     skip: Skip
     discard_draft: Discard draft
+    pinned: Pinned
   search:
     title: Search Results
     keywords: Keywords
@@ -1442,6 +1444,10 @@ ui:
     closed: closed
     reopened: reopened
     created: created
+    pin: pinned
+    unpin: unpinned
+    show: listed
+    hide: unlisted
     title: "History for"
     tag_title: "Timeline for"
     show_votes: "Show votes"
@@ -1467,5 +1473,9 @@ ui:
   draft:
     discard_confirm: Are you sure you want to discard your draft?
   messages:
-     post_deleted: This post has been deleted.
-
+    post_deleted: This post has been deleted.
+    post_pin: This post has been pinned.
+    post_unpin: This post has been unpinned.
+    post_hide_list:  This post has been hidden from list.
+    post_show_list: This post has been shown to list.
+    post_reopen: This post has been reopened.

ui/src/common/constants.ts

@@ -594,6 +594,10 @@ export const TIMELINE_NORMAL_ACTIVITY_TYPE = [
   'upvote',
   'reopened',
   'closed',
+  'pin',
+  'unpin',
+  'show',
+  'hide',
 ];
 
 export const SYSTEM_AVATAR_OPTIONS = [

ui/src/common/interface.ts

@@ -526,3 +526,8 @@ export interface User {
   display_name: string;
   avatar: string;
 }
+
+export interface QuestionOperationReq {
+  id: string;
+  operation: 'pin' | 'unpin' | 'hide' | 'show';
+}

ui/src/components/Comment/components/Form/index.tsx

@@ -51,7 +51,7 @@ const Index = ({
         'd-flex align-items-start flex-column flex-md-row',
         className,
       )}>
-      <div>
+      <div className="w-100">
         <div
           className={classNames('custom-form-control', {
             'is-invalid': validationErrorMsg,

ui/src/components/Comment/components/Reply/index.tsx

@@ -37,7 +37,7 @@ const Index = ({ userName, onSendReply, onCancel, mode }) => {
         {t('reply_to')} {userName}
       </div>
       <div className="d-flex mb-1 align-items-start flex-column flex-md-row">
-        <div>
+        <div className="w-100">
           <div
             className={classNames('custom-form-control', {
               'is-invalid': validationErrorMsg,

ui/src/components/Customize/index.tsx

@@ -34,7 +34,9 @@ const ActivateScriptNodes = (el, part) => {
   }
   scriptList?.forEach((so) => {
     const script = document.createElement('script');
-    script.text = so.text;
+    script.text = `(() => {
+      ${so.text}
+    })();`;
     for (let i = 0; i < so.attributes.length; i += 1) {
       const attr = so.attributes[i];
       script.setAttribute(attr.name, attr.value);

ui/src/components/Icon/index.tsx

@@ -8,15 +8,24 @@ interface IProps {
   name: string;
   className?: string;
   size?: string;
+  title?: string;
   onClick?: () => void;
 }
-const Icon: FC<IProps> = ({ type = 'br', name, className, size, onClick }) => {
+const Icon: FC<IProps> = ({
+  type = 'br',
+  name,
+  className,
+  size,
+  onClick,
+  title = '',
+}) => {
   return (
     <i
       className={classNames(type, `bi-${name}`, className)}
       style={{ ...(size && { fontSize: size }) }}
       onClick={onClick}
       onKeyDown={onClick}
+      title={title}
     />
   );
 };

ui/src/components/Operate/index.tsx

@@ -1,19 +1,22 @@
 import { memo, FC } from 'react';
-import { Button } from 'react-bootstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import { Modal } from '@/components';
 import { useReportModal, useToast } from '@/hooks';
+import { QuestionOperationReq } from '@/common/interface';
 import Share from '../Share';
 import {
   deleteQuestion,
   deleteAnswer,
   editCheck,
   reopenQuestion,
+  questionOpetation,
 } from '@/services';
 import { tryNormalLogged } from '@/utils/guard';
 import { floppyNavigation } from '@/utils';
+import { toastStore } from '@/stores';
 
 interface IProps {
   type: 'answer' | 'question';
@@ -78,7 +81,7 @@ const Index: FC<IProps> = ({
             id: qid,
           }).then(() => {
             toast.onShow({
-              msg: t('tip_question_deleted'),
+              msg: t('post_deleted', { keyPrefix: 'messages' }),
               variant: 'success',
             });
             callback?.('delete_question');
@@ -134,7 +137,7 @@ const Index: FC<IProps> = ({
           question_id: qid,
         }).then(() => {
           toast.onShow({
-            msg: t('success', { keyPrefix: 'question_detail.reopen' }),
+            msg: t('post_reopen', { keyPrefix: 'messages' }),
             variant: 'success',
           });
           refreshQuestion();
@@ -143,6 +146,51 @@ const Index: FC<IProps> = ({
     });
   };
 
+  const handleCommon = async (params) => {
+    await questionOpetation(params);
+    let msg = '';
+    if (params.operation === 'pin') {
+      msg = t('post_pin', { keyPrefix: 'messages' });
+    }
+    if (params.operation === 'unpin') {
+      msg = t('post_unpin', { keyPrefix: 'messages' });
+    }
+    if (params.operation === 'hide') {
+      msg = t('post_hide_list', { keyPrefix: 'messages' });
+    }
+    if (params.operation === 'show') {
+      msg = t('post_show_list', { keyPrefix: 'messages' });
+    }
+    toastStore.getState().show({
+      msg,
+      variant: 'success',
+    });
+    setTimeout(() => {
+      refreshQuestion();
+    }, 100);
+  };
+
+  const handlOtherActions = (action) => {
+    const params: QuestionOperationReq = {
+      id: qid,
+      operation: action,
+    };
+
+    if (action === 'pin') {
+      Modal.confirm({
+        title: t('title', { keyPrefix: 'question_detail.pin' }),
+        content: t('content', { keyPrefix: 'question_detail.pin' }),
+        cancelBtnVariant: 'link',
+        confirmText: t('confirm_btn', { keyPrefix: 'question_detail.pin' }),
+        onConfirm: () => {
+          handleCommon(params);
+        },
+      });
+    } else {
+      handleCommon(params);
+    }
+  };
+
   const handleAction = (action) => {
     if (!tryNormalLogged(true)) {
       return;
@@ -162,8 +210,33 @@ const Index: FC<IProps> = ({
     if (action === 'reopen') {
       handleReopen();
     }
+
+    if (
+      action === 'pin' ||
+      action === 'unpin' ||
+      action === 'hide' ||
+      action === 'show'
+    ) {
+      handlOtherActions(action);
+    }
   };
 
+  const firstAction =
+    memberActions?.filter(
+      (v) =>
+        v.action === 'report' || v.action === 'edit' || v.action === 'delete',
+    ) || [];
+  const secondAction =
+    memberActions?.filter(
+      (v) =>
+        v.action === 'close' ||
+        v.action === 'reopen' ||
+        v.action === 'pin' ||
+        v.action === 'unpin' ||
+        v.action === 'hide' ||
+        v.action === 'show',
+    ) || [];
+
   return (
     <div className="d-flex align-items-center">
       <Share
@@ -173,13 +246,13 @@ const Index: FC<IProps> = ({
         title={title}
         slugTitle={slugTitle}
       />
-      {memberActions?.map((item) => {
+      {firstAction?.map((item) => {
         if (item.action === 'edit') {
           return (
             <Link
               key={item.action}
               to={editUrl}
-              className="link-secondary p-0 fs-14 me-3"
+              className="link-secondary p-0 fs-14 ms-3"
               onClick={(evt) => handleEdit(evt, editUrl)}
               style={{ lineHeight: '23px' }}>
               {item.name}
@@ -190,12 +263,32 @@ const Index: FC<IProps> = ({
           <Button
             key={item.action}
             variant="link"
-            className="link-secondary p-0 fs-14 me-3"
+            className="link-secondary p-0 fs-14 ms-3"
             onClick={() => handleAction(item.action)}>
             {item.name}
           </Button>
         );
       })}
+      {secondAction.length > 0 && (
+        <Dropdown className="ms-3">
+          <Dropdown.Toggle
+            variant="link"
+            className="link-secondary p-0 fs-14 no-toggle">
+            {t('action', { keyPrefix: 'question_detail' })}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            {secondAction.map((item) => {
+              return (
+                <Dropdown.Item
+                  key={item.action}
+                  onClick={() => handleAction(item.action)}>
+                  {item.name}
+                </Dropdown.Item>
+              );
+            })}
+          </Dropdown.Menu>
+        </Dropdown>
+      )}
     </div>
   );
 };

ui/src/components/QuestionList/index.tsx

@@ -14,6 +14,7 @@ import {
   QueryGroup,
   QuestionListLoader,
   Counts,
+  Icon,
 } from '@/components';
 
 const QuestionOrderKeys: Type.QuestionOrderBy[] = [
@@ -62,6 +63,13 @@ const QuestionList: FC<Props> = ({ source, data, isLoading = false }) => {
                 key={li.id}
                 className="bg-transparent py-3 px-0 border-start-0 border-end-0">
                 <h5 className="text-wrap text-break">
+                  {li.pin === 2 && (
+                    <Icon
+                      name="pin-fill"
+                      className="me-1"
+                      title={t('pinned', { keyPrefix: 'btns' })}
+                    />
+                  )}
                   <NavLink
                     to={pathFactory.questionLanding(li.id, li.url_title)}
                     className="link-dark">

ui/src/components/Share/index.tsx

@@ -71,7 +71,7 @@ const Index: FC<IProps> = ({ type, qid, aid, title, slugTitle = '' }) => {
       <Dropdown.Toggle
         id="dropdown-share"
         as="a"
-        className="no-toggle fs-14 link-secondary pointer me-3"
+        className="no-toggle fs-14 link-secondary pointer"
         onClick={() => setShow(true)}
         style={{ lineHeight: '23px' }}>
         {t('share.name')}

ui/src/components/TagSelector/index.tsx

@@ -38,7 +38,7 @@ const TagSelector: FC<IProps> = ({
   const [initialValue, setInitialValue] = useState<Type.Tag[]>([...value]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [repeatIndex, setRepeatIndex] = useState(-1);
-  const [tag, setTag] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');
   const [tags, setTags] = useState<Type.Tag[] | null>(null);
   const { t } = useTranslation('translation', { keyPrefix: 'tag_selector' });
   const [visibleMenu, setVisibleMenu] = useState(false);
@@ -101,12 +101,12 @@ const TagSelector: FC<IProps> = ({
   const fetchTags = (str) => {
     queryTags(str).then((res) => {
       const tagArray: Type.Tag[] = filterTags(res || []);
-      setTags(tagArray);
+      setTags(tagArray?.length > 5 ? tagArray.slice(0, 5) : tagArray);
     });
   };
 
   useEffect(() => {
-    fetchTags(tag);
+    fetchTags(searchValue);
   }, [visibleMenu]);
 
   const handleClick = (val: Type.Tag) => {
@@ -146,7 +146,7 @@ const TagSelector: FC<IProps> = ({
 
   const handleSearch = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchStr = e.currentTarget.value.replace(';', '');
-    setTag(searchStr);
+    setSearchValue(searchStr);
     fetchTags(searchStr);
   };
 
@@ -172,7 +172,7 @@ const TagSelector: FC<IProps> = ({
       e.preventDefault();
 
       if (tags.length === 0) {
-        tagModal.onShow(tag);
+        tagModal.onShow(searchValue);
         return;
       }
       if (currentIndex <= tags.length - 1) {
@@ -228,13 +228,14 @@ const TagSelector: FC<IProps> = ({
                     <FormControl
                       placeholder={t('search_tag')}
                       autoFocus
-                      value={tag}
+                      value={searchValue}
                       onChange={handleSearch}
                     />
                   </Form>
                 </Dropdown.Header>
               )}
-              {showRequiredTagText &&
+              {!searchValue &&
+                showRequiredTagText &&
                 tags &&
                 tags.filter((v) => v.recommend)?.length > 0 && (
                   <h6 className="dropdown-header">{t('tag_required_text')}</h6>
@@ -251,17 +252,17 @@ const TagSelector: FC<IProps> = ({
                   </Dropdown.Item>
                 );
               })}
-              {tag && tags && tags.length === 0 && (
+              {searchValue && tags && tags.length === 0 && (
                 <Dropdown.Item disabled className="text-secondary">
                   {t('no_result')}
                 </Dropdown.Item>
               )}
-              {!hiddenCreateBtn && tag && (
+              {!hiddenCreateBtn && searchValue && (
                 <Button
                   variant="link"
                   className="px-3 btn-no-border w-100 text-start"
                   onClick={() => {
-                    tagModal.onShow(tag);
+                    tagModal.onShow(searchValue);
                   }}>
                   + {t('create_btn')}
                 </Button>

ui/src/pages/Questions/Detail/components/Question/index.tsx

@@ -11,6 +11,7 @@ import {
   Comment,
   FormatTime,
   htmlRender,
+  Icon,
 } from '@/components';
 import { formatCount, guard } from '@/utils';
 import { following } from '@/services';
@@ -65,6 +66,13 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
   return (
     <div>
       <h1 className="h3 mb-3 text-wrap text-break">
+        {data?.pin === 2 && (
+          <Icon
+            name="pin-fill"
+            className="me-1"
+            title={t('pinned', { keyPrefix: 'btns' })}
+          />
+        )}
         <Link
           className="link-dark"
           reloadDocument

ui/src/pages/Users/Settings/Profile/index.tsx

@@ -300,7 +300,7 @@ const Index: React.FC = () => {
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group className="mb-3">
+        <Form.Group controlId="avatar" className="mb-3">
           <Form.Label>{t('avatar.label')}</Form.Label>
           <div className="mb-3">
             <Form.Select

ui/src/services/common.ts

@@ -278,3 +278,7 @@ export const markdownToHtml = (content: string) => {
 export const saveQuestionWidthAnaser = (params: Type.QuestionWithAnswer) => {
   return request.post('/answer/api/v1/question/answer', params);
 };
+
+export const questionOpetation = (params: Type.QuestionOperationReq) => {
+  return request.put('/answer/api/v1/question/operation', params);
+};