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

[Schedule Generator] Add Schedule Modal #892

Merged
merged 17 commits into from
Mar 11, 2024
Merged

[Schedule Generator] Add Schedule Modal #892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e1fcd22
chore: create schedule sidebar panel header
Destaq Feb 10, 2024
df066ff
style: also define appearance property in SchedulerPanelHeader.vue fo…
Destaq Feb 10, 2024
d6c6da6
docs: add inline docs to SchedulerPanelHeader
Destaq Feb 10, 2024
23fed50
link icon w/header
Feb 29, 2024
295300f
Run Courses Script for FA23 (#856)
zachary-kent Oct 1, 2023
31715cc
Spring 2024 courses script (#864)
zachary-kent Oct 23, 2023
99bbab2
add header
Feb 15, 2024
49541fd
fix header
Feb 15, 2024
28ec8c2
fix header
Feb 15, 2024
d32249a
move into folder
Feb 15, 2024
0281ba5
fix full-courses
Feb 29, 2024
d6dc311
link modal to schedule builder icon
Feb 29, 2024
e1fabab
modal
Mar 1, 2024
afd017e
modal clickable
Mar 1, 2024
7c79d92
type fix and rename
Mar 2, 2024
72f06ee
rename
Mar 2, 2024
3d343fe
rename
Mar 2, 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
2 changes: 1 addition & 1 deletion src/assets/courses/full-courses.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -330516,4 +330516,4 @@
"roster": "SP24"
}
]
}
}
111 changes: 111 additions & 0 deletions src/components/ScheduleGenerate/ScheduleGenerateModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<template>
<div class="schedule-generate" @click="checkClickOutside" ref="modalBackground">
<div class="schedule-generate-main">
<div class="schedule-generate-content">
<div class="schedule-generate-cancel">
<button @click="cancel">
<img
class="schedule-generate-cancel-icon"
src="@/assets/images/x.svg"
alt="x to close modal"
/>
</button>
</div>
<div class="schedule-generate-top">
<div class="schedule-generate-header">
<span
><img
class="schedule-generate-header-emoji"
src="@/assets/images/waveEmoji.svg"
alt="wave"
/>
Say hello to your generated schedule!</span
>
</div>
<div class="schedule-generate-description">
Please download before closing or it won't be saved!
</div>
</div>
</div>
<div class="schedule-generate-bottom"></div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
emits: ['closeScheduleGenerateModal'],
methods: {
cancel() {
this.$emit('closeScheduleGenerateModal');
},
checkClickOutside(e: MouseEvent) {
if (e.target === this.$refs.modalBackground) {
this.cancel();
}
},
},
});
</script>
<style scoped lang="scss">
@import '@/assets/scss/_variables.scss';
button:hover {
opacity: 0.5;
}

input {
background-color: none;
}
.schedule-generate {
padding: 1rem;
width: 100%;
&-main {
background: $white;
border-radius: 9px;
margin-left: auto;
margin-right: auto;
width: 46rem;
}

&-cancel {
cursor: pointer;
text-align: right;
position: absolute;
right: 1rem;
top: 1rem;
z-index: 5;

&-icon {
margin: 11px 11px 0 0;
}
}

&-header {
font-weight: bold;
font-size: 36px;
color: $onboardingGray;
text-align: center;

&-emoji {
width: 36px;
height: 36px;
vertical-align: text-top;
}
}

&-description {
font-weight: 300;
font-size: 18px;
line-height: 36px;
color: $onboardingGray;
text-align: center;
}

&-content {
position: relative;
padding: 1.5rem 2rem 1.5rem 2rem;
}
}
</style>
12 changes: 11 additions & 1 deletion ...uleGenerator/ScheduleGeneratorSideBar.vue → ...eduleGenerate/ScheduleGenerateSideBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@
</button>
</div>
<!-- NOTE: you cannot generate a schedule if you have not inputted any requirements. -->
<button class="generate-schedule-button" :disabled="generateScheduleButtonDisabled">
<button
class="generate-schedule-button"
:disabled="generateScheduleButtonDisabled"
@click="openScheduleGenerateModal"
>
<!-- Tools SVG icon placed inline with the text. -->
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -56,6 +60,12 @@ export default defineComponent({
// (linked with requirements) whether any requirements have been added
generateScheduleButtonDisabled: { type: Boolean, required: true },
},
emits: ['openScheduleGenerateModal'],
methods: {
openScheduleGenerateModal() {
this.$emit('openScheduleGenerateModal');
},
},
});
</script>

Expand Down
24 changes: 21 additions & 3 deletions src/containers/Dashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
@onboard="endOnboarding"
@cancelOnboarding="cancelOnboarding"
/>
<schedule-generate-modal
class="dashboard-onboarding"
v-if="isScheduleGenerateModalOpen"
@closeScheduleGenerateModal="closeScheduleGenerateModal"
/>
<div class="dashboard-mainView">
<div class="dashboard-menus">
<nav-bar
Expand All @@ -32,10 +37,11 @@
:startTour="startTour"
@showTourEndWindow="showTourEnd"
/>
<schedule-generator-side-bar
<schedule-generate-side-bar
v-if="loaded && !showToolsPage && !isProfileOpen && isScheduleGenerateOpen"
selected-semester="Spring 2025"
:generate-schedule-button-disabled="isScheduleGenerateButtonDisabled"
@openScheduleGenerateModal="openScheduleGenerateModal"
/>
<bottom-bar
v-if="!(isTablet && requirementsIsDisplayedMobile) && !showToolsPage && !isProfileOpen"
Expand Down Expand Up @@ -94,7 +100,8 @@ import SemesterView from '@/components/Semester/SemesterView.vue';
import RequirementSideBar from '@/components/Requirements/RequirementSideBar.vue';
import BottomBar from '@/components/BottomBar/BottomBar.vue';
import NavBar from '@/components/NavBar.vue';
import ScheduleGeneratorSideBar from '@/components/ScheduleGenerator/ScheduleGeneratorSideBar.vue';
import ScheduleGenerateSideBar from '@/components/ScheduleGenerate/ScheduleGenerateSideBar.vue';
import ScheduleGenerateModal from '@/components/ScheduleGenerate/ScheduleGenerateModal.vue';
import Onboarding from '@/components/Modals/Onboarding/Onboarding.vue';
import TourWindow from '@/components/Modals/TourWindow.vue';
import ToolsContainer from '@/containers/Tools.vue';
Expand Down Expand Up @@ -142,8 +149,9 @@ export default defineComponent({
components: {
BottomBar,
NavBar,
ScheduleGeneratorSideBar,
ScheduleGenerateSideBar,
Onboarding,
ScheduleGenerateModal,
RequirementSideBar,
SemesterView,
TourWindow,
Expand All @@ -169,6 +177,7 @@ export default defineComponent({
isProfileOpen: false,
isScheduleGenerateButtonDisabled: false,
isScheduleGenerateOpen: false,
isScheduleGenerateModalOpen: false,
};
},
computed: {
Expand Down Expand Up @@ -282,6 +291,15 @@ export default defineComponent({
}
},

openScheduleGenerateModal() {
// TODO: do feature flag check
Copy link
Member

Choose a reason for hiding this comment

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

Though... do you still need to do this before merging?

this.isScheduleGenerateModalOpen = true;
},

closeScheduleGenerateModal() {
this.isScheduleGenerateModalOpen = false;
},

closeWelcome() {
this.welcomeHidden = false;
},
Expand Down
Loading