feat: add style for deprecated fields. Toggle deprecated fields from …

…views.

databrowser/src/components/tag/TagCustom.vue

@@ -74,6 +74,11 @@ const types: Record<TagType, Color> = {
     text: 'text-black',
     dot: 'bg-black',
   },
+  purple: {
+    background: 'bg-deprecated',
+    text: 'text-white',
+    dot: 'bg-white',
+  },
 };
 
 const props = withDefaults(

databrowser/src/components/tag/types.ts

@@ -11,6 +11,7 @@ export type TagType =
   | 'red'
   | 'yellow'
   | 'info'
-  | 'pink';
+  | 'pink'
+  | 'purple';
 
 export type TagSize = 'xs' | 'md';

databrowser/src/components/toggle/ToggleCustom.vue

@@ -25,10 +25,21 @@ import { Switch } from '@headlessui/vue';
 const emit = defineEmits(['update:modelValue']);
 
 const props = withDefaults(
-  defineProps<{ modelValue?: boolean; disabled?: boolean }>(),
+  defineProps<{
+    modelValue?: boolean;
+    disabled?: boolean;
+    activeBorderClass?: string;
+    activeBgClass?: string;
+    inactiveBorderClass?: string;
+    inactiveBgClass?: string;
+  }>(),
   {
     modelValue: true,
     disabled: false,
+    activeBorderClass: 'border-green-400',
+    activeBgClass: 'bg-green-400',
+    inactiveBorderClass: 'border-red-400',
+    inactiveBgClass: 'bg-red-400',
   }
 );
 
@@ -42,14 +53,16 @@ const switchColorClass = computed(() => {
     return 'border-gray-400';
   }
 
-  return turnedOn.value === true ? 'border-green-400' : 'border-red-400';
+  return turnedOn.value === true
+    ? props.activeBorderClass
+    : props.inactiveBorderClass;
 });
 
 const spanColorClass = computed(() => {
   if (props.disabled === true) {
     return 'bg-gray-400';
   }
 
-  return turnedOn.value === true ? 'bg-green-400' : 'bg-red-400';
+  return turnedOn.value === true ? props.activeBgClass : props.inactiveBgClass;
 });
 </script>

databrowser/src/domain/datasets/ui/category/SubCategories.vue

@@ -56,6 +56,7 @@ const props = defineProps<{
   category?: Category;
   showAll?: boolean;
   editable?: boolean;
+  showDeprecated?: boolean;
 }>();
 
 const { computeProperties } = usePropertyComputation();
@@ -67,7 +68,8 @@ const subCategoriesWithValues = computed(() =>
       props.data,
       subCategory.properties,
       props.showAll ?? false,
-      props.editable ?? false
+      props.editable ?? false,
+      props.showDeprecated ?? false
     ),
   }))
 );

databrowser/src/domain/datasets/ui/category/SubCategoryItem.vue

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="relative pb-2" :class="{ 'has-error': hasError }">
+  <div
+    class="relative pb-2"
+    :class="{
+      'has-error': hasError,
+      'my-1 border border-deprecated p-2': hasDeprecationInfo,
+    }"
+  >
     <div
       v-if="hasTitleOrTooltip"
       class="relative flex items-center justify-between py-1"
@@ -32,12 +38,27 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         {{ err }}
       </li>
     </ul>
