Skip to content

Commit

Permalink
Addressed #6642 (comment)
Browse files Browse the repository at this point in the history
  • Loading branch information
@khushiagl
khushiagl committed Jul 27, 2023
1 parent d1e0b41 commit d70dcb8
Showing 1 changed file with 116 additions and 118 deletions.
234 changes: 116 additions & 118 deletions app/assets/javascripts/Components/Modals/filter_modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,135 +186,133 @@ export class FilterModal extends React.Component {
<FontAwesomeIcon icon="fa-solid fa-filter" className={"filter-icon-title"} />
{I18n.t("results.filter_submissions")}
</h3>
<form onSubmit={this.props.onRequestClose}>
<div className={"modal-container-scrollable"}>
<div className={"modal-container-vertical"}>
<div className={"modal-container"}>
<div className={"filter"} data-testid={"order-by"}>
<p>{I18n.t("results.filters.order_by")} </p>
<SingleSelectDropDown
valueToDisplayName={{
group_name: I18n.t("activerecord.attributes.group.group_name"),
submission_date: I18n.t("submissions.commit_date"),
}}
options={["group_name", "submission_date"]}
selected={this.props.filterData.orderBy}
onSelect={selection => {
this.props.mutateFilterData({
...this.props.filterData,
orderBy: selection,
});
<div className={"modal-container-scrollable"}>
<div className={"modal-container-vertical"}>
<div className={"modal-container"}>
<div className={"filter"} data-testid={"order-by"}>
<p>{I18n.t("results.filters.order_by")} </p>
<SingleSelectDropDown
valueToDisplayName={{
group_name: I18n.t("activerecord.attributes.group.group_name"),
submission_date: I18n.t("submissions.commit_date"),
}}
options={["group_name", "submission_date"]}
selected={this.props.filterData.orderBy}
onSelect={selection => {
this.props.mutateFilterData({
...this.props.filterData,
orderBy: selection,
});
}}
defaultValue={I18n.t("activerecord.attributes.group.group_name")}
/>
<div className={"order"} data-testid={"radio-group"}>
<input
type="radio"
checked={this.props.filterData.ascending}
name="order"
onChange={() => {
this.props.mutateFilterData({...this.props.filterData, ascending: true});
}}
defaultValue={I18n.t("activerecord.attributes.group.group_name")}
id={"Asc"}
data-testid={"ascending"}
/>
<div className={"order"} data-testid={"radio-group"}>
<input
type="radio"
checked={this.props.filterData.ascending}
name="order"
onChange={() => {
this.props.mutateFilterData({...this.props.filterData, ascending: true});
}}
id={"Asc"}
data-testid={"ascending"}
/>
<label htmlFor="Asc">{I18n.t("results.filters.ordering.ascending")}</label>
<input
type="radio"
checked={!this.props.filterData.ascending}
name="order"
onChange={() => {
this.props.mutateFilterData({...this.props.filterData, ascending: false});
}}
id={"Desc"}
data-testid={"descending"}
/>
<label htmlFor="Desc">{I18n.t("results.filters.ordering.descending")}</label>
</div>
</div>
<div className={"filter"} data-testid={"marking-state"}>
<p>{I18n.t("activerecord.attributes.result.marking_state")}</p>
<SingleSelectDropDown
valueToDisplayName={{
in_progress: I18n.t("submissions.state.in_progress"),
complete: I18n.t("submissions.state.complete"),
released: I18n.t("submissions.state.released"),
remark_requested: I18n.t("submissions.state.remark_requested"),
}}
options={["in_progress", "complete", "released", "remark_requested"]}
selected={this.props.filterData.markingState}
onSelect={selection => {
this.props.mutateFilterData({
...this.props.filterData,
markingState: selection,
});
<label htmlFor="Asc">{I18n.t("results.filters.ordering.ascending")}</label>
<input
type="radio"
checked={!this.props.filterData.ascending}
name="order"
onChange={() => {
this.props.mutateFilterData({...this.props.filterData, ascending: false});
}}
id={"Desc"}
data-testid={"descending"}
/>
<label htmlFor="Desc">{I18n.t("results.filters.ordering.descending")}</label>
</div>
</div>
<div className={"modal-container"}>
<div className={"filter"}>
<p>{I18n.t("activerecord.models.tag.other")}</p>
{this.renderTagsDropdown()}
</div>
<div className={"filter"} data-testid={"section"}>
<p>{I18n.t("activerecord.models.section.one")}</p>
<SingleSelectDropDown
options={this.props.sections.sort()}
selected={this.props.filterData.section}
onSelect={selection => {
this.props.mutateFilterData({
...this.props.filterData,
section: selection,
});
}}
defaultValue={""}
/>
</div>
<div className={"filter"} data-testid={"marking-state"}>
<p>{I18n.t("activerecord.attributes.result.marking_state")}</p>
<SingleSelectDropDown
valueToDisplayName={{
in_progress: I18n.t("submissions.state.in_progress"),
complete: I18n.t("submissions.state.complete"),
released: I18n.t("submissions.state.released"),
remark_requested: I18n.t("submissions.state.remark_requested"),
}}
options={["in_progress", "complete", "released", "remark_requested"]}
selected={this.props.filterData.markingState}
onSelect={selection => {
this.props.mutateFilterData({
...this.props.filterData,
markingState: selection,
});
}}
/>
</div>
<div className={"modal-container"}>
{this.renderTasDropdown()}
<div className={"annotation-input"}>
<p>{I18n.t("activerecord.models.annotation.one")}</p>
<input
type={"text"}
value={this.props.filterData.annotationText}
onChange={e =>
this.props.mutateFilterData({
...this.props.filterData,
annotationText: e.target.value,
})
}
placeholder={I18n.t("results.filters.text_box_placeholder")}
/>
</div>
</div>
<div className={"modal-container"}>
<div className={"filter"}>
<p>{I18n.t("activerecord.models.tag.other")}</p>
{this.renderTagsDropdown()}
</div>

<div className={"modal-container"}>
{this.rangeFilter(
this.props.filterData.totalMarkRange.min,
this.props.filterData.totalMarkRange.max,
I18n.t("results.total_mark"),
this.onTotalMarkMinChange,
this.onTotalMarkMaxChange
)}
{this.rangeFilter(
this.props.filterData.totalExtraMarkRange.min,
this.props.filterData.totalExtraMarkRange.max,
I18n.t("results.total_extra_marks"),
this.onTotalExtraMarkMinChange,
this.onTotalExtraMarkMaxChange
)}
<div className={"filter"} data-testid={"section"}>
<p>{I18n.t("activerecord.models.section.one")}</p>
<SingleSelectDropDown
options={this.props.sections.sort()}
selected={this.props.filterData.section}
onSelect={selection => {
this.props.mutateFilterData({
...this.props.filterData,
section: selection,
});
}}
defaultValue={""}
/>
</div>
</div>
<div className={"modal-container"}>
{this.renderTasDropdown()}
<div className={"annotation-input"}>
<p>{I18n.t("activerecord.models.annotation.one")}</p>
<input
type={"text"}
value={this.props.filterData.annotationText}
onChange={e =>
this.props.mutateFilterData({
...this.props.filterData,
annotationText: e.target.value,
})
}
placeholder={I18n.t("results.filters.text_box_placeholder")}
/>
</div>
</div>

<div className={"modal-container"}>
{this.rangeFilter(
this.props.filterData.totalMarkRange.min,
this.props.filterData.totalMarkRange.max,
I18n.t("results.total_mark"),
this.onTotalMarkMinChange,
this.onTotalMarkMaxChange
)}
{this.rangeFilter(
this.props.filterData.totalExtraMarkRange.min,
this.props.filterData.totalExtraMarkRange.max,
I18n.t("results.total_extra_marks"),
this.onTotalExtraMarkMinChange,
this.onTotalExtraMarkMaxChange
)}
</div>
</div>
<div className={"modal-footer"}>
<section className={"modal-container dialog-actions"}>
<input type="reset" value={I18n.t("clear_all")} onClick={this.onClearFilters} />
<input type="submit" value={I18n.t("close")} />
</section>
</div>
</form>
</div>
<div className={"modal-footer"}>
<section className={"modal-container dialog-actions"}>
<button onClick={this.onClearFilters}>{I18n.t("clear_all")}</button>
<button onClick={this.props.onRequestClose}>{I18n.t("close")}</button>
</section>
</div>
</Modal>
);
}
Expand Down

0 comments on commit d70dcb8

Please sign in to comment.