Merge pull request #249 from Perdolique/246-brands-list

Brands list

.github/workflows/database-migration-staging.yml

@@ -25,3 +25,7 @@ jobs:
         env:
           DATABASE_URL: ${{ secrets.DATABASE_URL }}
         run: npm run db:migrate
+      - name: Seed database
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+        run: npm run db:seed

app/components/PerdPaginator.vue

@@ -1,16 +1,21 @@
 <template>
   <div :class="$style.component">
     <button
-      v-for="page in pagesCount"
+      v-for="page in visiblePages"
       :key="page"
       :class="[$style.button, { active: isActivePage(page) }]"
       @click="handlePageClick(page)"
+      :disabled="isPageDisabled(page)"
     >
       {{ page }}
     </button>
   </div>
 </template>
 
+<script lang="ts">
+  const VISIBLE_PAGES = 7;
+</script>
+
 <script lang="ts" setup>
   interface Props {
     readonly limit: number;
@@ -19,27 +24,83 @@
   }
 
   type Emits = (event: 'page-change', page: number) => void
+  type Page = number | '...'
 
   const { limit, total, offset } = defineProps<Props>();
   const emit = defineEmits<Emits>();
   const pagesCount = computed(() => Math.ceil(total / limit));
   const current = computed(() => Math.floor(offset / limit) + 1);
 
