#1235 - fixed reordering logic using drag and drop. refactoring.

src/common/model/reports/WebDashboard.js

@@ -1,11 +1,16 @@
 import _ from "lodash";
 import WebDashboardSection from "./WebDashboardSection";
+import CollectionUtil from "../../utils/CollectionUtil";
 
 class WebDashboard {
   static createNew() {
     return { name: "", description: "", sections: [], filters: [] };
   }
 
+  static getSections(dashboard) {
+    return _.sortBy(dashboard.sections.filter(x => !x.voided), "displayOrder");
+  }
+
   static removeSection(dashboard, section) {
     const dashboardSection = _.find(dashboard.sections, x => x.uuid === section.uuid);
     dashboardSection.voided = true;
@@ -20,10 +25,7 @@ class WebDashboard {
   }
 
   static reOrderSections(dashboard, sourceIndex, destIndex) {
-    const result = [...dashboard.sections];
-    const [removed] = result.splice(sourceIndex, 1);
-    result.splice(destIndex, 0, removed);
-    dashboard.sections = result;
+    CollectionUtil.switchItemPosition(dashboard.sections, sourceIndex, destIndex, "displayOrder");
     return { ...dashboard };
   }
 

src/common/model/reports/WebDashboardSection.js

@@ -1,12 +1,21 @@
 import { ModelGeneral as General } from "openchs-models";
 import _ from "lodash";
 import WebDashboardSectionCardMapping from "./WebDashboardSectionCardMapping";
+import CollectionUtil from "../../utils/CollectionUtil";
 
 class WebDashboardSection {
   dashboardSectionCardMappings;
 
+  static getReportCardMappings(section) {
+    return _.sortBy(section.dashboardSectionCardMappings.filter(x => !x.voided), "displayOrder");
+  }
+
   static getReportCards(section) {
-    return section.dashboardSectionCardMappings.filter(x => !x.voided).map(x => x.card);
+    return WebDashboardSection.getReportCardMappings(section).map(x => x.card);
+  }
+
+  static getReportCardMapping(section, cardId) {
+    return _.find(section.dashboardSectionCardMappings, x => x.card.id === cardId);
   }
 
   static newSection() {
@@ -24,15 +33,14 @@ class WebDashboardSection {
   static removeCard(section, card) {
     const mapping = _.find(section.dashboardSectionCardMappings, x => x.card.uuid === card.uuid);
     mapping.voided = true;
+    mapping.displayOrder = -1;
     section.dashboardSectionCardMappings = [...section.dashboardSectionCardMappings];
     return { ...section };
   }
 
   static reorderCards(section, startIndex, endIndex) {
-    const result = [...section.dashboardSectionCardMappings];
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-    section.dashboardSectionCardMappings = result;
+    const reportCardMappings = WebDashboardSection.getReportCardMappings(section);
+    CollectionUtil.switchItemPosition(reportCardMappings, startIndex, endIndex, "displayOrder");
     return { ...section };
   }
 
@@ -48,10 +56,7 @@ class WebDashboardSection {
       ) + 1;
 
     cards.forEach(card => {
-      section.dashboardSectionCardMappings.push({
-        card: card,
-        displayOrder: nextDisplayOrder
-      });
+      section.dashboardSectionCardMappings.push(WebDashboardSectionCardMapping.newCard(card, nextDisplayOrder));
       nextDisplayOrder++;
     });
 

src/common/model/reports/WebDashboardSection.test.js

@@ -0,0 +1,38 @@
+import WebDashboardSection from "./WebDashboardSection";
+import WebDashboardSectionCardMapping from "./WebDashboardSectionCardMapping";
+import WebReportCardFactory from "./WebReportCardFactory";
+import { assert } from "chai";
+
+it("should reorder cards down to up", function() {
+  const section = {
+    dashboardSectionCardMappings: [
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 2 }), 1),
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 3 }), 2),
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 1 }), 3),
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 4 }), 4)
+    ]
+  };
+
+  const reOrderedSection = WebDashboardSection.reorderCards(section, 2, 1);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 2).displayOrder, 1);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 1).displayOrder, 2);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 3).displayOrder, 3);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 4).displayOrder, 4);
+});
+
+it("should reorder cards up to down", function() {
+  const section = {
+    dashboardSectionCardMappings: [
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 2 }), 1),
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 3 }), 2),
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 1 }), 3),
+      WebDashboardSectionCardMapping.newCard(WebReportCardFactory.create({ id: 4 }), 4)
+    ]
+  };
+
+  const reOrderedSection = WebDashboardSection.reorderCards(section, 1, 2);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 2).displayOrder, 1);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 1).displayOrder, 2);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 3).displayOrder, 3);
+  assert.equal(WebDashboardSection.getReportCardMapping(reOrderedSection, 4).displayOrder, 4);
+});

src/common/model/reports/WebDashboardSectionCardMapping.js

