Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

YDA-5946 - Modified form group with Yoda buttons to stick to the top of metadata form. #369

Open
wants to merge 3 commits into
base: development
Choose a base branch
from
Open

YDA-5946 - Modified form group with Yoda buttons to stick to the top of metadata form. #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4380dfc
YDA-5946 - Modified form group with Yoda buttons to stick to the top …
kaur16 Oct 8, 2024
d39f3fb
YDA-5946 - Merged buttons group (Save, Delete and Clone) in metadata …
kaur16 Oct 18, 2024
4b0eb20
YDA-5946 - Made changes according to feedback. Added the dynamic divi…
kaur16 Oct 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 37 additions & 14 deletions research/metadata-form/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,43 +521,66 @@ class YodaButtons extends React.Component {
}

renderSaveButton() {
return (<button onClick={this.props.saveMetadata} type="submit" className="btn btn-primary float-start">Save</button>);
return (<button onClick={this.props.saveMetadata} type="submit" className="btn btn-primary float-start me-3" title="Save metadata">Save</button>);
}

renderDeleteButton() {
return (<button onClick={deleteMetadata} type="button" className="btn btn-danger delete-all-metadata-btn float-end">Delete all metadata </button>);
return (<button onClick={deleteMetadata} type="button" className="btn btn-danger delete-all-metadata-btn me-3" title="Delete all metadata">Delete</button>);
}

renderCloneButton() {
return (<button onClick={this.props.cloneMetadata} type="button" className="btn btn-primary clone-metadata-btn float-end">Clone from parent folder</button>);
return (<button onClick={this.props.cloneMetadata} type="button" className="btn btn-primary clone-metadata-btn me-3" title="Clone from parent folder">Clone</button>);
}

renderFormCompleteness() {
return (<div><span className="text-sm float-start text-muted text-center ms-3 mt-1">Required for the vault:</span><div className="form-completeness progress float-start ms-3 mt-2 w-25" data-bs-toggle="tooltip" title=""><div className="progress-bar bg-success"></div></div></div>);
return (<div><span className="text-sm float-start text-muted text-center ms-3 mt-1">Required for Vault:</span><div className="form-completeness progress float-start ms-3 mt-2 w-25" data-bs-toggle="tooltip" title=""><div className="progress-bar bg-success"></div></div></div>);
}

renderCloseButton() {
return(<a class="btn btn-secondary" href={"/research/browse?dir=" + encodeURIComponent(path)} title="Close metadata form">Close</a>);
}

renderCompletenessBar() {
let completenessBar = [];

if (formProperties.data.can_edit) {
completenessBar.push(this.renderFormCompleteness());
}

return (<div>{completenessBar}</div>);

}

renderButtons() {
let buttons = [];

if (formProperties.data.can_edit) {
buttons.push(this.renderSaveButton());
buttons.push(this.renderFormCompleteness());

// Delete and clone are mutually exclusive.
if (formProperties.data.metadata !== null)
buttons.push(this.renderDeleteButton());
else if (formProperties.data.can_clone)
buttons.push(this.renderCloneButton());
}

buttons.push(this.renderCloseButton());

return (<div>{buttons}</div>);
}