-  function isActivePage(page: number): boolean {
+  const visiblePages = computed(() => {
+    if (pagesCount.value <= VISIBLE_PAGES) {
+      return Array.from({ length: pagesCount.value }, (_, index) => index + 1);
+    }
+
+    const pages : Page[] = [];
+    const halfVisible = Math.floor(VISIBLE_PAGES / 2);
+
+    if (current.value <= halfVisible + 1) {
+      // Start of list
+      for (let i = 1; i <= VISIBLE_PAGES - 2; i++) {
+        pages.push(i);
+      }
+
+      pages.push('...');
+      pages.push(pagesCount.value);
+    } else if (current.value >= pagesCount.value - halfVisible) {
+      // End of list
+      pages.push(1);
+      pages.push('...');
+
+      for (let i = pagesCount.value - (VISIBLE_PAGES - 3); i <= pagesCount.value; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Middle of list
+      pages.push(1);
+      pages.push('...');
+
+      for (let i = current.value - 1; i <= current.value + 1; i++) {
+        pages.push(i);
+      }
+
+      pages.push('...');
+      pages.push(pagesCount.value);
+    }
+
+    return pages;
+  });
+
+  function isActivePage(page: Page) : boolean {
     return page === current.value;
   }
 
-  function handlePageClick(page: number): void {
-    if (page !== current.value) {
+  function isPageDisabled(page: Page) : boolean {
+    return page === '...';
+  }
+
+  function handlePageClick(page: Page) : void {
+    if (
+      page !== '...' &&
+      page > 0 &&
+      page <= pagesCount.value &&
+      page !== current.value
+    ) {
       emit('page-change', page);
     }
   }
 </script>
 
 <style lang="scss" module>
+  @mixin hoverStyle {
+    color: var(--text-800);
+    background-color: var(--secondary-100);
+    border-color: var(--secondary-400);
+    scale: 1.2;
+  }
+
   .component {
     display: flex;
-    justify-content: center;
     column-gap: var(--spacing-4);
   }
 
@@ -57,21 +118,14 @@
       border-color var(--transition-time-quick),
       scale var(--transition-time-quick);
 
-    @mixin hoverStyle {
-      color: var(--text-800);
-      background-color: var(--secondary-100);
-      border-color: var(--secondary-400);
-      scale: 1.2;
-    }
-
     @media (hover: hover) {
-      &:hover:not:global(.active) {
-        @include hoverStyle;
+      &:hover:not(:global(.active)) {
+        @include hoverStyle();
       }
     }
 
     &:focus-visible {
-      @include hoverStyle;
+      @include hoverStyle();
     }
 
     &:global(.active),
@@ -80,5 +134,11 @@
       background-color: var(--secondary-200);
       cursor: default;
     }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
   }
 </style>

app/components/PerdSidebar/PerdSidebar.vue

@@ -36,6 +36,13 @@
           Equipment database
         </SidebarItem>
 
+        <SidebarItem
+          to="/brands"
+          icon="tabler:building-store"
+        >
+          Brands
+        </SidebarItem>
+
         <SidebarItem
           v-if="user.isAdmin"
           to="/manager/equipment"

app/components/PerdTable/HeaderRow.vue

@@ -1,7 +1,7 @@
 <template>
   <tr>
     <th
-      :class="$style.cell"
+      :class="[$style.cell, column.headerClass]"
       v-for="column in columns"
       :key="column.key"
     >
@@ -13,6 +13,8 @@
 <script lang="ts" setup>
   export interface Column {
     readonly key: string;
+    readonly headerClass?: string;
+    readonly cellClass?: string;
     readonly label?: string;
   }
 

app/components/PerdTable/PerdTable.vue

@@ -8,12 +8,12 @@
       <tr
         :class="$style.row"
         v-for="row in data"
-        :key="row.key"
+        :key="row[keyField]"
       >
         <td
           v-for="column in columns"
           :key="column.key"
-          :class="$style.cell"
+          :class="[$style.cell, column.cellClass]"
         >
           <slot
             :name="column.key"
@@ -27,7 +27,7 @@
 
 <script lang="ts">
   interface RowBase {
-    readonly key: string;
+    readonly [key: string]: any;
   }
 </script>
 
@@ -37,6 +37,7 @@
   interface Props {
     readonly data: RowType[];
     readonly columns: Column[];
+    readonly keyField: keyof RowType;
   }
 
   defineProps<Props>();

app/components/brands/BrandCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <button
+    :class="$style.component"
+    @click="onCardClick"
+  >
+    <div :class="$style.name">
+      {{ name }}
+    </div>
+
+    <BrandInfo
+      :equipment-count="equipmentCount"
+      :website-url="websiteUrl"
+    />
+  </button>
+</template>
+
+<script lang="ts" setup>
+  import type { BrandModel } from '~/models/brand';
+  import BrandInfo from './BrandInfo.vue';
+
+  interface Props extends BrandModel {}
+
+  const { id } = defineProps<Props>()
+  const router = useRouter()
+
+  function onCardClick() {
+    router.push(`/brands/details/${id}`)
+  }
+</script>
+
+<style lang="scss" module>
+  @mixin focusStyle {
+    background-color: var(--accent-100);
+    border-color: var(--accent-300);
+  }
+
+  .component {
+    display: grid;
+    outline: none;
+    justify-content: space-between;
+    text-align: left;
+    row-gap: var(--spacing-24);
+    background-color: var(--accent-50);
+    border: 1px solid var(--accent-200);
+    border-radius: var(--border-radius-8);
+    padding: var(--spacing-16);
+    transition:
+      background-color var(--transition-time-quick) ease-out,
+      border-color var(--transition-time-quick) ease-out;
+
+    @media (hover: hover) {
+      &:hover {
+        @include focusStyle();
+      }
+    }
+
+    &:focus-visible {
+      @include focusStyle();
+    }
+  }
+
+  .name {
+    grid-area: 1 / 1 / 2 / 2;
+    font-weight: var(--font-weight-medium);
+  }
+</style>

app/components/brands/BrandCards.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="$style.component">
+    <BrandCard
+      v-for="brand in brands"
+      :id="brand.id"
+      :key="brand.id"
+      :name="brand.name"
+      :website-url="brand.websiteUrl"
+      :equipment-count="brand.equipmentCount"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { BrandModel } from '~/models/brand';
+  import BrandCard from './BrandCard.vue';
+
+  interface Props {
+    readonly brands: BrandModel[];
+  }
+
+  defineProps<Props>();
+</script>
+
+<style lang="scss" module>
+  .component {
+    display: grid;
+    row-gap: var(--spacing-8);
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--spacing-8);
+
+    @include mobileLarge {
+      display: none;
+    }
+  }
+</style>

app/components/brands/BrandInfo.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="$style.component">
+    <BrandInfoItem icon="tabler:package">
+      {{ equipmentCount }}
+    </BrandInfoItem>
+
+    <BrandInfoItem
+      v-if="websiteUrl"
+      icon="tabler:world"
+    >
+      <PerdLink
+        :to="websiteUrl"
+        target="_blank"
+        @click.stop
+      >
+        Website
+      </PerdLink>
+    </BrandInfoItem>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import PerdLink from '~/components/PerdLink.vue';
+  import BrandInfoItem from './BrandInfoItem.vue';
+
+  interface Props {
+    readonly equipmentCount: number;
+    readonly websiteUrl: string | null;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style module>
+  .component {
+    display: flex;
+    column-gap: var(--spacing-12);
+  }
+</style>

app/components/brands/BrandInfoItem.vue

@@ -0,0 +1,28 @@
+<template>
+  <span :class="$style.component">
+    <Icon
+      :name="icon"
+      size="1.25em"
+    />
+
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+  interface Props {
+    readonly icon: string;
+  }
+
+  defineProps<Props>();
+</script>
+
+<style module>
+  .component {
+    font-size: var(--font-size-14);
+    display: flex;
+    align-items: center;
+    column-gap: var(--spacing-4);
+    color: var(--text-500);
+  }
+</style>