Dev

.github/workflows/ci.yml

@@ -9,6 +9,8 @@ jobs:
       DB_USERNAME: root
       DB_PASSWORD: phplist
       BROADCAST_DRIVER: log
+      API_BASE_URL: http://api.phplist.local/
+      REST_API_BASE_URL: http://api.phplist.local/api/v2
     services:
       mysql:
         image: mysql:5.7
@@ -31,7 +33,20 @@ jobs:
         with:
           php-version: ${{ matrix.php-versions }}
           extensions: mbstring, dom, fileinfo, mysql
-          coverage: xdebug #optional
+          coverage: xdebug
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build frontend assets
+        run: yarn encore dev
+
       - name: Install Symfony CLI
         run: |
           curl -sS https://get.symfony.com/cli/installer | bash
@@ -43,14 +58,11 @@ jobs:
           echo "deb [arch=amd64 signed-by=/usr/share/keyrings/google.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
           sudo apt-get update
           sudo apt-get install -y google-chrome-stable
-      - name: Set Panther to use Chrome
-        run: |
-          echo "PANTHER_NO_HEADLESS=0" >> .env.test
-          echo "PANTHER_CHROME_BINARY=/usr/bin/google-chrome" >> .env.test
-      - name: Start mysql service
-        run: sudo /etc/init.d/mysql start
+          sudo apt install socat
+
       - name: Verify MySQL connection on host
         run: mysql --host 127.0.0.1 --port ${{ job.services.mysql.ports['3306'] }} -u${{ env.DB_USERNAME }} -p${{ env.DB_PASSWORD }} -e "SHOW DATABASES"
+
       - name: Get composer cache directory
         id: composer-cache
         run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -60,21 +72,82 @@ jobs:
           path: ${{ steps.composer-cache.outputs.dir }}
           key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
           restore-keys: ${{ runner.os }}-composer-
-      - name: Install the latest dependencies
-        run: composer install
+      - name: Install PHP dependencies
+        run: composer install --no-interaction --prefer-dist
+
       - name: Set up database schema
         run: mysql --host 127.0.0.1 --port ${{ job.services.mysql.ports['3306'] }} -u${{ env.DB_USERNAME }} -p${{ env.DB_PASSWORD }} ${{ env.DB_DATABASE }} < vendor/phplist/core/resources/Database/Schema.sql
-      - name: Validating composer.json
-        run: composer validate --no-check-all --no-check-lock --strict;
-      - name: Linting all php files
-        run: find src/ tests/ public/ -name ''*.php'' -print0 | xargs -0 -n 1 -P 4 php -l; php -l;
-      - name: Running integration tests with phpunit
-        run: vendor/bin/phpunit tests/Integration/;
-      - name: Running the system tests
-        run: vendor/bin/phpunit tests/System/;
-      - name: Running static analysis
-        run: vendor/bin/phpstan analyse -l 5 src/ tests/;
-      - name: Running PHPMD
-        run: vendor/bin/phpmd src/ text vendor/phplist/core/config/PHPMD/rules.xml;
-      - name: Running PHP_CodeSniffer
-        run: vendor/bin/phpcs --standard=vendor/phplist/core/config/PhpCodeSniffer/ src/ tests/;
+      - name: Validate composer.json
+        run: composer validate --no-check-all --no-check-lock --strict
+      - name: Lint PHP files
+        run: find src/ tests/ public/ -name '*.php' -print0 | xargs -0 -n 1 -P 4 php -l
+
+      - name: Run static analysis
+        run: vendor/bin/phpstan analyse -l 5 src/ tests/
+      - name: Run PHPMD
+        run: vendor/bin/phpmd src/ text vendor/phplist/core/config/PHPMD/rules.xml
+      - name: Run PHP_CodeSniffer
+        run: vendor/bin/phpcs --standard=vendor/phplist/core/config/PhpCodeSniffer/ src/ tests/
+
+      - name: Install Prism
+        run: npm install -g @stoplight/prism-cli
+      - name: Start Prism Mock Server
+        run: |
+          prism mock --host 127.0.0.1 --port 4010 ./openapi.json &
+      - name: Add local hostname
+        run: echo "127.0.0.1 api.phplist.local" | sudo tee -a /etc/hosts
+      - name: Proxy port 80 to 4010
+        run: |
+          sudo socat -d -d TCP-LISTEN:80,reuseaddr,fork TCP:127.0.0.1:4010 &
+      - name: Wait for Prism and proxy
+        run: |
+          set -euo pipefail
+          prism_ready=0
+          for i in $(seq 1 30); do
+            if curl -sS -o /tmp/prism-health-body.txt -w "%{http_code}" \
+              -H 'Content-Type: application/json' \
+              -X POST http://127.0.0.1:4010/api/v2/sessions \
+              --data '{"login_name":"healthcheck","password":"healthcheck"}' > /tmp/prism-health-code.txt; then
+              code=$(cat /tmp/prism-health-code.txt)
+              if [ "$code" != "000" ]; then
+                echo "Prism is reachable on 127.0.0.1:4010 with HTTP ${code}"
+                prism_ready=1
+                break
+              fi
+            fi
+            sleep 1
+          done
+          if [ "$prism_ready" -ne 1 ]; then
+            echo "Prism did not become reachable in time."
+            exit 1
+          fi
+
+          proxy_ready=0
+          for i in $(seq 1 30); do
+            if curl -sS -o /tmp/proxy-health-body.txt -w "%{http_code}" \
+              -H 'Content-Type: application/json' \
+              -X POST http://api.phplist.local/api/v2/sessions \
+              --data '{"login_name":"healthcheck","password":"healthcheck"}' > /tmp/proxy-health-code.txt; then
+              code=$(cat /tmp/proxy-health-code.txt)
+              if [ "$code" != "000" ]; then
+                echo "Proxy is reachable on api.phplist.local with HTTP ${code}"
+                proxy_ready=1
+                break
+              fi
+            fi
+            sleep 1
+          done
+          if [ "$proxy_ready" -ne 1 ]; then
+            echo "Proxy did not become reachable in time."
+            exit 1
+          fi
+
+      - name: Run tests with phpunit
+        run: vendor/bin/phpunit tests
+
+      - name: Upload Panther screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: panther-screenshots
+          path: var/screenshots

