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.

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

Sort by semester #537

Merged
merged 54 commits into from
Oct 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
fe11182
Added orderByNewest field to user-semesters
zachary-kent Oct 4, 2021
363ddd9
Prevented scope of breaking changes by un-nesting.
zachary-kent Oct 5, 2021
1cad246
Updated firestore schema
zachary-kent Oct 5, 2021
4792347
Added assets
zachary-kent Oct 5, 2021
b4aa5b5
Updated Vuex store to persist
zachary-kent Oct 5, 2021
848bde4
Added check to ensure orderByNewest is not
zachary-kent Oct 5, 2021
2a932fc
Basic dropdown functionality
zachary-kent Oct 5, 2021
3fdf686
Completed Dropdown Functionality
zachary-kent Oct 6, 2021
d929421
Made backend operations more
zachary-kent Oct 6, 2021
b008836
Added horizontal line to dropdown
zachary-kent Oct 6, 2021
4f506cb
Ran prettier
zachary-kent Oct 6, 2021
de3e835
Increased horizontal line spacing
zachary-kent Oct 6, 2021
562962f
Added type safety to event handling
zachary-kent Oct 6, 2021
0200555
Ran prettier
zachary-kent Oct 6, 2021
b48aecb
Removed old assets and .dmg
zachary-kent Oct 6, 2021
ca062b2
Restored old assets, removed .dmg
zachary-kent Oct 6, 2021
ee0d86f
Merge branch 'sort-by-semester' of https://github.com/cornell-dti/cou…
zachary-kent Oct 6, 2021
6c585d5
Restored files
zachary-kent Oct 6, 2021
a43b800
Moved sorting logic to store.ts
zachary-kent Oct 6, 2021
d79bee9
Simplfied SeasonOrdinal export
zachary-kent Oct 6, 2021
c0a484e
Ran prettier
zachary-kent Oct 6, 2021
4297fd9
Uncmoitted package-lock changes
zachary-kent Oct 8, 2021
63a24a6
Removed comparisons using "!=" that result in
zachary-kent Oct 8, 2021
6f88817
Improved readability
zachary-kent Oct 8, 2021
0c320ce
ran prettier
zachary-kent Oct 8, 2021
be73ca1
Removed uneeded event modifiers
zachary-kent Oct 8, 2021
7397288
Made dropdown toggleable
zachary-kent Oct 19, 2021
b85e1d3
Fixed button font issues
zachary-kent Oct 19, 2021
7020936
Removed references to newly created colors
zachary-kent Oct 19, 2021
d1cd8cc
Ran prettier
zachary-kent Oct 19, 2021
44ca16a
Cleaned up image source paths
zachary-kent Oct 19, 2021
afba67b
Removed uneeded css prop
zachary-kent Oct 19, 2021
60d07ea
Switched from em to rem
zachary-kent Oct 19, 2021
937f9b3
Maintained hierarchy
zachary-kent Oct 19, 2021
57ec53b
maintained hierarchy (again)
zachary-kent Oct 19, 2021
01c5a25
Added descriptive alt
zachary-kent Oct 19, 2021
c576f01
Made padding property terse,
zachary-kent Oct 19, 2021
e378b87
Merge branch 'master' into sort-by-semester
zachary-kent Oct 19, 2021
e5d3fe4
Merged master in
zachary-kent Oct 19, 2021
5309c11
Updated backend structure
zachary-kent Oct 19, 2021
8f2a42a
Ran prettier
zachary-kent Oct 19, 2021
8eb1a49
Removed duplicated files
zachary-kent Oct 19, 2021
93f4316
Factored out repreated code
zachary-kent Oct 19, 2021
928d0c8
Update src/store.ts
zachary-kent Oct 20, 2021
aa620b9
Refactored according to Ben's suggestions
zachary-kent Oct 20, 2021
2aaa33a
Fixed persistence
zachary-kent Oct 20, 2021
b757494
Renamed OrderDropdown to ViewDropdown
zachary-kent Oct 20, 2021
e5398dd
Added no-wrap rule to prevent semester
zachary-kent Oct 20, 2021
0856739
Made dropdown close upon outside click
zachary-kent Oct 20, 2021
054ce30
Reverted Semester.vue to master
zachary-kent Oct 20, 2021
23cc2bb
Added compareFirestoreSemesters back
zachary-kent Oct 20, 2021
2b1da10
Merge branch 'master' into sort-by-semester
zachary-kent Oct 22, 2021
d72f7a8
Changed setOrderByNewest to be pure
zachary-kent Oct 22, 2021
9d9c91e
Removed @ prefix (seemed to break frontend test,
zachary-kent Oct 22, 2021
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
3 changes: 3 additions & 0 deletions src/assets/images/views/checkmark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/views/newestArrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/views/oldestArrow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/views/settings.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/images/views/settingsOnHover.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ $medGray: #737373;
$darkGray: #3c3c3c;
$darkGray2: #404040;
$onboardingGray: #4f4f4f;
$dropdownGray: #7b7d7e;
zachary-kent marked this conversation as resolved.
Show resolved Hide resolved
$hlineGray: #dddddd;

$emGreen: #148481;
$chrisGreen: #105351;
$sangBlue: #4d7d92;
$einBlue: #92c3e6;
$einBlueTransparent: #92c3e61a;

$yuxuanBlue: #0d7acb;
$yuxuanBlueTransparent: #0d7acb1a;
Expand Down
41 changes: 13 additions & 28 deletions src/components/Semester/SemesterView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,15 @@
>
+ New Semester
</button>
<div
class="semesterView-switch"
<view-dropdown
data-intro-group="req-tooltip"
zachary-kent marked this conversation as resolved.
Show resolved Hide resolved
:data-intro="getToggleTooltipText()"
data-disable-interaction="1"
data-step="4"
data-tooltipClass="tooltipCenter"
>
<span class="semesterView-switchText">View:</span>
<button
class="semesterView-switchImage semesterView-twoColumn full-opacity-on-hover"
@click="setNotCompact"
:class="{ 'semesterView-twoColumn--active': !compact }"
/>
<button
class="semesterView-switchImage semesterView-fourColumn full-opacity-on-hover"
@click="setCompact"
:class="{ 'semesterView-fourColumn--active': compact }"
/>
</div>
:compact="compact"
@click-compact="toggleCompact"
/>
</div>
<confirmation :text="confirmationText" v-if="isSemesterConfirmationOpen" />
<div class="semesterView-content">
Expand Down Expand Up @@ -89,7 +78,8 @@
<div class="semesterView-bot">
<div class="semesterView-builtBy">
Built with
<img class="semesterView-heart" src="@/assets/images/redHeart.svg" alt="heart" /> by
<img class="semesterView-heart" src="@/assets/images/redHeart.svg" alt="heart" />
by
<a target="_blank" href="https://www.cornelldti.org/projects/courseplan/">
Cornell Design &amp; Tech Initiative
</a>
Expand All @@ -108,9 +98,10 @@ import store from '@/store';
import { GTagEvent } from '@/gtag';
import { addSemester, deleteSemester } from '@/global-firestore-data';
import { closeBottomBar } from '@/components/BottomBar/BottomBarState';
import ViewDropdown from './ViewDropdown.vue';

export default defineComponent({
components: { Confirmation, NewSemesterModal, Semester },
components: { Confirmation, NewSemesterModal, Semester, ViewDropdown },
props: {
compact: { type: Boolean, required: true },
isBottomBar: { type: Boolean, required: true },
Expand Down Expand Up @@ -143,16 +134,10 @@ export default defineComponent({
checkIfFirstSem(semester: FirestoreSemester) {
return this.semesters[0].year === semester.year && this.semesters[0].type === semester.type;
},
setCompact() {
if (!this.compact) {
this.$emit('compact-updated', !this.compact);
GTagEvent(this.$gtag, 'to-compact');
}
},
setNotCompact() {
if (this.compact) {
this.$emit('compact-updated', !this.compact);
GTagEvent(this.$gtag, 'to-not-compact');
toggleCompact(toggled: boolean) {
if (toggled !== this.compact) {
this.$emit('compact-updated', toggled);
GTagEvent(this.$gtag, toggled ? 'to-compact' : 'to-not-compact');
Copy link
Member

Choose a reason for hiding this comment

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

Thanks for preserving this!

}
},
openSemesterConfirmationModal(type: FirestoreSemesterType, year: number, isAdd: boolean) {
Expand Down Expand Up @@ -233,7 +218,7 @@ export default defineComponent({
justify-content: flex-end;
margin-bottom: 1rem;
min-height: 2.25rem;

align-items: center;
&--two {
justify-content: space-between;
}
Expand Down
162 changes: 162 additions & 0 deletions src/components/Semester/ViewDropdown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
<template>
<div
v-click-outside="close"
class="dropdown"
:data-intro-group="dataIntroGroup"
:data-intro="dataIntro"
:data-disable-interaction="dataDisableInteraction"
:data-step="dataStep"
:data-tooltipClass="dataTooltipClass"
>
<button class="dropdown-button" data-cyId="dropdown-button" @click="toggle">
<img class="dropdown-button--image" />
<span class="dropdown-button--label">View</span>
</button>
<div v-if="open" class="dropdown-content">
<view-dropdown-option
alt="not compact"
:selected="!compact"
:image="defaultSem"
label="Default"
@click="$emit('click-compact', false)"
/>
<view-dropdown-option
alt="compact"
:selected="compact"
:image="compactSem"
label="Compact"
@click="$emit('click-compact', true)"
/>
<div class="dropdown-content--hline" />
<view-dropdown-option
alt="order by newest"
:selected="orderByNewest"
:image="newestArrow"
label="Newest"
@click="onOrderClick(true)"
/>
<view-dropdown-option
alt="order by oldest"
:selected="!orderByNewest"
:image="oldestArrow"
label="Oldest"
@click="onOrderClick(false)"
/>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import store from '@/store';
import { toggleOrderByNewest } from '@/global-firestore-data/semesters';
import defaultSem from '@/assets/images/views/twoColumnSelected.svg';
import compactSem from '@/assets/images/views/fourColumnSelected.svg';
import newestArrow from '@/assets/images/views/newestArrow.svg';
import oldestArrow from '@/assets/images/views/oldestArrow.svg';
import { clickOutside } from '@/utilities';
import ViewDropdownOption from './ViewDropdownOption.vue';

const requiredStringProp = { type: String, reqiured: true, default: '' };

export default defineComponent({
components: { ViewDropdownOption },
props: {
compact: { type: Boolean, required: true },
dataIntroGroup: requiredStringProp,
dataIntro: requiredStringProp,
dataDisableInteraction: requiredStringProp,
dataStep: requiredStringProp,
dataTooltipClass: requiredStringProp,
},
data() {
return {
open: false,
defaultSem,
compactSem,
newestArrow,
oldestArrow,
};
},
computed: {
orderByNewest() {
return store.state.orderByNewest;
},
},

emits: {
'click-compact': (value: boolean) => typeof value === 'boolean',
},

methods: {
onOrderClick(orderByNewest: boolean) {
if (orderByNewest !== this.orderByNewest) {
toggleOrderByNewest();
}
},
toggle() {
this.open = !this.open;
},
close() {
this.open = false;
},
},
directives: {
'click-outside': clickOutside,
},
});
</script>

<style scoped lang="scss">
@import '@/assets/scss/_variables.scss';
.dropdown {
z-index: 1;
position: relative;
float: right;
&-button {
border: none;
display: flex;
align-items: center;
padding-bottom: 0.5rem;
&--label {
:hover > & {
color: $einBlue;
}
font-weight: 500;
font-size: 19px;
line-height: 19px;
color: $medGray;
}
&--image {
margin-right: 0.3rem;
width: 1rem;
content: url('@/assets/images/views/settings.svg');
:hover > & {
content: url('@/assets/images/views/settingsOnHover.svg');
}
}
}
&-content {
display: flex;
flex-direction: column;
position: absolute;
right: 0;
border-radius: 8px;
min-height: 2.5rem;
min-width: 12rem;
align-items: center;
padding: 0.5rem 0rem;
background-color: $white;
border: 1px solid $borderGray;
box-sizing: border-box;
box-shadow: 0px 5px 8px 2px $boxShadowGray;
border-radius: 4px;
&--hline {
width: calc(100% - 2rem);
height: 0;
border: 0.5px solid $hlineGray;
margin: 0.5rem 0rem;
}
}
}
</style>
55 changes: 55 additions & 0 deletions src/components/Semester/ViewDropdownOption.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<template>
<button class="dropdown-button full-opacity-on-hover">
<div class="dropdown-button-option">
<img :src="image" class="dropdown-button-image" :alt="alt" />
{{ label }}
</div>
<img v-if="selected" :src="checkmark" class="dropdown-button-image" alt="checkmark" />
</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import checkmark from '@/assets/images/views/checkmark.svg';

export default defineComponent({
props: {
alt: { type: String, required: true },
selected: { type: Boolean, required: true },
image: { type: String, required: true },
label: { type: String, required: true },
},
data() {
return {
checkmark,
};
},
});
</script>

<style scoped lang="scss">
@import '@/assets/scss/_variables.scss';
.dropdown-button {
padding: 0.5rem 1rem;
align-items: center;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
&:hover {
background: $einBlueTransparent;
}
&-option {
color: $dropdownGray;
font-size: 1rem;
line-height: 1rem;
align-items: center;
display: flex;
gap: 1rem;
}
&-image {
min-width: 1rem;
max-width: 1rem;
}
}
</style>
5 changes: 4 additions & 1 deletion src/firebase-admin-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ export const usernameCollection = db
.collection('user-name')
.withConverter(getTypedFirestoreDataConverter<FirestoreUserName>());

export type SemesterDocumentData = { readonly semesters: readonly FirestoreSemester[] };
export type SemesterDocumentData = {
semesters: readonly FirestoreSemester[];
orderByNewest: boolean;
};
export const semestersCollection = db
.collection('user-semesters')
.withConverter(getTypedFirestoreDataConverter<SemesterDocumentData>());
Expand Down
5 changes: 4 additions & 1 deletion src/firebase-config-common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,8 @@ export const getTypedFirestoreDataConverter = <T>(): CommonFirestoreDataConverte
},
});

export type SemesterDocumentData = { readonly semesters: readonly FirestoreSemester[] };
export type SemesterDocumentData = {
readonly semesters: readonly FirestoreSemester[];
readonly orderByNewest: boolean;
};
export type UniqueIncrementerDocumentData = { readonly uniqueIncrementer: number };
Loading