+
+    <div v-if="hasDeprecationInfo" class="mt-2 flex flex-col gap-2">
+      <div
+        v-for="(item, i) in availableDeprecationInfo"
+        :key="i"
+        class="flex items-center justify-between gap-3 rounded bg-deprecated/10 px-2 py-3 text-sm text-deprecated"
+      >
+        <p v-if="availableDeprecationInfo.length > 1">
+          {{ item.pathToDeprecation }}
+        </p>
+        <p v-else>This field is deprecated</p>
+        <TagCustom type="purple" text="Deprecated" has-dot />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import IconInfo from '../../../../components/svg/IconInfo.vue';
+import TagCustom from '../../../../components/tag/TagCustom.vue';
 import { DeprecationInfo } from '../../config/types';
 
 const props = defineProps<{
@@ -56,4 +77,14 @@ const hasTitleOrTooltip = computed(
 const hasError = computed(
   () => props.errors != null && props.errors.length > 0
 );
+
+const hasDeprecationInfo = computed(
+  () => props.deprecationInfo != null && props.deprecationInfo.length > 0
+);
+
+const availableDeprecationInfo = computed(() => {
+  return props.deprecationInfo
+    ? props.deprecationInfo.map((item) => item.deprecations).flat() || []
+    : [];
+});
 </script>

databrowser/src/domain/datasets/ui/category/usePropertyComputation.ts

@@ -17,15 +17,24 @@ export const usePropertyComputation = () => {
     data: unknown,
     properties: PropertyConfig[],
     showAllProperties: boolean,
-    editable: boolean
+    editable: boolean,
+    showDeprecatedProperties: boolean
   ): PropertyConfigWithValue[] => {
     // Add data to properties such that it can be used in the render component
-    const propertiesWithValue: PropertyConfigWithValue[] = properties.map(
-      (property) => {
+    const propertiesWithValue: PropertyConfigWithValue[] = properties
+      .filter((property) => {
+        if (showDeprecatedProperties) {
+          return true;
+        }
+
+        return (
+          !property.deprecationInfo || property.deprecationInfo.length === 0
+        );
+      })
+      .map((property) => {
         const value = buildTargetFromMapping(data, property);
         return { ...property, value };
-      }
-    );
+      });
 
     // Show all properties in edit mode. The emptiness value
     // is set to false for all properties configs, to make sure that

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

@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         :category="currentCategory"
         :sub-categories="subCategories"
         :show-all="showAll"
+        :show-deprecated="showDeprecated"
         :editable="editable"
       />
     </div>
@@ -47,6 +48,7 @@ defineProps<{
   currentCategory: Category | undefined;
   slug: string;
   showAll: boolean;
+  showDeprecated: boolean;
   showEditHint: boolean;
   editable: boolean;
 }>();

databrowser/src/domain/datasets/ui/common/fieldsToggleStyles.ts

@@ -0,0 +1,7 @@
+// SPDX-FileCopyrightText: NOI Techpark <[email protected]>
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export const containerClasses = 'mt-3 hidden md:block w-[12.5%]';
+export const wrapperClasses =
+  'px-4 py-2 flex items-center gap-1 w-full justify-between flex-wrap lg:flex-nowrap';

databrowser/src/domain/datasets/ui/common/showDeprecatedFields/ShowDeprecatedFields.vue

@@ -0,0 +1,46 @@
+<!--
+SPDX-FileCopyrightText: NOI Techpark <digital@noi.bz.it>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <div :class="[containerClasses, showDeprecated ? 'bg-deprecated/10' : '']">
+    <div :class="wrapperClasses">
+      <div
+        class="truncate text-sm"
+        :class="{ 'text-deprecated': showDeprecated }"
+      >
+        {{ t('datasets.detailView.showDeprecatedFields') }}
+      </div>
+      <ToggleCustom
+        v-model="showDeprecated"
+        :disabled="disabled"
+        active-bg-class="bg-deprecated"
+        active-border-class="border-deprecated"
+        inactive-bg-class="bg-gray-400"
+        inactive-border-class="border-gray-400"
+        class="shrink-0"
+        data-test="show-deprecated-fields"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ToggleCustom from '../../../../../components/toggle/ToggleCustom.vue';
+import { containerClasses, wrapperClasses } from '../fieldsToggleStyles';
+
+const { t } = useI18n();
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps<{ modelValue?: boolean; disabled?: boolean }>();
+
+const showDeprecated = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+});
+</script>

databrowser/src/domain/datasets/ui/common/showEmptyFields/ShowEmptyFields.vue

@@ -5,23 +5,30 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <ContentAlignmentX class="mt-3 hidden items-center md:flex">
-    <div class="mr-4 text-sm">
-      {{ t('datasets.detailView.showEmptyFields') }}
+  <div :class="[containerClasses, showAll ? 'bg-red-100' : '']">
+    <div :class="wrapperClasses">
+      <div class="truncate text-sm" :class="{ 'text-red-500': showAll }">
+        {{ t('datasets.detailView.showEmptyFields') }}
+      </div>
+      <ToggleCustom
+        v-model="showAll"
+        :disabled="disabled"
+        active-bg-class="bg-red-400"
+        active-border-class="border-red-400"
+        inactive-bg-class="bg-gray-400"
+        inactive-border-class="border-gray-400"
+        class="shrink-0"
+        data-test="show-empty-fields"
+      />
     </div>
-    <ToggleCustom
-      v-model="showAll"
-      :disabled="disabled"
-      data-test="show-empty-fields"
-    />
-  </ContentAlignmentX>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import ContentAlignmentX from '../../../../../components/content/ContentAlignmentX.vue';
 import ToggleCustom from '../../../../../components/toggle/ToggleCustom.vue';
+import { containerClasses, wrapperClasses } from '../fieldsToggleStyles';
 
 const { t } = useI18n();
 

databrowser/src/domain/datasets/ui/detailView/DetailView.vue

@@ -9,6 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <template v-else>
     <div>
       <ShowEmptyFields v-model="showAll" />
+      <ShowDeprecatedFields v-model="showDeprecated" />
     </div>
     <div class="flex md:overflow-y-auto">
       <MainAndSubCategories
@@ -18,6 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
         :current-category="currentCategory"
         :slug="slug"
         :show-all="showAll"
+        :show-deprecated="showDeprecated"
         :show-edit-hint="false"
         :editable="false"
       />
@@ -32,9 +34,11 @@ import LoadingError from '../../../../components/loading/LoadingError.vue';
 import MainAndSubCategories from '../common/MainAndSubCategories.vue';
 import { useSingleRecordLoad } from '../common/load/useSingleRecordLoad';
 import ShowEmptyFields from '../common/showEmptyFields/ShowEmptyFields.vue';
+import ShowDeprecatedFields from '../common/showDeprecatedFields/ShowDeprecatedFields.vue';
 import ExportDatasetsToolBox from '../toolBox/ExportDatasetsToolBox.vue';
 
 const showAll = ref(false);
+const showDeprecated = ref(false);
 
 const {
   isError,

databrowser/src/domain/datasets/ui/editView/EditView.vue

@@ -34,6 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
       />
       <div class="flex h-screen flex-col justify-between overflow-auto">
         <ShowEmptyFields v-model="showAll" :disabled="true" />
+        <ShowDeprecatedFields v-model="showDeprecated" />
         <div
           class="flex grow md:overflow-y-auto"
           :class="[{ 'pointer-events-none opacity-50': isMutateLoading }]"
@@ -46,6 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
             :current-category="currentCategory"
             :slug="slug"
             :show-all="true"
+            :show-deprecated="showDeprecated"
             :show-edit-hint="true"
             :editable="true"
           />
@@ -82,6 +84,7 @@ import MainAndSubCategories from '../common/MainAndSubCategories.vue';
 import { useSingleRecordLoad } from '../common/load/useSingleRecordLoad';
 import { useSingleRecordMutateData } from '../common/load/useSingleRecordMutateData';
 import ShowEmptyFields from '../common/showEmptyFields/ShowEmptyFields.vue';
+import ShowDeprecatedFields from '../common/showDeprecatedFields/ShowDeprecatedFields.vue';
 import EditFooter from './EditFooter.vue';
 import EditSaveError from './EditSaveError.vue';
 import DiscardChangesDialog from './dialogs/DiscardChangesDialog.vue';
@@ -95,6 +98,7 @@ import { useEditStoreSync } from './useEditStoreSync';
 const { t } = useI18n();
 
 const showAll = ref(true);
+const showDeprecated = ref(false);
 
 const auth = useAuth();