Skip to content

Commit

Permalink
Merge pull request #223 from SELab-2/frontend-cleanup
Browse files Browse the repository at this point in the history
Frontend cleanup
  • Loading branch information
BramMeir authored Apr 3, 2024
2 parents 443aeb6 + cf7a5d8 commit 856e744
Show file tree
Hide file tree
Showing 81 changed files with 2,222 additions and 2,787 deletions.
66 changes: 34 additions & 32 deletions frontend/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
module.exports = {
"env": {
"browser": true,
"es2021": true
'env': {
'browser': true,
'es2021': true
},
"extends": [
"standard-with-typescript",
"plugin:vue/vue3-essential",
"plugin:prettier/recommended"
'extends': [
'standard-with-typescript',
'plugin:vue/vue3-essential',
'plugin:prettier/recommended'
],
"overrides": [
'overrides': [
{
"env": {
"node": true
'env': {
'node': true
},
"files": [
".eslintrc.{js,cjs}"
'files': [
'.eslintrc.{js,cjs}'
],
"parserOptions": {
"sourceType": "script",
},
'parserOptions': {
'sourceType': 'script'
}
}
],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser" ,
"ecmaVersion": "latest",
"sourceType": "module",
"project": ["./tsconfig.json"],
"extraFileExtensions": [".vue"]
'parser': 'vue-eslint-parser',
'parserOptions': {
'parser': '@typescript-eslint/parser',
'ecmaVersion': 'latest',
'sourceType': 'module',
'project': ['./tsconfig.json'],
'extraFileExtensions': ['.vue']
},
"plugins": [
"vue",
"prettier"
'plugins': [
'vue',
'prettier'
],
"rules": {
"vue/multi-word-component-names": "off", // Disable rule that requires multi-word component names in Vue files
"@typescript-eslint/no-floating-promises": "off", // Disable rule that flags floating promises in .ts files
"@typescript-eslint/no-extraneous-class": "off", // Disable rule that flags usage of unnecessary classes in the codebase
"@typescript-eslint/unbound-method": "off", // Disable rule that refuses unboud methods that could scope `this`
"prettier/prettier": "error"
'rules': {
'vue/multi-word-component-names': 'off', // Disable rule that requires multi-word component names in Vue files
'@typescript-eslint/no-floating-promises': 'off', // Disable rule that flags floating promises in .ts files
'@typescript-eslint/no-extraneous-class': 'off', // Disable rule that flags usage of unnecessary classes in the codebase
'@typescript-eslint/unbound-method': 'off', // Disable rule that refuses unbound methods that could scope `this`
'prettier/prettier': "error",
'function-paren-newline': 'off',
'function-call-argument-newline': 'off'
}
}
};
13 changes: 9 additions & 4 deletions frontend/.prettierrc
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
{
"tabWidth": 4,
"semi": false,
"trailingComma": "none",
"bracketSpacing": true,
"singleQuote": true
"printWidth": 140,
"max_line_length": 140,
"semi": true,
"singleQuote": true,
"arrowParens": "always",
"wrapParens": "avoid",
"endOfLine": "auto",
"jsxBracketSameLine": true,
"bracketSameLine": true
}
10 changes: 5 additions & 5 deletions frontend/src/assets/scss/theme/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,10 @@ $inputListPadding:0 0 !default;
$inputListItemPadding:.75rem 1.25rem !default;
$inputListItemBg:transparent !default;
$inputListItemTextColor:$shade700 !default;
$inputListItemHoverBg:$shade200 !default;
$inputListItemTextHoverColor:$shade700 !default;
$inputListItemHoverBg:$highlightBg !default;
$inputListItemTextHoverColor:$primaryColor !default;
$inputListItemFocusBg:$shade300 !default;
$inputListItemTextFocusColor:$shade700 !default;
$inputListItemTextFocusColor: red !default;
$inputListItemBorder:0 none !default;
$inputListItemBorderRadius:0 !default;
$inputListItemMargin:0 !default;
Expand All @@ -112,8 +112,8 @@ $inputListHeaderBorder:1px solid $shade300 !default;
//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
$inputOverlayBg:$inputListBg !default;
$inputOverlayHeaderBg:$inputListHeaderBg !default;
$inputOverlayBorder:0 none !default;
$inputOverlayShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
$inputOverlayBorder: 1px solid $highlightBg !default;
$inputOverlayShadow: none !default;

//password
$passwordMeterBg:$shade300 !default;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ input.p-dropdown-label {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
border-radius:0;
box-shadow: $inputOverlayShadow;

.p-dropdown-header {
Expand Down Expand Up @@ -206,14 +206,14 @@ input.p-dropdown-label {

&:first-child {
margin-top: 0;
border-top-left-radius: $borderRadius;
border-top-right-radius: $borderRadius;
border-top-left-radius:0;
border-top-right-radius:0;
}

&:last-child {
margin-bottom: 0;
border-bottom-left-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}

&.p-highlight {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/assets/scss/theme/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $secondaryTextColor: #000000 !default;

$highlightBg: $primaryLightColor !default;
$highlightTextColor: $primaryDarkerColor !default;
$highlightFocusBg: rgba($primaryColor, .24) !default;
$highlightFocusBg: rgba($primaryColor, .1) !default;

@import 'variables';
@import 'extensions';
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Dummy.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useRoute } from 'vue-router';
</script>

<template>
Expand Down
41 changes: 18 additions & 23 deletions frontend/src/components/LanguageSelector.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<script setup lang="ts">
import nl from '@/assets/img/flags/nl-flag.svg'
import en from '@/assets/img/flags/en-flag.svg'
import Dropdown from 'primevue/dropdown'
import { useI18n } from 'vue-i18n'
import { onMounted } from 'vue'
import { useLocalStorage } from '@vueuse/core'
import { type PrimeVueLocaleOptions, usePrimeVue } from 'primevue/config'
import nl from '@/assets/img/flags/nl-flag.svg';
import en from '@/assets/img/flags/en-flag.svg';
import Dropdown from 'primevue/dropdown';
import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue';
import { useLocalStorage } from '@vueuse/core';
import { type PrimeVueLocaleOptions, usePrimeVue } from 'primevue/config';
/* Composables */
const { locale, availableLocales, t, messages } = useI18n()
const { config } = usePrimeVue()
const localeStorage = useLocalStorage('locale', locale.value)
const { locale, availableLocales, t, messages } = useI18n();
const { config } = usePrimeVue();
const localeStorage = useLocalStorage('locale', locale.value);
/**
* Update the locale settings when the locale changes.
Expand All @@ -19,9 +19,9 @@ const localeStorage = useLocalStorage('locale', locale.value)
*/
function updateLocale(locale: string): void {
// Update saved locale
localeStorage.value = locale
localeStorage.value = locale;
// Update PrimeVue locale
config.locale = messages.value[locale].primevue as PrimeVueLocaleOptions
config.locale = messages.value[locale].primevue as PrimeVueLocaleOptions;
}
/**
Expand All @@ -31,16 +31,16 @@ function updateLocale(locale: string): void {
*/
function getFlag(locale: string): string {
if (locale === 'nl') {
return nl
return nl;
}
return en
return en;
}
/* Hooks */
onMounted(() => {
updateLocale(locale.value)
})
updateLocale(locale.value);
});
</script>

<template>
Expand All @@ -50,15 +50,10 @@ onMounted(() => {
class="w-auto"
:options="availableLocales"
@change="updateLocale($event.value)"
variant="outlined"
>
variant="outlined">
<template #option="{ option }">
<div class="flex align-items-center">
<img
:alt="t('layout.header.language.' + option)"
:src="getFlag(option)"
class="h-1rem mr-2"
/>
<img :alt="t('layout.header.language.' + option)" :src="getFlag(option)" class="h-1rem mr-2" />
<span>{{ t('layout.header.language.' + option) }}</span>
</div>
</template>
Expand Down
30 changes: 9 additions & 21 deletions frontend/src/components/RoleSelector.vue
Original file line number Diff line number Diff line change
@@ -1,37 +1,25 @@
<script setup lang="ts">
import Dropdown from 'primevue/dropdown'
import { storeToRefs } from 'pinia'
import { useAuthStore } from '@/store/authentication.store.ts'
import { useI18n } from 'vue-i18n'
import Dropdown from 'primevue/dropdown';
import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/store/authentication.store.ts';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
const { view, user } = storeToRefs(useAuthStore())
const { t } = useI18n();
const { view, user } = storeToRefs(useAuthStore());
</script>

<template>
<template v-if="user !== null">
<Dropdown
id="view"
v-model="view"
class="w-auto"
:options="user.roles"
variant="outlined"
>
<Dropdown id="view" v-model="view" class="w-auto" :options="user.roles" variant="outlined">
<template #option="{ option }">
<div class="flex align-items-center">
<div>
{{
t('layout.header.view', [
t('types.roles.' + option).toLowerCase()
])
}}
{{ t('layout.header.view', [t('types.roles.' + option).toLowerCase()]) }}
</div>
</div>
</template>
<template #value="{ value }">
<div
class="h-full flex justify-content-center align-items-center"
>
<div class="h-full flex justify-content-center align-items-center">
<div class="text-sm">{{ t('types.roles.' + value) }}</div>
</div>
</template>
Expand Down
43 changes: 43 additions & 0 deletions frontend/src/components/YearSelector.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<script setup lang="ts">
import Dropdown from 'primevue/dropdown';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
/* Composable injections */
const { t } = useI18n();
/* Props */
const props = defineProps<{ years: number[] }>();
/* State */
const years = computed(() =>
props.years.map((year) => ({
label: `${year} - ${year + 1}`,
value: year,
})),
);
/* Models */
const year = defineModel();
</script>

<template>
<Dropdown v-model="year" :options="years" optionLabel="label" optionValue="value" class="custom-dropdown">
<template #value="{ value }">
<span class="text-primary font-semibold">{{ t('components.buttons.academic_year') }} {{ value }} - {{ value + 1 }}</span>
</template>
<template #option="{ option }">
<span class="pi pi-calendar mr-2" />
<span>{{ t('components.buttons.academic_year') }} {{ (option as any).label }}</span>
</template>
<template #dropdownicon>
<i class="pi pi-chevron-down pr-1 text-primary"></i>
</template>
</Dropdown>
</template>

<style scoped lang="scss">
.custom-dropdown {
border-radius: 0;
}
</style>
36 changes: 14 additions & 22 deletions frontend/src/components/courses/CourseCard.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
<script setup lang="ts">
import Card from 'primevue/card'
import Button from 'primevue/button'
import { type Course } from '@/types/Course.ts'
import { PrimeIcons } from 'primevue/api'
import { useI18n } from 'vue-i18n'
import Card from 'primevue/card';
import Button from 'primevue/button';
import { type Course } from '@/types/Course.ts';
import { PrimeIcons } from 'primevue/api';
import { useI18n } from 'vue-i18n';
/* Component props */
defineProps<{
course: Course
}>()
course: Course;
}>();
/* Composable injections */
const { t } = useI18n()
const { t } = useI18n();
/* Default image thumbnails */
const images = Object.keys(
import.meta.glob('@/assets/img/placeholders/*', {
eager: true
})
)
eager: true,
}),
);
</script>

<template>
Expand All @@ -28,8 +28,7 @@ const images = Object.keys(
class="w-full h-12rem border-round-top"
style="object-fit: cover; margin-bottom: -4px"
:alt="course.description"
:src="images[course.name.length % images.length]"
/>
:src="images[course.name.length % images.length]" />
</template>
<template #title>
<h2 class="text-primary m-0 text-2xl">{{ course.name }}</h2>
Expand All @@ -41,15 +40,8 @@ const images = Object.keys(
{{ course.description }}
</template>
<template #footer>
<RouterLink
:to="{ name: 'course', params: { courseId: course.id } }"
>
<Button
:icon="PrimeIcons.ARROW_RIGHT"
:label="t('components.card.open')"
icon-pos="right"
outlined
/>
<RouterLink :to="{ name: 'course', params: { courseId: course.id } }">
<Button :icon="PrimeIcons.ARROW_RIGHT" :label="t('components.card.open')" icon-pos="right" outlined />
</RouterLink>
</template>
</Card>
Expand Down
Loading

0 comments on commit 856e744

Please sign in to comment.