Feature

databrowser/src/components/input/InputFilter.vue

@@ -5,30 +5,23 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <InputWithButton
+  <InputCustom
     :id="id"
     :model-value="modelValue"
     :disabled="disabled"
-    :focus="focus"
-    :label-button="t('components.inputFilter.labelButton')"
-    :label-placeholder="t('components.inputFilter.labelPlaceholder')"
+    input-classes="w-full"
+    :placeholder="t('components.inputFilter.labelPlaceholder')"
     @update:model-value="emit('update:modelValue', $event)"
-    @confirmed-value="emit('filter', $event)"
-  >
-    <template #icon>
-      <IconFilter />
-    </template>
-  </InputWithButton>
+  />
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n';
-import IconFilter from '../svg/IconFilter.vue';
-import InputWithButton from './InputWithButton.vue';
+import InputCustom from './InputCustom.vue';
 
 const { t } = useI18n();
 
-const emit = defineEmits(['filter', 'update:modelValue']);
+const emit = defineEmits(['update:modelValue']);
 
 withDefaults(
   defineProps<{

databrowser/src/components/select/SelectButton.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     v-slot="{ open }"
     class="relative w-full border border-gray-300 pl-2 pr-9 text-left leading-tight"
   >
-    <span class="block">{{ label }}</span>
+    <span class="block" :title="label">{{ label }}</span>
     <span
       class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
     >
@@ -26,3 +26,11 @@ import IconStrokedArrowUp from '../svg/IconStrokedArrowUp.vue';
 
 defineProps<{ label: string }>();
 </script>
+
+<style scoped>
+.block {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

databrowser/src/components/table/TableWithStickyHeader.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <TableCustom :id="id" class="overflow-y-auto">
+  <TableCustom :id="id" class="is-toolbox-visible-list overflow-y-auto">
     <colgroup v-if="isColgroupColsSlotDefined">
       <slot name="colgroup-cols"></slot>
     </colgroup>
@@ -33,3 +33,11 @@ const isColgroupColsSlotDefined = slots['colgroup-cols'] != null;
 const isHeaderColsSlotDefined = slots['header-cols'] != null;
 const isBodyRowsSlotDefined = slots['body-rows'] != null;
 </script>
+
+<style scoped>
+@media screen and (max-width: 767px) {
+  .is-toolbox-visible-list {
+    padding-bottom: 3.5rem;
+  }
+}
+</style>

databrowser/src/domain/cellComponents/components/utils/upload/FileUpload.vue

@@ -16,6 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       {{ fileTypesNotAccepted.content }}
     </AlertError>
     <div
+      v-if="!isMobile"
       ref="dropZoneRef"
       class="flex h-24 w-full items-center justify-center rounded border-2 border-dashed"
       :class="{ 'border-green-400': isOverDropZone, hidden: uploading }"
@@ -25,6 +26,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         browse
       </button>
     </div>
+    <div v-if="isMobile" class="flex w-full justify-center">
+      <button
+        type="button"
+        class="inline-flex h-9 items-center gap-2 rounded border border-transparent bg-green-500 px-3 py-[0.35rem] text-base leading-tight text-white no-underline hover:bg-green-700 focus-visible:bg-green-700 focus-visible:outline-none md:flex"
+        @click="open()"
+      >
+        Add files
+      </button>
+    </div>
     <div
       v-if="uploading"
       class="flex h-24 w-full flex-col justify-between rounded border-2 p-3"
@@ -44,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
 import { toRefs, useDropZone } from '@vueuse/core';
 import IconDelete from '../../../../../components/svg/IconDelete.vue';
 import ProgressBar from '../../../../../components/progress/ProgressBar.vue';
@@ -143,4 +153,19 @@ onUploadSuccess((urls: string[]) =>
 );
 
 onUploadError((message: string) => emit('uploadError', message));
+
+const isMobile = ref(false);
+
+onMounted(() => {
+  const updateIsMobile = () => {
+    isMobile.value = window.innerWidth <= 768;
+  };
+
+  updateIsMobile();
+  window.addEventListener('resize', updateIsMobile);
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateIsMobile);
+  });
+});
 </script>

databrowser/src/domain/datasets/ui/common/MainAndSubCategories.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
     <div
       v-if="slug !== ''"
       ref="container"
-      class="flex-1 overflow-y-auto pb-12 md:h-full md:px-20 md:py-3"
+      class="is-toolbox-visible flex-1 overflow-y-auto pb-12 md:h-full md:px-20 md:py-3"
     >
       <EditHint v-if="showEditHint" class="mb-8" />
       <SubCategories
