feat(Missions): Makes it possible to reorder timeline items within a …

…timeline step. Closes #1977.
Thorium-Sim · Nov 30, 2021 · 0216ed4 · 0216ed4
1 parent 1b0b877
commit 0216ed4
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 46 deletions.
diff --git a/server/classes/mission.ts b/server/classes/mission.ts
@@ -89,6 +89,29 @@ export default class Mission {
       newOrder,
     );
   }
+  reorderTimelineItem(timelineStepId, timelineItemId, newOrder: number) {
+    function move<T>(array: T[], old_index: number, new_index: number) {
+      if (new_index >= array.length) {
+        var k = new_index - array.length;
+        while (k-- + 1) {
+          array.push(undefined);
+        }
+      }
+      array.splice(new_index, 0, array.splice(old_index, 1)[0]);
+      return array; // for testing purposes
+    }
+
+    this.timeline.map(t => {
+      if (t.id === timelineStepId) {
+        t.timelineItems = move(
+          t.timelineItems,
+          t.timelineItems.findIndex(i => i.id === timelineItemId),
+          newOrder,
+        );
+      }
+      return t;
+    });
+  }
   updateTimelineStep(timelineStepId, timelineStep) {
     const timeline = this.timeline.find(t => t.id === timelineStepId);
     timeline.update(timelineStep);

diff --git a/server/events/timeline.js b/server/events/timeline.js
@@ -51,6 +51,16 @@ App.on(
     pubsub.publish("simulatorsUpdate", App.simulators);
   },
 );