@@ -1,4 +1,12 @@
 class WebDashboardSectionCardMapping {
+  static newCard(card, displayOrder) {
+    return {
+      card: card,
+      displayOrder: displayOrder,
+      voided: false
+    };
+  }
+
   static toResources(dashboardSectionCardMappings) {
     return dashboardSectionCardMappings.map(dashboardSectionCardMapping => {
       return {

src/common/model/reports/WebReportCardFactory.js

@@ -0,0 +1,13 @@
+import WebReportCard from "../WebReportCard";
+
+class WebReportCardFactory {
+  static create({ id, uuid, name }) {
+    const webReportCard = new WebReportCard();
+    webReportCard.id = id;
+    webReportCard.uuid = uuid;
+    webReportCard.name = name;
+    return webReportCard;
+  }
+}
+
+export default WebReportCardFactory;

src/common/service/DashboardService.js

@@ -1,8 +1,7 @@
-import { find, isEmpty, sortBy } from "lodash";
+import { find, isEmpty } from "lodash";
 import http from "../utils/httpClient";
-import { DashboardFilterConfig, GroupSubjectTypeFilter, ObservationBasedFilter, CustomFilter } from "openchs-models";
+import { CustomFilter, DashboardFilterConfig, GroupSubjectTypeFilter, ObservationBasedFilter } from "openchs-models";
 import EntityService from "./EntityService";
-import _ from "lodash";
 import WebReportCard from "../model/WebReportCard";
 import WebStandardReportCardType from "../model/WebStandardReportCardType";
 import WebDashboard from "../model/reports/WebDashboard";
@@ -51,10 +50,6 @@ class DashboardService {
 
   static mapDashboardFromResource(dashboardResponse, operationalModules) {
     const dashboard = { ...dashboardResponse };
-    _.forEach(dashboard.sections, section => {
-      section.cards = sortBy(section.cards, "displayOrder");
-    });
-
     dashboard.filters = dashboardResponse.filters.map(x => {
       const filter = { ...x };
       const filterConfig = new DashboardFilterConfig();
@@ -113,6 +108,10 @@ class DashboardService {
     const methodName = card.isNew() ? "post" : "put";
     return http[methodName](url, card.toResource());
   }
+
+  static getAllReportCards() {
+    return http.get(`/web/reportCard`).then(res => res.data);
+  }
 }
 
 export default DashboardService;

src/common/utils/CollectionUtil.js

@@ -11,6 +11,26 @@ class CollectionUtil {
       {}
     );
   }
+
+  static switchItemPosition(array, startIndex, endIndex, fieldToUpdate) {
+    const workingItems = [...array];
+    let removedElement;
+    array.forEach((mapping, index) => {
+      if (index === startIndex) {
+        removedElement = _.pullAt(workingItems, index)[0];
+      }
+    });
+
+    array.forEach((mapping, index) => {
+      if (index === endIndex) {
+        workingItems.splice(index, 0, removedElement);
+      }
+    });
+
+    workingItems.forEach((item, index) => {
+      item[fieldToUpdate] = index + 1;
+    });
+  }
 }
 
 export default CollectionUtil;

src/formDesigner/common/ResourceShowView.js

@@ -17,9 +17,10 @@ const ResourceShowView = ({
   render,
   mapResource = _.identity,
   userInfo,
-  editPrivilegeType
+  editPrivilegeType,
+  defaultResource
 }) => {
-  const [resource, setResource] = React.useState({});
+  const [resource, setResource] = React.useState(defaultResource);
   const [editAlert, setEditAlert] = useState(false);
 
   useEffect(() => {

src/formDesigner/components/Dashboard/CreateEditDashboard.js

@@ -80,7 +80,10 @@ const CreateEditDashboard = ({ edit, history, operationalModules, getOperational
 
   const onSave = () => {
     const errors = DashboardService.validate(dashboard);
-    if (!isEmpty(errors)) setError(errors);
+    if (!isEmpty(errors)) {
+      setError(errors);
+      return;
+    }
 
     DashboardService.save(dashboard, edit, props.match.params.id)
       .then(data => setId(data.id))
@@ -141,7 +144,7 @@ const CreateEditDashboard = ({ edit, history, operationalModules, getOperational
           {getErrorByKey(error, "EMPTY_SECTIONS")}
         </Grid>
         <Grid item>
-          <CreateEditDashboardSections sections={dashboard.sections} dispatch={dispatch} history={history} error={error} />
+          <CreateEditDashboardSections sections={WebDashboard.getSections(dashboard)} dispatch={dispatch} history={history} error={error} />
         </Grid>
         {getErrorByKey(error, "EMPTY_CARDS")}
         <br />

src/formDesigner/components/Dashboard/CreateEditDashboardSectionCards.js

@@ -6,6 +6,7 @@ import { isEmpty } from "lodash";
 import { DragNDropComponent } from "../../common/DragNDropComponent";
 import PropTypes from "prop-types";
 import WebDashboardSection from "../../../common/model/reports/WebDashboardSection";
+import { dashboardReducerActions } from "./DashboardReducer";
 
 class CreateEditDashboardSectionCards extends Component {
   constructor(props) {
@@ -15,15 +16,17 @@ class CreateEditDashboardSectionCards extends Component {
 
   static propTypes = {
     section: PropTypes.object.isRequired,
-    sectionUpdated: PropTypes.func.isRequired
+    dispatch: PropTypes.func.isRequired
   };
 
   onDragEnd(result) {
     if (!result.destination) {
       return;
     }
-    const section = WebDashboardSection.reorderCards(this.props.section, result.source.index, result.destination.index);
-    this.props.sectionUpdated(section);
+    this.props.dispatch({
+      type: dashboardReducerActions.reorderCards,
+      payload: { section: this.props.section, startIndex: result.source.index, endIndex: result.destination.index }
+    });
   }
 
   renderCard(card) {