Skip to content

Commit

Permalink
Factor out requirement components in RequirementFulfillment (1/n)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamChou19815
SamChou19815 committed Apr 21, 2021
1 parent af1a8d9 commit 92bfc07
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 152 deletions.
119 changes: 119 additions & 0 deletions src/components/Requirements/RequirementDisplayToggle.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<template>
<button
@click="$emit('on-toggle')"
class="dropdown row slightly-lower-opacity-on-hover"
aria-haspopup="true"
data-toggle="dropdown"
>
<div class="row depth-req">
<div class="btn">
<drop-down-arrow
:isFlipped="displayDescription"
:fillColor="isCompleted ? '#979797CC' : '#979797'"
:isSubReq="true"
/>
</div>
<div class="requirement-name-container">
<p class="requirement-name-text">
<span>{{ requirementFulfillment.requirement.name }}</span>
</p>
</div>
</div>
<div class="col requirement-progress text-right">
{{ requirementFulfillmentProgress }}
</div>
</button>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue';
import DropDownArrow from '@/components/DropDownArrow.vue';
export default defineComponent({
components: { DropDownArrow },
props: {
requirementFulfillment: { type: Object as PropType<RequirementFulfillment>, required: true },
isCompleted: { type: Boolean, required: true },
displayDescription: { type: Boolean, required: true },
},
emits: ['on-toggle'],
computed: {
requirementFulfillmentProgress(): string {
return this.requirementFulfillment.fulfilledBy !== 'self-check'
? `${this.requirementFulfillment.minCountFulfilled}/${this.requirementFulfillment.minCountRequired} ${this.requirementFulfillment.fulfilledBy}`
: 'self check';
},
},
});
</script>