+App.on(
+  "reorderTimelineItem",
+  ({simulatorId, missionId, timelineStepId, timelineItemId, order}) => {
+    const object = getTimelineObject(simulatorId, missionId);
+    object.reorderTimelineItem(timelineStepId, timelineItemId, order);
+
+    pubsub.publish("missionsUpdate", App.missions);
+    pubsub.publish("simulatorsUpdate", App.simulators);
+  },
+);
 App.on(
   "updateTimelineStep",
   ({simulatorId, missionId, timelineStepId, name, description}) => {

diff --git a/server/typeDefs/mission.ts b/server/typeDefs/mission.ts
@@ -102,6 +102,13 @@ const schema = gql`
       timelineStepId: ID!
       order: Int!
     ): String
+    reorderTimelineItem(
+      simulatorId: ID
+      missionId: ID
+      timelineStepId: ID!
+      timelineItemId: ID!
+      order: Int!
+    ): String
     updateTimelineStep(
       simulatorId: ID
       missionId: ID

diff --git a/server/typeDefs/stealthField.ts b/server/typeDefs/stealthField.ts
@@ -198,7 +198,6 @@ const resolver = {
         "stealthFieldUpdate",
         App.systems.filter(s => s.type === "StealthField"),
       );
-      console.log("changed alert", id, change);
       pubsub.publish("simulatorsUpdate", App.simulators);
     },
     stealthSensorsSonar(rootValue, {id, sonar}) {

diff --git a/src/containers/FlightDirector/MissionConfig/TimelineConfig.tsx b/src/containers/FlightDirector/MissionConfig/TimelineConfig.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {ReactNode} from "react";
 import {
   Col,
   Row,
@@ -22,8 +22,10 @@ import {
   useTimelineAddItemMutation,
   useTimelineRemoveItemMutation,
   useTimelineDuplicateItemMutation,
+  useTimelineReorderItemMutation,
   Mission,
   TimelineStep,
+  TimelineItem,
   Station,
   Client,
 } from "generated/graphql";
@@ -36,34 +38,20 @@ const sortableContainer = SortableContainer;
 const SortableItem = sortableElement(
   ({
     item,
-    selectedTimelineStep,
-    setSelectedTimelineStep,
+    renderItem,
   }: {
-    item: TimelineStep;
-    selectedTimelineStep: string | null;
-    setSelectedTimelineStep: (id: string) => void;
-  }) => (
-    <li
-      key={`${item.id}-timelineStep`}
-      onClick={() => setSelectedTimelineStep(item.id)}
-      className={`${
-        item.id === selectedTimelineStep ? "selected" : ""
-      } list-group-item`}
-    >
-      {item.name}
-    </li>
-  ),
+    item: TimelineStep | TimelineItem;
+    renderItem: (item: TimelineStep | TimelineItem) => any;
+  }) => renderItem(item),
 );
 
 const SortableList = sortableContainer(
   ({
     items,
-    setSelectedTimelineStep,
-    selectedTimelineStep,
+    renderItem,
   }: {
-    items: TimelineStep[];
-    setSelectedTimelineStep: (id: string) => void;
-    selectedTimelineStep: string | null;
+    items: (TimelineStep | TimelineItem)[];
+    renderItem: (item: TimelineStep | TimelineItem) => ReactNode;
   }) => {
     return (
       <ul style={{padding: 0}}>
@@ -73,8 +61,7 @@ const SortableList = sortableContainer(
               key={`${item.id}-timelineStep`}
               index={index}
               item={item}
-              selectedTimelineStep={selectedTimelineStep}
-              setSelectedTimelineStep={setSelectedTimelineStep}
+              renderItem={renderItem}
             />
           );
         })}
@@ -269,6 +256,7 @@ const TimelineConfig: React.FC<TimelineConfigProps> = ({
 
   const [updateStepMutation] = useTimelineUpdateStepMutation();
   const [reorderStepMutation] = useTimelineReorderStepMutation();
+  const [reorderItemMutation] = useTimelineReorderItemMutation();
   const [removeItemMutation] = useTimelineRemoveItemMutation();
 
   const setSelectedTimelineStep = (stepId: string | null) => {
@@ -326,6 +314,28 @@ const TimelineConfig: React.FC<TimelineConfigProps> = ({
   const selectedStep = mission.timeline.find(
     e => e.id === selectedTimelineStep,
   );
+
+  const onItemSortEnd = ({
+    oldIndex,
+    newIndex,
+  }: {
+    oldIndex: number;
+    newIndex: number;
+  }) => {
+    if (oldIndex === newIndex) {
+      setSelectedTimelineItemAction(
+        selectedStep?.timelineItems[oldIndex]?.id || null,
+      );
+    } else {
+      const variables = {
+        timelineStepId: selectedStep?.id || "",
+        timelineItemId: selectedStep?.timelineItems[oldIndex]?.id || "",
+        order: newIndex,
+        missionId: mission.id,
+      };
+      reorderItemMutation({variables});
+    }
+  };
   return (
     <Row>
       <Col sm="3">
@@ -340,8 +350,17 @@ const TimelineConfig: React.FC<TimelineConfigProps> = ({
           <SortableList
             items={mission.timeline}
             onSortEnd={onSortEnd}
-            selectedTimelineStep={selectedTimelineStep}
-            setSelectedTimelineStep={setSelectedTimelineStep}
+            renderItem={item => (
+              <li
+                key={`${item.id}-timelineStep`}
+                onClick={() => setSelectedTimelineStep(item.id)}
+                className={`${
+                  item.id === selectedTimelineStep ? "selected" : ""
+                } list-group-item`}
+              >
+                {item.name}
+              </li>
+            )}
           />
         </Card>
         <TimelineStepButtons
@@ -374,25 +393,29 @@ const TimelineConfig: React.FC<TimelineConfigProps> = ({
               >
                 Edit Step
               </li>
-              {selectedStep.timelineItems.map(e => {
-                return (
-                  <li
-                    key={`${selectedStep.id}-${e.id}`}
-                    onClick={() => setSelectedTimelineItemAction(e.id)}
-                    className={`${
-                      e.id === selectedTimelineItem ? "selected" : ""
-                    } list-group-item ${
-                      e.needsConfig ? "list-group-item-warning" : ""
-                    }`}
-                  >
-                    <EventName id={e.event} />{" "}
-                    <FaBan
-                      className="text-danger pull-right"
-                      onClick={evt => removeTimelineItem(e.id, evt)}
-                    />
-                  </li>
-                );
-              })}
+              <SortableList
+                items={selectedStep.timelineItems}
+                renderItem={e =>
+                  "needsConfig" in e ? (
+                    <li
+                      key={`${selectedStep.id}-${e.id}`}
+                      onClick={() => setSelectedTimelineItemAction(e.id)}
+                      className={`${
+                        e.id === selectedTimelineItem ? "selected" : ""
+                      } list-group-item ${
+                        e.needsConfig ? "list-group-item-warning" : ""
+                      }`}
+                    >
+                      <EventName id={e.event} />{" "}
+                      <FaBan
+                        className="text-danger pull-right"
+                        onClick={evt => removeTimelineItem(e.id, evt)}
+                      />
+                    </li>
+                  ) : null
+                }
+                onSortEnd={onItemSortEnd}
+              />
             </Card>
             <TimelineActionAdd
               mission={mission}

diff --git a/src/containers/FlightDirector/MissionConfig/queries/reorderTimelineItem.graphql b/src/containers/FlightDirector/MissionConfig/queries/reorderTimelineItem.graphql
@@ -0,0 +1,13 @@
+mutation TimelineReorderItem(
+  $missionId: ID
+  $timelineStepId: ID!
+  $timelineItemId: ID!
+  $order: Int!
+) {
+  reorderTimelineItem(
+    missionId: $missionId
+    timelineStepId: $timelineStepId
+    timelineItemId: $timelineItemId
+    order: $order
+  )
+}
diff --git a/src/generated/graphql.tsx b/src/generated/graphql.tsx
@@ -1073,6 +1073,7 @@ export type Mutation = {
   addTimelineStep?: Maybe<Scalars['ID']>;
   removeTimelineStep?: Maybe<Scalars['String']>;
   reorderTimelineStep?: Maybe<Scalars['String']>;
+  reorderTimelineItem?: Maybe<Scalars['String']>;
   updateTimelineStep?: Maybe<Scalars['String']>;
   addTimelineItemToTimelineStep?: Maybe<Scalars['String']>;
   removeTimelineStepItem?: Maybe<Scalars['String']>;
@@ -1136,7 +1137,20 @@ export type Mutation = {
   /** Macro: Systems: Flux Power */
   fluxSystemPower?: Maybe<Scalars['String']>;
   destroyProbe?: Maybe<Scalars['String']>;
+  /**
+   * Macro: Probes: Destroy All Probes
+   * Requires:
+   *  - Cards:ProbeNetwork
+   *  - Systems:Probes
+   */
   destroyAllProbes?: Maybe<Scalars['String']>;
+  /**
+   * Macro: Probes: Destroy Probe Network
+   * Requires:
+   *  - Cards:ProbeNetwork
+   *  - Systems:Probes
+   */
+  destroyAllProbeNetwork?: Maybe<Scalars['String']>;
   launchProbe?: Maybe<Scalars['String']>;
   fireProbe?: Maybe<Scalars['String']>;
   updateProbeType?: Maybe<Scalars['String']>;
@@ -3417,6 +3431,15 @@ export type MutationReorderTimelineStepArgs = {
 };
 
 
+export type MutationReorderTimelineItemArgs = {
+  simulatorId?: Maybe<Scalars['ID']>;
+  missionId?: Maybe<Scalars['ID']>;
+  timelineStepId: Scalars['ID'];
+  timelineItemId: Scalars['ID'];
+  order: Scalars['Int'];
+};
+
+
 export type MutationUpdateTimelineStepArgs = {
   simulatorId?: Maybe<Scalars['ID']>;
   missionId?: Maybe<Scalars['ID']>;
@@ -3711,6 +3734,11 @@ export type MutationDestroyAllProbesArgs = {
 };
 
 
+export type MutationDestroyAllProbeNetworkArgs = {
+  id: Scalars['ID'];
+};
+
+
 export type MutationLaunchProbeArgs = {
   id: Scalars['ID'];
   probe: ProbeInput;
@@ -8725,9 +8753,11 @@ export type ScienceProbeEvent = {
 };
 
 export type ProbeInput = {
+  id?: Maybe<Scalars['ID']>;
   name?: Maybe<Scalars['String']>;
   type?: Maybe<Scalars['ID']>;
   equipment?: Maybe<Array<Maybe<EquipmentInput>>>;
+  launched?: Maybe<Scalars['Boolean']>;
 };
 
 export type EquipmentInput = {
@@ -13343,6 +13373,19 @@ export type TimelineRemoveStepMutation = (
   & Pick<Mutation, 'removeTimelineStep'>
 );
 
+export type TimelineReorderItemMutationVariables = Exact<{
+  missionId?: Maybe<Scalars['ID']>;
+  timelineStepId: Scalars['ID'];
+  timelineItemId: Scalars['ID'];
+  order: Scalars['Int'];
+}>;
+
+
+export type TimelineReorderItemMutation = (
+  { __typename?: 'Mutation' }
+  & Pick<Mutation, 'reorderTimelineItem'>
+);
+
 export type TimelineReorderStepMutationVariables = Exact<{
   missionId?: Maybe<Scalars['ID']>;
   timelineStepId: Scalars['ID'];
@@ -17205,6 +17248,15 @@ export function useTimelineRemoveStepMutation(baseOptions?: ApolloReactHooks.Mut
         return ApolloReactHooks.useMutation<TimelineRemoveStepMutation, TimelineRemoveStepMutationVariables>(TimelineRemoveStepDocument, baseOptions);
       }
 export type TimelineRemoveStepMutationHookResult = ReturnType<typeof useTimelineRemoveStepMutation>;
+export const TimelineReorderItemDocument = gql`
+    mutation TimelineReorderItem($missionId: ID, $timelineStepId: ID!, $timelineItemId: ID!, $order: Int!) {
+  reorderTimelineItem(missionId: $missionId, timelineStepId: $timelineStepId, timelineItemId: $timelineItemId, order: $order)
+}
+    `;
+export function useTimelineReorderItemMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<TimelineReorderItemMutation, TimelineReorderItemMutationVariables>) {
+        return ApolloReactHooks.useMutation<TimelineReorderItemMutation, TimelineReorderItemMutationVariables>(TimelineReorderItemDocument, baseOptions);
+      }
+export type TimelineReorderItemMutationHookResult = ReturnType<typeof useTimelineReorderItemMutation>;
 export const TimelineReorderStepDocument = gql`
     mutation TimelineReorderStep($missionId: ID, $timelineStepId: ID!, $order: Int!) {
   reorderTimelineStep(missionId: $missionId, timelineStepId: $timelineStepId, order: $order)

diff --git a/src/schema.graphql b/src/schema.graphql
@@ -574,6 +574,7 @@ type Mutation {
   addTimelineStep(simulatorId: ID, missionId: ID, name: String!, description: String): ID
   removeTimelineStep(simulatorId: ID, missionId: ID, timelineStepId: ID!): String
   reorderTimelineStep(simulatorId: ID, missionId: ID, timelineStepId: ID!, order: Int!): String
+  reorderTimelineItem(simulatorId: ID, missionId: ID, timelineStepId: ID!, timelineItemId: ID!, order: Int!): String
   updateTimelineStep(simulatorId: ID, missionId: ID, timelineStepId: ID!, name: String, description: String): String
   addTimelineItemToTimelineStep(simulatorId: ID, missionId: ID, timelineStepId: ID!, timelineItem: TimelineItemInput!): String
   removeTimelineStepItem(simulatorId: ID, missionId: ID, timelineStepId: ID!, timelineItemId: ID!): String