Multi Select specifically for Ordering created which excludes opposite option from options if it is selected.

Author: mroki58

Tokenization/webapp/app/components/form/form-select.tsx

@@ -92,3 +92,50 @@ export function FormSelectMulti<T extends string | number = string>(props: Selec
     />
   );
 }
+
+/**
+ * FormSelectMultiOrdering
+ *
+ * Multi-select wrapper that filters out options that are already selected in opposite order.
+ *
+ * @template T
+ * @param {object} props - component props
+ * @param {string} props.id - unique id (from SelectInterface)
+ * @param {import('~/utils/types').OptionType[]} props.options - array of available options
+ * @param {T[]} props.value - array of selected raw values
+ * @param {React.Dispatch<import('react').SetStateAction<T[]>>} props.setValue - setter to update the array of selected values
+ * @param {string} [props.placeholder] - placeholder text
+ * @param {string|null} [props.label] - optional label shown above select
+ *
+ * Behaviour:
+ * - Computes `selected` as list of Option entries whose value is included in `value`.
+ * - handleSelect adds an item to the value array; handleDeselect removes it.
+ * - Filters out options that are already selected in opposite order (e.g., if 'id' is selected, '-id' is removed from options).
+ */
+export function FormSelectMultiOrdering<T extends string | number = string>(props: SelectInterface<T[]>) {
+  const { value, setValue, options } = { ...props };
+  let optionsFiltered = options;
+
+  // Typescipt safety check
+  if (Array.isArray(value)) {
+    for (const val of value) {
+      const valStr = String(val);
+      // There is django ordering convention where negative value means opposite order
+      if (valStr.startsWith('-')) {
+        const actualVal = valStr.substring(1);
+        optionsFiltered = optionsFiltered.filter(opt => String(opt.value) !== actualVal);
+      } else {
+        optionsFiltered = optionsFiltered.filter(opt => String(opt.value) !== `-${  valStr}`);
+      }
+    }
+  }
+
+  return (
+    <FormSelectMulti
+      {...props}
+      value={value}
+      setValue={setValue}
+      options={optionsFiltered}
+    />
+  );
+}

Tokenization/webapp/app/components/form/select-group.tsx

@@ -14,37 +14,61 @@
 
 import React, { type PropsWithChildren } from 'react';
 import type { SelectInterface } from './form.d';
+import type { OptionType } from '~/utils/types';
 
 import { FormSelect } from './form-select';
 import { checkIsComponentOfType } from '~/utils/component-type-checker';
 
 /**
- * SelectGroup
+ * collectSelectsInfo
  *
- * Inspects children and deduplicates options across FormSelect children by cloning them.
+ * Inspects children to collect FormSelect components and their options and values.
  *
- * @param {object} props - component props
- * @param {React.ReactNode} props.children - child nodes which should only include FormSelect components;
- * SelectGroup will detect those and clone them with filtered options
+ * @param {React.ReactNode} children - child nodes which may include FormSelect components
  *
- * Behaviour notes:
- * - Looks for direct children of type FormSelect.
- * - Builds list of values used by other selects and removes them from each select's options to avoid duplicates.
- * - Clones and returns modified select children; non-select children are not displayed so they shouldn't be used.
+ * @returns {object} - object containing:
+ *   - selects: array of FormSelect components found among children
+ *   - selectsLen: number of FormSelect components found
+ *   - optionsList: array of options arrays for each FormSelect
+ *   - values: array of selected values for each FormSelect
  */
-export function SelectGroup({ children }: PropsWithChildren) {
+function collectSelectsInfo(children: React.ReactNode) {
   const arrChildren = React.Children.toArray(children);
   const selects = arrChildren.filter((component) => checkIsComponentOfType(component, FormSelect));
   const optionsList = selects.map((select) => React.isValidElement(select) ? (select.props as SelectInterface).options : null);
   const values = selects.map((select) => React.isValidElement(select) ? (select.props as SelectInterface).value : null);
+  const selectsLen = selects.length;
+
+  return {
+    selects,
+    selectsLen,
+    optionsList,
+    values,
+  };
+}
 
+type valuesType = (string | number | (string | number)[] | null)[];
+
+/**
+ * FilterSelectedFromOptions
+ *
+ * Clones select components with filtered options to remove already selected values from other selects.
+ *
+ * @param {React.ReactNode[]} selects - array of select components
+ * @param {number} selectsLen - length of selects array
+ * @param {(OptionType[] | null)[]} optionsList - array of options arrays for each select
+ * @param {valuesType} values - array of selected values for each select
+ *
+ * @returns {React.ReactNode[]} - array of cloned select components with filtered options
+ */
+function filterSelectedFromOptions(selects: React.ReactNode[], selectsLen: number, optionsList: (OptionType[] | null)[], values: valuesType) {
   const returnChildren = [];
-  const noSelects = selects.length;
 
-  for (let i = 0; i < noSelects; i++) {
+  for (let i = 0; i < selectsLen; i++) {
     let select = selects[i];
     let options = optionsList[i];
 
+    // Get all values selected in other selects
     const differentSelectValues = values.filter((_, idx) => idx != i);
 
     if (options !== null) {
@@ -58,3 +82,22 @@ export function SelectGroup({ children }: PropsWithChildren) {
 
   return [...returnChildren];
 }
+
+/**
+ * SelectGroup
+ *
+ * Inspects children and deduplicates options across FormSelect children by cloning them.
+ *
+ * @param {object} props - component props
+ * @param {React.ReactNode} props.children - child nodes which should only include FormSelect components;
+ * SelectGroup will detect those and clone them with filtered options
+ *
+ * Behaviour notes:
+ * - Looks for direct children of type FormSelect.
+ * - Builds list of values used by other selects and removes them from each select's options to avoid duplicates.
+ * - Clones and returns modified select children; non-select children are not displayed so they shouldn't be used.
+ */
+export function SelectGroup({ children }: PropsWithChildren) {
+  const { selects, selectsLen, optionsList, values } = collectSelectsInfo(children);
+  return filterSelectedFromOptions(selects, selectsLen, optionsList, values);
+}

Tokenization/webapp/app/components/tokens/token-filters.tsx

@@ -16,7 +16,7 @@ import { useEffect } from 'react';
 
 import { setStorageItem } from '~/utils/storage';
 
-import { FormSelectMulti } from '../form/form-select';
+import { FormSelectMulti, FormSelectMultiOrdering } from '../form/form-select';
 import { FormInput } from '../form/form-input';
 import { useTokenFilters } from '~/hooks/tokens/token-filters';
 import { FlexGrowWrapper, FlexGrowWrapperElement } from '~/ui/flex';
@@ -155,7 +155,7 @@ export function TokenFilters() {
       />
     </FlexGrowWrapper>
     <FlexGrowWrapper>
-      <FormSelectMulti
+      <FormSelectMultiOrdering
         id='tags'
         label="Order by:"
         options={orderingOptions}