<style scoped lang="scss">
@import '@/assets/scss/_variables.scss';
.dropdown {
background: none;
width: 100%;
border: none;
justify-content: space-between;
padding: 0;
align-items: center;
min-height: 2.25rem;
}
.btn {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
&-2 {
padding-top: 0px;
margin: 0px;
}
}
.btn:focus,
.btn:active {
outline: none !important;
box-shadow: none;
}
.row {
margin: 0;
}
.row > div {
padding: 0;
}
.depth-req {
justify-content: flex-start;
align-items: center;
div:first-child {
margin: 0px;
}
}
.text-right {
color: $lightPlaceholderGray;
}
.requirement-name-container {
text-align: left;
margin-left: 11px;
max-width: 11rem;
.requirement-name-text {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
color: $lightPlaceholderGray;
margin: 0;
}
}
.requirement-progress {
font-size: 14px;
line-height: 14px;
margin-top: auto;
margin-bottom: auto;
}
</style>
164 changes: 12 additions & 152 deletions src/components/Requirements/RequirementFulfillment.vue
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,13 @@
<template>
<div class="subrequirement">
<button
@click="toggleDescription()"
class="dropdown row slightly-lower-opacity-on-hover"
aria-haspopup="true"
data-toggle="dropdown"
>
<div class="row depth-req">
<div class="btn">
<drop-down-arrow
:isFlipped="displayDescription"
:fillColor="getArrowColor()"
:isSubReq="true"
/>
</div>
<div class="subreq-name">
<p class="sub-req">
<span>{{ requirementFulfillment.requirement.name }}</span>
</p>
</div>
</div>
<div class="col sub-req-progress text-right">
{{ requirementFulfillmentProgress }}
</div>
</button>
<requirement-display-toggle
:requirementFulfillment="requirementFulfillment"
:isCompleted="isCompleted"
:displayDescription="displayDescription"
@on-toggle="toggleDescription()"
/>
<div v-if="displayDescription" class="description">
<div>
{{ requirementFulfillment.requirement.description }}
<a
class="more"
:style="{ color: `#${color}` }"
:href="requirementFulfillment.requirement.source"
target="_blank"
>
<strong>Learn More</strong></a
>
</div>
<div
v-if="requirementFulfillment.requirement.checkerWarning"
class="requirement-checker-warning"
>
<img
class="requirement-checker-warning-icon"
src="@/assets/images/warning.svg"
alt="warning icon"
/>
{{ requirementFulfillment.requirement.checkerWarning }}
</div>
<div
v-if="requirementFulfillment.requirement.fulfilledBy === 'self-check'"
class="requirement-checker-warning"
>
<img
class="requirement-checker-warning-icon"
src="@/assets/images/warning.svg"
alt="warning icon"
/>
{{ selfCheckWarning }}
</div>
<requirement-information :requirement="requirementFulfillment.requirement" :color="color" />
<div v-if="requirementFulfillment.requirement.fulfilledBy === 'toggleable'">
<div class="toggleable-requirements-select-wrapper">
<div
Expand Down Expand Up @@ -163,7 +113,8 @@ import { PropType, defineComponent } from 'vue';
import CompletedSubReqCourse from '@/components/Requirements/CompletedSubReqCourse.vue';
import IncompleteSubReqCourse from '@/components/Requirements/IncompleteSubReqCourse.vue';
import IncompleteSelfCheck from '@/components/Requirements/IncompleteSelfCheck.vue';
import DropDownArrow from '@/components/DropDownArrow.vue';
import RequirementDisplayToggle from '@/components/Requirements/RequirementDisplayToggle.vue';
import RequirementInformation from '@/components/Requirements/RequirementInformation.vue';
import store from '@/store';
import { clickOutside } from '@/utilities';
Expand Down Expand Up @@ -218,9 +169,10 @@ const generateSubReqIncompleteCourses = (
export default defineComponent({
components: {
CompletedSubReqCourse,
DropDownArrow,
IncompleteSubReqCourse,
IncompleteSelfCheck,
RequirementDisplayToggle,
RequirementInformation,
},
props: {
requirementFulfillment: {
Expand Down Expand Up @@ -340,11 +292,6 @@ export default defineComponent({
return slots;
},
requirementFulfillmentProgress(): string {
return this.requirementFulfillment.fulfilledBy !== 'self-check'
? `${this.requirementFulfillment.minCountFulfilled}/${this.requirementFulfillment.minCountRequired} ${this.requirementFulfillment.fulfilledBy}`
: 'self check';
},
fulfilledSelfCheckCourses(): readonly CourseTaken[] {
// selectedCourses are courses that fulfill the requirement based on user-choice
// they are taken from derivedSelectableRequirementData
Expand Down Expand Up @@ -392,17 +339,11 @@ export default defineComponent({
return [...selectedCourses, ...fulfillableCourses];
},
selfCheckWarning(): string {
return "This requirement is not included in the progress bar because we do not check if it's completed.";
},
},
directives: {
'click-outside': clickOutside,
},
methods: {
getArrowColor() {
return this.isCompleted ? '#979797CC' : '#979797';
},
onShowAllCourses(subReqIndex: number) {
this.$emit('onShowAllCourses', {
requirementName: this.requirementFulfillment.requirement.name,
Expand Down Expand Up @@ -437,49 +378,6 @@ export default defineComponent({
<style scoped lang="scss">
@import '@/assets/scss/_variables.scss';
.dropdown {
background: none;
width: 100%;
border: none;
justify-content: space-between;
padding: 0;
align-items: center;
min-height: 2.25rem;
}
.btn {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
&-2 {
padding-top: 0px;
margin: 0px;
}
}
.btn:focus,
.btn:active {
outline: none !important;
box-shadow: none;
}
.row {
margin: 0;
}
.row > div {
padding: 0;
}
.depth-req {
justify-content: flex-start;
align-items: center;
div:first-child {
margin: 0px;
}
}
.sub-req-div {
padding-left: 30px;
margin: 0px;
}
.description {
color: #4f4f4f;
font-size: 14px;
Expand All @@ -504,43 +402,13 @@ button.view {
color: $white;
text-transform: uppercase;
}
.text {
&-right {
color: $lightPlaceholderGray;
}
}
.sub-req {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 14px;
color: $lightPlaceholderGray;
margin: 0;
&-progress {
font-size: 14px;
line-height: 14px;
margin-top: auto;
margin-bottom: auto;
}
}
.separator {
height: 1px;
width: 100%;
background-color: $inactiveGray;
}
.requirement-checker-warning {
color: $warning;
margin-top: 0.25rem;
&-icon {
float: left;
margin: 0.125rem 0.25rem 0 0;
width: 14px;
height: 14px;
}
}
.toggleable-requirements {
&-select {
display: flex;
Expand Down Expand Up @@ -647,12 +515,4 @@ button.view {
justify-content: flex-start;
align-items: center;
}
.subreq {
&-name {
text-align: left;
margin-left: 11px;
max-width: 11rem;
}
}
</style>
Loading

0 comments on commit 92bfc07

Please sign in to comment.