README.md

@@ -28,6 +28,14 @@ Please install this package via Composer from within the
 which also has more detailed installation instructions in the README.
 
 
+### When this module is installed as a dependency, publish bundle assets to the host application's `public/` directory:
+```bash
+php bin/console assets:install public --symlink --relative
+```
+
+This module serves its frontend files from `/`.
+
+
 ## Contributing to this package
 
 Please read the [contribution guide](.github/CONTRIBUTING.md) on how to

apache/web-frontend.conf

@@ -0,0 +1,26 @@
+<VirtualHost *:80>
+    ServerName frontend.phplist.local
+    ServerAdmin webmaster@localhost
+
+    DocumentRoot /{pathToTheProject}/web-frontend/public
+
+    ErrorLog ${APACHE_LOG_DIR}/web-frontend-error.log
+    CustomLog ${APACHE_LOG_DIR}/web-frontend-access.log combined
+
+    <Directory /{pathToTheProject}/web-frontend/public>
+        Options FollowSymLinks
+        AllowOverride All
+        Require all granted
+        DirectoryIndex app.php
+    </Directory>
+
+    <FilesMatch "^\.">
+        Require all denied
+    </FilesMatch>
+
+    <IfModule proxy_fcgi_module>
+        <FilesMatch \.php$>
+            SetHandler "proxy:unix:/run/php/php8.1-fpm.sock|fcgi://localhost"
+        </FilesMatch>
+    </IfModule>
+</VirtualHost>

assets/app.js

@@ -1,9 +1,13 @@
+import './styles/app.css';
 import { createApp } from 'vue';
 import App from './vue/App.vue';
+import { router } from './router';
 
-// Mount the main app if the element exists
 const appElement = document.getElementById('vue-app');
+
 if (appElement) {
-    createApp(App).mount('#vue-app');
+    const app = createApp(App);
+    app.use(router);
+    app.mount(appElement);
 }
 

assets/router/index.js

@@ -0,0 +1,32 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import DashboardView from '../vue/views/DashboardView.vue'
+import SubscribersView from '../vue/views/SubscribersView.vue'
+import ListsView from '../vue/views/ListsView.vue'
+import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
+import CampaignsView from '../vue/views/CampaignsView.vue'
+import CampaignEditView from '../vue/views/CampaignEditView.vue'
+import TemplatesView from '../vue/views/TemplatesView.vue'
+import TemplateEditView from '../vue/views/TemplateEditView.vue'
+
+export const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: '/', name: 'dashboard', component: DashboardView, meta: { title: 'Dashboard' } },
+        { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
+        { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
+        { path: '/campaigns', name: 'campaigns', component: CampaignsView, meta: { title: 'Campaigns' } },
+        { path: '/templates', name: 'templates', component: TemplatesView, meta: { title: 'Templates' } },
+        { path: '/templates/create', name: 'template-create', component: TemplateEditView, meta: { title: 'Create Template' } },
+        { path: '/templates/:templateId/edit', name: 'template-edit', component: TemplateEditView, meta: { title: 'Edit Template' } },
+        { path: '/campaigns/create', name: 'campaign-create', component: CampaignEditView, meta: { title: 'Create Campaign' } },
+        { path: '/campaigns/:campaignId/edit', name: 'campaign-edit', component: CampaignEditView, meta: { title: 'Edit Campaign' } },
+        { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
+        { path: '/:pathMatch(.*)*', redirect: '/' },
+    ],
+});
+
+router.afterEach((to) => {
+    const defaultTitle = 'phpList';
+    const pageTitle = to.meta.title;
+    document.title = pageTitle ? `${defaultTitle} - ${pageTitle}` : defaultTitle;
+});