render() {
return (
<div className="form-group">
<div className="row yodaButtons">
<div className="col-sm-12">
{this.renderButtons()}
<div className="card-header bg-body sticky-top">
<div className="row">
<h5 className="col-sm-4 float-start">
Metadata form - {path}
</h5>
<div className="col-sm-8 yodaButtons">
{this.renderCompletenessBar()}
<div className="float-end">
{this.renderButtons()}
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -605,10 +628,9 @@ class Container extends React.Component {
<YodaButtons saveMetadata={this.saveMetadata}
deleteMetadata={deleteMetadata}
cloneMetadata={this.cloneMetadata} />
<YodaForm ref={(form) => {this.form=form;}}/>
<YodaButtons saveMetadata={this.saveMetadata}
deleteMetadata={deleteMetadata}
cloneMetadata={this.cloneMetadata} />
<div className="card-body">
<YodaForm ref={(form) => {this.form=form;}}/>
</div>
</div>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can pull the card header and card body into this render statement.

Then it should look something like this:
Screenshot 2024-10-21 at 08-49-48 Yoda - Dev - Research

);
}
Expand Down Expand Up @@ -733,7 +755,8 @@ function loadForm() {

// If maintenance banner is visible, add padding to metadata form header
if ($('div[name="banner head"]').length) {
$('#metadata-form .card-header').addClass('pt-4 pb-3')
$('#metadata-form .card-header').addClass('pt-4 pb-3');
$('#metadata-form .card-header').css('top', '0.5rem');
}

// Specific required textarea handling
Expand Down
4 changes: 0 additions & 4 deletions research/static/research/css/metadata/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,3 @@
#metadata-form .d-flex, #metadata-form .col {
padding: 0 15px;
}

.metadata-card {
background-color: rgba(var(--bs-body-bg-rgb), 1);
}
2 changes: 1 addition & 1 deletion research/static/research/js/metadata-form.js
View file
Open in desktop

Large diffs are not rendered by default.

36 changes: 9 additions & 27 deletions research/templates/research/metadata-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,35 +75,17 @@ <h5 class="card-title float-start">
<div id="metadata-form" class="row hide">
<div class="col-md-12">
<div class="card">
<div class="card-header sticky-top metadata-card">
<h5 class="card-title float-start">
Metadata form - {{ path | trim }}
</h5>
<div class="input-group-sm has-feedback float-end close-button">
<a class="btn btn-secondary btn-sm" href="/research/browse?dir={{ path | urlencode | replace("/", "%2F") }}">Close</a>
</div>
<div id="no-metadata" class="hide card-body">
<p>There is no metadata present for this folder.</p>
</div>
<div class="card-body">
<div id="no-metadata" class="hide">
<p>There is no metadata present for this folder.</p>
</div>
<div id="no-metadata-and-locked" class="hide">
<p>There is no metadata present for this folder and the folder is locked.</p>
</div>
<div id="form"
data-path="{{ path }}"
data-csrf_token_name="{{ tokenName | urlencode }}"
data-csrf_token_hash="{{ tokenHash | urlencode }}">
<p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
</div>
<div id="no-metadata-and-locked" class="hide card-body">
<p>There is no metadata present for this folder and the folder is locked.</p>
</div>
<div class="card-footer metadata-card">
<h5 class="card-title float-start">
Metadata form - {{ path | trim }}
</h5>
<div class="input-group-sm has-feedback float-end close-button">
<a class="btn btn-secondary btn-sm" href="/research/browse?dir={{ path | urlencode | replace("/", "%2F") }}">Close</a>
</div>
<div id="form"
data-path="{{ path }}"
data-csrf_token_name="{{ tokenName | urlencode }}"
data-csrf_token_hash="{{ tokenHash | urlencode }}">
<p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
</div>
</div>
</div>
Expand Down
59 changes: 45 additions & 14 deletions vault/metadata-form/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const enumWidget = (props) => {
neutral90: 'var(--neutral-10)',

/*
* One of the few bootstrap variables we can use with themeing react-select!
* One of the few bootstrap variables we can use with theming react-select!
* control/boxShadow(focused)
* control/borderColor(focused)
* control/borderColor:hover(focused)
Expand Down Expand Up @@ -146,7 +146,7 @@ const enumWidget = (props) => {
});

// If the final item was not numeric, it is not yet added to the name_hierarchy array
// Therefore, do it now explicitely
// Therefore, do it now explicitly
if (!last_was_numeric) {
name_hierarchy[level_counter] = level_name;
}
Expand Down Expand Up @@ -521,15 +521,32 @@ class YodaButtons extends React.Component {
}

renderSaveButton() {
return (<button onClick={this.props.saveMetadata} type="submit" className="btn btn-primary float-start">Save</button>);
return (<button onClick={this.props.saveMetadata} type="submit" className="btn btn-primary float-start me-3" title="Save metadata">Save</button>);
}

renderUpdateButton() {
return (<button onClick={this.props.updateMetadata} type="button" className="btn btn-primary">Update metadata</button>);
return (<button onClick={this.props.updateMetadata} type="button" className="btn btn-primary me-3" title="Update metadata">Update</button>);
}

renderFormCompleteness() {
return (<div><span className="text-sm float-start text-muted text-center ms-3 mt-1">Required for the vault:</span><div className="form-completeness progress float-start ms-3 mt-2 w-25" data-bs-toggle="tooltip" title=""><div className="progress-bar bg-success"></div></div></div>);
return (<div><span className="text-sm float-start text-muted text-center ms-3 mt-1">Required for Vault:</span><div className="form-completeness progress float-start ms-3 mt-2 w-25" data-bs-toggle="tooltip" title=""><div className="progress-bar bg-success"></div></div></div>);
}

renderCloseButton() {
return(<a class="btn btn-secondary" href={"/vault/browse?dir=" + encodeURIComponent(path)} title="Close metadata form">Close</a>);
}

renderCompletenessBar() {
let completenessBar = [];

if (formProperties.data.can_edit) {
if (actual_edit_mode) {
completenessBar.push(this.renderFormCompleteness());
}
}

return (<div>{completenessBar}</div>);

}

renderButtons() {
Expand All @@ -540,25 +557,32 @@ class YodaButtons extends React.Component {
buttons.push(this.renderUpdateButton());
} else {
buttons.push(this.renderSaveButton());
buttons.push(this.renderFormCompleteness());
}
buttons.push(this.renderCloseButton());
}
return (<div>{buttons}</div>);
}

render() {
return (
<div className="form-group">
<div className="row yodaButtons">
<div className="col-sm-12">
{this.renderButtons()}
<div className="card-header bg-body sticky-top">
<div className="row">
<h5 className="col-sm-8 pt-1 float-start">
Metadata form - {path}
</h5>
<div className="col-sm-4 yodaButtons">
{this.renderCompletenessBar()}
<div className="float-end">
{this.renderButtons()}
</div>
</div>
</div>
</div>
);
}
}


class Container extends React.Component {
constructor(props) {
super(props);
Expand All @@ -581,9 +605,9 @@ class Container extends React.Component {
<div>
<YodaButtons saveMetadata={this.saveMetadata}
updateMetadata={this.updateMetadata} />
<YodaForm ref={(form) => {this.form=form;}}/>
<YodaButtons saveMetadata={this.saveMetadata}
updateMetadata={this.updateMetadata} />
<div className="card-body">
<YodaForm ref={(form) => {this.form=form;}}/>
</div>
</div>
);
}
Expand Down Expand Up @@ -683,7 +707,14 @@ function loadForm() {

// If maintenance banner is visible, add padding to metadata form header
if ($('div[name="banner head"]').length) {
$('#metadata-form .card-header').addClass('pt-4 pb-3')
$('#metadata-form .card-header').addClass('pt-4 pb-3');
$('#metadata-form .card-header').css('top', '0.5rem');
}

// If progress bar is visible, change division of grid
if ($('.form-completeness').length > 0) {
$('#metadata-form .card-header .row h5').addClass('col-sm-4').removeClass('col-sm-8');
$('#metadata-form .card-header .yodaButtons').addClass('col-sm-8').removeClass('col-sm-4');
}

// Specific required textarea handling
Expand Down
3 changes: 0 additions & 3 deletions vault/static/vault/css/metadata/form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,3 @@
padding: 0 15px;
}

.metadata-card {
background-color: rgba(var(--bs-body-bg-rgb), 1);
}
6 changes: 3 additions & 3 deletions vault/static/vault/js/metadata-form.js
View file
Open in desktop

Large diffs are not rendered by default.

28 changes: 5 additions & 23 deletions vault/templates/vault/metadata-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,30 +43,12 @@ <h3 class="card-title float-start">
<div id="metadata-form" class="row hide">
<div class="col-md-12">
<div class="card">
<div class="card-header sticky-top metadata-card">
<h5 class="card-title float-start">
Metadata form - {{ path | trim }}
</h5>
<div class="input-group-sm has-feedback float-end close-button">
<a class="btn btn-secondary btn-sm" href="/vault/browse?dir={{ path | urlencode | replace("/", "%2F") }}">Close</a>
</div>
</div>
<div class="card-body">
<div id="no-metadata" class="hide">
<p>There is no metadata present for this folder.</p>
</div>
<div id="form"
data-path="{{ path }}">
<p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
</div>
<div id="no-metadata" class="hide card-body">
<p>There is no metadata present for this folder.</p>
</div>
<div class="card-footer metadata-card">
<h5 class="card-title float-start">
Metadata form - {{ path | trim }}
</h5>
<div class="input-group-sm has-feedback float-end close-button">
<a class="btn btn-secondary btn-sm" href="/vault/browse?dir={{ path | urlencode | replace("/", "%2F") }}">Close</a>
</div>
<div id="form"
data-path="{{ path }}">
<p>Loading metadata <i class="fa-solid fa-spinner fa-spin fa-fw"></i></p>
</div>
</div>
</div>
Expand Down