@zeniai/client-epic-state 5.2.76 → 5.2.78

package/lib/esm/view/invoicing/createInvoice/createInvoiceFormConfig.js

@@ -41,6 +41,16 @@ export const createInvoiceFormLocalDataToRequest = (localData) => {
         quantity: toQuantity(line.quantity),
         tax_amount: line.taxAmount.amount,
         unit_amount: line.unitAmount.amount,
+        ...(line.catalogLine != null
+            ? {
+                entity_id: line.catalogLine.entityId,
+                entity_type: line.catalogLine.entityType,
+                is_taxed: line.catalogLine.isTaxed,
+                ...(line.catalogLine.isTaxed
+                    ? {}
+                    : { tax_exempt_reason: 'not_taxable' }),
+            }
+            : {}),
     }));
     const invoiceDate = localData.invoiceDate != null && localData.invoiceDate !== ''
         ? localData.invoiceDate

package/lib/esm/view/invoicing/createInvoice/createInvoiceSelector.js

@@ -73,6 +73,12 @@ export const getCreateInvoiceFormView = (state) => {
         planNames: catalogListView.plans.flatMap((plan) => (plan.subFamilies ?? [])
             .filter((subFamily) => (subFamily.name ?? '') !== '')
             .map((subFamily) => ({
+            // A price point with no flag is taxable, as subscription billing reads it.
+            catalogLine: {
+                entityId: subFamily.id,
+                entityType: plan.itemType ?? 'plan',
+                isTaxed: subFamily.isTaxable ?? true,
+            },
             planName: plan.name ?? '',
             price: planNamePrefillPrice(subFamily),
             subFamilyName: subFamily.name ?? '',

package/lib/esm/view/taskManager/taskDetailView/epics/fetchTaskDetailEpic.js

@@ -1,17 +1,24 @@
 import recordGet from 'lodash/get';
-import { concat, from, of } from 'rxjs';
+import isEqual from 'lodash/isEqual';
+import { EMPTY, concat, from, of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { openSnackbar } from '../../../../entity/snackbar/snackbarReducer';
 import { updateTags } from '../../../../entity/tag/tagReducer';
+import { mapTaskPayloadToTask } from '../../../../entity/task/taskPayload';
 import { updateTasks } from '../../../../entity/task/taskReducer';
+import { getTaskById } from '../../../../entity/task/taskSelector';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
 import { fetchFileList } from '../../../fileView/fileViewReducer';
-import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, updateEditTaskFetchStatus, } from '../taskDetailReducer';
+import { buildTaskDetailLocalData, isLoadedTaskDetail, rebaseTaskDetailLocalData, } from '../taskDetailLocalData';
+import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, saveTaskUpdatesToLocalStore, updateEditTaskFetchStatus, } from '../taskDetailReducer';
 export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchTaskDetail.match), mergeMap((action) => {
     const { taskId, cacheOverride } = action.payload;
     const taskActions = [];
     const state = state$.value;
     const taskDetail = recordGet(state.taskDetailState.editTaskStateById, taskId, undefined);
+    if (cacheOverride === true && isLoadedTaskDetail(taskDetail)) {
+        return refreshLoadedTaskDetail(taskId, state$, zeniAPI);
+    }
     if (cacheOverride === true) {
         taskActions.push(removeTaskDetail(taskId));
     }
@@ -20,7 +27,7 @@ export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(
         taskDetail.fetchTaskStatus.fetchState !== 'In-Progress') {
         taskActions.push(updateEditTaskFetchStatus({ taskId, fetchState: 'In-Progress' }));
         const getTaskDetail$ = zeniAPI
-            .getJSON(`${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks/${taskId}`)
+            .getJSON(getTaskDetailUrl(zeniAPI, taskId))
             .pipe(mergeMap((response) => {
             if (isSuccessResponse(response) && response.data != null) {
                 const fetchActions = [
@@ -38,44 +45,7 @@ export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(
                 }
                 return from(fetchActions);
             }
-            else {
-                const fetchActions = [
-                    updateEditTaskFetchStatus({
-                        taskId,
-                        fetchState: 'Error',
-                        error: response.status,
-                    }),
-                ];
-                if (response.status.message.includes('delete')) {
-                    fetchActions.push(openSnackbar({
-                        messageSection: 'fetch_task_detail',
-                        messageText: 'failed',
-                        type: 'error',
-                        showStatusIcon: true,
-                        variables: [
-                            {
-                                variableName: '_api-error_',
-                                variableValue: 'Cannot retrieve deleted task.',
-                            },
-                        ],
-                    }));
-                }
-                else {
-                    fetchActions.push(openSnackbar({
-                        messageSection: 'fetch_task_detail',
-                        messageText: 'failed',
-                        type: 'error',
-                        showStatusIcon: true,
-                        variables: [
-                            {
-                                variableName: '_api-error_',
-                                variableValue: response.status.message,
-                            },
-                        ],
-                    }));
-                }
-                return from(fetchActions);
-            }
+            return from(getFetchFailureActions(taskId, response.status));
         }), catchError((error) => {
             console.error(`REST API call errored out ${error}`);
             return of(updateEditTaskFetchStatus({
@@ -91,3 +61,74 @@ export const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe(
         return from(taskActions);
     }
 }));
+const getTaskDetailUrl = (zeniAPI, taskId) => `${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks/${taskId}`;
+const getFetchFailureActions = (taskId, status) => [
+    updateEditTaskFetchStatus({ taskId, fetchState: 'Error', error: status }),
+    openSnackbar({
+        messageSection: 'fetch_task_detail',
+        messageText: 'failed',
+        type: 'error',
+        showStatusIcon: true,
+        variables: [
+            {
+                variableName: '_api-error_',
+                variableValue: status.message.includes('delete')
+                    ? 'Cannot retrieve deleted task.'
+                    : status.message,
+            },
+        ],
+    }),
+];
+// An unparseable token is never treated as stale, so the refresh still applies.
+const isOlderSyncToken = (candidate, stored) => {
+    const candidateTime = Date.parse(candidate ?? '');
+    const storedTime = Date.parse(stored);
+    return (!Number.isNaN(candidateTime) &&
+        !Number.isNaN(storedTime) &&
+        candidateTime < storedTime);
+};
+const isSaveInProgress = (state, taskId) => state.taskDetailState.editTaskStateById[taskId]?.saveStatus.fetchState ===
+    'In-Progress';
+// Live refresh of an open page: no reset or loading state, unsaved edits kept,
+// skipped during the user's own save, stale responses dropped.
+const refreshLoadedTaskDetail = (taskId, state$, zeniAPI) => {
+    if (isSaveInProgress(state$.value, taskId)) {
+        return EMPTY;
+    }
+    return zeniAPI
+        .getJSON(getTaskDetailUrl(zeniAPI, taskId))
+        .pipe(mergeMap((response) => {
+        if (!isSuccessResponse(response) || response.data == null) {
+            return from(getFetchFailureActions(taskId, response.status));
+        }
+        const state = state$.value;
+        const taskPayload = response.data.tasks.find((task) => task.task_id === taskId);
+        const storedTask = getTaskById(state.taskState, taskId);
+        const taskDetail = state.taskDetailState.editTaskStateById[taskId];
+        if (taskPayload == null ||
+            storedTask == null ||
+            taskDetail == null ||
+            isSaveInProgress(state, taskId) ||
+            isOlderSyncToken(taskPayload.sync_token, storedTask.syncToken)) {
+            return EMPTY;
+        }
+        const refreshedTask = mapTaskPayloadToTask(taskPayload, storedTask);
+        const actions = [
+            updateTasks(response.data.tasks),
+            updateTags(response.data.tasks.map((task) => task.tags).flat()),
+            saveTaskUpdatesToLocalStore({
+                taskId,
+                taskDetailLocalData: rebaseTaskDetailLocalData(taskDetail.taskDetailLocalData, buildTaskDetailLocalData(storedTask), buildTaskDetailLocalData(refreshedTask)),
+            }),
+        ];
+        if (refreshedTask.fileIds.length > 0 &&
+            !isEqual(refreshedTask.fileIds, storedTask.fileIds)) {
+            actions.push(fetchFileList(refreshedTask.fileIds));
+        }
+        return from(actions);
+    }), catchError((error) => {
+        // Keep the page on screen; the next update or reload recovers.
+        console.error(`Task detail refresh errored out ${error}`);
+        return EMPTY;
+    }));
+};

package/lib/esm/view/taskManager/taskDetailView/epics/fetchTaskDetailPageEpic.js

@@ -2,12 +2,20 @@ import { concat, from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
 import { fetchClassList } from '../../../classList/classListReducer';
 import { fetchUserListByType } from '../../../userListView/userListViewReducer';
+import { isLoadedTaskDetail } from '../taskDetailLocalData';
 import { fetchTaskDetail, fetchTaskDetailPage, fetchTaskHistory, } from '../taskDetailReducer';
 export const fetchTaskDetailPageEpic = (actions$, state$) => actions$.pipe(filter(fetchTaskDetailPage.match), mergeMap((action) => {
     const { cacheOverride, taskId } = action.payload;
     const taskDetailActions = [];
     const state = state$.value;
-    if (cacheOverride === true) {
+    if (cacheOverride === true &&
+        taskId != null &&
+        isLoadedTaskDetail(state.taskDetailState.editTaskStateById[taskId])) {
+        // Only the task changes on a live refresh; the list refetches would show the skeleton.
+        taskDetailActions.push(fetchTaskDetail(taskId, true));
+        taskDetailActions.push(fetchTaskHistory(taskId, true));
+    }
+    else if (cacheOverride === true) {
         taskDetailActions.push(fetchUserListByType('taskManagerCandidate', true));
         taskDetailActions.push(fetchClassList());
         if (taskId != null) {

package/lib/esm/view/taskManager/taskDetailView/epics/initializeTaskToLocalStoreEpic.js

@@ -1,35 +1,14 @@
 import recordGet from 'lodash/get';
 import { from } from 'rxjs';
 import { filter, mergeMap } from 'rxjs/operators';
+import { buildTaskDetailLocalData } from '../taskDetailLocalData';
 import { initializeTaskToLocalStore, saveTaskUpdatesToLocalStore, updateEditTaskFetchStatus, } from '../taskDetailReducer';
 export const initializeTaskToLocalStoreEpic = (actions$, state$) => actions$.pipe(filter(initializeTaskToLocalStore.match), mergeMap((action) => {
     const { taskId } = action.payload;
     const state = state$.value;
     const task = recordGet(state.taskState.taskByID, taskId, undefined);
     if (task != null) {
-        const taskDetailLocalData = {
-            name: task.name,
-            description: task.description,
-            status: task.status.code,
-            assignee: task.assignees,
-            groupAssignees: task.groupAssignees,
-            dueDate: task.dueDate,
-            priority: task.priority.code,
-            tagIds: task.tagIds,
-            fileIds: task.fileIds,
-            type: task.type,
-            recurringFrequency: task.recurringFrequency,
-            recurringDaysOfWeek: task.recurringDaysOfWeek,
-            recurringEndDateLocalData: {
-                recurringDatePickerOptionsType: 'date', // by default, date would be selected
-                recurringEndDate: task.recurringEndDate,
-            },
-            savedRecurringEndDate: task.recurringEndDate,
-            recurringStartDate: task.recurringStartDate,
-            timeSpent: task.timeSpent,
-            isPrivate: task.isPrivate,
-            taskGroupId: task.taskGroupIds[0],
-        };
+        const taskDetailLocalData = buildTaskDetailLocalData(task);
         const actions = [
             saveTaskUpdatesToLocalStore({ taskDetailLocalData, taskId }),
             updateEditTaskFetchStatus({ taskId, fetchState: 'Completed' }),

package/lib/esm/view/taskManager/taskDetailView/taskDetailLocalData.js

@@ -0,0 +1,36 @@
+import isEqual from 'lodash/isEqual';
+export const buildTaskDetailLocalData = (task) => ({
+    name: task.name,
+    description: task.description,
+    status: task.status.code,
+    assignee: task.assignees,
+    groupAssignees: task.groupAssignees,
+    dueDate: task.dueDate,
+    priority: task.priority.code,
+    tagIds: task.tagIds,
+    fileIds: task.fileIds,
+    type: task.type,
+    recurringFrequency: task.recurringFrequency,
+    recurringDaysOfWeek: task.recurringDaysOfWeek,
+    recurringEndDateLocalData: {
+        recurringDatePickerOptionsType: 'date', // by default, date would be selected
+        recurringEndDate: task.recurringEndDate,
+    },
+    savedRecurringEndDate: task.recurringEndDate,
+    recurringStartDate: task.recurringStartDate,
+    timeSpent: task.timeSpent,
+    isPrivate: task.isPrivate,
+    taskGroupId: task.taskGroupIds[0],
+});
+// Untouched fields (still equal to `baseline`) take the server value; edited ones keep the user's.
+export const rebaseTaskDetailLocalData = (local, baseline, fresh) => {
+    const rebased = { ...fresh };
+    const keys = Object.keys({ ...local, ...fresh });
+    keys.forEach((key) => {
+        if (!isEqual(local[key], baseline[key])) {
+            Object.assign(rebased, { [key]: local[key] });
+        }
+    });
+    return rebased;
+};
+export const isLoadedTaskDetail = (taskDetail) => taskDetail?.fetchTaskStatus.fetchState === 'Completed';

package/lib/esm/view/taskManager/taskDetailView/taskDetailReducer.js

@@ -4,6 +4,7 @@ import { clearAll } from '../../../rootActions';
 import { initialCommonHistory } from '../../spendManagement/commonHistoryView/commonHistory';
 import { toHistoricEvent, } from '../../spendManagement/commonHistoryView/commonHistoryPayload';
 import { initialTaskDetail, } from './taskDetail';
+import { isLoadedTaskDetail } from './taskDetailLocalData';
 export const initialState = {
     newTaskState: initialTaskDetail,
     editTaskStateById: {},
@@ -23,9 +24,11 @@ const taskDetailView = createSlice({
                 const { taskId } = action.payload;
                 if (taskId != null) {
                     const detail = recordGet(draft.editTaskStateById, taskId, undefined);
-                    if (action.payload.cacheOverride === true ||
-                        detail == null ||
-                        detail.fetchTaskStatus.fetchState !== 'In-Progress') {
+                    const isRefresh = action.payload.cacheOverride === true && isLoadedTaskDetail(detail);
+                    if (!isRefresh &&
+                        (action.payload.cacheOverride === true ||
+                            detail == null ||
+                            detail.fetchTaskStatus.fetchState !== 'In-Progress')) {
                         draft.editTaskStateById[taskId] = {
                             ...initialTaskDetail,
                         };
@@ -350,6 +353,11 @@ const taskDetailView = createSlice({
         fetchSubTasks: {
             reducer(draft, action) {
                 const { parentTaskId } = action.payload;
+                // Only the first load reports In-Progress; it gates the detail page skeleton.
+                if (draft.subTaskListFetchStatusByParentId[parentTaskId]?.fetchState ===
+                    'Completed') {
+                    return;
+                }
                 draft.subTaskListFetchStatusByParentId[parentTaskId] = {
                     fetchState: 'In-Progress',
                     error: undefined,

package/lib/index.d.ts

@@ -1088,7 +1088,7 @@ export { getInvoiceDetail } from './view/invoicing/invoiceDetail/invoiceDetailSe
 export type { InvoiceDetailView } from './view/invoicing/invoiceDetail/invoiceDetailSelector';
 export { createInvoice, fetchCreateInvoiceFormPage, resetCreateInvoice, updateInvoicingCreateInvoiceFormDraft, } from './view/invoicing/createInvoice/createInvoiceReducer';
 export type { CreateInvoiceLineItemRequest, CreateInvoiceRequest, } from './view/invoicing/createInvoice/createInvoicePayload';
-export type { InvoicingCreateInvoiceFormLineItem, InvoicingCreateInvoiceFormLocalData, } from './view/invoicing/createInvoice/createInvoiceState';
+export type { InvoicingCreateInvoiceCatalogLine, InvoicingCreateInvoiceFormLineItem, InvoicingCreateInvoiceFormLocalData, } from './view/invoicing/createInvoice/createInvoiceState';
 export { blankInvoicingCreateInvoiceLineItem, createInvoiceFormLocalDataToRequest, initialInvoicingCreateInvoiceFormLocalData, } from './view/invoicing/createInvoice/createInvoiceFormConfig';
 export { resetRecordPayment, initializeRecordPaymentDraft, submitRecordPayment, updateRecordPaymentFormDraft, } from './view/invoicing/recordPayment/recordPaymentReducer';
 export { initializeIssueCreditNoteDraft, issueCreditNoteFailure, issueCreditNoteSuccess, resetIssueCreditNote, submitIssueCreditNote, updateIssueCreditNoteFormDraft, } from './view/invoicing/issueCreditNote/issueCreditNoteReducer';

package/lib/view/invoicing/createInvoice/createInvoiceFormConfig.js

@@ -45,6 +45,16 @@ const createInvoiceFormLocalDataToRequest = (localData) => {
         quantity: toQuantity(line.quantity),
         tax_amount: line.taxAmount.amount,
         unit_amount: line.unitAmount.amount,
+        ...(line.catalogLine != null
+            ? {
+                entity_id: line.catalogLine.entityId,
+                entity_type: line.catalogLine.entityType,
+                is_taxed: line.catalogLine.isTaxed,
+                ...(line.catalogLine.isTaxed
+                    ? {}
+                    : { tax_exempt_reason: 'not_taxable' }),
+            }
+            : {}),
     }));
     const invoiceDate = localData.invoiceDate != null && localData.invoiceDate !== ''
         ? localData.invoiceDate

package/lib/view/invoicing/createInvoice/createInvoicePayload.d.ts

@@ -5,7 +5,11 @@ export interface CreateInvoiceLineItemRequest {
     description: string;
     quantity: number;
     unit_amount: number;
+    entity_id?: string;
+    entity_type?: string;
+    is_taxed?: boolean;
     tax_amount?: number;
+    tax_exempt_reason?: string;
 }
 /** Request body for creating an invoice; mirrors the Invoicing backend. */
 export interface CreateInvoiceRequest {

package/lib/view/invoicing/createInvoice/createInvoiceSelector.d.ts

@@ -4,7 +4,7 @@ import { Address } from '../../../entity/address/addressState';
 import { InvoicingCatalogPricePoint } from '../../../entity/invoicing/invoicingCatalog/invoicingCatalogState';
 import { InvoicingFieldHelpByCode, InvoicingSettingsPayload } from '../../../entity/invoicing/invoicingCommonPayload';
 import { RootState } from '../../../rootStateTypes';
-import { InvoicingCreateInvoiceFormLocalData } from './createInvoiceState';
+import { InvoicingCreateInvoiceCatalogLine, InvoicingCreateInvoiceFormLocalData } from './createInvoiceState';
 /**
  * One catalog plan price, split into its two naming parts so consumers can
  * compose the label themselves (the plan family name and the price point/price
@@ -18,6 +18,7 @@ import { InvoicingCreateInvoiceFormLocalData } from './createInvoiceState';
  * produce a plausible-looking wrong total. Those lines start unpriced.
  */
 export interface InvoicingPlanNameOption {
+    catalogLine: InvoicingCreateInvoiceCatalogLine;
     planName: string;
     subFamilyName: string;
     price?: number;

package/lib/view/invoicing/createInvoice/createInvoiceSelector.js

@@ -76,6 +76,12 @@ const getCreateInvoiceFormView = (state) => {
         planNames: catalogListView.plans.flatMap((plan) => (plan.subFamilies ?? [])
             .filter((subFamily) => (subFamily.name ?? '') !== '')
             .map((subFamily) => ({
+            // A price point with no flag is taxable, as subscription billing reads it.
+            catalogLine: {
+                entityId: subFamily.id,
+                entityType: plan.itemType ?? 'plan',
+                isTaxed: subFamily.isTaxable ?? true,
+            },
             planName: plan.name ?? '',
             price: planNamePrefillPrice(subFamily),
             subFamilyName: subFamily.name ?? '',

package/lib/view/invoicing/createInvoice/createInvoiceState.d.ts

@@ -1,6 +1,15 @@
 import { Amount } from '../../../commonStateTypes/amount';
 import { FetchedState, ID } from '../../../commonStateTypes/common';
 import { CreateInvoiceRequest } from './createInvoicePayload';
+/**
+ * The catalog price point a line was picked from, so the invoice line links to
+ * it and takes its taxability, the way subscription billing builds its lines.
+ */
+export interface InvoicingCreateInvoiceCatalogLine {
+    entityId: ID;
+    entityType: string;
+    isTaxed: boolean;
+}
 /**
  * A single line item in the create-invoice form draft. Amounts are USD values
  * (whole units, e.g. dollars) held via the `Amount` interface — never minor
@@ -11,6 +20,8 @@ export interface InvoicingCreateInvoiceFormLineItem {
     quantity: string;
     taxAmount: Amount;
     unitAmount: Amount;
+    /** Unset for a typed description, which the backend taxes by default. */
+    catalogLine?: InvoicingCreateInvoiceCatalogLine;
 }
 /**
  * Draft form state for the create-invoice form. Held in CES so the form flows

package/lib/view/taskManager/taskDetailView/epics/fetchTaskDetailEpic.d.ts

@@ -6,6 +6,6 @@ import { updateTasks } from '../../../../entity/task/taskReducer';
 import { RootState } from '../../../../rootStateTypes';
 import { ZeniAPI } from '../../../../zeniAPI';
 import { fetchFileList } from '../../../fileView/fileViewReducer';
-import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, updateEditTaskFetchStatus } from '../taskDetailReducer';
-export type ActionType = ReturnType<typeof fetchTaskDetail> | ReturnType<typeof updateTags> | ReturnType<typeof updateEditTaskFetchStatus> | ReturnType<typeof removeTaskDetail> | ReturnType<typeof updateTasks> | ReturnType<typeof initializeTaskToLocalStore> | ReturnType<typeof fetchFileList> | ReturnType<typeof openSnackbar>;
+import { fetchTaskDetail, initializeTaskToLocalStore, removeTaskDetail, saveTaskUpdatesToLocalStore, updateEditTaskFetchStatus } from '../taskDetailReducer';
+export type ActionType = ReturnType<typeof fetchTaskDetail> | ReturnType<typeof updateTags> | ReturnType<typeof updateEditTaskFetchStatus> | ReturnType<typeof removeTaskDetail> | ReturnType<typeof updateTasks> | ReturnType<typeof initializeTaskToLocalStore> | ReturnType<typeof saveTaskUpdatesToLocalStore> | ReturnType<typeof fetchFileList> | ReturnType<typeof openSnackbar>;
 export declare const fetchTaskDetailEpic: (actions$: ActionsObservable<ActionType>, state$: StateObservable<RootState>, zeniAPI: ZeniAPI) => Observable<ActionType>;

package/lib/view/taskManager/taskDetailView/epics/fetchTaskDetailEpic.js

@@ -5,19 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchTaskDetailEpic = void 0;
 const get_1 = __importDefault(require("lodash/get"));
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const snackbarReducer_1 = require("../../../../entity/snackbar/snackbarReducer");
 const tagReducer_1 = require("../../../../entity/tag/tagReducer");
+const taskPayload_1 = require("../../../../entity/task/taskPayload");
 const taskReducer_1 = require("../../../../entity/task/taskReducer");
+const taskSelector_1 = require("../../../../entity/task/taskSelector");
 const responsePayload_1 = require("../../../../responsePayload");
 const fileViewReducer_1 = require("../../../fileView/fileViewReducer");
+const taskDetailLocalData_1 = require("../taskDetailLocalData");
 const taskDetailReducer_1 = require("../taskDetailReducer");
 const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(taskDetailReducer_1.fetchTaskDetail.match), (0, operators_1.mergeMap)((action) => {
     const { taskId, cacheOverride } = action.payload;
     const taskActions = [];
     const state = state$.value;
     const taskDetail = (0, get_1.default)(state.taskDetailState.editTaskStateById, taskId, undefined);
+    if (cacheOverride === true && (0, taskDetailLocalData_1.isLoadedTaskDetail)(taskDetail)) {
+        return refreshLoadedTaskDetail(taskId, state$, zeniAPI);
+    }
     if (cacheOverride === true) {
         taskActions.push((0, taskDetailReducer_1.removeTaskDetail)(taskId));
     }
@@ -26,7 +33,7 @@ const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, ope
         taskDetail.fetchTaskStatus.fetchState !== 'In-Progress') {
         taskActions.push((0, taskDetailReducer_1.updateEditTaskFetchStatus)({ taskId, fetchState: 'In-Progress' }));
         const getTaskDetail$ = zeniAPI
-            .getJSON(`${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks/${taskId}`)
+            .getJSON(getTaskDetailUrl(zeniAPI, taskId))
             .pipe((0, operators_1.mergeMap)((response) => {
             if ((0, responsePayload_1.isSuccessResponse)(response) && response.data != null) {
                 const fetchActions = [
@@ -44,44 +51,7 @@ const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, ope
                 }
                 return (0, rxjs_1.from)(fetchActions);
             }
-            else {
-                const fetchActions = [
-                    (0, taskDetailReducer_1.updateEditTaskFetchStatus)({
-                        taskId,
-                        fetchState: 'Error',
-                        error: response.status,
-                    }),
-                ];
-                if (response.status.message.includes('delete')) {
-                    fetchActions.push((0, snackbarReducer_1.openSnackbar)({
-                        messageSection: 'fetch_task_detail',
-                        messageText: 'failed',
-                        type: 'error',
-                        showStatusIcon: true,
-                        variables: [
-                            {
-                                variableName: '_api-error_',
-                                variableValue: 'Cannot retrieve deleted task.',
-                            },
-                        ],
-                    }));
-                }
-                else {
-                    fetchActions.push((0, snackbarReducer_1.openSnackbar)({
-                        messageSection: 'fetch_task_detail',
-                        messageText: 'failed',
-                        type: 'error',
-                        showStatusIcon: true,
-                        variables: [
-                            {
-                                variableName: '_api-error_',
-                                variableValue: response.status.message,
-                            },
-                        ],
-                    }));
-                }
-                return (0, rxjs_1.from)(fetchActions);
-            }
+            return (0, rxjs_1.from)(getFetchFailureActions(taskId, response.status));
         }), (0, operators_1.catchError)((error) => {
             console.error(`REST API call errored out ${error}`);
             return (0, rxjs_1.of)((0, taskDetailReducer_1.updateEditTaskFetchStatus)({
@@ -98,3 +68,74 @@ const fetchTaskDetailEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, ope
     }
 }));
 exports.fetchTaskDetailEpic = fetchTaskDetailEpic;
+const getTaskDetailUrl = (zeniAPI, taskId) => `${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks/${taskId}`;
+const getFetchFailureActions = (taskId, status) => [
+    (0, taskDetailReducer_1.updateEditTaskFetchStatus)({ taskId, fetchState: 'Error', error: status }),
+    (0, snackbarReducer_1.openSnackbar)({
+        messageSection: 'fetch_task_detail',
+        messageText: 'failed',
+        type: 'error',
+        showStatusIcon: true,
+        variables: [
+            {
+                variableName: '_api-error_',
+                variableValue: status.message.includes('delete')
+                    ? 'Cannot retrieve deleted task.'
+                    : status.message,
+            },
+        ],
+    }),
+];
+// An unparseable token is never treated as stale, so the refresh still applies.
+const isOlderSyncToken = (candidate, stored) => {
+    const candidateTime = Date.parse(candidate ?? '');
+    const storedTime = Date.parse(stored);
+    return (!Number.isNaN(candidateTime) &&
+        !Number.isNaN(storedTime) &&
+        candidateTime < storedTime);
+};
+const isSaveInProgress = (state, taskId) => state.taskDetailState.editTaskStateById[taskId]?.saveStatus.fetchState ===
+    'In-Progress';
+// Live refresh of an open page: no reset or loading state, unsaved edits kept,
+// skipped during the user's own save, stale responses dropped.
+const refreshLoadedTaskDetail = (taskId, state$, zeniAPI) => {
+    if (isSaveInProgress(state$.value, taskId)) {
+        return rxjs_1.EMPTY;
+    }
+    return zeniAPI
+        .getJSON(getTaskDetailUrl(zeniAPI, taskId))
+        .pipe((0, operators_1.mergeMap)((response) => {
+        if (!(0, responsePayload_1.isSuccessResponse)(response) || response.data == null) {
+            return (0, rxjs_1.from)(getFetchFailureActions(taskId, response.status));
+        }
+        const state = state$.value;
+        const taskPayload = response.data.tasks.find((task) => task.task_id === taskId);
+        const storedTask = (0, taskSelector_1.getTaskById)(state.taskState, taskId);
+        const taskDetail = state.taskDetailState.editTaskStateById[taskId];
+        if (taskPayload == null ||
+            storedTask == null ||
+            taskDetail == null ||
+            isSaveInProgress(state, taskId) ||
+            isOlderSyncToken(taskPayload.sync_token, storedTask.syncToken)) {
+            return rxjs_1.EMPTY;
+        }
+        const refreshedTask = (0, taskPayload_1.mapTaskPayloadToTask)(taskPayload, storedTask);
+        const actions = [
+            (0, taskReducer_1.updateTasks)(response.data.tasks),
+            (0, tagReducer_1.updateTags)(response.data.tasks.map((task) => task.tags).flat()),
+            (0, taskDetailReducer_1.saveTaskUpdatesToLocalStore)({
+                taskId,
+                taskDetailLocalData: (0, taskDetailLocalData_1.rebaseTaskDetailLocalData)(taskDetail.taskDetailLocalData, (0, taskDetailLocalData_1.buildTaskDetailLocalData)(storedTask), (0, taskDetailLocalData_1.buildTaskDetailLocalData)(refreshedTask)),
+            }),
+        ];
+        if (refreshedTask.fileIds.length > 0 &&
+            !(0, isEqual_1.default)(refreshedTask.fileIds, storedTask.fileIds)) {
+            actions.push((0, fileViewReducer_1.fetchFileList)(refreshedTask.fileIds));
+        }
+        return (0, rxjs_1.from)(actions);
+    }), (0, operators_1.catchError)((error) => {
+        // Keep the page on screen; the next update or reload recovers.
+        console.error(`Task detail refresh errored out ${error}`);
+        return rxjs_1.EMPTY;
+    }));
+};

package/lib/view/taskManager/taskDetailView/epics/fetchTaskDetailPageEpic.js

@@ -5,12 +5,20 @@ const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const classListReducer_1 = require("../../../classList/classListReducer");
 const userListViewReducer_1 = require("../../../userListView/userListViewReducer");
+const taskDetailLocalData_1 = require("../taskDetailLocalData");
 const taskDetailReducer_1 = require("../taskDetailReducer");
 const fetchTaskDetailPageEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(taskDetailReducer_1.fetchTaskDetailPage.match), (0, operators_1.mergeMap)((action) => {
     const { cacheOverride, taskId } = action.payload;
     const taskDetailActions = [];
     const state = state$.value;
-    if (cacheOverride === true) {
+    if (cacheOverride === true &&
+        taskId != null &&
+        (0, taskDetailLocalData_1.isLoadedTaskDetail)(state.taskDetailState.editTaskStateById[taskId])) {
+        // Only the task changes on a live refresh; the list refetches would show the skeleton.
+        taskDetailActions.push((0, taskDetailReducer_1.fetchTaskDetail)(taskId, true));
+        taskDetailActions.push((0, taskDetailReducer_1.fetchTaskHistory)(taskId, true));
+    }
+    else if (cacheOverride === true) {
         taskDetailActions.push((0, userListViewReducer_1.fetchUserListByType)('taskManagerCandidate', true));
         taskDetailActions.push((0, classListReducer_1.fetchClassList)());
         if (taskId != null) {

package/lib/view/taskManager/taskDetailView/epics/initializeTaskToLocalStoreEpic.js

@@ -7,35 +7,14 @@ exports.initializeTaskToLocalStoreEpic = void 0;
 const get_1 = __importDefault(require("lodash/get"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
+const taskDetailLocalData_1 = require("../taskDetailLocalData");
 const taskDetailReducer_1 = require("../taskDetailReducer");
 const initializeTaskToLocalStoreEpic = (actions$, state$) => actions$.pipe((0, operators_1.filter)(taskDetailReducer_1.initializeTaskToLocalStore.match), (0, operators_1.mergeMap)((action) => {
     const { taskId } = action.payload;
     const state = state$.value;
     const task = (0, get_1.default)(state.taskState.taskByID, taskId, undefined);
     if (task != null) {
-        const taskDetailLocalData = {
-            name: task.name,
-            description: task.description,
-            status: task.status.code,
-            assignee: task.assignees,
-            groupAssignees: task.groupAssignees,
-            dueDate: task.dueDate,
-            priority: task.priority.code,
-            tagIds: task.tagIds,
-            fileIds: task.fileIds,
-            type: task.type,
-            recurringFrequency: task.recurringFrequency,
-            recurringDaysOfWeek: task.recurringDaysOfWeek,
-            recurringEndDateLocalData: {
-                recurringDatePickerOptionsType: 'date', // by default, date would be selected
-                recurringEndDate: task.recurringEndDate,
-            },
-            savedRecurringEndDate: task.recurringEndDate,
-            recurringStartDate: task.recurringStartDate,
-            timeSpent: task.timeSpent,
-            isPrivate: task.isPrivate,
-            taskGroupId: task.taskGroupIds[0],
-        };
+        const taskDetailLocalData = (0, taskDetailLocalData_1.buildTaskDetailLocalData)(task);
         const actions = [
             (0, taskDetailReducer_1.saveTaskUpdatesToLocalStore)({ taskDetailLocalData, taskId }),
             (0, taskDetailReducer_1.updateEditTaskFetchStatus)({ taskId, fetchState: 'Completed' }),

package/lib/view/taskManager/taskDetailView/taskDetailLocalData.d.ts

@@ -0,0 +1,5 @@
+import { Task } from '../../../entity/task/taskState';
+import { EditTaskDetail, EditTaskLocalData } from './taskDetail';
+export declare const buildTaskDetailLocalData: (task: Task) => EditTaskLocalData;
+export declare const rebaseTaskDetailLocalData: (local: EditTaskLocalData, baseline: EditTaskLocalData, fresh: EditTaskLocalData) => EditTaskLocalData;
+export declare const isLoadedTaskDetail: (taskDetail: EditTaskDetail | undefined) => taskDetail is EditTaskDetail;

package/lib/view/taskManager/taskDetailView/taskDetailLocalData.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isLoadedTaskDetail = exports.rebaseTaskDetailLocalData = exports.buildTaskDetailLocalData = void 0;
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const buildTaskDetailLocalData = (task) => ({
+    name: task.name,
+    description: task.description,
+    status: task.status.code,
+    assignee: task.assignees,
+    groupAssignees: task.groupAssignees,
+    dueDate: task.dueDate,
+    priority: task.priority.code,
+    tagIds: task.tagIds,
+    fileIds: task.fileIds,
+    type: task.type,
+    recurringFrequency: task.recurringFrequency,
+    recurringDaysOfWeek: task.recurringDaysOfWeek,
+    recurringEndDateLocalData: {
+        recurringDatePickerOptionsType: 'date', // by default, date would be selected
+        recurringEndDate: task.recurringEndDate,
+    },
+    savedRecurringEndDate: task.recurringEndDate,
+    recurringStartDate: task.recurringStartDate,
+    timeSpent: task.timeSpent,
+    isPrivate: task.isPrivate,
+    taskGroupId: task.taskGroupIds[0],
+});
+exports.buildTaskDetailLocalData = buildTaskDetailLocalData;
+// Untouched fields (still equal to `baseline`) take the server value; edited ones keep the user's.
+const rebaseTaskDetailLocalData = (local, baseline, fresh) => {
+    const rebased = { ...fresh };
+    const keys = Object.keys({ ...local, ...fresh });
+    keys.forEach((key) => {
+        if (!(0, isEqual_1.default)(local[key], baseline[key])) {
+            Object.assign(rebased, { [key]: local[key] });
+        }
+    });
+    return rebased;
+};
+exports.rebaseTaskDetailLocalData = rebaseTaskDetailLocalData;
+const isLoadedTaskDetail = (taskDetail) => taskDetail?.fetchTaskStatus.fetchState === 'Completed';
+exports.isLoadedTaskDetail = isLoadedTaskDetail;

package/lib/view/taskManager/taskDetailView/taskDetailReducer.js

@@ -11,6 +11,7 @@ const rootActions_1 = require("../../../rootActions");
 const commonHistory_1 = require("../../spendManagement/commonHistoryView/commonHistory");
 const commonHistoryPayload_1 = require("../../spendManagement/commonHistoryView/commonHistoryPayload");
 const taskDetail_1 = require("./taskDetail");
+const taskDetailLocalData_1 = require("./taskDetailLocalData");
 exports.initialState = {
     newTaskState: taskDetail_1.initialTaskDetail,
     editTaskStateById: {},
@@ -30,9 +31,11 @@ const taskDetailView = (0, toolkit_1.createSlice)({
                 const { taskId } = action.payload;
                 if (taskId != null) {
                     const detail = (0, get_1.default)(draft.editTaskStateById, taskId, undefined);
-                    if (action.payload.cacheOverride === true ||
-                        detail == null ||
-                        detail.fetchTaskStatus.fetchState !== 'In-Progress') {
+                    const isRefresh = action.payload.cacheOverride === true && (0, taskDetailLocalData_1.isLoadedTaskDetail)(detail);
+                    if (!isRefresh &&
+                        (action.payload.cacheOverride === true ||
+                            detail == null ||
+                            detail.fetchTaskStatus.fetchState !== 'In-Progress')) {
                         draft.editTaskStateById[taskId] = {
                             ...taskDetail_1.initialTaskDetail,
                         };
@@ -357,6 +360,11 @@ const taskDetailView = (0, toolkit_1.createSlice)({
         fetchSubTasks: {
             reducer(draft, action) {
                 const { parentTaskId } = action.payload;
+                // Only the first load reports In-Progress; it gates the detail page skeleton.
+                if (draft.subTaskListFetchStatusByParentId[parentTaskId]?.fetchState ===
+                    'Completed') {
+                    return;
+                }
                 draft.subTaskListFetchStatusByParentId[parentTaskId] = {
                     fetchState: 'In-Progress',
                     error: undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.2.76",
+  "version": "5.2.78",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",