Release v1.0.0 of sudosos-frontend (#237)

.github/workflows/point-of-sale-docker.yml → .github/workflows/docker.yml

@@ -1,4 +1,4 @@
-name: Point of Sale - Dockerize
+name: Docker Image CI
 
 on:
   workflow_dispatch:
@@ -16,6 +16,29 @@ jobs:
     runs-on: ubuntu-latest
     container:
       image: docker:dind
+    strategy:
+      matrix:
+        app: [ dashboard, point-of-sale, point-of-sale-ab]
+        include:
+          - app: dashboard
+            env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
+            env_file_develop: ${{ vars.ENV_FILE_DEVELOPMENT }}
+            docker_tag: ${{ vars.DOCKER_TAG_DASHBOARD }}
+            dockerfile_path: "apps/dashboard/Dockerfile"
+            dir: "dashboard"
+          - app: point-of-sale
+            env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
+            env_file_develop: ${{ vars.ENV_FILE_DEVELOPMENT }}
+            docker_tag: ${{ vars.DOCKER_TAG_POS }}
+            dockerfile_path: "apps/point-of-sale/Dockerfile"
+            dir: "point-of-sale"
+          - app: point-of-sale-ab
+            env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
+            env_file_develop: ${{ vars.ENV_FILE_PRODUCTION }}
+            docker_tag: ${{ vars.DOCKER_TAG_POS }}-ab
+            dockerfile_path: "apps/point-of-sale/Dockerfile"
+            dir: "point-of-sale"
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -24,29 +47,26 @@ jobs:
 
       - name: Set up environment - main
         env:
-          ENV_FILE: ${{ vars.ENV_FILE_PRODUCTION }}
+          ENV_FILE: ${{ matrix.env_file_main }}
         if: github.ref == 'refs/heads/main'
         run: |
-          echo "${ENV_FILE}" > ./apps/point-of-sale/.env
+          echo "${ENV_FILE}" > ./apps/${{ matrix.dir }}/.env
 
       - name: Set up environment - develop
         env:
-          ENV_FILE: ${{ vars.ENV_FILE_DEVELOPMENT }}
-        if: github.ref == 'refs/heads/develop'
+          ENV_FILE: ${{ matrix.env_file_develop }}
+        if: github.ref != 'refs/heads/main'
         run: |
-          echo "${ENV_FILE}" > apps/point-of-sale/.env
+          echo "${ENV_FILE}" > apps/${{ matrix.dir }}/.env
 
       - name: Get Docker meta (for tags)
         id: meta
         uses: docker/metadata-action@v4
         with:
-          # list of Docker images to use as base name for tags
           images: |
-            ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_TAG_POS }}
-          # generate Docker tags based on the following events/attributes
+            ${{ vars.DOCKER_REGISTRY }}/${{ matrix.docker_tag }}
           tags: |
-            type=ref,event=branch
-            type=semver,pattern={{version}}
+            type=ref,enable=true,priority=600,prefix=,suffix=,event=branch
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
@@ -73,4 +93,4 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
-          file: "apps/point-of-sale/Dockerfile"
+          file: ${{ matrix.dockerfile_path }}

.github/workflows/dashboard-docker.yml → .github/workflows/release.yml

@@ -1,51 +1,51 @@
-name: Dashboard - Dockerize
+name: Release Docker Image CI
 
 on:
-  workflow_dispatch:
   push:
-    branches: [ main, develop ]
-  pull_request:
-    branches: [ main, develop ]
+    tags:
+      - 'v*'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  dockerize:
+  release:
     runs-on: ubuntu-latest
     container:
       image: docker:dind
+    strategy:
+      matrix:
+        app: [ dashboard, point-of-sale ]
+        include:
+          - app: dashboard
+            env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
+            docker_tag: ${{ vars.DOCKER_TAG_DASHBOARD }}
+            dockerfile_path: "apps/dashboard/Dockerfile"
+          - app: point-of-sale
+            env_file_main: ${{ vars.ENV_FILE_PRODUCTION }}
+            docker_tag: ${{ vars.DOCKER_TAG_POS }}
+            dockerfile_path: "apps/point-of-sale/Dockerfile"
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
           path: .
 
-      - name: Set up environment - main
+      - name: Set up environment
         env:
-          ENV_FILE: ${{ vars.ENV_FILE_PRODUCTION }}
-        if: github.ref == 'refs/heads/main'
+          ENV_FILE: ${{ matrix.env_file_main }}
         run: |
-          echo "${ENV_FILE}" > ./apps/dashboard/.env
-
-      - name: Set up environment - develop
-        env:
-          ENV_FILE: ${{ vars.ENV_FILE_DEVELOPMENT }}
-        if: github.ref == 'refs/heads/develop'
-        run: |
-          echo "${ENV_FILE}" > apps/dashboard/.env
+          echo "${ENV_FILE}" > ./apps/${{ matrix.app }}/.env
 
       - name: Get Docker meta (for tags)
         id: meta
         uses: docker/metadata-action@v4
         with:
-          # list of Docker images to use as base name for tags
           images: |
-            ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_TAG_DASHBOARD }}
-          # generate Docker tags based on the following events/attributes
+            ${{ vars.DOCKER_REGISTRY }}/${{ matrix.docker_tag }}
           tags: |
-            type=ref,event=branch
             type=semver,pattern={{version}}
 
       - name: Set up QEMU
@@ -55,21 +55,21 @@ jobs:
         uses: docker/setup-buildx-action@v2
 
       - name: Login to SudoSOS Container Registry
-        if: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
         uses: docker/login-action@v2
         with:
           registry: ${{ vars.DOCKER_REGISTRY }}
           username: ${{ secrets.SVC_GH_SUDOSOS_USERNAME }}
           password: ${{ secrets.SVC_GH_SUDOSOS_PWD }}
