အနှစ်ချုပ်
ChangeLog သည် audit / activity timeline အတွက် shared UI ဖြစ်ပါသည်။ Feed တိုင်းကို pluginName + reference.prefix + reference.number ဖြင့် scope လုပ်ရပါသည် — backend ChangeLogService က ရေးသည့်အခါ သုံးသော တူညီသော သုံးခုဖြစ်ပါသည်။
- ChangeLog နှင့် hooks များကို @quan-erp/base-frontend မှ import လုပ်ရပါသည်
- reference.prefix — entity အမျိုးအစား (ဥပမာ SO, EMP, INV)
- reference.number — record id / code ကို string အဖြစ်
- Entry များ ပေါ်ရန် backend တွင် ChangeLogService.addChangeLog ကို ခေါ်ရပါသည်
1. ChangeLog component
Detail page (သို့မဟုတ် tab) ပေါ်တွင် component ကို ထည့်ရပါသည်။ သက်ဆိုင်ရာ reference အတွက် feed ကို တင်သွင်းပြသပေးပါသည်။
- Signature: ({ pluginName, reference: { prefix, number } }) => ReactNode
- pluginName သည် backend တွင် log ရေးသည့်အခါ သုံးသော တန်ဖိုးနှင့် တူညီရပါသည်
- reference.number အတွက် အမြဲ String(id) ကို အသုံးပြုရပါသည်
TSXdetail page
1import { ChangeLog } from "@quan-erp/base-frontend";
2import metadata from "../../../module.metadata.json" with { type: "json" };
3
4export function SalesOrderDetail({ id }: { id: number }) {
5 return (
6 <ChangeLog
7 pluginName={metadata.name}
8 reference={{ prefix: "SO", number: String(id) }}
9 />
10 );
11}2. Query & mutation hooks
စံ ChangeLog component အစား ကိုယ်ပိုင် feed UI လိုအပ်သည့်အခါ ဤ hooks များကို အသုံးပြုရပါသည်။
- useChangeLogQuery(query, option?) — paginated list၊ query တွင် pluginName၊ referencePrefix၊ referenceNumber လိုအပ်ပြီး parentId ကို ရွေးချယ်နိုင်ပါသည်
- useInfiniteChangeLog(pluginName, referencePrefix, referenceNumber, limit?) — infinite scroll feed
- useReactChangeLogQuery() — reaction { reaction, reactBy, changeLogId } ထည့်ခြင်း
- useRemoveReactChangeLogQuery() — change-log id ဖြင့် reaction ဖယ်ရှားခြင်း
- clearChangeLogCache({ pluginName, reference, logId? }) — ရေးပြီးနောက် cache ကို invalidate လုပ်ခြင်း
TSXcustom query
1import {
2 useChangeLogQuery,
3 useReactChangeLogQuery,
4 clearChangeLogCache,
5} from "@quan-erp/base-frontend";
6
7const { data: logs = [] } = useChangeLogQuery({
8 pluginName: metadata.name,
9 referencePrefix: "SO",
10 referenceNumber: String(orderId),
11 currentPage: 1,
12 pageSize: 20,
13});
14
15const react = useReactChangeLogQuery();
16await react.mutateAsync({
17 reaction: "👍",
18 reactBy: currentUserId,
19 changeLogId: logs[0].id,
20});
21
22clearChangeLogCache({
23 pluginName: metadata.name,
24 reference: { prefix: "SO", number: String(orderId) },
25});3. Result shape
Hooks မှ ပြန်ရသော entry များသည် GetChangeLogDto ပုံစံကို လိုက်နာပါသည်။
TSGetChangeLogDto (shape)
1interface GetChangeLogDto {
2 id: number;
3 message: string;
4 createdBy: UserDto;
5 isCreatedBySystem: boolean;
6 pluginName: string;
7 referencePrefix: string;
8 referenceNumber: string;
9 createDate: string;
10 reactions: ChangeLogReaction[];
11}
12
13interface ChangeLogReaction {
14 id: number;
15 reaction: string;
16 reactBy: UserDto;
17}4. Backend pairing
UI သည် ChangeLogService က မှတ်တမ်းတင်ထားသည်ကိုသာ ပြသပါသည်။ Create / update / status ပြောင်းလဲမှုများတွင် <ChangeLog /> သို့ ပေးသော တူညီသော pluginName / referencePrefix / referenceNumber ဖြင့် addChangeLog ကို ခေါ်ရပါသည်။
- Documentation → Backend → Builtin Services → ChangeLogService ကို ကြည့်ရပါသည်
- prefix / number / pluginName မကိုက်ညီပါက feed ဗလာ ဖြစ်ပါသည်
- အခြား client မှ server-side ရေးပြီးနောက် ကြာရှည်ဖွင့်ထားသော view အတွက် clearChangeLogCache ကို ခေါ်သင့်ပါသည်
အရေးကြီးသော စည်းကမ်းများ
- @quan-erp/base-frontend မှ import လုပ်ရပါသည် — shared-ui မဟုတ်ပါ
- Frontend reference နှင့် backend reference field များ တူညီရပါသည်
- reference.number သည် အမြဲ string ဖြစ်ရပါသည်
- စံ timeline အတွက် <ChangeLog /> ကို ဦးစားပေးပြီး၊ custom layout အတွက်သာ hooks သုံးပါ
- ChangeLogService က ဖုံးလွှမ်းပြီးသား use case အတွက် plugin-local activity table အသစ် မဖန်တီးရပါ
Checklist
- သက်ဆိုင်ရာ mutation များတွင် backend addChangeLog ခေါ်ထားရပါသည်
- Detail page တွင် <ChangeLog pluginName reference /> ပြသရပါသည်
- prefix / number သည် backend ရေးသားမှုနှင့် ကိုက်ညီရပါသည်
- ရွေးချယ်နိုင် — useReactChangeLogQuery ဖြင့် reactions
- ERP UI တွင် create / update ပြီးနောက် feed ကို စစ်ဆေးရပါသည်
အဖြစ်များသော ပြဿနာများ
- Feed ဗလာ — backend က log မရေးသေးခြင်း၊ သို့မဟုတ် pluginName / prefix / number မကိုက်ညီခြင်း
- Import error — ChangeLog သည် @quan-erp/shared-ui ပေါ်တွင် မရှိပါ
- Stale list — ပြင်ပမှ ရေးပြီးနောက် clearChangeLogCache မခေါ်ခြင်း
- Reaction မရ — reactBy / changeLogId ပျောက်နေခြင်း သို့မဟုတ် permission မရှိခြင်း
- မှားသော record ၏ မှတ်တမ်း — number ကို String(id) မလုပ်ခြင်း သို့မဟုတ် prefix မှားခြင်း