Updated custom item renderer to use the LoadOrderIndexInput component

commands.ps1

@@ -3,8 +3,8 @@ param([string]$type, [string]$Configuration = "Release")
 $ErrorActionPreferenceOld = $ErrorActionPreference;
 $ErrorActionPreference = "Stop";
 
-$DeployPath = $type -eq "build-dev" ? "vortex_devel/plugins" : "vortex/plugins"
-$type = $type -eq "build-dev" ? "build" : $type;
+$DeployPath = if ($type -eq "build-dev") {"vortex_devel/plugins"} else {"vortex/plugins"}
+$type = if ($type -eq "build-dev") {"build"} else {$type}
 
 try {
     # Clean

package.json

@@ -56,7 +56,7 @@
     "ts-node": "^10.7.0",
     "turbowalk": "git+https://github.com/Nexus-Mods/node-turbowalk",
     "typescript": "^5.4.5",
-    "vortex-api": "git+https://github.com/Nexus-Mods/vortex-api",
+    "vortex-api": "git+https://github.com/Nexus-Mods/vortex-api#fblo_api_update_1.8.11",
     "vortex-ext-common": "^0.4.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",

src/views/LoadOrder/components/LoadOrderItemRenderer.tsx

@@ -1,7 +1,7 @@
-import React, { BaseSyntheticEvent, useCallback } from 'react';
+import React, { BaseSyntheticEvent, useCallback, useContext } from 'react';
 import { Checkbox, ListGroupItem } from 'react-bootstrap';
 import { useSelector, useStore } from 'react-redux';
-import { Icon, selectors, types } from 'vortex-api';
+import { Icon, LoadOrderIndexInput, MainContext, selectors, types } from 'vortex-api';
 import { types as vetypes } from '@butr/vortexextensionnative';
 import { ValidationError } from './ValidationError';
 import { ExternalBanner } from './ExternalBanner';
@@ -41,6 +41,7 @@ export const LoadOrderItemRenderer = (props: LoadOrderItemRendererProps): JSX.El
   const position =
     loadOrder.findIndex((entry: types.IFBLOLoadOrderEntry<IVortexViewModelData>) => entry.id === item.loEntry.id) + 1;
 
+  const context = useContext(MainContext)
   let classes = ['load-order-entry'];
   if (className !== undefined) {
     classes = classes.concat(className.split(' '));
@@ -78,10 +79,43 @@ export const LoadOrderItemRenderer = (props: LoadOrderItemRendererProps): JSX.El
   const Lock = (): JSX.Element | null =>
     isLocked(item.loEntry) ? <Icon className="locked-entry-logo" name="locked" /> : null;
 
+  const lockedEntriesCount = React.useMemo(() => {
+    return (loadOrder ?? []).filter((entry) => isLocked(entry)).length;
+  }, [loadOrder]);
+
+  const onApplyIndex = React.useCallback((idx: number) => {
+    if (!profile?.id) {
+      return;
+    }
+    const { item } = props;
+    const currentIdx = position;
+    if (currentIdx === idx) {
+      return;
+    }
+
+    const entry = {
+      ...item.loEntry,
+      index: idx,
+    };
+
+    const newLO = loadOrder.filter((entry) => entry.id !== item.loEntry.id);
+    newLO.splice(idx - 1, 0, entry);
+    store.dispatch(actionsLoadOrder.setFBLoadOrder(profile.id, newLO));
+  }, [profile, item]);
+
   return (
     <ListGroupItem key={key} className={classes.join(' ')} ref={props.item.setRef}>
       <Icon className="drag-handle-icon" name="drag-handle" />
-      <p className="load-order-index">{position}</p>
+      <LoadOrderIndexInput
+        className='load-order-index'
+        api={context.api}
+        currentPosition={position}
+        item={item.loEntry}
+        isLocked={isLocked}
+        loadOrder={loadOrder}
+        lockedEntriesCount={lockedEntriesCount}
+        onApplyIndex={onApplyIndex}
+      />
       <ValidationError invalidEntries={item.invalidEntries} item={item.loEntry} />
       <ModuleIcon data={item.loEntry.data} />
       <p className="load-order-name">

yarn.lock

@@ -4251,9 +4251,9 @@ void-elements@3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
 
-"vortex-api@git+https://github.com/Nexus-Mods/vortex-api":
-  version "1.8.8"
-  resolved "git+https://github.com/Nexus-Mods/vortex-api#12bbc579ef01ece480b8cd0a9466da9f23e4e855"
+"vortex-api@git+https://github.com/Nexus-Mods/vortex-api#fblo_api_update_1.8.11":
+  version "1.8.11"
+  resolved "git+https://github.com/Nexus-Mods/vortex-api#9d51cfafea5f96eb6eca2be4371e32b236f77891"
 
 vortex-ext-common@^0.4.0:
   version "0.4.0"