The table of contents has been simplified by removing the ability to choose which content items appear (#859)

Author: denisquesada

backend/src/lib/factories/dashboard-factory.ts

@@ -36,19 +36,25 @@ function createNew(
   };
 }
 
-function createDraftFromDashboard(
+function createNewFromDashboard(
   dashboard: Dashboard,
-  user: User,
-  version: number
+  id: string,
+  name: string,
+  version: number,
+  parentDashboardId: string,
+  user: User
 ): Dashboard {
-  const id = uuidv4();
-
   let widgets: Array<Widget> = [];
+  const tableOfContents: { [key: string]: boolean } = {};
   if (dashboard.widgets) {
     // Duplicate all widgets related to this dashboard
-    widgets = dashboard.widgets.map((widget) =>
-      WidgetFactory.createFromWidget(id, widget)
-    );
+    widgets = dashboard.widgets.map((widget) => {
+      const newWidget = WidgetFactory.createFromWidget(id, widget);
+      if (dashboard.tableOfContents) {
+        tableOfContents[newWidget.id] = dashboard.tableOfContents[widget.id];
+      }
+      return newWidget;
+    });
     for (const widget of widgets) {
       if (widget.section) {
         const sectionIndex = dashboard.widgets.findIndex(
@@ -69,13 +75,13 @@ function createDraftFromDashboard(
 
   return {
     id,
-    name: dashboard.name,
-    version: version,
-    parentDashboardId: dashboard.parentDashboardId,
+    name,
+    version,
+    parentDashboardId,
     topicAreaId: dashboard.topicAreaId,
     topicAreaName: dashboard.topicAreaName,
     displayTableOfContents: dashboard.displayTableOfContents,
-    tableOfContents: dashboard.tableOfContents,
+    tableOfContents,
     description: dashboard.description,
     state: DashboardState.Draft,
     createdBy: user.userId,
@@ -86,53 +92,26 @@ function createDraftFromDashboard(
   };
 }
 
+function createDraftFromDashboard(
+  dashboard: Dashboard,
+  user: User,
+  version: number
+): Dashboard {
+  return createNewFromDashboard(
+    dashboard,
+    uuidv4(),
+    dashboard.name,
+    version,
+    dashboard.parentDashboardId,
+    user
+  );
+}
+
 function createCopyFromDashboard(dashboard: Dashboard, user: User): Dashboard {
   const id = uuidv4();
-
-  // Copy all widgets associated with the dashboard.
-  let widgets: Array<Widget> = [];
-  if (dashboard.widgets) {
-    widgets = dashboard.widgets.map((widget) =>
-      WidgetFactory.createFromWidget(id, widget)
-    );
-    for (const widget of widgets) {
-      if (widget.section) {
-        const sectionIndex = dashboard.widgets.findIndex(
-          (w) => w.id === widget.section
-        );
-        widget.section = widgets[sectionIndex].id;
-      }
-      if (widget.content && widget.content.widgetIds) {
-        const widgetIds: string[] = [];
-        for (const id of widget.content.widgetIds) {
-          const widgetIndex = dashboard.widgets.findIndex((w) => w.id === id);
-          widgetIds.push(widgets[widgetIndex].id);
-        }
-        widget.content.widgetIds = widgetIds;
-      }
-    }
-  }
-
-  return {
-    id,
-    name: "Copy of " + dashboard.name,
-    version: 1,
-    parentDashboardId: id,
-    topicAreaId: dashboard.topicAreaId,
-    topicAreaName: dashboard.topicAreaName,
-    displayTableOfContents: dashboard.displayTableOfContents,
-    tableOfContents: dashboard.tableOfContents,
-    description: dashboard.description,
-    state: DashboardState.Draft,
-    createdBy: user.userId,
-    updatedAt: new Date(),
-    updatedBy: user.userId,
-    submittedBy: undefined,
-    publishedBy: undefined,
-    archivedBy: undefined,
-    widgets,
-    friendlyURL: undefined,
-  };
+  const name = "Copy of " + dashboard.name;
+  const version = 1;
+  return createNewFromDashboard(dashboard, id, name, version, id, user);
 }
 
 /**

backend/src/lib/models/dashboard.ts

@@ -29,6 +29,10 @@ export interface Dashboard {
   topicAreaId: string;
   topicAreaName: string;
   displayTableOfContents: boolean;
+  /**
+   * @type {any}
+   * @deprecated no longer supported
+   */
   tableOfContents?: any;
   description: string;
   createdBy: string;

frontend/src/App.tsx

@@ -11,7 +11,6 @@ import HomeWithSearch from "./containers/HomeWithSearch";
 import DashboardListing from "./containers/DashboardListing";
 import CreateDashboard from "./containers/CreateDashboard";
 import EditDetails from "./containers/EditDetails";
-import EditTableOfContents from "./containers/EditTableOfContents";
 import AddContent from "./containers/AddContent";
 import EditDashboard from "./containers/EditDashboard";
 import DashboardHistory from "./containers/DashboardHistory";
@@ -201,11 +200,6 @@ function App() {
       title: t("PageTitle.EditDashboardHeader"),
       component: EditDetails,
     },
-    {
-      path: "/admin/dashboard/edit/:dashboardId/tableofcontents",
-      title: t("PageTitle.EditTableOfContents"),
-      component: EditTableOfContents,
-    },
     {
       path: "/admin/dashboard/:dashboardId/edit-table/:widgetId",
       title: t("PageTitle.EditTable"),

frontend/src/containers/EditDetails.tsx

@@ -55,15 +55,6 @@ function EditDetails() {
   const topicAreaId = watch("topicAreaId");
   const displayTableOfContents = watch("displayTableOfContents");
 
-  useEffect(() => {
-    const routeTableOfContents = (history.location.state as any)
-      ?.tableOfContents;
-    if (dashboard && routeTableOfContents) {
-      dashboard.displayTableOfContents = true;
-      dashboard.tableOfContents = routeTableOfContents;
-    }
-  }, [dashboard, history.location.state]);
-
   useEffect(() => {
     if (dashboard) {
       const name = dashboard.name;
@@ -117,12 +108,6 @@ function EditDetails() {
     return topicareas.find((t) => t.id === topicAreaId)?.name || "";
   };
 
-  const onTableOfContentsEdit = () => {
-    history.push(`/admin/dashboard/edit/${dashboardId}/tableofcontents`, {
-      tableOfContents: dashboard?.tableOfContents,
-    });
-  };
-
   const onCancel = () => {
     history.push(`/admin/dashboard/edit/${dashboardId}`);
   };
@@ -234,15 +219,6 @@ function EditDetails() {
                           </label>
                         </div>
                       </div>
-                      <div className="grid-col text-right">
-                        <Button
-                          variant="outline"
-                          disabled={!displayTableOfContents}
-                          onClick={onTableOfContentsEdit}
-                        >
-                          {t("Edit")}
-                        </Button>
-                      </div>
                     </div>
                   </div>