Do linting

jameel-institute · Jul 12, 2024 · 6949efb · 6949efb
1 parent 3c063a2
commit 6949efb
Show file tree

Hide file tree

Showing 22 changed files with 308 additions and 293 deletions.
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -5,7 +5,7 @@ on:
       - main
   pull_request:
     branches:
-      - "*"
+      - '*'
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -16,7 +16,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'npm'
+          cache: npm
       - name: Install dependencies
         run: npm ci
       - name: Lint

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -5,28 +5,28 @@ on:
       - main
   pull_request:
     branches:
-      - "*"
+      - '*'
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-    - name: Set up Node
-      uses: actions/setup-node@v4
-      with:
-        node-version: 20
-        cache: npm
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps && npx playwright install msedge 
-    - name: Run Playwright tests
-      run: npm run test:e2e
-    - uses: actions/upload-artifact@v4
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps && npx playwright install msedge
+      - name: Run Playwright tests
+        run: npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml
@@ -5,7 +5,7 @@ on:
       - main
   pull_request:
     branches:
-      - "*"
+      - '*'
 jobs:
   test:
     timeout-minutes: 60
@@ -17,7 +17,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'npm'
+          cache: npm
       - name: Install dependencies
         run: npm ci
       - name: Test

diff --git a/app.vue b/app.vue
@@ -1,3 +1,11 @@
+<script setup>
+import '~/assets/scss/fonts.scss'
+import { iconsSet } from '@/assets/icons'
+
+const nuxtApp = useNuxtApp()
+nuxtApp.vueApp.provide('icons', iconsSet)
+</script>
+
 <template>
   <div>
     <NuxtRouteAnnouncer />
@@ -7,14 +15,6 @@
   </div>
 </template>
 
-<script setup>
-import '~/assets/scss/fonts.scss';
-import { iconsSet } from '@/assets/icons';
-
-const nuxtApp = useNuxtApp()
-nuxtApp.vueApp.provide('icons', iconsSet);
-</script>
-
 <style lang="scss">
 @use "~/assets/scss/main.scss";
-</style>
+</style>
diff --git a/assets/icons/index.js b/assets/icons/index.js
@@ -1,15 +1,15 @@
 import {
-  cilMenu,
+  cilArrowThickToLeft,
+  cilBookmark,
+  cilChevronLeft,
   cilCloudDownload,
-  cilPlus,
+  cilGlobeAlt,
   cilHistory,
-  cilShareAlt,
+  cilMenu,
   cilNoteAdd,
-  cilBookmark,
-  cilGlobeAlt,
-  cilArrowThickToLeft,
-  cilChevronLeft
-} from '@coreui/icons';
+  cilPlus,
+  cilShareAlt,
+} from '@coreui/icons'
 
 export const iconsSet = {
   cilMenu,
@@ -21,5 +21,5 @@ export const iconsSet = {
   cilNoteAdd,
   cilGlobeAlt,
   cilArrowThickToLeft,
-  cilChevronLeft
-};
+  cilChevronLeft,
+}
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -1,68 +1,71 @@
+<script setup lang="ts">
+import { CIcon } from '@coreui/icons-vue'
+import throttle from 'lodash.throttle'
+import { useRoute } from 'vue-router'
+
+const emit = defineEmits(['toggleSidebar'])
+
+const route = useRoute()
+
+const showBreadcrumbs = computed(() => route.meta.hideBreadcrumbs !== true)
+
+function toggleSidebar() {
+  emit('toggleSidebar')
+}
+
+// We apply a shadow to the header when the position is scrolled down
+const isScrolled = ref(false)
+const handleScroll = throttle(() => {
+  isScrolled.value = document.documentElement.scrollTop > 0
+}, 100)
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
+const VerticalRule = h('div', { class: 'vr h-100 mx-2 text-body text-opacity-75' })
+</script>
+
 <template>
