xpyjs / gantt

An easy-to-use Gantt component. 持续更新,中文文档
https://docs.xiaopangying.com/gantt/
MIT License
243 stars 41 forks source link

[BUG] I create startDate and endDate in rowtable, but when i change data in table, data not update, therefor data in gantt is old data #81

Closed dat16720 closed 5 months ago

dat16720 commented 5 months ago

[BUG] I create startDate and endDate in rowtable, but when i change data in table, data not update, therefor data in gantt is old data

jeremyjone commented 5 months ago

paste your minimum reproduction code

dat16720 commented 5 months ago
    I change data in collumn and refetch data, but new data not update, so row in <template #default="{ row }"> is old data
        `<XGanttColumn prop="timeline" :merge="merge5" width="100">
            <template #title="data">
                <div>
                    title timeline
                </div>
            </template>
            <template #default="{ row }">
                <div v-show="!row.phaseId">
                    <!-- timeline={{ fromDate: detailProject?.fromDate, toDate: detailProject?.toDate }} -->
                    <FieldRangeDate
                        :placeholder="['DD/MM/YYYY', 'DD/MM/YYYY']"
                        :value="{ fromDate: row?.startDate, toDate: handleEndDate(row?.endDateAdd) }"
                        :onSubmit="(value) => handleUpdateFieldValue(row._id, 'timeline', value)"
                    />
                </div>
            </template>
        </XGanttColumn>`
jeremyjone commented 5 months ago
  I change data in collumn and refetch data, but new data not update, so row in <template #default="{ row }"> is old data
      `<XGanttColumn prop="timeline" :merge="merge5" width="100">
          <template #title="data">
              <div>
                  title timeline
              </div>
          </template>
          <template #default="{ row }">
              <div v-show="!row.phaseId">
                  <!-- timeline={{ fromDate: detailProject?.fromDate, toDate: detailProject?.toDate }} -->
                  <FieldRangeDate
                      :placeholder="['DD/MM/YYYY', 'DD/MM/YYYY']"
                      :value="{ fromDate: row?.startDate, toDate: handleEndDate(row?.endDateAdd) }"
                      :onSubmit="(value) => handleUpdateFieldValue(row._id, 'timeline', value)"
                  />
              </div>
          </template>
      </XGanttColumn>`

reload data

dat16720 commented 5 months ago

yes reload data, but it not work. I realize this code in useInView, i think problem, but i don't know how to fix

watch( () => [top.value, bottom.value, store.$data.flatData], () => { for (let i = inView.length - 1; i >= 0; i--) { if ( inView[i].hide || inView[i].flatIndex <= top.value || inView[i].flatIndex >= bottom.value || store.$data.flatData[inView[i].flatIndex].id !== inView[i].id ) { inView.splice(i, 1); } } for (let i = top.value; i < bottom.value; i++) { if (!~inView.findIndex((v) => v.flatIndex === i)) { const oldIndex = inView.findIndex((v) => v.flatIndex === store.$data.flatData[i].flatIndex); if (~oldIndex) { inView.splice(oldIndex, 1, store.$data.flatData[i]); } else { inView.push(store.$data.flatData[i]); } } } }, );

 if i try this code, reRender all, The screen will flicker,
 `watch(
    () => [top.value, bottom.value, store.$data.flatData],
    () => {
        for (let i = inView.length - 1; i >= 0; i--) {
            if (
                inView[i].hide ||
                inView[i].flatIndex <= top.value ||
                inView[i].flatIndex >= bottom.value ||
                store.$data.flatData[inView[i].flatIndex].id !== inView[i].id
            ) {
                inView.splice(i, 1);
            }
        }

        for (let i = top.value; i < bottom.value; i++) {
            const dataIndex = store.$data.flatData[i].flatIndex;
            const existingIndex = inView.findIndex((v) => v.flatIndex === dataIndex);
            if (existingIndex !== -1) {
                inView.splice(existingIndex, 1, store.$data.flatData[i]);
            } else {
                inView.push(store.$data.flatData[i]);
            }
        }
    },
);`  
jeremyjone commented 5 months ago

yes reload data, but it not work. I realize this code in useInView, i think problem, but i don't know how to fix

watch( () => [top.value, bottom.value, store.$data.flatData], () => { for (let i = inView.length - 1; i >= 0; i--) { if ( inView[i].hide || inView[i].flatIndex <= top.value || inView[i].flatIndex >= bottom.value || store.$data.flatData[inView[i].flatIndex].id !== inView[i].id ) { inView.splice(i, 1); } } for (let i = top.value; i < bottom.value; i++) { if (!~inView.findIndex((v) => v.flatIndex === i)) { const oldIndex = inView.findIndex((v) => v.flatIndex === store.$data.flatData[i].flatIndex); if (~oldIndex) { inView.splice(oldIndex, 1, store.$data.flatData[i]); } else { inView.push(store.$data.flatData[i]); } } } }, );

 if i try this code, reRender all, The screen will flicker,
 `watch(
  () => [top.value, bottom.value, store.$data.flatData],
  () => {
      for (let i = inView.length - 1; i >= 0; i--) {
          if (
              inView[i].hide ||
              inView[i].flatIndex <= top.value ||
              inView[i].flatIndex >= bottom.value ||
              store.$data.flatData[inView[i].flatIndex].id !== inView[i].id
          ) {
              inView.splice(i, 1);
          }
      }

      for (let i = top.value; i < bottom.value; i++) {
          const dataIndex = store.$data.flatData[i].flatIndex;
          const existingIndex = inView.findIndex((v) => v.flatIndex === dataIndex);
          if (existingIndex !== -1) {
              inView.splice(existingIndex, 1, store.$data.flatData[i]);
          } else {
              inView.push(store.$data.flatData[i]);
          }
      }
  },
);`    

This code no problem in my env and who uses it. If you have some minimum reproduction code, I can test it.