Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
Entwicklungsportal - ARCHIVED
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Service Desk
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
FIT-Connect
Entwicklungsportal - ARCHIVED
Commits
6edc7c44
Commit
6edc7c44
authored
1 year ago
by
Andy Leuchtturm
Browse files
Options
Downloads
Patches
Plain Diff
deactivate FilterSidebarLeft for Testing
parent
69b5e5b1
No related branches found
Branches containing commit
No related tags found
1 merge request
!86
planning#1203: Standards
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
pages/standards/index.tsx
+20
-20
20 additions, 20 deletions
pages/standards/index.tsx
views/it-standards/FilterSidebarLeft.tsx
+69
-69
69 additions, 69 deletions
views/it-standards/FilterSidebarLeft.tsx
with
89 additions
and
89 deletions
pages/standards/index.tsx
+
20
−
20
View file @
6edc7c44
...
...
@@ -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
}
/>
}
})
}
...
...
This diff is collapsed.
Click to expand it.
views/it-standards/FilterSidebarLeft.tsx
+
69
−
69
View file @
6edc7c44
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
>
)
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment