212 - show popver in DatasetSelect; allow showing unformatted values in SearchAndSelect

docs/ui/util_components.md

@@ -416,12 +416,27 @@ const selectedColumnsConfig = [searchColumnsConfig[0]];
 Displayed results can be formatted via the `formatFn` prop. They can also be put inside slots for a more customized
 markup per cell.
 
-For showing a cell's value inside customized markup, embed the cell's value inside `<template #templateName>` (
-example - `<template #address>`). The name of a column's template must be the same as the `key` of the column's config
-that was provided via the `searchResultColumns` or `selectedResultColumns` props. The value of the column inside
-the `<template>` can be accessed via `slotProps["value"]`.
+For showing a field's value inside customized markup
+- set `{ slotted: true }` in the field's config that is being provided via the `searchResultColumns` or `selectedResultColumns` props
+- embed the cell's value inside `<template #templateName>` (
+example - `<template #address>`).
+  - The name of a column's template is the same as the `key` of the column's config that was provided via the `searchResultColumns` or `selectedResultColumns` props.
 
-The below example formats the first column, and embeds the second column inside custom markup.
+The value of the column inside the `<template>` can be accessed via `slotProps["value"]`, which is an object that contains the formatted as well as the raw value for the slotted field.
+
+```
+// slotProps['value]
+
+{
+  formatted: 'formatted value',
+  raw: 'raw value
+}
+
+```
+
+The below example formats the values in the `text` column, and embeds the values in the `other` column inside custom markup.
+
+Notice how both the formatted and raw values of a slotted field can be access via `slotProps["value"]`.
 
 ```html
 <template>
@@ -443,7 +458,9 @@ The below example formats the first column, and embeds the second column inside
     "
   >
     <template #other="slotProps">
-      <va-chip>{{ slotProps["value"] }}</va-chip>
+    <!-- Both formatted and unFormatted values can be accessed via slotProps -->
+      <va-chip>{{ slotProps["value"].formatted }}</va-chip>
+      <va-chip>{{ slotProps["value"].raw }}</va-chip>
     </template>
   </SearchAndSelect>
 </template>
@@ -669,7 +686,7 @@ Shows a chip with icon, text, color depending on status. Useful to on/off status
 
 - status: Boolean (0-off, 1-on)
 - icons - Array of 2 elements (off icon, on icon)
-- labels - Array of 2 element (off lable, on label)
+- labels - Array of 2 element (off label, on label)
   - default: `['disbaled', 'enabled']`
 
 ## EnvAlert

ui/src/components/dataset/DatasetSelect.vue

@@ -31,24 +31,29 @@
       </va-button-dropdown>
     </template>
 
+    <template #name="slotProps">
+      <va-popover placement="top" :message="slotProps['value'].raw">
+        {{ slotProps["value"].formatted }}
+      </va-popover>
+    </template>
+
     <template #type="slotProps">
       <DatasetType
-        :type="slotProps['value']"
-        :show-icon="!(breakpoint.sm || breakpoint.xs)"
+        :type="slotProps['value'].raw"
+        :show-icon="true"
+        :show-type="false"
       />
     </template>
   </SearchAndSelect>
 </template>
 
 <script setup>
 import datasetService from "@/services/dataset";
-import { date } from "@/services/datetime";
-import { formatBytes, lxor } from "@/services/utils";
-import { useBreakpoint } from "vuestic-ui";
 import toast from "@/services/toast";
 import _ from "lodash";
+import { lxor } from "@/services/utils";
 
-const NAME_TRIM_THRESHOLD = 13;
+const NAME_TRIM_THRESHOLD = 35;
 const PAGE_SIZE = 10;
 
 const props = defineProps({
@@ -66,8 +71,6 @@ const emit = defineEmits(["loading", "loaded"]);
 
 const loadingResources = inject("loadingResources");
 
-const breakpoint = useBreakpoint();
-
 const page = ref(1);
 const skip = computed(() => {
   return PAGE_SIZE * (page.value - 1);
@@ -96,39 +99,21 @@ const primaryColumns = computed(() => {
     {
       key: "name",
       label: "Name",
-      width: props.columnWidths.name,
+      width: props.columnWidths?.name,
       formatFn: trimName,
+      slotted: true,
     },
     {
       key: "type",
       label: "Type",
       slotted: true,
-      width: props.columnWidths.type,
-    },
-  ];
-});
-
-const secondaryColumns = computed(() => {
-  return [
-    {
-      key: "size",
-      label: "Size",
-      formatFn: (val) => formatBytes(val),
-      width: props.columnWidths.size,
-    },
-    {
-      key: "created_at",
-      label: "Registered On",
-      formatFn: (val) => date(val),
-      width: props.columnWidths.created_at,
+      width: props.columnWidths?.type,
     },
   ];
 });
 
 const retrievedDatasetColumns = computed(() => {
-  return breakpoint.sm || breakpoint.xs
-    ? primaryColumns.value
-    : primaryColumns.value.concat(secondaryColumns.value);
+  return primaryColumns.value;
 });
 
 const selectedDatasetColumns = computed(() =>

ui/src/components/dataset/DatasetType.vue

@@ -5,7 +5,7 @@
       class="text-2xl flex-none mr-2 va-text-secondary"
       v-if="props.showIcon"
     />
-    <span class="capitalize">
+    <span class="capitalize" v-if="props.showType">
       {{ props.type?.toLowerCase()?.split("_")?.join(" ") }}
     </span>
   </div>
@@ -23,5 +23,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  showType: {
+    type: Boolean,
+    default: true,
+  },
 });
 </script>

ui/src/components/project/CreateProjectStepper.vue

@@ -34,10 +34,7 @@
 
       <!-- dataset select -->
       <template #step-content-1>
-        <ProjectDatasetsForm
-          :selected-results="selectedDatasets"
-          :column-widths="columnWidths"
-        />
+        <ProjectDatasetsForm :selected-results="selectedDatasets" />
       </template>
 
       <!-- user select -->
@@ -125,24 +122,12 @@
 <script setup>
 import projectService from "@/services/projects";
 import { useProjectFormStore } from "@/stores/projects/projectForm";
-import { useBreakpoint } from "vuestic-ui";
 
 const emit = defineEmits(["update"]);
 
-const breakpoint = useBreakpoint();
-
 const projectFormStore = useProjectFormStore();
 const selectedDatasets = computed(() => projectFormStore.datasets);
 
-const columnWidths = computed(() => {
-  return {
-    name: breakpoint.xs || breakpoint.sm ? "230px" : "190px",
-    type: "130px",
-    size: "100px",
-    created_at: "105px",
-  };
-});
-
 const step = ref(0);
 const loading = ref(false);
 const steps = [

ui/src/components/project/datasets/ProjectDatasetsModal.vue

@@ -14,7 +14,6 @@
       :selected-results="selectedDatasets"
       @select="(datasets) => updateDatasetsToAdd(datasets)"
       @remove="(datasets) => updateDatasetsToRemove(datasets)"
-      :column-widths="columnWidths"
       @loading="loadingSearchableDatasets = true"
       @loaded="loadingSearchableDatasets = false"
     />
@@ -62,15 +61,6 @@ const modalSize = computed(() =>
   breakpoint.xs || breakpoint.sm ? "medium" : "large",
 );
 
-const columnWidths = computed(() => {
-  return {
-    name: breakpoint.xs || breakpoint.sm ? "175px" : "180px",
-    type: "130px",
-    size: "100px",
-    created_at: "105px",
-  };
-});
-
 const projectFormStore = useProjectFormStore();
 
 const visible = ref(false);

ui/src/components/utils/SearchAndSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-2 search" :style="styles">
     <!-- Search, and search results   -->
-    <div>
+    <div class="flex-auto">
       <!-- Container for search controls, and search results table -->
       <div class="flex flex-col gap-2">
         <!-- Container for controls -->
@@ -105,14 +105,16 @@
                   >
                   </slot>
                   <div v-else class="overflow-hidden">
-                    {{ fieldValue(rowData, _searchResultColumns[colIndex]) }}
+                    {{
+                      fieldValue(rowData, _searchResultColumns[colIndex])
+                        .formatted
+                    }}
                   </div>
                 </template>
 
                 <!-- template for Actions column -->
                 <template #cell(actions)="{ rowData }">
                   <va-button
-                    class="w-full"
                     :icon="isSelected(rowData) ? 'remove' : 'add'"
                     :color="isSelected(rowData) ? 'danger' : 'success'"
                     size="small"
@@ -134,7 +136,7 @@
     <va-divider class="flex-none" vertical></va-divider>
 
     <!-- Selected results -->
-    <div>
+    <div class="flex-auto">
       <div class="flex flex-col gap-2">
         <!-- Container for Controls -->
         <div class="flex flex-col gap-2 --controls-height --controls-margin">
@@ -208,14 +210,16 @@
                 >
                 </slot>
                 <div v-else class="overflow-hidden">
-                  {{ fieldValue(rowData, _selectedResultColumns[colIndex]) }}
+                  {{
+                    fieldValue(rowData, _selectedResultColumns[colIndex])
+                      .formatted
+                  }}
                 </div>
               </template>
 
               <!-- template for Actions column -->
               <template #cell(actions)="{ rowData }">
                 <va-button
-                  class="w-full"
                   :icon="isSelected(rowData) ? 'remove' : 'add'"
                   :color="isSelected(rowData) ? 'danger' : 'success'"
                   size="small"
@@ -324,6 +328,8 @@ const selectedResultSelections = ref([]);
 const ACTIONS_COLUMN_CONFIG = {
   key: "actions",
   label: "Actions",
+  thAlign: "right",
+  tdAlign: "right",
 };
 
 const _searchResultColumns = computed(() => {
@@ -367,9 +373,13 @@ const isSelected = (result) => {
  * @returns {*} the formatted value of the search result
  */
 const fieldValue = (rowData, columnConfig) => {
-  return columnConfig["formatFn"]
-    ? columnConfig["formatFn"](rowData[columnConfig["key"]])
-    : rowData[columnConfig["key"]];
+  return {
+    formatted:
+      typeof columnConfig["formatFn"] === "function"
+        ? columnConfig["formatFn"](rowData[columnConfig["key"]])
+        : rowData[columnConfig["key"]],
+    raw: rowData[columnConfig["key"]],
+  };
 };
 
 const templateName = (field) => `cell(${field["key"]})`;
@@ -408,11 +418,9 @@ const addOrRemove = (rowData) => {
 
 <style lang="scss">
 .search {
-  --va-data-table-thead-background: var(--va-background-secondary);
-  --va-data-table-tfoot-background: var(--va-background-secondary);
-
   .results-table {
     --va-data-table-cell-padding: 3px;
+    //--va-data-table-selectable-cell-width: 40px;
   }
 
   .icon {