deactivate FilterSidebarLeft for Testing

pages/standards/index.tsx

@@ -3,7 +3,7 @@
  */
 import NavHeader from '@/views/it-standards/Navigationheader'
 import Intro from '@/views/it-standards/Intro'
-import FilterSidebarLeft from '@/views/it-standards/FilterSidebarLeft'
+// import FilterSidebarLeft from '@/views/it-standards/FilterSidebarLeft'
 import { useRouter } from 'next/router'
 import { IconArrowBigRight, IconMail, /* IconBooks, */ IconBook2 } from '@tabler/icons-react'
 
@@ -15,7 +15,7 @@ import Tooltip from '@/components/Tooltip'
 import Chip from '@/components/Chip'
 import Link from 'next/link'
 
-/* import filterData from '@/lib/assets/data/currentFilter.json' */
+import filterData from '@/lib/assets/data/currentFilter.json' /* */
 import useServiceFilter from 'shared/use-service-filter'
 import { ServiceContent } from 'types/ServiceContent'
 import { Tag } from 'types/content/'
@@ -25,21 +25,21 @@ import LifecyclePicture from '@/components/it-standards/LifecyclePicture'
 export default function ({ contentsString }) {
     const contents: ServiceContent[] = JSON.parse(contentsString)
     const router = useRouter()
-    /* const filters = filterData['filter-it-standards'] */
-    const { filteredServices /*, activeTagFilters, filterToParams */ } = useServiceFilter(contents, router.query.filter)
+    const filters = filterData['filter-it-standards'] /* */
+    const { filteredServices, activeTagFilters, filterToParams /**/ } = useServiceFilter(contents, router.query.filter)
     const { getImgPath } = useImgPath()
 
-    /* function handleFilters(event) {
-            const filter = event.target.id.split('-')[0]
-            if (event.target.checked) {
-                activeTagFilters[filter].push(event.target.value)
-            } else if (activeTagFilters[filter].indexOf(event.target.value) >= 0) {
-                activeTagFilters[filter].splice(activeTagFilters[filter].indexOf(event.target.value), 1)
-            }
-            // we always track filters in query params, param change will trigger filtering
-            router.push(`?filter=${encodeURIComponent(filterToParams())}`, undefined, { shallow: true })
+    function handleFilters(event) {
+        const filter = event.target.id.split('-')[0]
+        if (event.target.checked) {
+            activeTagFilters[filter].push(event.target.value)
+        } else if (activeTagFilters[filter].indexOf(event.target.value) >= 0) {
+            activeTagFilters[filter].splice(activeTagFilters[filter].indexOf(event.target.value), 1)
         }
-    */
+        // we always track filters in query params, param change will trigger filtering
+        router.push(`?filter=${encodeURIComponent(filterToParams())}`, undefined, { shallow: true })
+    }
+    /**/
 
     const hasContentTag = (content: ServiceContent, tagName: string) => {
         const tags: Tag[] = content.tags.filter(tag => tag.name + ':' + tag.value === tagName)
@@ -56,19 +56,18 @@ export default function ({ contentsString }) {
                         <Intro />
                     </header>
                     <form name="filters" className="lg:block lg:col-span-2 xl:col-span-2">
-                        <FilterSidebarLeft contentsString={contentsString} />
-                        { /* <nav
-                            aria-label="Sidebar"
-                            className="sticky top-4 divide-y divide-gray-300"
-                        >
+                        { /* <FilterSidebarLeft contentsString={contentsString} /> */}
+                        <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
                             {filters.map((filter) => (
                                 <div className="pt-6 mt-4" key={filter.id}>
+                                    { /* Überschrift für Filterkategorie */}
                                     <p
                                         className="text-xs font-semibold text-gray-500 uppercase tracking-wider"
                                         id={`${filter.id}-headline`}
                                     >
                                         {filter.label}
                                     </p>
+                                    {/* Überschrift für Screenreader zur Verfügung stellen */}
                                     <div
                                         className="pl-3 mt-3 space-y-2"
                                         aria-labelledby={`${filter.id}-headline`}
@@ -95,7 +94,7 @@ export default function ({ contentsString }) {
                                     </div>
                                 </div>
                             ))}
-                                        </nav> */ }
+                        </nav>
                     </form>
                     <main className="lg:col-start-3 xl:col-start-3 lg:col-span-9 xl:col-span-9">
                         <div className="mt-4">
@@ -149,6 +148,7 @@ export default function ({ contentsString }) {
                                                 {service.tags.map((tag: Tag, key: number) => {
                                                     // return <ServiceTag key={key} tag={tag} style={'bg-gray-400'} />
                                                     if (tag.name == 'status') {
+                                                        // bei dem Tag 'status'(=Lebenszyklusphase) wird das passende Bild angezeigt.
                                                         return <LifecyclePicture status = {tag.value} />
                                                     }
                                                 })}

views/it-standards/FilterSidebarLeft.tsx

-import useBasePath from "shared/use-base-path";
-import filterData from "@/lib/assets/data/currentFilter.json";
-import useServiceFilter from "shared/use-service-filter";
-import { ServiceContent } from "types/ServiceContent";
-import { useRouter } from "next/router";
+// import useBasePath from 'shared/use-base-path'
+import filterData from '@/lib/assets/data/currentFilter.json'
+import useServiceFilter from 'shared/use-service-filter'
+import { ServiceContent } from 'types/ServiceContent'
+import { useRouter } from 'next/router'
 
 export default function ({ contentsString }) {
-  const contents: ServiceContent[] = JSON.parse(contentsString);
-  const basePath = useBasePath();
-  const filters = filterData["filter-it-standards"];
-  const router = useRouter();
-  const { filteredServices, activeTagFilters, filterToParams } =
-    useServiceFilter(contents, router.query.filter);
+    const contents: ServiceContent[] = JSON.parse(contentsString)
+    // const basePath = useBasePath()
+    const filters = filterData['filter-it-standards']
+    const router = useRouter()
+    const { /* filteredServices, */ activeTagFilters, filterToParams } =
+    useServiceFilter(contents, router.query.filter)
 
-  function handleFilters(event) {
-    const filter = event.target.id.split("-")[0];
-    console.log(filter);
-    if (event.target.checked) {
-      activeTagFilters[filter].push(event.target.value);
-    } else if (activeTagFilters[filter].indexOf(event.target.value) >= 0) {
-      activeTagFilters[filter].splice(
-        activeTagFilters[filter].indexOf(event.target.value),
-        1
-      );
+    function handleFilters(event) {
+        const filter = event.target.id.split('-')[0]
+        console.log(filter)
+        if (event.target.checked) {
+            activeTagFilters[filter].push(event.target.value)
+        } else if (activeTagFilters[filter].indexOf(event.target.value) >= 0) {
+            activeTagFilters[filter].splice(
+                activeTagFilters[filter].indexOf(event.target.value),
+                1
+            )
+        }
+        // we always track filters in query params, param change will trigger filtering
+        router.push(`?filter=${encodeURIComponent(filterToParams())}`, undefined, {
+            shallow: true,
+        })
     }
-    // we always track filters in query params, param change will trigger filtering
-    router.push(`?filter=${encodeURIComponent(filterToParams())}`, undefined, {
-      shallow: true,
-    });
-  }
 
-  return (
-    <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
-      {filters.map((filter) => (
-        <div className="pt-6 mt-4" key={filter.id}>
-          <p
-            className="text-xs font-semibold text-gray-500 uppercase tracking-wider"
-            id={`${filter.id}-headline`}
-          >
-            {filter.label}
-          </p>
-          <div
-            className="pl-3 mt-3 space-y-2"
-            aria-labelledby={`${filter.id}-headline`}
-          >
-            {filter.options.map((option) => (
-              <div key={option.value} className="flex items-center">
-                <input
-                  onClick={handleFilters}
-                  id={`${filter.id}-${option.id}`}
-                  name={`${filter.id}[]`}
-                  defaultValue={`${filter.id}:${option.id}`}
-                  defaultChecked={
-                    router.query.filter
-                      ? router.query.filter.includes(
-                          `${filter.id}:${option.id}`
-                        )
-                      : false
-                  }
-                  type="checkbox"
-                  className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-                />
-                <label
-                  htmlFor={`${filter.id}-${option.id}`}
-                  className="ml-3 text-sm text-gray-500"
-                >
-                  {option.label}
-                </label>
-              </div>
+    return (
+        <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
+            {filters.map((filter) => (
+                <div className="pt-6 mt-4" key={filter.id}>
+                    <p
+                        className="text-xs font-semibold text-gray-500 uppercase tracking-wider"
+                        id={`${filter.id}-headline`}
+                    >
+                        {filter.label}
+                    </p>
+                    <div
+                        className="pl-3 mt-3 space-y-2"
+                        aria-labelledby={`${filter.id}-headline`}
+                    >
+                        {filter.options.map((option) => (
+                            <div key={option.value} className="flex items-center">
+                                <input
+                                    onClick={handleFilters}
+                                    id={`${filter.id}-${option.id}`}
+                                    name={`${filter.id}[]`}
+                                    defaultValue={`${filter.id}:${option.id}`}
+                                    defaultChecked={
+                                        router.query.filter
+                                            ? router.query.filter.includes(
+                                                `${filter.id}:${option.id}`
+                                            )
+                                            : false
+                                    }
+                                    type="checkbox"
+                                    className="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
+                                />
+                                <label
+                                    htmlFor={`${filter.id}-${option.id}`}
+                                    className="ml-3 text-sm text-gray-500"
+                                >
+                                    {option.label}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </div>
             ))}
-          </div>
-        </div>
-      ))}
-    </nav>
-  );
+        </nav>
+    )
 }