create-bubbles 0.1.26 → 0.1.28

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberAffiliations/MemberOrganizationsDialog.tsx

@@ -0,0 +1,188 @@
+import { Alert, Modal, Select, Space, Table, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  MemberRecord,
+  OrganizationDuty,
+  OrganizationMemberCandidate,
+  OrganizationRelationInput,
+  OrganizationScope,
+  OrganizationUnitNode,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import {
+  canAddOrganizationAssignment,
+  canChangeOrganizationDuty,
+} from '@/utils/organization-assignment'
+
+export interface MemberOrganizationsDialogRef {
+  show: (
+    member: MemberRecord,
+    candidate: OrganizationMemberCandidate,
+    units: OrganizationUnitNode[],
+  ) => void
+  hide: () => void
+}
+
+/** 只读取成员在当前 URL 作用域身份中的组织关系，避免聚合候选串入其他项目。 */
+function currentRelations(candidate: OrganizationMemberCandidate, scope: OrganizationScope) {
+  const scopeKey = accessScopeKey(scope)
+  return candidate.identities
+    .filter((identity) => accessScopeKey(identity.scope) === scopeKey)
+    .flatMap((identity) => identity.organizationUnits)
+}
+
+/** 按成员完整替换组织归属及职责，不构造主归属。 */
+export default function MemberOrganizationsDialog({
+  ref,
+  scope,
+  onSave,
+}: {
+  ref: Ref<MemberOrganizationsDialogRef>
+  scope: OrganizationScope
+  onSave: (member: MemberRecord, relations: OrganizationRelationInput[]) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [member, setMember] = useState<MemberRecord>()
+  const [candidate, setCandidate] = useState<OrganizationMemberCandidate>()
+  const [units, setUnits] = useState<OrganizationUnitNode[]>([])
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const [duties, setDuties] = useState<Record<string, OrganizationDuty>>({})
+  const [initialDuties, setInitialDuties] = useState<Record<string, OrganizationDuty>>({})
+  const { tr } = useI18n()
+  const hide = () => {
+    if (!saving) setOpen(false)
+  }
+  useImperativeHandle(ref, () => ({
+    /** 带入成员当前全部组织关系和可见组织单元后打开编辑器。 */
+    show: (record, candidate, availableUnits) => {
+      const relations = currentRelations(candidate, scope)
+      setMember(record)
+      setCandidate(candidate)
+      setUnits(availableUnits)
+      setSelectedIds(relations.map((relation) => relation.id))
+      const nextDuties = Object.fromEntries(
+        relations.map((relation) => [relation.id, relation.duty]),
+      )
+      setDuties(nextDuties)
+      setInitialDuties(nextDuties)
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  /** 更新单元职责；选中负责人时只在同一单元关系中更新当前成员职责。 */
+  const changeDuty = (unitId: string, duty: OrganizationDuty) => {
+    setDuties((current) => ({ ...current, [unitId]: duty }))
+  }
+
+  return (
+    <Modal
+      title={tr('编辑组织归属 · {name}', { name: member?.name ?? '' })}
+      open={open}
+      width={820}
+      destroyOnHidden
+      confirmLoading={saving}
+      onCancel={hide}
+      onOk={
+        /** 提交成员在当前作用域的完整组织关系集合。 */ async () => {
+          if (!member) return
+          setSaving(true)
+          try {
+            const ok = await onSave(
+              member,
+              selectedIds.map((organizationUnitId) => ({
+                organizationUnitId,
+                duty: duties[organizationUnitId] ?? 'member',
+              })),
+            )
+            if (ok) setOpen(false)
+          } finally {
+            setSaving(false)
+          }
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('所有组织归属同等有效')}
+        description={tr('成员可以加入多个组织单元，不存在主归属；保存不会改变岗位或角色。')}
+        style={{ marginBottom: 16 }}
+      />
+      <Space direction="vertical" size={16} style={{ width: '100%' }}>
+        <Select
+          mode="multiple"
+          value={selectedIds}
+          style={{ width: '100%' }}
+          placeholder={tr('选择组织单元')}
+          showSearch
+          optionFilterProp="label"
+          options={units.map((unit) => ({
+            value: unit.id,
+            label: unit.fullPath,
+            disabled:
+              !selectedIds.includes(unit.id) &&
+              (!candidate ||
+                !canAddOrganizationAssignment({
+                  candidate,
+                  scope,
+                  unitEffective: unit.effective,
+                })),
+          }))}
+          onChange={(ids) => {
+            setSelectedIds(ids)
+            setDuties((current) => ({
+              ...Object.fromEntries(ids.map((id) => [id, 'member'])),
+              ...Object.fromEntries(
+                ids
+                  .filter((id) => current[id] !== undefined)
+                  .map((id) => [id, current[id]!] as const),
+              ),
+            }))
+          }}
+        />
+        <Table
+          rowKey="id"
+          size="small"
+          pagination={false}
+          dataSource={units.filter((unit) => selectedIds.includes(unit.id))}
+          scroll={{ y: 300 }}
+          columns={[
+            { title: tr('组织单元'), dataIndex: 'fullPath' },
+            {
+              title: tr('职责'),
+              width: 180,
+              render: (_, unit) => (
+                <Select<OrganizationDuty>
+                  value={duties[unit.id] ?? 'member'}
+                  style={{ width: 150 }}
+                  options={[
+                    { value: 'member', label: tr('成员') },
+                    { value: 'deputy', label: tr('副负责人') },
+                    { value: 'leader', label: tr('负责人') },
+                  ].map((option) => ({
+                    ...option,
+                    disabled:
+                      !candidate ||
+                      !canChangeOrganizationDuty({
+                        candidate,
+                        scope,
+                        unitEffective: unit.effective,
+                        initialDuty: initialDuties[unit.id],
+                        nextDuty: option.value as OrganizationDuty,
+                      }),
+                  }))}
+                  onChange={(duty) => changeDuty(unit.id, duty)}
+                />
+              ),
+            },
+          ]}
+          locale={{
+            emptyText: <Typography.Text type="secondary">{tr('暂未选择组织单元')}</Typography.Text>,
+          }}
+        />
+      </Space>
+    </Modal>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberAffiliations/MemberPositionsDialog.tsx

@@ -0,0 +1,116 @@
+import { Alert, Modal, Select } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  MemberRecord,
+  OrganizationMemberCandidate,
+  OrganizationScope,
+  PositionRecord,
+} from 'shared/types'
+import { accessScopeKey } from 'shared/utils'
+import { canAddPositionAssignment } from '@/utils/organization-assignment'
+
+export interface MemberPositionsDialogRef {
+  show: (
+    member: MemberRecord,
+    candidate: OrganizationMemberCandidate,
+    positions: PositionRecord[],
+  ) => void
+  hide: () => void
+}
+
+/** 只读取候选人在当前 URL 作用域身份中的岗位，避免聚合候选串入其他项目。 */
+function currentPositionIds(candidate: OrganizationMemberCandidate, scope: OrganizationScope) {
+  const scopeKey = accessScopeKey(scope)
+  return [
+    ...new Set(
+      candidate.identities
+        .filter((identity) => accessScopeKey(identity.scope) === scopeKey)
+        .flatMap((identity) => identity.positions.map((item) => item.id)),
+    ),
+  ]
+}
+
+/** 按成员完整替换岗位任职，岗位与组织、角色保持独立。 */
+export default function MemberPositionsDialog({
+  ref,
+  scope,
+  onSave,
+}: {
+  ref: Ref<MemberPositionsDialogRef>
+  scope: OrganizationScope
+  onSave: (member: MemberRecord, positionIds: string[]) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [member, setMember] = useState<MemberRecord>()
+  const [candidate, setCandidate] = useState<OrganizationMemberCandidate>()
+  const [positions, setPositions] = useState<PositionRecord[]>([])
+  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const { tr } = useI18n()
+  const hide = () => {
+    if (!saving) setOpen(false)
+  }
+  useImperativeHandle(ref, () => ({
+    /** 带入成员当前岗位和可见岗位列表后打开编辑器。 */
+    show: (record, candidate, availablePositions) => {
+      setMember(record)
+      setCandidate(candidate)
+      setPositions(availablePositions)
+      setSelectedIds(currentPositionIds(candidate, scope))
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  return (
+    <Modal
+      title={tr('编辑岗位任职 · {name}', { name: member?.name ?? '' })}
+      open={open}
+      width={640}
+      destroyOnHidden
+      confirmLoading={saving}
+      onCancel={hide}
+      onOk={
+        /** 提交成员在当前作用域的完整岗位 id 集合。 */ async () => {
+          if (!member) return
+          setSaving(true)
+          try {
+            const ok = await onSave(member, selectedIds)
+            if (ok) setOpen(false)
+          } finally {
+            setSaving(false)
+          }
+        }
+      }
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('一名成员可以任多个岗位')}
+        description={tr('保存只替换岗位任职，不会修改组织归属或角色。')}
+        style={{ marginBottom: 16 }}
+      />
+      <Select
+        mode="multiple"
+        value={selectedIds}
+        style={{ width: '100%' }}
+        placeholder={tr('选择岗位')}
+        showSearch
+        optionFilterProp="label"
+        options={positions.map((position) => ({
+          value: position.id,
+          label: `${position.name} · ${position.code}`,
+          disabled:
+            !selectedIds.includes(position.id) &&
+            (!candidate ||
+              !canAddPositionAssignment({
+                candidate,
+                scope,
+                positionActive: position.status === 'active',
+              })),
+        }))}
+        onChange={setSelectedIds}
+      />
+    </Modal>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberAffiliations/affiliation-loaders.ts

@@ -0,0 +1,18 @@
+import type { OrganizationUnitNode } from 'shared/types'
+import type { organizationApi } from '@/pages/organization/api'
+
+export { loadAllPositions } from '@/pages/positions/loaders'
+
+/** 递归读取当前作用域完整组织树，供成员多组织关系编辑器使用。 */
+export async function loadAllOrganizationUnits(
+  api: ReturnType<typeof organizationApi>,
+  parentId?: string,
+): Promise<OrganizationUnitNode[]> {
+  const result = await api.tree(parentId ? { parentId } : {})
+  const descendants = await Promise.all(
+    result.units
+      .filter((unit) => unit.hasChildren)
+      .map((unit) => loadAllOrganizationUnits(api, unit.id)),
+  )
+  return [...result.units, ...descendants.flat()]
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberAffiliations/index.ts

@@ -0,0 +1,5 @@
+export { default as MemberOrganizationsDialog } from './MemberOrganizationsDialog'
+export type { MemberOrganizationsDialogRef } from './MemberOrganizationsDialog'
+export { default as MemberPositionsDialog } from './MemberPositionsDialog'
+export type { MemberPositionsDialogRef } from './MemberPositionsDialog'
+export { loadAllOrganizationUnits, loadAllPositions } from './affiliation-loaders'

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/AddProjectMemberDialog.tsx

@@ -0,0 +1,75 @@
+import { ModalForm } from '@ant-design/pro-components'
+import { Form } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type { AddProjectMemberRequest, OrganizationMemberCandidate } from 'shared/types'
+import OrganizationMemberSelector from '@/components/Selector/OrganizationMemberSelector'
+import type {
+  OrganizationMemberSearchRequest,
+  OrganizationMemberSearchResult,
+} from '@/components/Selector/OrganizationMemberSelector'
+
+const PROJECT_MEMBER_SOURCE_SCOPE = { type: 'company' } as const
+
+export interface AddProjectMemberDialogRef {
+  show: () => void
+  hide: () => void
+}
+
+/** 从项目所属企业的有效成员中选择用户，并以稳定 userId 添加项目成员。 */
+export default function AddProjectMemberDialog({
+  ref,
+  memberContextKey,
+  request,
+  resolve,
+  onSave,
+}: {
+  ref: Ref<AddProjectMemberDialogRef>
+  memberContextKey: string
+  request: (input: OrganizationMemberSearchRequest) => Promise<OrganizationMemberSearchResult>
+  resolve: (userIds: string[]) => Promise<OrganizationMemberCandidate[]>
+  onSave: (data: AddProjectMemberRequest) => Promise<boolean>
+}) {
+  const [open, setOpen] = useState(false)
+  const { tr } = useI18n()
+  const hide = () => setOpen(false)
+  useImperativeHandle(ref, () => ({
+    /** 打开项目成员选择弹窗。 */
+    show: () => setOpen(true),
+    hide,
+  }))
+
+  return (
+    <ModalForm<AddProjectMemberRequest>
+      title={tr('添加项目成员')}
+      open={open}
+      width={640}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      submitter={{ searchConfig: { submitText: tr('添加成员') } }}
+      onFinish={
+        /** 提交选择器返回的稳定 userId，成功后关闭弹窗。 */ async (values) => {
+          const ok = await onSave({ userId: values.userId })
+          if (ok) hide()
+          return ok
+        }
+      }
+    >
+      <Form.Item
+        name="userId"
+        label={tr('企业成员')}
+        rules={[{ required: true, message: tr('请选择企业成员') }]}
+        extra={tr('只能选择所属企业中有效且尚未加入本项目的成员。')}
+      >
+        <OrganizationMemberSelector
+          candidateContextKey={`${memberContextKey}:addProjectMember`}
+          scope={{ ...PROJECT_MEMBER_SOURCE_SCOPE, label: tr('所属企业') }}
+          request={request}
+          resolve={resolve}
+          placeholder={tr('选择企业成员')}
+        />
+      </Form.Item>
+    </ModalForm>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/access/components/MemberOnboarding/CompanyMemberInvitation/CompanyMemberInvitationDialog.tsx

@@ -0,0 +1,246 @@
+import { CopyOutlined, LinkOutlined, MailOutlined } from '@ant-design/icons'
+import { Alert, App, Button, Input, Modal, Space, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import type {
+  CompanyMemberInvitationIssueResult,
+  CompanyMemberInvitationRecord,
+} from 'shared/types'
+import type { managementApi } from '../../../api'
+import { buildCompanyMemberInvitationLink } from './invitation-link'
+import InvitationRecordsTable, { type InvitationAction } from './InvitationRecordsTable'
+
+const PAGE_SIZE = 8
+
+type ManagementApi = ReturnType<typeof managementApi>
+
+export interface CompanyMemberInvitationDialogRef {
+  show: () => void
+  hide: () => void
+}
+
+/**
+ * 管理企业一次性邀请：创建、查看状态、撤销及重发。
+ * 原始邀请 token 只保存在当前弹窗会话中，关闭后立即清除。
+ */
+export default function CompanyMemberInvitationDialog({
+  ref,
+  api,
+}: {
+  ref: Ref<CompanyMemberInvitationDialogRef>
+  api: ManagementApi
+}) {
+  const [open, setOpen] = useState(false)
+  const [records, setRecords] = useState<CompanyMemberInvitationRecord[]>([])
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [loading, setLoading] = useState(false)
+  const [creating, setCreating] = useState(false)
+  const [actionKey, setActionKey] = useState<string>()
+  const [issuedLink, setIssuedLink] = useState<string>()
+  const requestSequence = useRef(0)
+  const dialogSession = useRef(0)
+  const currentPage = useRef(1)
+  const { message } = App.useApp()
+  const { tr } = useI18n()
+
+  useEffect(
+    /** 组件卸载时废止全部在途响应，避免作用域切换后显示旧企业结果。 */ () => () => {
+      dialogSession.current += 1
+      requestSequence.current += 1
+    },
+    [],
+  )
+
+  /** 读取指定页邀请；弹窗关闭或新请求开始后忽略旧响应。 */
+  async function loadInvitations(targetPage: number) {
+    currentPage.current = targetPage
+    const sequence = ++requestSequence.current
+    setLoading(true)
+    try {
+      const result = await api.companyMemberInvitations({ page: targetPage, pageSize: PAGE_SIZE })
+      if (sequence !== requestSequence.current) return
+      setRecords(result.items)
+      setTotal(result.total)
+      setPage(result.page)
+      currentPage.current = result.page
+    } catch (cause) {
+      if (sequence !== requestSequence.current) return
+      setRecords([])
+      setTotal(0)
+      void message.error(cause instanceof Error ? cause.message : tr('无法加载邀请记录'))
+    } finally {
+      if (sequence === requestSequence.current) setLoading(false)
+    }
+  }
+
+  /** 将新签发 token 转为完整链接，并替换上一次仅本地可见的链接。 */
+  function revealIssuedLink(result: CompanyMemberInvitationIssueResult) {
+    setIssuedLink(buildCompanyMemberInvitationLink(result.token))
+  }
+
+  /** 创建新的无账号绑定邀请，随后刷新状态列表。 */
+  async function createInvitation() {
+    if (creating) return
+    const session = dialogSession.current
+    setCreating(true)
+    try {
+      const result = await api.createCompanyMemberInvitation()
+      if (session !== dialogSession.current) return
+      revealIssuedLink(result)
+      void message.success(tr('邀请链接已创建'))
+      await loadInvitations(currentPage.current)
+    } catch (cause) {
+      if (session !== dialogSession.current) return
+      void message.error(cause instanceof Error ? cause.message : tr('创建邀请失败，请重试'))
+    } finally {
+      if (session === dialogSession.current) setCreating(false)
+    }
+  }
+
+  /** 按服务端状态约束撤销或重发邀请，重发成功时展示新的唯一链接。 */
+  async function runInvitationAction({ kind, record }: InvitationAction) {
+    const key = `${kind}:${record.id}`
+    if (actionKey) return
+    const session = dialogSession.current
+    setActionKey(key)
+    try {
+      if (kind === 'revoke') {
+        await api.revokeCompanyMemberInvitation(record.id, {
+          expectedVersion: record.version,
+        })
+        if (session !== dialogSession.current) return
+        void message.success(tr('邀请已撤销'))
+      } else {
+        const result = await api.resendCompanyMemberInvitation(record.id, {
+          expectedVersion: record.version,
+        })
+        if (session !== dialogSession.current) return
+        revealIssuedLink(result)
+        void message.success(tr('新的邀请链接已生成'))
+      }
+      await loadInvitations(currentPage.current)
+    } catch (cause) {
+      if (session !== dialogSession.current) return
+      void message.error(cause instanceof Error ? cause.message : tr('邀请操作失败，请重试'))
+    } finally {
+      if (session === dialogSession.current) setActionKey(undefined)
+    }
+  }
+
+  /** 将本次签发的邀请链接写入浏览器剪贴板，并明确反馈权限或环境失败。 */
+  async function copyIssuedLink() {
+    if (!issuedLink) return
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error('Clipboard API unavailable')
+      await navigator.clipboard.writeText(issuedLink)
+      void message.success(tr('邀请链接已复制'))
+    } catch {
+      void message.error(tr('复制失败，请手动选择链接复制'))
+    }
+  }
+
+  /** 关闭弹窗并清除无法再次从服务端读取的一次性原始链接。 */
+  const hide = () => {
+    dialogSession.current += 1
+    requestSequence.current += 1
+    setOpen(false)
+    setLoading(false)
+    setCreating(false)
+    setActionKey(undefined)
+    setIssuedLink(undefined)
+    setRecords([])
+    setTotal(0)
+    setPage(1)
+    currentPage.current = 1
+  }
+
+  useImperativeHandle(ref, () => ({
+    /** 打开邀请管理弹窗并读取第一页最新记录。 */
+    show: () => {
+      dialogSession.current += 1
+      requestSequence.current += 1
+      currentPage.current = 1
+      setRecords([])
+      setTotal(0)
+      setIssuedLink(undefined)
+      setPage(1)
+      setLoading(false)
+      setCreating(false)
+      setActionKey(undefined)
+      setOpen(true)
+      void loadInvitations(1)
+    },
+    hide,
+  }))
+
+  return (
+    <Modal
+      title={
+        <Space>
+          <MailOutlined />
+          <span>{tr('邀请企业成员')}</span>
+        </Space>
+      }
+      open={open}
+      width={920}
+      destroyOnHidden
+      footer={<Button onClick={hide}>{tr('关闭')}</Button>}
+      onCancel={hide}
+    >
+      <Alert
+        type="info"
+        showIcon
+        title={tr('邀请链接不绑定账号')}
+        description={tr('获得链接的人可在登录后主动确认加入企业；每条链接只可成功使用一次。')}
+        style={{ marginBottom: 16 }}
+      />
+
+      {issuedLink && (
+        <Alert
+          type="warning"
+          showIcon
+          icon={<LinkOutlined />}
+          title={tr('请立即复制本次生成的链接')}
+          description={
+            <Space direction="vertical" size={8} style={{ width: '100%' }}>
+              <Typography.Text type="secondary">
+                {tr('出于安全考虑，关闭弹窗后无法再次查看此链接；需要时请重发生成新链接。')}
+              </Typography.Text>
+              <Space.Compact block>
+                <Input.TextArea value={issuedLink} readOnly autoSize={{ minRows: 1, maxRows: 3 }} />
+                <Button icon={<CopyOutlined />} onClick={() => void copyIssuedLink()}>
+                  {tr('复制链接')}
+                </Button>
+              </Space.Compact>
+            </Space>
+          }
+          style={{ marginBottom: 16 }}
+        />
+      )}
+
+      <Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 12 }}>
+        <Typography.Title level={5} style={{ margin: 0 }}>
+          {tr('邀请记录')}
+        </Typography.Title>
+        <Button
+          type="primary"
+          icon={<MailOutlined />}
+          loading={creating}
+          onClick={() => void createInvitation()}
+        >
+          {tr('创建邀请链接')}
+        </Button>
+      </Space>
+
+      <InvitationRecordsTable
+        records={records}
+        loading={loading}
+        page={page}
+        total={total}
+        actionKey={actionKey}
+        onPageChange={(targetPage) => void loadInvitations(targetPage)}
+        onAction={(action) => void runInvitationAction(action)}
+      />
+    </Modal>
+  )
+}