@@ -78,3 +78,15 @@ const categoriesWithSubElements = computed(() => {
 const container = ref<HTMLElement | null>(null);
 const scrollSubCategoriesToTop = () => scrollToTop(container);
 </script>
+
+<style scoped>
+@media screen and (max-width: 767px) {
+  .is-toolbox-visible {
+    padding-bottom: 3rem;
+  }
+
+  .mobile-toolbox {
+    bottom: 1rem !important;
+  }
+}
+</style>

databrowser/src/domain/datasets/ui/rawView/RawView.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <LoadingError v-if="isError" :error="error" />
   <template v-else>
-    <div class="overflow-y-auto md:flex">
+    <div class="is-toolbox-visible overflow-y-auto md:flex">
       <ContentAlignmentX class="overflow-y-auto py-6 md:flex">
         <div v-if="isLoading" class="w-full">
           <LoadingCell v-for="i in 10" :key="i" class="my-3" />
@@ -71,4 +71,14 @@ const { isError, isLoading, data, error, fullPath } = useSingleRecordLoad();
 .vjs-tree {
   @apply text-left;
 }
+
+@media screen and (max-width: 767px) {
+  .is-toolbox-visible {
+    padding-bottom: 3rem;
+  }
+
+  .mobile-toolbox {
+    bottom: 1rem !important;
+  }
+}
 </style>

databrowser/src/domain/datasets/ui/tableView/TableContent.vue

@@ -38,6 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       <tr
         v-for="({ recordId, values }, rowIndex) in rows"
         :key="recordId ?? rowIndex"
+        class="hover:bg-green-400/10"
         :class="{ 'bg-green-400/10': rowIndex === selectedRowIndex }"
         @click="rowClicked(rowIndex)"
         @dblclick="rowDblClicked(recordId)"

databrowser/src/domain/datasets/ui/tableView/TableView.vue

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 <template>
   <section class="flex flex-1 flex-col justify-start overflow-y-auto">
     <TableFilterHint />
-    <div class="flex h-full overflow-y-auto">
+    <div id="oa-table-with-sticky-header" class="flex h-full overflow-y-auto">
       <div v-if="isError" class="grow">
         <LoadingError>{{ error }}</LoadingError>
       </div>

databrowser/src/domain/datasets/ui/tableView/toolBox/SearchAndFilterToolBoxPanel.vue

@@ -51,10 +51,19 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           :id="`filter-${filter.propertyPath}`"
           :model-value="filter.value?.toString()"
           @update:model-value="filter.value = $event"
-          @filter="updateFilter(index, filter.operator, $event, true)"
         />
       </ToolBoxCardBody>
-      <ToolBoxCardBody>
+      <ToolBoxCardBody class="flex justify-between">
+        <ButtonCustom
+          class="flex items-center gap-2 p-2 py-1"
+          :size="Size.xs"
+          :variant="Variant.solid"
+          @confirmed-value="emit('filter', $event)"
+          @update:model-value="emit('update:modelValue', $event)"
+        >
+          <IconFilter />
+          {{ t('components.inputFilter.labelButton') }}
+        </ButtonCustom>
         <ButtonCustom
           class="flex items-center gap-2 p-2 py-1"
           :size="Size.xs"
@@ -82,6 +91,7 @@ import { Size, Variant } from '../../../../../components/button/types';
 import InputFilter from '../../../../../components/input/InputFilter.vue';
 import SelectCustom from '../../../../../components/select/SelectCustom.vue';
 import IconDelete from '../../../../../components/svg/IconDelete.vue';
+import IconFilter from '../../../../../components/svg/IconFilter.vue';
 import { useDatasetBaseInfoStore } from '../../../config/store/datasetBaseInfoStore';
 import ToolBoxCard from '../../toolBox/ToolBoxCard.vue';
 import ToolBoxCardBody from '../../toolBox/ToolBoxCardBody.vue';
@@ -110,6 +120,8 @@ const filterTypeSelectOptions = computed(() => {
   return [];
 });
 
+const emit = defineEmits(['filter', 'update:modelValue']);
+
 const { tableFilters, filterColSelectOptions } = storeToRefs(
   useTableFilterStore()
 );

databrowser/src/domain/datasets/ui/toolBox/ToolBox.vue

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <!-- Mobile toolBox open button -->
   <ButtonCustom
     v-if="!toolBoxStore.visible"
-    class="absolute bottom-16 right-[20px] z-20 flex items-center justify-center shadow-[0_10px_15px_-3px_rgba(0,0,0,0.4)] md:hidden"
+    class="mobile-toolbox absolute bottom-16 right-[20px] z-20 flex -rotate-90 items-center justify-center shadow-[0_10px_15px_-3px_rgba(0,0,0,0.4)] md:hidden"
     data-test="mobile-open-toolBox"
     @click="toolBoxStore.toggleToolboxVisibility(!toolBoxStore.visible)"
   >
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 
   <!-- ToolBox content -->
   <div
-    class="absolute top-0 z-[10] flex h-full flex-col overflow-x-auto bg-gray-50 transition-all md:relative"
+    class="absolute top-0 z-10 flex h-full flex-col overflow-x-auto bg-gray-50 transition-all md:relative"
     :class="{
       'w-full md:w-1/3': toolBoxStore.visible,
       'w-0 md:w-[4.5rem]': !toolBoxStore.visible,
@@ -134,6 +134,7 @@ import IconStrokedArrowDown from '../../../../components/svg/IconStrokedArrowDow
 import TabButton from '../../../../components/tab/TabButton.vue';
 import { useToolBoxStore } from './toolBoxStore';
 import { watch } from 'vue';
+import { onMounted } from 'vue';
 
 const { t } = useI18n();
 
@@ -164,6 +165,9 @@ watch(mdAndLarger, (newVal) => {
 
   toolBoxStore.toggleToolboxVisibility(false);
 });
+onMounted(() => {
+  //
+});
 </script>
 
 <style scoped>
@@ -175,4 +179,16 @@ watch(mdAndLarger, (newVal) => {
   writing-mode: vertical-lr;
   text-orientation: mixed;
 }
+
+.mobile-toolbox {
+  right: 0rem;
+  --tw-rotate: 0deg;
+  bottom: 1rem;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+#oa-table-with-sticky-header .mobile-toolbox {
+  bottom: 2.9rem !important;
+}
 </style>

databrowser/src/locales/en.json

@@ -221,6 +221,16 @@
             "resetAllFilters": "Reset all filters"
           },
           "panelName": "Filter"
+        },
+        "deprecatedInfoTooltip": {
+          "deprecatedInfo": {
+            "infoPopup": {
+              "header": "Attribute is deprecated",
+              "body": "A deprecated attribute is one that is phasing out and will not be available anymore in the future. It is not recommended to use it.",
+              "linkHref": "https://github.com/noi-techpark/odh-docs/wiki/What-does-%22deprecated%22-mean%3F",
+              "linkText": "More info"
+            }
+          }
         }
       },
       "viewLinks": {
@@ -297,7 +307,7 @@
     "cancel": "Cancel",
     "save": "Save",
     "inputFilter": {
-      "labelButton": "Filter",
+      "labelButton": "Apply Filter",
       "labelPlaceholder": "Insert filter value ..."
     },
     "inputSearch": {

databrowser/src/pages/datasets/overview/OverviewListPage.vue

@@ -99,8 +99,52 @@ SPDX-License-Identifier: AGPL-3.0-or-later
               class="w-full truncate border-t border-gray-300 px-3 py-2 text-left text-dialog"
               @click="toggleFilter('deprecated')"
             >
-              <ToggleCustom v-model="_inputModels.deprecated" class="mr-2" />
-              {{ t('overview.listPage.deprecated') }}
+              <div class="flex items-center gap-2">
+                <div>
+                  <ToggleCustom
+                    v-model="_inputModels.deprecated"
+                    class="mr-2"
+                  />
+                  {{ t('overview.listPage.deprecated') }}
+                </div>
+                <div>
+                  <InfoPopover>
+                    <PopoverCustomPanel>
+                      <PopoverContentHeader class="pb-0">
+                        {{
+                          t(
+                            'datasets.listView.toolBox.deprecatedInfoTooltip.deprecatedInfo.infoPopup.header'
+                          )
+                        }}
+                      </PopoverContentHeader>
+                      <PopoverContent class="flex max-w-sm flex-col gap-3 pt-2">
+                        {{
+                          t(
+                            'datasets.listView.toolBox.deprecatedInfoTooltip.deprecatedInfo.infoPopup.body'
+                          )
+                        }}
+                        <ButtonExternalLink
+                          class="flex items-center justify-center p-2"
+                          target="_blank"
+                          :href="
+                            t(
+                              'datasets.listView.toolBox.deprecatedInfoTooltip.deprecatedInfo.infoPopup.linkHref'
+                            )
+                          "
+                          :size="Size.xs"
+                          :variant="Variant.ghost"
+                        >
+                          {{
+                            t(
+                              'datasets.listView.toolBox.deprecatedInfoTooltip.deprecatedInfo.infoPopup.linkText'
+                            )
+                          }}
+                        </ButtonExternalLink>
+                      </PopoverContent>
+                    </PopoverCustomPanel>
+                  </InfoPopover>
+                </div>
+              </div>
             </button>
             <Accordion
               v-for="filter in dynamicFilters"
@@ -204,6 +248,9 @@ import AppLayout from '../../../layouts/AppLayout.vue';
 import OverviewCardItem from './OverviewCardItem.vue';
 import { useMetaDataDatasets, useOtherDatasets } from './useDatasets';
 import OverviewListPageHero from './OverviewListPageHero.vue';
+import { Size, Variant } from '../../../components/button/types';
+import ButtonExternalLink from '../../../components/button/ButtonExternalLink.vue';
+import PopoverContentHeader from '../../../components/popover/PopoverContentHeader.vue';
 
 type TourismMetaDataIndexes =
   | 'dataSpace'