add selectedItems composable

Handles selections as well as keyboard navigation.

Currently aims to replace `client/src/components/History/Content/SelectedItems.js`. Made it a reusable composable instead of just scoped to history items.

Author: ahmedhamidawan

client/src/components/History/Content/ContentItem.vue

@@ -16,7 +16,6 @@ import { useRoute, useRouter } from "vue-router/composables";
 import type { ItemUrls } from "@/components/History/Content/Dataset/index";
 import { updateContentFields } from "@/components/History/model/queries";
 import { useEntryPointStore } from "@/stores/entryPointStore";
-import { useEventStore } from "@/stores/eventStore";
 import { clearDrag } from "@/utils/setDrag";
 
 import { JobStateSummary } from "./Collection/JobStateSummary";
@@ -48,6 +47,8 @@ interface Props {
     filterable?: boolean;
     isPlaceholder?: boolean;
     isSubItem?: boolean;
+    getItemKey?: (item: any) => string;
+    selectClickHandler?: (item: any, event: Event) => boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -63,17 +64,18 @@ const props = withDefaults(defineProps<Props>(), {
     filterable: false,
     isPlaceholder: false,
     isSubItem: false,
+    getItemKey: (item: any) => {
+        return `${item.history_content_type}-${item.id}`;
+    },
+    selectClickHandler: (item: any, event: Event) => {
+        return true;
+    },
 });
 
 const emit = defineEmits<{
     (e: "update:selected", selected: boolean): void;
     (e: "update:expand-dataset", expand: boolean): void;
-    (e: "shift-arrow-select", direction: string): void;
     (e: "init-key-selection"): void;
-    (e: "arrow-navigate", direction: string): void;
-    (e: "hide-selection"): void;
-    (e: "select-all"): void;
-    (e: "selected-to"): void;
     (e: "delete", item: any, recursive: boolean): void;
     (e: "undelete"): void;
     (e: "unhide"): void;
@@ -82,10 +84,10 @@ const emit = defineEmits<{
     (e: "tag-change", item: any, newTags: Array<string>): void;
     (e: "tag-click", tag: string): void;
     (e: "toggleHighlights", item: any): void;
+    (e: "on-key-down", event: KeyboardEvent): void;
 }>();
 
 const entryPointStore = useEntryPointStore();
-const eventStore = useEventStore();
 
 const contentItem = ref<HTMLElement | null>(null);
 const subItemsVisible = ref(false);
@@ -95,7 +97,7 @@ const jobState = computed(() => {
 });
 
 const contentId = computed(() => {
-    return `dataset-${props.item.id}`;
+    return props.getItemKey(props.item);
 });
 
 const contentCls = computed(() => {
@@ -181,13 +183,6 @@ const itemUrls = computed<ItemUrls>(() => {
     };
 });
 
-/** Based on the user's keyboard platform, checks if it is the
- * typical key for selection (ctrl for windows/linux, cmd for mac)
- */
-function isSelectKey(event: KeyboardEvent) {
-    return eventStore.isMac ? event.metaKey : event.ctrlKey;
-}
-
 function onKeyDown(event: KeyboardEvent) {
     const classList = (event.target as HTMLElement)?.classList;
     if (!classList.contains("content-item") || classList.contains("sub-item")) {
@@ -197,45 +192,15 @@ function onKeyDown(event: KeyboardEvent) {
     if (event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         onClick();
-    } else if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !event.shiftKey) {
-        event.preventDefault();
-        emit("arrow-navigate", event.key);
-    }
-
-    if (props.writable) {
-        if (event.key === "Tab") {
-            emit("init-key-selection");
-        } else {
-            event.preventDefault();
-            if ((event.key === "ArrowUp" || event.key === "ArrowDown") && event.shiftKey) {
-                emit("shift-arrow-select", event.key);
-            } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-                emit("init-key-selection");
-            } else if (event.key === "Delete" && !props.selected && !props.item.deleted) {
-                onDelete(event.shiftKey);
-                emit("arrow-navigate", "ArrowDown");
-            } else if (event.key === "Escape") {
-                emit("hide-selection");
-            } else if (event.key === "a" && isSelectKey(event)) {
-                emit("select-all");
-            }
-        }
+    } else {
+        emit("on-key-down", event);
     }
 }
 
 function onClick(e?: Event) {
     const event = e as KeyboardEvent;
-    if (event && props.writable) {
-        if (isSelectKey(event)) {
-            emit("init-key-selection");
-            emit("update:selected", !props.selected);
-            return;
-        } else if (event.shiftKey) {
-            emit("selected-to");
-            return;
-        } else {
-            emit("init-key-selection");
-        }
+    if (event && props.writable && !props.selectClickHandler(props.item, event)) {
+        return;
     }
     if (props.isPlaceholder) {
         return;