Nicer handling of sub-filtering in organizer columns

DestinyItemManager · Aug 29, 2024 · 3a362fe · 3a362fe
1 parent 99aa18e
commit 3a362fe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 16 deletions.
diff --git a/src/app/organizer/Columns.tsx b/src/app/organizer/Columns.tsx
@@ -874,13 +874,13 @@ function LoadoutsCell({
       {loadouts.map((loadout) => (
         <div key={loadout.id} className={styles.loadout}>
           {isInGameLoadout(loadout) ? (
-            <a data-perk-name={loadout.id}>
+            <a data-filter-value={loadout.id}>
               {isInGameLoadout(loadout) && <InGameLoadoutIcon loadout={loadout} />}
               {loadout.name}
             </a>
           ) : (
             <a
-              data-perk-name={loadout.id}
+              data-filter-value={loadout.id}
               onClick={(e: React.MouseEvent) =>
                 !e.shiftKey && editLoadout(loadout, owner, { isNew: false })
               }
@@ -925,7 +925,7 @@ function PerksCell({
                   [styles.perkSelectable]: socket.plugOptions.length > 1,
                   [styles.enhancedArrow]: isEnhancedPerk(p.plugDef),
                 })}
-                data-perk-name={p.plugDef.displayProperties.name}
+                data-filter-value={p.plugDef.displayProperties.name}
                 onClick={
                   onPlugClicked && socket.plugOptions.length > 1
                     ? (e: React.MouseEvent) => {
@@ -985,7 +985,7 @@ function D1PerksCell({ item }: { item: D1Item }) {
                     </>
                   }
                 >
-                  <div className={styles.modPerk} data-perk-name={p.name}>
+                  <div className={styles.modPerk} data-filter-value={p.name}>
                     <div className={styles.miniPerkContainer}>
                       <BungieImage src={p.icon} />
                     </div>{' '}

diff --git a/src/app/organizer/ItemTable.tsx b/src/app/organizer/ItemTable.tsx
@@ -286,21 +286,15 @@ export default function ItemTable({ categories }: { categories: ItemCategoryTree
     (
       row: Row,
       column: ColumnDefinition,
-    ): React.MouseEventHandler<HTMLTableDataCellElement> | undefined =>
+    ): React.MouseEventHandler<HTMLTableCellElement> | undefined =>
       column.filter
         ? (e) => {
             if (e.shiftKey) {
-              if ((e.target as Element).hasAttribute('data-perk-name')) {
-                const filter = column.filter!(
-                  (e.target as Element).getAttribute('data-perk-name') ?? undefined,
-                  row.item,
-                );
-                if (filter) {
-                  dispatch(toggleSearchQueryComponent(filter));
-                }
-                return;
-              }
-              const filter = column.filter!(row.values[column.id], row.item);
+              const node = e.target as HTMLElement;
+              const filter = column.filter!(
+                node.dataset.filterValue ?? row.values[column.id],
+                row.item,
+              );
               if (filter !== undefined) {
                 dispatch(toggleSearchQueryComponent(filter));
               }