-  <CHeader class="header-sticky p-0" :class="{'shadow-sm': isScrolled}">
+  <CHeader class="header-sticky p-0" :class="{ 'shadow-sm': isScrolled }">
     <CContainer fluid class="border-bottom px-3 mt-1 justify-content-start">
       <CHeaderToggler @click="toggleSidebar">
         <span data-testid="toggle-sidebar-button">
-          <CIcon icon="cilMenu" size="lg"/>
+          <CIcon icon="cilMenu" size="lg" />
         </span>
       </CHeaderToggler>
       <CHeaderBrand href="/">
-        <CIcon icon="cilGlobeAlt" size="lg"/>
+        <CIcon icon="cilGlobeAlt" size="lg" />
         <span class="ms-2 py">DAEDALUS Explore</span>
       </CHeaderBrand>
       <div v-show="showBreadcrumbs" class="ms-5 d-none d-xxl-block">
-        <BreadCrumb/>
+        <BreadCrumb />
       </div>
       <CHeaderNav class="ms-auto d-xxl-none">
         <CNavItem class="py-1">
-          <VerticalRule/>
+          <VerticalRule />
         </CNavItem>
         <CNavItem href="#">
-          <CIcon icon="cilCloudDownload" size="lg"/>
+          <CIcon icon="cilCloudDownload" size="lg" />
         </CNavItem>
         <CNavItem class="py-1">
-          <VerticalRule/>
+          <VerticalRule />
+        </CNavItem>
+        <CNavItem href="#">
+          ?
         </CNavItem>
-        <CNavItem href="#"> ?</CNavItem>
       </CHeaderNav>
     </CContainer>
     <CContainer v-show="showBreadcrumbs" fluid class="d-xxl-none full-breadcrumb-container">
-      <BreadCrumb/>
+      <BreadCrumb />
     </CContainer>
   </CHeader>
 </template>
 
-<script setup lang="ts">
-import { CIcon } from '@coreui/icons-vue';
-import throttle from 'lodash.throttle';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-
-const showBreadcrumbs = computed(() => route.meta.hideBreadcrumbs !== true);
-
-const emit = defineEmits(['toggle-sidebar']);
-const toggleSidebar = () => {
-  emit('toggle-sidebar');
-};
-
-// We apply a shadow to the header when the position is scrolled down
-const isScrolled = ref(false);
-const handleScroll = throttle(() => {
-  isScrolled.value = document.documentElement.scrollTop > 0;
-}, 100);
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', handleScroll);
-});
-
-const VerticalRule = h('div', { class: "vr h-100 mx-2 text-body text-opacity-75" })
-</script>
-
 <style lang="scss" scoped>
 @use "sass:map";
 

diff --git a/components/BreadCrumb.vue b/components/BreadCrumb.vue
@@ -1,6 +1,14 @@
 <!-- This code is not complete. It's an example of how breadcrumbs could work.
 I expect that to change based on how we end up making routes work. -->
 
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const items = route.meta.breadcrumbs || []
+</script>
+
 <template>
   <CBreadcrumb class="my-0">
     <CBreadcrumbItem
@@ -14,12 +22,5 @@ I expect that to change based on how we end up making routes work. -->
   </CBreadcrumb>
 </template>
 
-<script lang="ts" setup>
-import { useRoute } from 'vue-router'
-const route = useRoute()
-
-const items = route.meta.breadcrumbs || []
-</script>
-
 <style lang="scss" scoped>
 </style>
diff --git a/components/SideBar.vue b/components/SideBar.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+import { CIcon } from '@coreui/icons-vue'
+
+defineProps({
+  visible: Boolean,
+})
+const emit = defineEmits(['toggle', 'hidden'])
+function handleToggle() {
+  emit('toggle')
+}
+
+function handleHide() {
+  emit('hidden')
+}
+</script>
+
 <template>
   <CSidebar
     unfoldable
@@ -8,32 +24,32 @@
     <CSidebarNav role="navigation">
       <CNavItem>
         <CNavLink href="/scenario/new">
