project metadata layout seems to have a broken element

page like https://app.t-pen.org/project/metadata?projectID=69c6a9db84ce155226b44522

renders like:

```html
<html>
<body>

<!DOCTYPE html>
--
<html lang="en">
 
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Project Metadata</title>
<meta name="tpen-env" content="prod">

<script>
window.TPEN_ENV = window.TPEN_ENV \|\| (document.querySelector('meta[name=\"tpen-env\"]')?.content \|\| 'dev')
</script>
<script src="/config.env.js"></script>
<script type="module" src="/api/TPEN.js"></script>
<script type="module" src="/components/gui/site/index.js"></script>
<script type="module" src="/components/update-metadata/index.js"></script>
<script type="module" src="/components/explanatory-guide/fixedGuideComponent.js"></script>
<link href="/components/gui/site/index.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/components/update-metadata/index.css">
<style>
#projectManagementBtn {
position: absolute;
display: none;
background-color: var(--primary-color);
padding: 10px 20px;
color: var(--white);
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
border: none;
text-decoration: none;
font: inherit;
}
 
#projectManagementBtn:hover,
#projectManagementBtn:focus-visible {
background-color: var(--primary-light);
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
 
#projectManagementBtn span {
position: relative;
left: -10px;
display: inline-block;
transform: rotate(180deg);
}
</style>
</head>
 
<body>
<tpen-page class="grid">
<tpen-card>
<div slot="body">
<tpen-fixed-explanatory-guide heading="Steps to Update Metadata">
<li>Click <strong>"Add Field"</strong> to add a new metadata field by adding Label and Value.</li>
<li>Select the metadata you want to update.</li>
<li>Optionally, delete any unwanted field using the <strong>trash icon.</strong></li>
<li>Make your changes in the form.</li>
<li>Click <strong>"Save"</strong> to apply your changes.</li>
</tpen-fixed-explanatory-guide>
</div>
<div slot="body" class="tpen-metadata" tpen-scope="metadata">
<update-metadata></update-metadata>
<div id="container" class="metadata-modal-container">
<div id="metadata-modal" class="modal hidden">
<div class="modal-content">
<h3>Edit Project Metadata</h3>
<form id="metadata-form">
<div id="metadata-fields"></div>
<button type="button" id="add-field-btn">+ Add Field</button>
<div class="modal-actions">
<button type="button" id="save-metadata-btn">Save</button>
<button type="button" id="cancel-btn">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<p slot="body" class="permission-msg" style="display: none;">You don't have permission to create, edit, or
delete Metadata</p>
</tpen-card>
<a id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</a>
</tpen-page>
<script type="module">
import TPEN from '../../api/TPEN.js'
import CheckPermissions from '../../components/check-permissions/checkPermissions.js'
 
TPEN.eventDispatcher.on('tpen-project-loaded', (ev) => {
if (CheckPermissions.checkEditAccess('PROJECT')) {
const goManage = document.getElementById("projectManagementBtn")
if (goManage) {
goManage.style.display = "block"
goManage.href = `/project/manage?projectID=${ev.detail._id}`
}
}
 
const divMetadata = document.querySelector('.tpen-metadata')
const permissionMsg = document.querySelector('.permission-msg')
if (!divMetadata) {
return
}
const scope = divMetadata.getAttribute('tpen-scope')
if (!scope) {
return
}
const hasEditAccess = CheckPermissions.checkEditAccess('PROJECT', scope.toUpperCase())
const hasDeleteAccess = CheckPermissions.checkDeleteAccess('PROJECT', scope.toUpperCase())
const hasCreateAccess = CheckPermissions.checkCreateAccess('PROJECT', scope.toUpperCase())
 
if (hasEditAccess) {
divMetadata.style.display = 'inline-block'
permissionMsg.style.display = 'none'
 
const deleteButtons = document.querySelectorAll('.remove-field-btn')
deleteButtons.forEach(button => {
if (hasDeleteAccess) {
button.style.display = 'inline-block'
} else {
button.remove()
}
})
 
const addButton = document.querySelector('#add-field-btn')
if (addButton) {
if (hasCreateAccess) {
addButton.style.display = 'inline-block'
} else {
addButton.remove()
}
}
} else {
divMetadata.remove()
permissionMsg.style.display = 'inline-block'
}
})
</script>
</body>
 
</html>
 


</body>
</html><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manage Project Metadata</title>
    <meta name="tpen-env" content="prod">
    
    <script>
        window.TPEN_ENV = window.TPEN_ENV || (document.querySelector('meta[name=\"tpen-env\"]')?.content || 'dev')
    </script>
    <script src="[/config.env.js](https://app.t-pen.org/config.env.js)"></script>
    <script type="module" src="[/api/TPEN.js](https://app.t-pen.org/api/TPEN.js)"></script>
    <script type="module" src="[/components/gui/site/index.js](https://app.t-pen.org/components/gui/site/index.js)"></script>
    <script type="module" src="[/components/update-metadata/index.js](https://app.t-pen.org/components/update-metadata/index.js)"></script>
    <script type="module" src="[/components/explanatory-guide/fixedGuideComponent.js](https://app.t-pen.org/components/explanatory-guide/fixedGuideComponent.js)"></script>
    <link href="[/components/gui/site/index.css](https://app.t-pen.org/components/gui/site/index.css)" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="[/components/update-metadata/index.css](https://app.t-pen.org/components/update-metadata/index.css)">
    <style>
        #projectManagementBtn {
            position: absolute;
            display: none;
            background-color: var(--primary-color);
            padding: 10px 20px;
            color: var(--white);
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            border: none;
            text-decoration: none;
            font: inherit;
        }

        #projectManagementBtn:hover,
        #projectManagementBtn:focus-visible {
            background-color: var(--primary-light);
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

        #projectManagementBtn span {
            position: relative;
            left: -10px;
            display: inline-block;
            transform: rotate(180deg);
        }
    </style>
</head>

<body>
    <tpen-page class="grid">
        <tpen-card>
            <div slot="body">
                <tpen-fixed-explanatory-guide heading="Steps to Update Metadata">
                    <li>Click <strong>"Add Field"</strong> to add a new metadata field by adding Label and Value.</li>
                    <li>Select the metadata you want to update.</li>
                    <li>Optionally, delete any unwanted field using the <strong>trash icon.</strong></li>
                    <li>Make your changes in the form.</li>
                    <li>Click <strong>"Save"</strong> to apply your changes.</li>
                </tpen-fixed-explanatory-guide>
            </div>
            <div slot="body" class="tpen-metadata" tpen-scope="metadata">
                <update-metadata></update-metadata>
                <div id="container" class="metadata-modal-container">
                    <div id="metadata-modal" class="modal hidden">
                        <div class="modal-content">
                            <h3>Edit Project Metadata</h3>
                            <form id="metadata-form">
                                <div id="metadata-fields"></div>
                                <button type="button" id="add-field-btn">+ Add Field</button>
                                <div class="modal-actions">
                                    <button type="button" id="save-metadata-btn">Save</button>
                                    <button type="button" id="cancel-btn">Cancel</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <p slot="body" class="permission-msg" style="display: none;">You don't have permission to create, edit, or
                delete Metadata</p>
        </tpen-card>
        <a id="projectManagementBtn"><span aria-hidden="true">↪</span> Go to Project Management</a>
    </tpen-page>
    <script type="module">
        import TPEN from '../../api/TPEN.js'
        import CheckPermissions from '../../components/check-permissions/checkPermissions.js'

        TPEN.eventDispatcher.on('tpen-project-loaded', (ev) => {
            if (CheckPermissions.checkEditAccess('PROJECT')) {
                const goManage = document.getElementById("projectManagementBtn")
                if (goManage) {
                    goManage.style.display = "block"
                    goManage.href = `/project/manage?projectID=${ev.detail._id}`
                }
            }

            const divMetadata = document.querySelector('.tpen-metadata')
            const permissionMsg = document.querySelector('.permission-msg')
            if (!divMetadata) {
                return
            }
            const scope = divMetadata.getAttribute('tpen-scope')
            if (!scope) {
                return
            }
            const hasEditAccess = CheckPermissions.checkEditAccess('PROJECT', scope.toUpperCase())
            const hasDeleteAccess = CheckPermissions.checkDeleteAccess('PROJECT', scope.toUpperCase())
            const hasCreateAccess = CheckPermissions.checkCreateAccess('PROJECT', scope.toUpperCase())

            if (hasEditAccess) {
                divMetadata.style.display = 'inline-block'
                permissionMsg.style.display = 'none'

                const deleteButtons = document.querySelectorAll('.remove-field-btn')
                deleteButtons.forEach(button => {
                    if (hasDeleteAccess) {
                        button.style.display = 'inline-block'
                    } else {
                        button.remove()
                    }
                })

                const addButton = document.querySelector('#add-field-btn')
                if (addButton) {
                    if (hasCreateAccess) {
                        addButton.style.display = 'inline-block'
                    } else {
                        addButton.remove()
                    }
                }
            } else {
                divMetadata.remove()
                permissionMsg.style.display = 'inline-block'
            }
        })
    </script>
</body>

</html>
```

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

project metadata layout seems to have a broken element #518

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

project metadata layout seems to have a broken element #518

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions