PGS App Switcher

Un composant partagé pour naviguer entre toutes vos applications ProGestionSoft, similaire au sélecteur d'applications de Google.

🎯 Objectif

Ce projet résout le problème de maintenance de menus de navigation sur plusieurs plateformes. Au lieu de mettre à jour chaque application individuellement, vous mettez à jour un seul fichier JSON et toutes vos applications sont automatiquement à jour.

✨ Fonctionnalités

🚀 Mise à jour centralisée - Un seul fichier JSON à modifier
🎨 Design moderne - Interface élégante inspirée de Google
⚡ Léger et rapide - Bundle optimisé servi via CDN
🔧 Facile à intégrer - Plusieurs méthodes d'intégration
📱 Responsive - Fonctionne sur tous les appareils
♿ Accessible - Support ARIA et navigation au clavier

📦 Installation et Utilisation

Option 1: Via CDN (Recommandé)

La manière la plus simple d'utiliser le composant sur n'importe quelle page HTML:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/dist/app-switcher.css">

<!-- Conteneur -->
<div id="app-switcher"></div>

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/dist/app-switcher.iife.js"></script>

<!-- Initialisation -->
<script>
  new PGSAppSwitcher({
    target: '#app-switcher'
  });
</script>

Option 2: Dans une application Nuxt.js

<template>
  <div>
    <AppSwitcher />
  </div>
</template>

<script setup>
import AppSwitcher from '~/components/AppSwitcher.vue'
</script>

Option 3: Via NPM (À venir)

npm install @progestionsoft/app-switcher

import PGSAppSwitcher from '@progestionsoft/app-switcher'
import '@progestionsoft/app-switcher/dist/style.css'

new PGSAppSwitcher({
  target: '#app-switcher'
})

⚙️ Configuration

Configuration de base

new PGSAppSwitcher({
  target: '#app-switcher', // Sélecteur CSS ou élément DOM
  configUrl: 'https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/public/apps.json'
})

Configuration avec applications personnalisées

new PGSAppSwitcher({
  target: '#app-switcher',
  customApps: [
    {
      id: 'mon-app',
      name: 'Mon Application',
      description: 'Description de mon app',
      icon: 'https://example.com/icon.svg',
      url: 'https://mon-app.example.com',
      color: '#4285F4',
      category: 'custom'
    }
  ]
})

Configuration avec gestionnaire de clics

new PGSAppSwitcher({
  target: '#app-switcher',
  onAppClick: (app) => {
    console.log('Application cliquée:', app)
    // Logique personnalisée (analytics, etc.)
  }
})

📝 Format du fichier de configuration

Le fichier apps.json doit suivre ce format:

{
  "version": "1.0.0",
  "lastUpdated": "2025-12-01T00:00:00Z",
  "user": {
    "profileUrl": "https://account.progestionsoft.com/profile",
    "accountUrl": "https://account.progestionsoft.com",
    "logoutUrl": "https://account.progestionsoft.com/logout"
  },
  "apps": [
    {
      "id": "app-unique-id",
      "name": "Nom de l'application",
      "description": "Description courte",
      "icon": "https://url-de-icone.svg",
      "url": "https://url-de-application.com",
      "color": "#4285F4",
      "category": "productivity"
    }
  ]
}

🚀 Déploiement

Sur GitHub

Push vers GitHub:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/ProGestionSoft/AppSwitcher.git
git branch -M main
git push -u origin main

Build le composant CDN:

npm install
npm run build:cdn

Commit et push le dossier dist:

git add dist
git commit -m "Add built files for CDN"
git push

Via jsDelivr CDN

Après le push sur GitHub, vos fichiers sont automatiquement disponibles via:

JavaScript: https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/dist/app-switcher.iife.js
CSS: https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/dist/app-switcher.css
Config: https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/public/apps.json

Sur Netlify

Connectez votre repo GitHub à Netlify
Configuration de build:
- Build command: npm run generate
- Publish directory: dist ou .output/public
Votre URL Netlify (par exemple https://pgs-app-switcher.netlify.app) peut servir:
- Le fichier de config: https://pgs-app-switcher.netlify.app/apps.json
- Les assets: https://pgs-app-switcher.netlify.app/dist/...

🔄 Mise à jour du menu

Pour ajouter/modifier/supprimer des applications:

Modifiez public/apps.json
Commit et push vers GitHub
✅ Toutes les applications affichent automatiquement les changements!

Note: Le cache CDN peut prendre quelques minutes à se rafraîchir. Pour forcer un refresh immédiat, ajoutez un paramètre de version:

https://cdn.jsdelivr.net/gh/ProGestionSoft/AppSwitcher@main/public/apps.json?v=2

🛠️ Développement

Prérequis

Node.js 18+
npm ou yarn

Lancer en développement

# Installer les dépendances
npm install

# Lancer le serveur de dev Nuxt
npm run dev

# Construire pour la production
npm run build

# Construire le bundle CDN
npm run build:cdn

Structure du projet

AppSwitcher/
├── assets/
│   └── css/
│       └── main.css          # Styles globaux
├── components/
│   └── AppSwitcher.vue       # Composant Nuxt
├── pages/
│   └── index.vue             # Page de démo
├── public/
│   ├── apps.json             # Configuration des apps
│   ├── demo-cdn.html         # Démo CDN standalone
│   └── icons/                # Icônes des applications
├── src/
│   └── standalone/
│       ├── index.ts          # Point d'entrée CDN
│       ├── AppSwitcher.standalone.vue
│       └── style.css
├── dist/                     # Fichiers buildés pour CDN
├── nuxt.config.ts
├── vite.config.ts
└── package.json

📖 API

PGSAppSwitcher

Options

Option	Type	Défaut	Description
`target`	`string \| HTMLElement`	-	Élément DOM où monter le composant
`configUrl`	`string`	URL vers apps.json	URL du fichier de configuration
`customApps`	`App[]`	`undefined`	Applications personnalisées
`onAppClick`	`(app: App) => void`	`undefined`	Callback lors du clic sur une app

Méthodes

mount(options) - Monte le composant
unmount() - Démonte le composant
update(options) - Met à jour la configuration

🎨 Personnalisation

Le composant utilise des variables CSS que vous pouvez surcharger:

:root {
  --primary-color: #4285F4;
  --bg-primary: #ffffff;
  --text-primary: #202124;
  --border-color: #dadce0;
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --radius-xl: 16px;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

🤝 Contribution

Les contributions sont les bienvenues! N'hésitez pas à:

Fork le projet
Créer une branche (git checkout -b feature/AmazingFeature)
Commit vos changements (git commit -m 'Add AmazingFeature')
Push vers la branche (git push origin feature/AmazingFeature)
Ouvrir une Pull Request

📄 Licence

📞 Support

Pour toute question ou problème:

📧 Email: support@progestionsoft.com
🐛 Issues: GitHub Issues
📚 Documentation: GitHub Wiki

🙏 Remerciements

Inspiré par le Google App Switcher pour sa conception élégante et son expérience utilisateur.

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.github/workflows		.github/workflows
assets/css		assets/css
components		components
dist		dist
pages		pages
public		public
src/standalone		src/standalone
types		types
.gitignore		.gitignore
README.md		README.md
app.vue		app.vue
nuxt.config.ts		nuxt.config.ts
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

ProGestionSoft/AppSwitcher

Folders and files

Latest commit

History

Repository files navigation