-      # Build and push Docker image with Buildx (only push on push to main/develop)
+
+      # Build and push Docker image with Buildx
       - name: Build and push
         uses: docker/build-push-action@v3
         with:
           context: .
-          platforms: linux/amd64 #SudoSOS does not run on linux/arm64
-          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
+          platforms: linux/amd64
+          push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
-          file: "apps/dashboard/Dockerfile"
+          file: ${{ matrix.dockerfile_path }}

.github/workflows/semver.yml

@@ -0,0 +1,34 @@
+name: Semantic Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  versioning:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          path: .
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Semantic Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: npx semantic-release --dry-run

.releaserc.json

@@ -0,0 +1,15 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}

apps/point-of-sale/Dockerfile

@@ -4,6 +4,7 @@ WORKDIR /app
 COPY lib/common/ lib/common/
 COPY apps/point-of-sale/package.json apps/point-of-sale/
 COPY ./package.json ./package-lock.json ./
+COPY ./.git ./
 RUN npm install
 COPY apps/point-of-sale/ apps/point-of-sale/
 RUN npm run build --workspace=sudosos-point-of-sale

apps/point-of-sale/env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+declare const __GIT_BRANCH__: string;
+declare const __GIT_COMMIT__: string;

apps/point-of-sale/src/components/GitInfo.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="absolute tag font-bold opacity-30"> {{branch}}#{{commit}} </div>
+</template>
+
+<script setup lang="ts">
+const branch = __GIT_BRANCH__;
+const commit = __GIT_COMMIT__;
+</script>
+
+<style scoped lang="scss">
+.tag {
+  bottom: 10px;
+  right: 10px;
+}
+</style>

apps/point-of-sale/src/components/PointOfSaleDisplay/PointOfSaleProductsComponent.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="container-grid-wrapper flex-1 h-full mb-3 mr-3">
-    <div class="container grid gap-2 pr-5 pb-3">
+  <div class="container-grid-wrapper flex-1 h-full mb-3 pr-6 mr-3 mt-2" ref="wrapper">
+    <div class="container gap-3 pr-5">
       <ProductComponent
           v-for="product in sortedProducts"
           :key="`${product.product.id}-${product.container.id}`"
@@ -39,13 +39,15 @@ const props = defineProps({
 });
 
 const searchQuery = ref(props.searchQuery);
+const wrapper = ref();
 
 watch(() => props.searchQuery, (newValue) => {
   searchQuery.value = newValue;
 }, { immediate: true });
 
 const getFilteredProducts = () => {
   if (!props.pointOfSale) return [];
+  wrapper.value?.scrollTo(0, 0);
 
   let filteredProducts = props.pointOfSale.containers.flatMap((container) => {
     return container.products.map((product) => ({
@@ -115,6 +117,7 @@ const sortedProducts = computed(() => {
 
   > .container {
     grid-template-columns: repeat(auto-fill, minmax($product-column-width, 1fr));
+    display: grid;
   }
 }
 </style>

apps/point-of-sale/src/components/ProductComponent.vue

@@ -122,7 +122,7 @@ const startFlyingAnimation = async () => {
 }
 
 .product-card {
-  padding: 1rem 0 8px 0;
+  padding: 0 0 8px 0;
   height: fit-content;
   border-radius: $border-radius;
   overflow: hidden;

apps/point-of-sale/src/scss/_variables.scss

@@ -6,7 +6,7 @@
   --gewis-red: rgba(212, 0, 0, 1);
   --gewis-dark-red: #c40000;
   /* Product card width */
-  --product-card-width: 160px;
+  --product-card-width: 128px;
   --accent-color: rgba(212, 0, 0, 1);
 }
 
@@ -32,7 +32,7 @@ $border-radius-sm: 10px;
 $border-radius-xs: 5px;
 
 /* Products */
-$product-column-width: 160px;
+$product-column-width: 128px;
 $product-card-size: 128px;
 $product-price-height: 15px;
 

apps/point-of-sale/src/views/LoginView.vue

@@ -29,6 +29,7 @@
     </div>
   </div>
   <SettingsIconComponent />
+  <GitInfo/>
   <EanLoginComponent :handle-login="eanLogin"/>
 </template>
 
@@ -43,6 +44,7 @@ import { useCartStore } from '@/stores/cart.store';
 import apiService from '@/services/ApiService';
 import BannerComponent from '@/components/Banner/BannerComponent.vue';
 import EanLoginComponent from "@/components/EanLoginComponent.vue";
+import GitInfo from "@/components/GitInfo.vue";
 
 const userStore = useUserStore();
 const authStore = useAuthStore();

apps/point-of-sale/vite.config.plugin-git-info.ts

@@ -0,0 +1,20 @@
+import { execSync } from 'child_process';
+
+export default function useGitInfo(): Record<string, any> {
+  let branch: string, commit: string;
+  try {
+    branch = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
+    commit = execSync('git rev-parse --short HEAD').toString().trim();
+  } catch (error) {
+    console.error(error);
+    branch = 'unknown';
+    commit = 'unknown';
+  }
+
+  console.error(branch, commit);
+
+  return {
+    __GIT_BRANCH__: JSON.stringify(branch),
+    __GIT_COMMIT__: JSON.stringify(commit),
+  };
+}

apps/point-of-sale/vite.config.ts

@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import useGitInfo from "./vite.config.plugin-git-info";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -23,5 +24,8 @@ export default defineConfig({
   },
   server: {
     port: 5174
+  },
+  define: {
+    ...useGitInfo(),
   }
 });