Skip to content

Commit 4014203

Browse files
thehabesthehabes
authored
Fix component errors and implement interlinks (#397)
* First pass to remove console errors * Second pass managing components, interfaces, and their interlink * Different permission check on these
1 parent 1cd43bd commit 4014203

7 files changed

Lines changed: 119 additions & 41 deletions

File tree

‎components/manage-layers/index.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@ class ProjectLayers extends HTMLElement {
1010

1111
}
1212

13-
async connectedCallback() {
13+
connectedCallback() {
1414
TPEN.attachAuthentication(this)
15-
16-
// Check if user has view permission
17-
const hasViewAccess = await CheckPermissions.checkViewAccess('LAYER', 'METADATA')
18-
if (!hasViewAccess) {
19-
this.shadowRoot.innerHTML = `<p>You don't have permission to view layers</p>`
20-
return
21-
}
22-
15+
2316
if (TPEN.activeProject?._id) {
2417
this.render()
2518
}
2619
TPEN.eventDispatcher.on('tpen-project-loaded', this.render.bind(this))
2720
}
2821

2922
render() {
23+
// Check if user has view permission (safe - project is loaded)
24+
const hasViewAccess = CheckPermissions.checkViewAccess('LAYER', 'METADATA')
25+
if (!hasViewAccess) {
26+
this.shadowRoot.innerHTML = `<p>You don't have permission to view layers</p>`
27+
return
28+
}
29+
3030
const layers = TPEN.activeProject.layers
3131
this.shadowRoot.innerHTML = `
3232
<style>

‎components/manage-pages/index.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,23 @@ class ManagePages extends HTMLElement {
88
this.attachShadow({ mode: "open" })
99
}
1010

11-
async connectedCallback() {
11+
connectedCallback() {
1212
TPEN.attachAuthentication(this)
13-
14-
// Check if user has view permission
15-
const hasViewAccess = await CheckPermissions.checkViewAccess('PAGE', 'METADATA')
16-
if (!hasViewAccess) {
17-
this.shadowRoot.innerHTML = `<p>You don't have permission to view pages</p>`
18-
return
19-
}
20-
13+
2114
if (TPEN.activeProject?._id) {
2215
this.render()
2316
}
2417
TPEN.eventDispatcher.on('tpen-project-loaded', this.render.bind(this))
2518
}
2619

2720
render() {
21+
// Check if user has view permission (safe - project is loaded)
22+
const hasViewAccess = CheckPermissions.checkViewAccess('PAGE', 'METADATA')
23+
if (!hasViewAccess) {
24+
this.shadowRoot.innerHTML = `<p>You don't have permission to view pages</p>`
25+
return
26+
}
27+
2828
this.shadowRoot.innerHTML = `
2929
<style>
3030
.layer-container {

‎components/project-options/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ class ProjectOptions extends HTMLElement {
9393
</style>
9494
<p>
9595
${project.description ?? 'No description provided.'}
96-
<a href="/components/update-metadata/index.html?projectID=${project._id}">✏️</a>
96+
<a href="/project/metadata?projectID=${project._id}">✏️</a>
9797
</p>
9898
<ul style="padding-left:1em;">
9999
<li><b>Label:</b> ${project.getLabel()}</li>

‎components/update-metadata/index.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,9 @@ class UpdateMetadata extends HTMLElement {
1313
return ['tpen-user-id']
1414
}
1515

16-
async connectedCallback() {
17-
// Check if user has view permission
18-
const hasViewAccess = await CheckPermissions.checkViewAccess('PROJECT', 'METADATA')
19-
if (!hasViewAccess) {
20-
this.shadowRoot.innerHTML = `<p>You don't have permission to view project metadata</p>`
21-
return
22-
}
23-
24-
this.addEventListener()
16+
connectedCallback() {
2517
TPEN.attachAuthentication(this)
18+
this.setupEventListeners()
2619
}
2720

2821
attributeChangedCallback(name, oldValue, newValue) {
@@ -35,18 +28,25 @@ class UpdateMetadata extends HTMLElement {
3528
}
3629
}
3730

38-
addEventListener() {
39-
eventDispatcher.on("tpen-project-loaded", () => this.openModal())
40-
document.getElementById("add-field-btn").addEventListener("click", () => {
31+
setupEventListeners() {
32+
eventDispatcher.on("tpen-project-loaded", () => this.openModal())
33+
document.getElementById("add-field-btn")?.addEventListener("click", () => {
4134
this.addMetadataField()
4235
})
4336

44-
document.getElementById("save-metadata-btn").addEventListener("click", () => {
37+
document.getElementById("save-metadata-btn")?.addEventListener("click", () => {
4538
this.updateMetadata()
4639
})
4740
}
4841

4942
openModal() {
43+
// Check if user has view permission (safe - project is loaded)
44+
const hasViewAccess = CheckPermissions.checkViewAccess('PROJECT', 'METADATA')
45+
if (!hasViewAccess) {
46+
this.shadowRoot.innerHTML = `<p>You don't have permission to view project metadata</p>`
47+
return
48+
}
49+
5050
const modal = document.getElementById("metadata-modal")
5151
const fieldsContainer = document.getElementById("metadata-fields")
5252
fieldsContainer.innerHTML = ""

‎interfaces/manage-layers/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,31 @@
1616
<script type="module" src="../../components/check-permissions/permission-match-element.js"></script>
1717
<script type="module" src="../../components/explanatory-guide/fixedGuideComponent.js"></script>
1818
<link rel="stylesheet" href="../../interfaces/manage-layers/index.css">
19+
<style>
20+
#projectManagementBtn {
21+
position: absolute;
22+
display: none;
23+
background-color: var(--primary-color);
24+
padding: 10px 20px;
25+
color: var(--white);
26+
border-radius: 5px;
27+
cursor: pointer;
28+
transition: background-color 0.3s;
29+
border: none;
30+
}
31+
#projectManagementBtn:hover,
32+
#projectManagementBtn:focus-visible {
33+
background-color: var(--primary-light);
34+
outline: 2px solid var(--primary-color);
35+
outline-offset: 2px;
36+
}
37+
#projectManagementBtn span {
38+
position: relative;
39+
left: -10px;
40+
display: inline-block;
41+
transform: rotate(180deg);
42+
}
43+
</style>
1944
</head>
2045
<body>
2146
<tpen-page>
@@ -30,6 +55,23 @@ <h2 slot="header">Layers and Pages</h2>
3055
<tpen-manage-layers></tpen-manage-layers>
3156
</div>
3257
</tpen-card>
58+
<button type="button" id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</button>
3359
</tpen-page>
3460
</body>
61+
<script type="module">
62+
import TPEN from '../../api/TPEN.js'
63+
import CheckPermissions from '../../components/check-permissions/checkPermissions.js'
64+
65+
TPEN.eventDispatcher.on('tpen-project-loaded', (ev) => {
66+
if (CheckPermissions.checkEditAccess('PROJECT')) {
67+
const goManage = document.getElementById("projectManagementBtn")
68+
if (goManage) {
69+
goManage.style.display = "block"
70+
goManage.addEventListener('click', () => {
71+
document.location.href = `/project/manage?projectID=${ev.detail._id}`
72+
})
73+
}
74+
}
75+
})
76+
</script>
3577
</html>

‎interfaces/manage-project/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ TPEN.eventDispatcher.on('tpen-project-loaded', () => {
2424

2525
const updateMetadataBtn = document.getElementById("update-metadata-btn")
2626
if (updateMetadataBtn) {
27-
updateMetadataBtn.href = `/components/update-metadata/index.html?projectID=${projectID}`
27+
updateMetadataBtn.href = `/project/metadata?projectID=${projectID}`
2828
}
2929

3030
const manageLayersBtn = document.getElementById('manage-layers-btn')

‎interfaces/project/metadata.html‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,36 @@
1616
<script type="module" src="/components/explanatory-guide/fixedGuideComponent.js"></script>
1717
<link href="/components/gui/site/index.css" rel="stylesheet" type="text/css" />
1818
<link rel="stylesheet" href="/components/update-metadata/index.css">
19+
<style>
20+
#projectManagementBtn {
21+
position: absolute;
22+
display: none;
23+
background-color: var(--primary-color);
24+
padding: 10px 20px;
25+
color: var(--white);
26+
border-radius: 5px;
27+
cursor: pointer;
28+
transition: background-color 0.3s;
29+
border: none;
30+
}
31+
#projectManagementBtn:hover,
32+
#projectManagementBtn:focus-visible {
33+
background-color: var(--primary-light);
34+
outline: 2px solid var(--primary-color);
35+
outline-offset: 2px;
36+
}
37+
#projectManagementBtn span {
38+
position: relative;
39+
left: -10px;
40+
display: inline-block;
41+
transform: rotate(180deg);
42+
}
43+
</style>
1944
</head>
2045

2146
<body>
2247
<tpen-page class="grid">
2348
<tpen-card>
24-
<h2 slot="header">Project Metadata</h2>
2549
<div slot="body">
2650
<tpen-fixed-explanatory-guide heading="Steps to Update Metadata">
2751
<li>Click <strong>"Add Field"</strong> to add a new metadata field by adding Label and Value.</li>
@@ -36,7 +60,7 @@ <h2 slot="header">Project Metadata</h2>
3660
<div id="container" class="metadata-modal-container">
3761
<div id="metadata-modal" class="modal hidden">
3862
<div class="modal-content">
39-
<h3>Edit Metadata</h3>
63+
<h3>Edit Project Metadata</h3>
4064
<form id="metadata-form">
4165
<div id="metadata-fields"></div>
4266
<button type="button" id="add-field-btn">+ Add Field</button>
@@ -51,11 +75,23 @@ <h3>Edit Metadata</h3>
5175
</div>
5276
<p slot="body" class="permission-msg" style="display: none;">You don't have permission to create, edit, or delete Metadata</p>
5377
</tpen-card>
78+
<button type="button" id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</button>
5479
</tpen-page>
5580
<script type="module">
56-
import CheckPermissions from '../../utilities/checkPermissions.js'
81+
import TPEN from '../../api/TPEN.js'
82+
import CheckPermissions from '../../components/check-permissions/checkPermissions.js'
83+
84+
TPEN.eventDispatcher.on('tpen-project-loaded', (ev) => {
85+
if (CheckPermissions.checkEditAccess('PROJECT')) {
86+
const goManage = document.getElementById("projectManagementBtn")
87+
if (goManage) {
88+
goManage.style.display = "block"
89+
goManage.addEventListener('click', () => {
90+
document.location.href = `/project/manage?projectID=${ev.detail._id}`
91+
})
92+
}
93+
}
5794

58-
(async () => {
5995
const divMetadata = document.querySelector('.tpen-metadata')
6096
const permissionMsg = document.querySelector('.permission-msg')
6197
if (!divMetadata) {
@@ -65,9 +101,9 @@ <h3>Edit Metadata</h3>
65101
if (!scope) {
66102
return
67103
}
68-
const hasEditAccess = await CheckPermissions.checkEditAccess(null, scope.toUpperCase())
69-
const hasDeleteAccess = await CheckPermissions.checkDeleteAccess(null, scope.toUpperCase())
70-
const checkCreateAccess = await CheckPermissions.checkCreateAccess(null, scope.toUpperCase())
104+
const hasEditAccess = CheckPermissions.checkEditAccess('*', scope.toUpperCase())
105+
const hasDeleteAccess = CheckPermissions.checkDeleteAccess('*', scope.toUpperCase())
106+
const checkCreateAccess = CheckPermissions.checkCreateAccess('*', scope.toUpperCase())
71107

72108
if (hasEditAccess) {
73109
divMetadata.style.display = 'inline-block'
@@ -94,7 +130,7 @@ <h3>Edit Metadata</h3>
94130
divMetadata.remove()
95131
permissionMsg.style.display = 'inline-block'
96132
}
97-
})()
133+
})
98134
</script>
99135
</body>
100136

0 commit comments

Comments
 (0)