-          <CIcon class="nav-icon" icon="cilPlus" size="lg"/> New scenario
+          <CIcon class="nav-icon" icon="cilPlus" size="lg" /> New scenario
         </CNavLink>
       </CNavItem>
       <CNavItem>
         <CNavLink href="/bookmarks">
-          <CIcon class="nav-icon" icon="cilBookmark" size="lg"/> Bookmarks
+          <CIcon class="nav-icon" icon="cilBookmark" size="lg" /> Bookmarks
         </CNavLink>
       </CNavItem>
       <CNavItem>
         <CNavLink href="404.html">
-          <CIcon class="nav-icon" icon="cilHistory" size="lg"/> My history
+          <CIcon class="nav-icon" icon="cilHistory" size="lg" /> My history
         </CNavLink>
       </CNavItem>
       <CNavItem>
         <CNavLink href="404.html">
-          <CIcon class="nav-icon" icon="cilShareAlt" size="lg"/> Share
+          <CIcon class="nav-icon" icon="cilShareAlt" size="lg" /> Share
         </CNavLink>
       </CNavItem>
       <CNavItem>
         <CNavLink href="404.html">
-          <CIcon class="nav-icon" icon="cilCloudDownload" size="lg"/> Download
+          <CIcon class="nav-icon" icon="cilCloudDownload" size="lg" /> Download
         </CNavLink>
       </CNavItem>
       <CNavItem>
         <CNavLink href="404.html">
-          <CIcon class="nav-icon" icon="cilNoteAdd" size="lg"/> Add notes
+          <CIcon class="nav-icon" icon="cilNoteAdd" size="lg" /> Add notes
         </CNavLink>
       </CNavItem>
 
@@ -44,38 +60,26 @@
           data-testid="close-sidebar-button"
           @click="handleToggle"
         >
-          <CIcon class="nav-icon" icon="cilArrowThickToLeft" size="lg"/> Hide sidebar
+          <CIcon class="nav-icon" icon="cilArrowThickToLeft" size="lg" /> Hide sidebar
         </CNavLink>
       </CNavItem>
     </CSidebarNav>
     <CSidebarHeader class="border-top d-flex">
       <!-- Use CoreUI Sidebar Header component instead of footer so that stylings for CoreUI Sidebar Brand component work -->
       <CSidebarBrand>
-        <div class="sidebar-brand-full"><img class="img-fluid mb-1" src="~/assets/img/IMPERIAL_JAMEEL_INSTITUTE_LOCKUP-p-500.png" alt="Imperial College and Community Jameel logo"></div>
-        <div class="sidebar-brand-narrow"><img class="img-fluid ms-2" src="~/assets/img/Imperial_avatar_500x500px_blue_I.png" alt="Imperial College avatar"></div>
+        <div class="sidebar-brand-full">
+          <img class="img-fluid mb-1" src="~/assets/img/IMPERIAL_JAMEEL_INSTITUTE_LOCKUP-p-500.png" alt="Imperial College and Community Jameel logo">
+        </div>
+        <div class="sidebar-brand-narrow">
+          <img class="img-fluid ms-2" src="~/assets/img/Imperial_avatar_500x500px_blue_I.png" alt="Imperial College avatar">
+        </div>
       </CSidebarBrand>
     </CSidebarHeader>
   </CSidebar>
 </template>
 
-<script lang="ts" setup>
-import { CIcon } from '@coreui/icons-vue';
-
-defineProps({
-  visible: Boolean
-});
-const emit = defineEmits(['toggle', 'hidden']);
-const handleToggle = () => {
-  emit('toggle');
-};
-
-const handleHide = () => {
-  emit('hidden');
-};
-</script>
-
 <style lang="scss" scoped>
 .sidebar-brand-narrow {
   filter: opacity(50%) // Style for Imperial 'I' logo to try and make the colour stand out less.
 }
-</style>
+</style>