@cu-mkp/editioncrafter 1.3.0 → 1.3.1-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -22,12 +22,6 @@ function getData(db) {
22
22
  tags
23
23
  LEFT JOIN taxonomies
24
24
  ON tags.taxonomy_id = taxonomies.id
25
- INNER JOIN taggings
26
- ON taggings.tag_id = tags.id
27
- INNER JOIN elements
28
- ON elements.id = taggings.element_id
29
- WHERE
30
- elements.type = 'zone'
31
25
  GROUP BY
32
26
  tags.xml_id`)
33
27
 
@@ -38,8 +32,9 @@ function getData(db) {
38
32
  }
39
33
 
40
34
  function TagFilters(props) {
41
- const { onToggleSelected, filters } = props
35
+ const { onToggleSelected, filters, query } = props
42
36
  const data = useMemo(() => getData(props.db), [props.db])
37
+ console.log(data.taxonomies)
43
38
  const [expanded, setExpanded] = useState(data.taxonomies?.map(() => (false)))
44
39
  const [displayedTags, setDisplayedTags] = useState({})
45
40
 
@@ -47,59 +42,78 @@ function TagFilters(props) {
47
42
 
48
43
  useEffect(() => {
49
44
  const tags = {}
45
+ const filteredTags = data.tags.filter(tag => (!query || !query.length || tag.name.toLowerCase().includes(query.toLowerCase())))
50
46
  for (let i = 0; i < data.taxonomies.length; i++) {
51
47
  const tax = data.taxonomies[i]
52
- const tagList = expanded[i] ? data.tags.filter(t => (t.taxonomy_id === tax.id)) : data.tags.filter(t => (t.taxonomy_id === tax.id))?.slice(0, 5)
53
- tags[tax.id] = tagList
48
+ const tagList = expanded[i] ? filteredTags.filter(t => (t.taxonomy_id === tax.id)) : filteredTags.filter(t => (t.taxonomy_id === tax.id))?.slice(0, 5)
49
+ if (tagList?.length) {
50
+ tags[tax.id] = tagList
51
+ }
54
52
  }
55
53
  setDisplayedTags(tags)
56
- }, [expanded, data])
54
+ }, [expanded, data, query])
57
55
 
58
56
  return (
59
- <div className="tag-filters">
60
- <div className="tag-list">
61
- <FormGroup>
62
- { data.taxonomies.map((tax, idx) => {
63
- const tagList = displayedTags[tax.id]
64
- return (
65
- <div key={tax.id}>
66
- <Typography>{tax.name}</Typography>
67
- <ul>
68
- { tagList?.map(tag => (
69
- <FormControlLabel
70
- as="li"
71
- control={(
72
- <Checkbox
73
- checked={filters.includes(tag.id)}
74
- onChange={() => {
75
- onToggleSelected(tag.id)
76
- toggleTag(tag.xml_id, 'left')
77
- toggleTag(tag.xml_id, 'right')
78
- }}
79
- />
80
- )}
81
- key={tag.id}
82
- label={tag.name}
83
- />
84
- ))}
85
- </ul>
86
- <button
87
- className="tag-filter-button"
88
- type="button"
89
- onClick={() => {
90
- const newState = [...expanded]
91
- newState[idx] = !expanded[idx]
92
- setExpanded(newState)
93
- }}
94
- >
95
- { !data.tags.filter(t => (t.taxonomy_id === tax.id))?.length || data.tags.filter(t => (t.taxonomy_id === tax.id)).length < 6 ? null : expanded[idx] ? 'Show less' : 'Show more'}
96
- </button>
57
+ <>
58
+ {
59
+ data?.tags?.length
60
+ ? (
61
+ <div className="tag-list">
62
+ <FormGroup>
63
+ { data.taxonomies.map((tax, idx) => {
64
+ const tagList = displayedTags[tax.id]
65
+ return (
66
+ tagList?.length
67
+ ? (
68
+ <div key={tax.id}>
69
+ <Typography>{`${tax.name.slice(0, 1).toUpperCase()}${tax.name.slice(1)}`}</Typography>
70
+ <ul>
71
+ { tagList?.map(tag => (
72
+ <FormControlLabel
73
+ as="li"
74
+ control={(
75
+ <Checkbox
76
+ checked={filters.includes(tag.id)}
77
+ onChange={() => {
78
+ onToggleSelected(tag.id)
79
+ if (tax.is_surface) {
80
+ toggleTag(tag.xml_id, 'left')
81
+ toggleTag(tag.xml_id, 'right')
82
+ }
83
+ }}
84
+ />
85
+ )}
86
+ key={tag.id}
87
+ label={tag.name}
88
+ />
89
+ ))}
90
+ </ul>
91
+ { data.tags.filter(t => (t.taxonomy_id === tax.id))?.length && data.tags.filter(t => (t.taxonomy_id === tax.id)).length >= 6
92
+ ? (
93
+ <button
94
+ className="tag-filter-button"
95
+ type="button"
96
+ onClick={() => {
97
+ const newState = [...expanded]
98
+ newState[idx] = !expanded[idx]
99
+ setExpanded(newState)
100
+ }}
101
+ >
102
+ { expanded[idx] ? 'Show less' : 'Show more'}
103
+ </button>
104
+ )
105
+ : null }
106
+ </div>
107
+ )
108
+ : null
109
+ )
110
+ })}
111
+ </FormGroup>
97
112
  </div>
98
113
  )
99
- })}
100
- </FormGroup>
101
- </div>
102
- </div>
114
+ : null
115
+ }
116
+ </>
103
117
  )
104
118
  }
105
119
 
@@ -26,13 +26,18 @@
26
26
  overflow-y: auto;
27
27
  position: absolute;
28
28
  top: 48px;
29
- left: 0;
29
+ left: 400px;
30
30
  background-color: #242629;
31
31
  z-index: 10000;
32
32
  padding: 12px 0 12px 12px;
33
- width: 100%;
33
+ width: 300px;
34
34
  height: 100%;
35
- max-height: 100dvh;
35
+ max-height: calc(97dvh - 48px);
36
+ border-left: solid white 1px;
37
+ }
38
+
39
+ .tag-explore .tag-filters .tag-filters-search {
40
+ margin-bottom: 24px;
36
41
  }
37
42
 
38
43
  .tag-explore .tag-filter-button {
@@ -153,8 +158,8 @@
153
158
  position: absolute;
154
159
  top: 0;
155
160
  left: 48px;
156
- height: 100vh;
157
- min-width: 300px;
161
+ height: 97dvh;
162
+ width: 400px;
158
163
  display: flex;
159
164
  flex-direction: column;
160
165
  background-color: #242629;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cu-mkp/editioncrafter",
3
3
  "type": "module",
4
- "version": "1.3.0",
4
+ "version": "1.3.1-beta.2",
5
5
  "private": false,
6
6
  "description": "A simple digital critical edition publication tool",
7
7
  "license": "MIT",