feat(next/web): collaborator privileges

next/web/src/App/Admin/Settings/Collaborators/Privileges.tsx

@@ -0,0 +1,54 @@
+import { Checkbox, Spin } from 'antd';
+
+import {
+  CollaboratorPrivileges,
+  useCollaboratorPrivileges,
+  useSetCollaboratorPrivileges,
+} from '@/api/collaborator';
+
+interface PrivilegeItem {
+  key?: keyof CollaboratorPrivileges;
+  title: string;
+}
+
+export function Privileges() {
+  const { data: privileges } = useCollaboratorPrivileges();
+  const { mutate, isLoading: isMutating } = useSetCollaboratorPrivileges();
+
+  const privilegeItems: PrivilegeItem[] = [
+    {
+      title: '查看分配给其的工单',
+    },
+    {
+      title: '创建内部回复',
+    },
+    {
+      key: 'createPublicReply',
+      title: '创建公开回复',
+    },
+  ];
+
+  if (!privileges) {
+    return <Spin />;
+  }
+
+  return (
+    <ul>
+      {privilegeItems.map(({ key, title }, index) => {
+        const enabled = !!privileges['createPublicReply'];
+        return (
+          <li key={key || index} className="space-x-1">
+            <span className={key && (enabled ? undefined : 'line-through')}>{title}</span>
+            {key && (
+              <Checkbox
+                checked={enabled}
+                disabled={isMutating}
+                onChange={(e) => mutate({ ...privileges, [key]: e.target.checked })}
+              />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

next/web/src/App/Admin/Settings/Collaborators/index.tsx

@@ -6,6 +6,7 @@ import { useCollaborators, useCreateCollaborator, useDeleteCollaborator } from '
 import { Button, Modal, Table, Typography } from '@/components/antd';
 import { UserSelect } from '@/components/common';
 import { UserLabel } from '@/App/Admin/components';
+import { Privileges } from './Privileges';
 
 const { Column } = Table;
 const { Title, Paragraph } = Typography;
@@ -77,10 +78,7 @@ export function Collaborators() {
       <Typography>
         <Title level={2}>协作者</Title>
         <Paragraph>协作者可以：</Paragraph>
-        <ul>
-          <li>查看分配给其的工单</li>
-          <li>创建内部回复</li>
-        </ul>
+        <Privileges />
       </Typography>
 
       <div className="flex justify-end mb-5">

next/web/src/api/collaborator.ts

@@ -1,4 +1,10 @@
-import { useMutation, UseMutationOptions, useQuery, UseQueryOptions } from 'react-query';
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from 'react-query';
 
 import { http } from '@/leancloud';
 import { UserSchema } from './user';
@@ -16,6 +22,20 @@ async function deleteCollaborator(userId: string) {
   await http.delete(`/api/2/collaborators/${userId}`);
 }
 
+export interface CollaboratorPrivileges {
+  createPublicReply?: boolean;
+}
+
+async function getCollaboratorPrivileges() {
+  const res = await http.get<CollaboratorPrivileges>('/api/2/collaborators/privileges');
+  return res.data;
+}
+
+async function setCollaboratorPrivileges(value: CollaboratorPrivileges) {
+  const res = await http.put<CollaboratorPrivileges>('/api/2/collaborators/privileges', value);
+  return res.data;
+}
+
 export function useCollaborators(options?: UseQueryOptions<UserSchema[]>) {
   return useQuery({
     queryKey: ['collaborators'],
@@ -39,3 +59,20 @@ export function useDeleteCollaborator(options?: UseMutationOptions<void, Error,
     ...options,
   });
 }
+
+export function useCollaboratorPrivileges() {
+  return useQuery({
+    queryKey: ['CollaboratorPrivileges'],
+    queryFn: getCollaboratorPrivileges,
+  });
+}
+
+export function useSetCollaboratorPrivileges() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: setCollaboratorPrivileges,
+    onSuccess: (data) => {
+      queryClient.setQueryData(['CollaboratorPrivileges'], data);
+    },
+  });
+}