assets/styles/app.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@tailwind utilities;
+
+@theme {
+  --color-primary: #2563eb;
+  --color-secondary: #6b7280;
+  --color-success: #16a34a;
+  --color-danger: #dc2626;
+  --color-info: #0891b2;
+  --color-ext-wf1: #543ff6; /** indigo-500 **/
+  --color-ext-wf2: #eef2ff; /** indigo-50 **/
+  --color-ext-wf3: #303F9F; /** indigo-700 **/
+}
+
+@source "../../templates/**/*.twig";
+@source "../**/*.vue";

assets/vue/App.vue

@@ -1,26 +1,13 @@
 <template>
-  <div>
-    <h2>Hello from Vue</h2>
-    <p>{{ message }}</p>
+  <div class="min-h-screen bg-[#F8FAFC] flex text-slate-900 font-sans">
+    <AppSidebar />
+
+    <div class="flex flex-col flex-1 min-h-screen">
+      <RouterView />
+    </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'App',
-  data() {
-    return {
-      message: 'This is a reusable component!'
-    }
-  },
-  created() {
-    console.log('App component created');
-  },
-  mounted() {
-    console.log('App component mounted');
-  },
-  updated() {
-    console.log('App component updated');
-  }
-}
+<script setup>
+import AppSidebar from './components/sidebar/AppSidebar.vue'
 </script>

assets/vue/api.js

@@ -0,0 +1,58 @@
+import {
+    CampaignClient,
+    Client,
+    ListMessagesClient,
+    ListClient,
+    StatisticsClient,
+    SubscribersClient,
+    SubscriptionClient,
+    SubscriberAttributesClient,
+    TemplatesClient
+} from '@tatevikgr/rest-api-client';
+
+const appElement = document.getElementById('vue-app');
+const apiToken = appElement?.dataset.apiToken;
+const apiBaseUrl = appElement?.dataset.apiBaseUrl;
+
+if (!apiBaseUrl) {
+    console.error('API Base URL is not configured.');
+}
+
+const client = new Client(apiBaseUrl || '');
+
+if (apiToken) {
+    client.setSessionId(apiToken);
+}
+
+export const subscribersClient = new SubscribersClient(client);
+export const listClient = new ListClient(client);
+export const campaignClient = new CampaignClient(client);
+export const listMessagesClient = new ListMessagesClient(client);
+export const statisticsClient = new StatisticsClient(client);
+export const subscriptionClient = new SubscriptionClient(client);
+export const subscriberAttributesClient = new SubscriberAttributesClient(client);
+export const templateClient = new TemplatesClient(client);
+
+export const fetchAllLists = async ({ limit = 100, maxPages = 100 } = {}) => {
+    const lists = [];
+    let afterId = null;
+
+    for (let pageIndex = 0; pageIndex < maxPages; pageIndex += 1) {
+        const response = await listClient.getLists(afterId, limit);
+        const items = Array.isArray(response?.items) ? response.items : [];
+        lists.push(...items);
+
+        const hasMore = response?.pagination?.hasMore === true;
+        const nextCursor = response?.pagination?.nextCursor;
+
+        if (!hasMore || !Number.isFinite(nextCursor) || nextCursor === afterId) {
+            break;
+        }
+
+        afterId = nextCursor;
+    }
+
+    return lists;
+};
+
+export default client;

assets/vue/components/base/BaseBadge.spec.js

@@ -0,0 +1,33 @@
+import { mount } from '@vue/test-utils'
+import BaseBadge from './BaseBadge.vue'
+
+describe('BaseBadge', () => {
+  it('renders neutral variant by default', () => {
+    const wrapper = mount(BaseBadge, {
+      slots: {
+        default: 'All',
+      },
+    })
+
+    const classes = wrapper.get('span').classes()
+    expect(wrapper.text()).toContain('All')
+    expect(classes).toContain('bg-gray-100')
+    expect(classes).toContain('text-gray-800')
+  })
+
+  it('renders counter variant styles', () => {
+    const wrapper = mount(BaseBadge, {
+      props: {
+        variant: 'counter',
+      },
+      slots: {
+        default: '10',
+      },
+    })
+
+    const classes = wrapper.get('span').classes()
+    expect(classes).toContain('bg-indigo-50')
+    expect(classes).toContain('text-ext-wf3')
+    expect(wrapper.text()).toContain('10')
+  })
+})