@eeacms/volto-clms-theme 1.0.166 → 1.0.167

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -3
  2. package/package.json +1 -1
  3. package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx +82 -82
  4. package/src/components/CLMSProfileView/CLMSApiTokensView.jsx +24 -10
  5. package/src/components/CLMSUseCasesView/CLMSUseCasesView.jsx +29 -23
package/CHANGELOG.md CHANGED
@@ -4,11 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
- ### [1.0.166](https://github.com/eea/volto-clms-theme/compare/1.0.165...1.0.166) - 19 January 2023
7
+ ### [1.0.167](https://github.com/eea/volto-clms-theme/compare/1.0.166...1.0.167) - 2 February 2023
8
8
 
9
- #### :rocket: New Features
9
+ #### :bug: Bug Fixes
10
+
11
+ - fix: extract TabsComponent and PanelsComponent from CclVerticalTabsView to avoid unneeded re-renderings [ionlizarazu - [`a1fede2`](https://github.com/eea/volto-clms-theme/commit/a1fede23fa0f76a02c4f4b13ab5bf57f1985550d)]
10
12
 
11
- - feat: sort FAQ items according to their position [Mikel Larreategi - [`95a1fe9`](https://github.com/eea/volto-clms-theme/commit/95a1fe96e9e196048f1e2a19263147970c1086ae)]
13
+ #### :hammer_and_wrench: Others
14
+
15
+ - useCasesView conditions [ionlizarazu - [`4d97a80`](https://github.com/eea/volto-clms-theme/commit/4d97a802843973ee26ebb014a44ed1031ac924fa)]
16
+ - api token bug fix [Unai - [`856aa9b`](https://github.com/eea/volto-clms-theme/commit/856aa9b22b438f25586e6a435982c566bc4f32a5)]
17
+ ### [1.0.166](https://github.com/eea/volto-clms-theme/compare/1.0.165...1.0.166) - 19 January 2023
12
18
 
13
19
  ### [1.0.165](https://github.com/eea/volto-clms-theme/compare/1.0.164...1.0.165) - 19 January 2023
14
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-clms-theme",
3
- "version": "1.0.166",
3
+ "version": "1.0.167",
4
4
  "description": "volto-clms-theme: Volto theme for CLMS site",
5
5
  "main": "src/index.js",
6
6
  "author": "CodeSyntax for the European Environment Agency",
package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx CHANGED
@@ -12,103 +12,103 @@ import './fontawesome';
12
12
 
13
13
  import cx from 'classnames';
14
14
 
15
- const CclVerticalTabsView = (props) => {
15
+ const handleClick = (e, tab, activeTab, setActiveTab) => {
16
+ if (activeTab !== tab) {
17
+ setActiveTab(tab);
18
+ }
19
+ };
20
+
21
+ function isSpan(subTab, nextSubTab) {
22
+ return subTab === false && nextSubTab !== false;
23
+ }
24
+
25
+ const TabsComponent = (props) => {
16
26
  const {
17
- metadata = {},
18
27
  tabsList = [],
19
28
  ExtraComponent = () => {
20
29
  return '';
21
30
  },
31
+ activeTab = null,
32
+ tabs = {},
33
+ setActiveTab,
22
34
  } = props;
23
-
24
- const handleClick = (e, tab, activeTab, setActiveTab) => {
25
- if (activeTab !== tab) {
26
- setActiveTab(tab);
27
- }
28
- };
29
-
30
- function isSpan(subTab, nextSubTab) {
31
- return subTab === false && nextSubTab !== false;
32
- }
33
-
34
- const PanelsComponent = () => {
35
- const { activeTab = null, tabs = {} } = props;
36
- return (
37
- <div className="right-content cont-w-75">
35
+ return (
36
+ <div className="left-content cont-w-25">
37
+ {<ExtraComponent />}
38
+ <nav className="left-menu">
38
39
  {tabsList.map((tab, index) => {
39
40
  const title = tabs[tab].title;
41
+ const subTab = tabs[tab]?.subTab?.subtab || false;
42
+ const tabIndex = index + 1;
43
+ const nextSubTab = tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
44
+ const defaultTitle = `Tab ${tabIndex}`;
40
45
  const tabHash = `tab=${slugify(title)}`;
41
46
  return (
42
- <Route key={index} to={'#' + tabHash}>
43
- <div
44
- className={cx('panel', tab === activeTab && 'panel-selected')}
45
- role="tabpanel"
46
- aria-hidden="false"
47
- >
48
- <RenderBlocks
49
- {...props}
50
- metadata={metadata}
51
- content={tabs[tab]}
52
- />
53
- </div>
54
- </Route>
47
+ <div
48
+ key={index}
49
+ id={tabHash}
50
+ className={cx(
51
+ 'card',
52
+ tab === activeTab && 'active',
53
+ subTab && 'subcard',
54
+ )}
55
+ >
56
+ {isSpan(subTab, nextSubTab) ? (
57
+ <span>{title || defaultTitle}</span>
58
+ ) : (
59
+ <NavLink
60
+ to={'#' + tabHash}
61
+ className="collapsed"
62
+ onClick={(e) => {
63
+ handleClick(e, tab, activeTab, setActiveTab);
64
+ }}
65
+ onKeyDown={(e) => {
66
+ handleClick(e, tab, activeTab, setActiveTab);
67
+ }}
68
+ >
69
+ {title || defaultTitle}
70
+ </NavLink>
71
+ )}
72
+ </div>
55
73
  );
56
74
  })}
57
- </div>
58
- );
59
- };
60
- const TabsComponent = () => {
61
- return (
62
- <div className="left-content cont-w-25">
63
- {<ExtraComponent />}
64
- <nav className="left-menu">
65
- {tabsList.map((tab, index) => {
66
- const { activeTab = null, tabs = {}, setActiveTab } = props;
67
- const title = tabs[tab].title;
68
- const subTab = tabs[tab]?.subTab?.subtab || false;
69
- const tabIndex = index + 1;
70
- const nextSubTab =
71
- tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
72
- const defaultTitle = `Tab ${tabIndex}`;
73
- const tabHash = `tab=${slugify(title)}`;
74
- return (
75
- <div
76
- key={index}
77
- id={tabHash}
78
- className={cx(
79
- 'card',
80
- tab === activeTab && 'active',
81
- subTab && 'subcard',
82
- )}
83
- >
84
- {isSpan(subTab, nextSubTab) ? (
85
- <span>{title || defaultTitle}</span>
86
- ) : (
87
- <NavLink
88
- to={'#' + tabHash}
89
- className="collapsed"
90
- onClick={(e) => {
91
- handleClick(e, tab, activeTab, setActiveTab);
92
- }}
93
- onKeyDown={(e) => {
94
- handleClick(e, tab, activeTab, setActiveTab);
95
- }}
96
- >
97
- {title || defaultTitle}
98
- </NavLink>
99
- )}
100
- </div>
101
- );
102
- })}
103
- </nav>
104
- </div>
105
- );
106
- };
75
+ </nav>
76
+ </div>
77
+ );
78
+ };
107
79
 
80
+ const PanelsComponent = (props) => {
81
+ const { metadata = {}, tabsList = [], activeTab = null, tabs = {} } = props;
82
+ return (
83
+ <div className="right-content cont-w-75">
84
+ {tabsList.map((tab, index) => {
85
+ const title = tabs[tab].title;
86
+ const tabHash = `tab=${slugify(title)}`;
87
+ return (
88
+ <Route key={index} to={'#' + tabHash}>
89
+ <div
90
+ className={cx('panel', tab === activeTab && 'panel-selected')}
91
+ role="tabpanel"
92
+ aria-hidden="false"
93
+ >
94
+ <RenderBlocks
95
+ {...props}
96
+ metadata={metadata}
97
+ content={tabs[tab]}
98
+ />
99
+ </div>
100
+ </Route>
101
+ );
102
+ })}
103
+ </div>
104
+ );
105
+ };
106
+
107
+ const CclVerticalTabsView = (props) => {
108
108
  return (
109
109
  <div className="ccl-container ccl-container-flex tab-container">
110
- <TabsComponent />
111
- <PanelsComponent />
110
+ <TabsComponent {...props} />
111
+ <PanelsComponent {...props} />
112
112
  </div>
113
113
  );
114
114
  };
package/src/components/CLMSProfileView/CLMSApiTokensView.jsx CHANGED
@@ -183,15 +183,21 @@ class CLMSApiTokensView extends Component {
183
183
 
184
184
  deleteToken(key_id) {
185
185
  this.props.deleteTokens(key_id);
186
- this.props.getTokens();
186
+ this.componentDidMount();
187
187
  }
188
188
 
189
189
  onClose() {
190
- this.componentDidMount();
190
+ this.props.getTokens();
191
191
  this.setState({
192
192
  createNewToken: false,
193
193
  public_key: undefined,
194
194
  private_key: undefined,
195
+ tokenTitle: '',
196
+ modal: false,
197
+ createdToken: true,
198
+ textToCopy: '',
199
+ key_id: '',
200
+ value: '',
195
201
  });
196
202
  }
197
203
 
@@ -209,7 +215,10 @@ class CLMSApiTokensView extends Component {
209
215
  createNewToken: true,
210
216
  public_key: undefined,
211
217
  private_key: undefined,
218
+ createdToken: false,
219
+ value: '',
212
220
  });
221
+ this.props.getTokens();
213
222
  }
214
223
 
215
224
  handlePost(tokenTitle) {
@@ -227,14 +236,15 @@ class CLMSApiTokensView extends Component {
227
236
  this.props.getUser(this.props.userId);
228
237
  this.props.getTokens();
229
238
  this.setState({
230
- value: undefined,
231
- tokenTitle: undefined,
232
- button: false,
233
- // createNewToken: true,
239
+ tokenTitle: '',
240
+ createNewToken: true,
234
241
  modal: false,
235
242
  createdToken: false,
236
- textToCopy: undefined,
237
- key_id: undefined,
243
+ textToCopy: '',
244
+ key_id: '',
245
+ public_key: undefined,
246
+ private_key: undefined,
247
+ value: '',
238
248
  });
239
249
  }
240
250
 
@@ -311,7 +321,9 @@ class CLMSApiTokensView extends Component {
311
321
  {this.state.createNewToken === false && (
312
322
  <CclButton
313
323
  mode={'filled'}
314
- onClick={this.handleClick}
324
+ onClick={() => {
325
+ this.handleClick();
326
+ }}
315
327
  to={`profile#${slugify(
316
328
  this.props.intl.formatMessage(messages.ApiTokens),
317
329
  )}`}
@@ -373,6 +385,8 @@ class CLMSApiTokensView extends Component {
373
385
  disabled={
374
386
  this.state.createdToken === true ||
375
387
  this.state.tokenTitle === ''
388
+ ? true
389
+ : false
376
390
  }
377
391
  value={this.props.intl.formatMessage(
378
392
  messages.createToken,
@@ -414,7 +428,7 @@ class CLMSApiTokensView extends Component {
414
428
  disabled="disabled"
415
429
  id="created_token"
416
430
  name="createdToken"
417
- class="ccl-text-input"
431
+ className="ccl-text-input"
418
432
  value={JSON.stringify(item)}
419
433
  />
420
434
  <br />
package/src/components/CLMSUseCasesView/CLMSUseCasesView.jsx CHANGED
@@ -74,33 +74,39 @@ const CLMSUseCaseView = (props) => {
74
74
  ))}
75
75
  </List>
76
76
  )}
77
- <div className="usecase-list">
78
- <List celled horizontal className="usecase-other-values-list">
79
- <List.Item>
77
+ <p>
78
+ {(content?.taxonomy_use_case_spatial_coverage?.length > 0 ||
79
+ content?.responsibleOrganization ||
80
+ content?.submittingProducionYear) && (
81
+ <List celled horizontal className="usecase-other-values-list">
80
82
  {content?.submittingProducionYear && (
81
- <span className="usecase-year">
82
- {content?.submittingProducionYear}
83
- </span>
83
+ <List.Item>
84
+ <span className="usecase-year">
85
+ {content?.submittingProducionYear}
86
+ </span>
87
+ </List.Item>
88
+ )}
89
+ {content?.taxonomy_use_case_spatial_coverage.length > 0 && (
90
+ <List.Item>
91
+ {content?.taxonomy_use_case_spatial_coverage
92
+ .map(
93
+ (taxonomy_use_case_spatial_coverage) =>
94
+ taxonomy_use_case_spatial_coverage.title,
95
+ )
96
+ .sort()
97
+ .join(', ')}
98
+ </List.Item>
84
99
  )}
85
- </List.Item>
86
- <List.Item>
87
- {content?.taxonomy_use_case_spatial_coverage
88
- .map(
89
- (taxonomy_use_case_spatial_coverage) =>
90
- taxonomy_use_case_spatial_coverage.title,
91
- )
92
- .sort()
93
- .join(', ')}
94
- </List.Item>
95
- <List.Item>
96
100
  {content?.responsibleOrganization && (
97
- <span className="usecase-detail-item">
98
- {content?.responsibleOrganization}
99
- </span>
101
+ <List.Item>
102
+ <span className="usecase-detail-item">
103
+ {content?.responsibleOrganization}
104
+ </span>
105
+ </List.Item>
100
106
  )}
101
- </List.Item>
102
- </List>
103
- </div>
107
+ </List>
108
+ )}
109
+ </p>
104
110
  <div className="usecase-body-text">
105
111
  {content?.text && <StringToHTML string={content?.text?.data} />}
106
112
  </div>