edit metadata modal update

pepkit · Sep 4, 2024 · fcadcc4 · fcadcc4
1 parent 04f61b9
commit fcadcc4
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 35 deletions.
diff --git a/pephub/routers/api/v1/project.py b/pephub/routers/api/v1/project.py
@@ -1171,11 +1171,8 @@ async def get_standardized_cols(
     prj = peppy.Project.from_dict(pep)
     model = AttrStandardizer(schema)
 
-    print(prj.sample_table)
-    print(pep)
     try:
         results = model.standardize(pep=prj)
-        print(results)
     except Exception:
         raise HTTPException(
             code=400,

diff --git a/web/src/components/forms/edit-project-meta.tsx b/web/src/components/forms/edit-project-meta.tsx
@@ -68,7 +68,7 @@ export const ProjectMetaEditForm = (props: Props) => {
 
   return (
     <form>
-      <div className="mb-3 form-check form-switch">
+      <div className="mt-3 form-check form-switch text-sm">
         <label className="form-check-label" htmlFor="is-private-toggle">
           Private
         </label>
@@ -80,16 +80,14 @@ export const ProjectMetaEditForm = (props: Props) => {
           id="is-private-toggle"
         />
       </div>
-      <div className="mb-3 form-check form-switch">
+      <div className="form-check form-switch text-sm">
         <label className="form-check-label" htmlFor="is-pop-toggle">
           POP
         </label>
         <input {...register('pop')} className="form-check-input" type="checkbox" role="switch" id="is-pop-toggle" />
       </div>
-      <div className="mb-3">
-        <label htmlFor="project-name" className="form-label">
-          Project Name
-        </label>
+      <div className="mt-2">
+        <label className="fw-semibold text-sm">Project Name</label>
         <input
           placeholder="Project name"
           type="text"
@@ -113,10 +111,8 @@ export const ProjectMetaEditForm = (props: Props) => {
           render={({ message }) => (message ? <p className="text-danger text-xs pt-1">{message}</p> : null)}
         />
       </div>
-      <div className="mb-3">
-        <label htmlFor="schema-tag" className="form-label">
-          Schema
-        </label>
+      <div className="mt-2">
+        <label className="fw-semibold text-sm mt-2">Schema</label>
         <SchemaTooltip className="ms-1" />
         <div>
           <Controller
@@ -135,10 +131,8 @@ export const ProjectMetaEditForm = (props: Props) => {
           />
         </div>
       </div>
-      <div className="mb-3">
-        <label htmlFor="project-tag" className="form-label">
-          Project Tag
-        </label>
+      <div className="mt-2">
+        <label className="fw-semibold text-sm mt-2">Project Tag</label>
         <input
           // {...register('tag')}
           type="text"
@@ -162,10 +156,8 @@ export const ProjectMetaEditForm = (props: Props) => {
           render={({ message }) => (message ? <p className="text-danger text-xs pt-1">{message}</p> : null)}
         />
       </div>
-      <div className="mb-3">
-        <label htmlFor="project-description" className="form-label">
-          Project Description
-        </label>
+      <div className="mt-2 mb-3">
+        <label className="fw-semibold text-sm mt-2">Description</label>
         <Controller
           control={control}
           name="description"
@@ -214,7 +206,7 @@ export const ProjectMetaEditForm = (props: Props) => {
           id="metadata-save-btn"
           disabled={(!isDirty && isValid) || !!errors.name?.message || !!errors.tag?.message || isSubmitting}
           type="button"
-          className="btn btn-success me-1"
+          className="btn btn-success"
         >
           {isSubmitting ? 'Saving...' : 'Save'}
         </button>

diff --git a/web/src/components/modals/edit-meta-metadata.tsx b/web/src/components/modals/edit-meta-metadata.tsx
@@ -35,18 +35,30 @@ export const EditMetaMetadataModal = (props: Props) => {
 
   return (
     <Modal centered animation={false} show={show} onHide={onHide} size="lg">
-      <Modal.Header closeButton>
-        <Modal.Title>Edit Metadata</Modal.Title>
-      </Modal.Header>
       <Modal.Body>
-        <ProjectMetaEditForm
-          key={projectInfo.dataUpdatedAt}
-          projectInfo={projectInfo.data}
-          canConvertToPop={canConvertToPop || false}
-          isSubmitting={isSubmitting}
-          onSubmit={submit}
-          onCancel={onHide}
-        />
+        <div className='p-1 modal-pill'>
+          <h1 className="fs-5 mb-1 fw-semibold d-inline">Edit Metadata</h1>
+            <button
+              className="btn btn-outline-dark px-1 py-0 m-0 float-end d-inline rounded-3 border-0 shadow-none"
+              type="button" 
+              onClick={() => {
+                onHide();
+              }}
+            >
+              <i className="bi bi-x-lg"></i>
+            </button>
+            <p className='text-sm mt-1 mb-3'></p>
+            <div className="border-bottom" style={{ margin: '0 -1.25em' }}></div>
+
+          <ProjectMetaEditForm
+            key={projectInfo.dataUpdatedAt}
+            projectInfo={projectInfo.data}
+            canConvertToPop={canConvertToPop || false}
+            isSubmitting={isSubmitting}
+            onSubmit={submit}
+            onCancel={onHide}
+          />
+        </div>
       </Modal.Body>
     </Modal>
   );

diff --git a/web/src/components/namespace/view-selector.tsx b/web/src/components/namespace/view-selector.tsx
@@ -27,7 +27,7 @@ export const NamespaceViewSelector: FC<Props> = (props) => {
   };
 
   return (
-    <div className="p-1 namespace-nav">
+    <div className="px-0 py-1 namespace-nav">
       <Nav variant="pills" defaultActiveKey={props.view} onSelect={handleNavSelect}>
         <Nav.Item>
           <Nav.Link eventKey="peps" className="px-2 py-1 me-1">

diff --git a/web/src/globals.css b/web/src/globals.css
@@ -812,7 +812,7 @@ body {
   color: #000000aa;
   padding-top: .4;
   padding-bottom: .4;
-  border-bottom: 1px solid #dee2e6;
+/*  border-bottom: 1px solid #dee2e6;*/
 }
 
 .modal-pill .nav-tabs .nav-link:hover {