Front + gestion des utilisateurs + gestion des indices

html/tableindice.html

@@ -102,9 +102,7 @@
               class="bg-slate-900 border border-slate-700 text-white text-xs rounded-xl px-4 py-2 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
             >
               <option value="tout">Tout</option>
-
               <option value="afficher">Afficher</option>
-
               <option value="inactif">Inactif</option>
             </select>
 
@@ -144,66 +142,92 @@
              ================================================= -->
 
         <div class="overflow-x-auto">
-          <table class="w-full min-w-[1100px]">
+          <table class="w-full min-w-[1000px] table-auto">
             <!-- =================================================
                  EN-TÊTE
                  ================================================= -->
 
             <thead class="bg-slate-950">
               <tr>
+                <!-- ID -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[55px]"
                 >
                   ID
                 </th>
 
+                <!-- Indice -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[100px]"
                 >
                   Indice
                 </th>
 
+                <!-- Nom -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
                 >
                   Nom
                 </th>
 
+                <!-- ISIN -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[130px]"
                 >
                   ISIN
                 </th>
 
+                <!-- Symbole -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[80px]"
                 >
                   Symbole
                 </th>
 
+                <!-- Actif -->
+
                 <th
-                  class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[65px]"
                 >
                   Actif
                 </th>
 
+                <!-- Afficher -->
+
                 <th
-                  class="px-4 py-4 text-center text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[75px]"
                 >
                   Afficher
                 </th>
 
+                <!-- Mis à jour -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[135px]"
                 >
                   Mis à jour
                 </th>
 
+                <!-- Créé le -->
+
                 <th
-                  class="px-4 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap"
+                  class="px-2 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[135px]"
                 >
                   Créé le
                 </th>
+
+                <!-- Action -->
+
+                <th
+                  class="px-2 py-3 text-center text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap w-[95px]"
+                >
+                  Action
+                </th>
               </tr>
             </thead>
 
@@ -239,9 +263,11 @@
           class="px-6 py-5 border-b border-slate-700 flex justify-between items-center"
         >
           <div>
-            <h2 class="text-lg font-bold text-white">Nouvel enregistrement</h2>
+            <h2 class="text-lg font-bold text-white" id="titreModal">
+              Nouvel enregistrement
+            </h2>
 
-            <p class="text-xs text-slate-400 mt-1">
+            <p class="text-xs text-slate-400 mt-1" id="sousTitreModal">
               Ajouter une nouvelle action ou un indice
             </p>
           </div>
@@ -347,7 +373,7 @@
                 id="nouveauSymbole"
                 required
                 autocomplete="off"
-                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white uppercase placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white uppercase placeholder-slate-500"
                 placeholder="AC"
               />
             </div>
@@ -435,6 +461,225 @@
       </div>
     </div>
 
+    <!-- =====================================================
+     POPUP MODIFICATION
+     ===================================================== -->
+
+    <div
+      id="modalModifierEnregistrement"
+      class="fixed inset-0 z-50 hidden items-center justify-center bg-black/70 backdrop-blur-sm p-4"
+    >
+      <div
+        class="w-full max-w-2xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl"
+      >
+        <!-- =================================================
+         EN-TÊTE POPUP
+         ================================================= -->
+
+        <div
+          class="px-6 py-5 border-b border-slate-700 flex justify-between items-center"
+        >
+          <div>
+            <h2 class="text-lg font-bold text-white">
+              Modifier l'enregistrement
+            </h2>
+
+            <p class="text-xs text-slate-400 mt-1">
+              Modifier les informations de l'action
+            </p>
+          </div>
+
+          <!-- Fermer -->
+
+          <button
+            id="btnFermerModalModifier"
+            type="button"
+            class="text-slate-400 hover:text-white text-2xl leading-none"
+          >
+            ×
+          </button>
+        </div>
+
+        <!-- =================================================
+         FORMULAIRE
+         ================================================= -->
+
+        <form id="formModifierEnregistrement" class="p-6 space-y-5">
+          <!-- ID caché -->
+
+          <input type="hidden" id="modifierId" />
+
+          <!-- =================================================
+           INDICE
+           ================================================= -->
+
+          <div>
+            <label
+              for="modifierIndice"
+              class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+            >
+              Indice
+            </label>
+
+            <input
+              type="text"
+              id="modifierIndice"
+              required
+              autocomplete="off"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+              placeholder="Exemple : CAC40"
+            />
+          </div>
+
+          <!-- =================================================
+           NOM
+           ================================================= -->
+
+          <div>
+            <label
+              for="modifierNom"
+              class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+            >
+              Nom
+            </label>
+
+            <input
+              type="text"
+              id="modifierNom"
+              required
+              autocomplete="off"
+              class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+              placeholder="Nom de l'action"
+            />
+          </div>
+
+          <!-- =================================================
+           ISIN + SYMBOLE
+           ================================================= -->
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- ISIN -->
+
+            <div>
+              <label
+                for="modifierIsin"
+                class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+              >
+                ISIN
+              </label>
+
+              <input
+                type="text"
+                id="modifierIsin"
+                required
+                maxlength="12"
+                autocomplete="off"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white font-mono uppercase placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+                placeholder="FR0000120404"
+              />
+            </div>
+
+            <!-- Symbole -->
+
+            <div>
+              <label
+                for="modifierSymbole"
+                class="block text-xs font-semibold text-slate-300 uppercase mb-2"
+              >
+                Symbole
+              </label>
+
+              <input
+                type="text"
+                id="modifierSymbole"
+                required
+                autocomplete="off"
+                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white uppercase placeholder-slate-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+                placeholder="AC"
+              />
+            </div>
+          </div>
+
+          <!-- =================================================
+           ACTIF + AFFICHER
+           ================================================= -->
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <!-- Actif -->
+
+            <label
+              class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
+            >
+              <div>
+                <div class="text-sm font-semibold text-white">Actif</div>
+
+                <div class="text-xs text-slate-500">Action active</div>
+              </div>
+
+              <input
+                type="checkbox"
+                id="modifierActif"
+                class="w-5 h-5 accent-blue-500"
+              />
+            </label>
+
+            <!-- Afficher -->
+
+            <label
+              class="flex items-center justify-between bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 cursor-pointer"
+            >
+              <div>
+                <div class="text-sm font-semibold text-white">Afficher</div>
+
+                <div class="text-xs text-slate-500">Afficher sur le site</div>
+              </div>
+
+              <input
+                type="checkbox"
+                id="modifierAfficher"
+                class="w-5 h-5 accent-blue-500"
+              />
+            </label>
+          </div>
+
+          <!-- =================================================
+           MESSAGE
+           ================================================= -->
+
+          <div
+            id="messageModifier"
+            class="hidden px-4 py-3 rounded-xl text-sm"
+          ></div>
+
+          <!-- =================================================
+           BOUTONS
+           ================================================= -->
+
+          <div class="flex justify-end gap-3 pt-4 border-t border-slate-700">
+            <!-- Annuler -->
+
+            <button
+              id="btnAnnulerModifier"
+              type="button"
+              class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-slate-600"
+            >
+              Annuler
+            </button>
+
+            <!-- Sauvegarder -->
+
+            <button
+              id="btnSauvegarderModifier"
+              type="submit"
+              class="bg-blue-600 hover:bg-blue-500 text-white text-xs font-semibold px-5 py-3 rounded-xl transition-all border border-blue-500"
+            >
+              Sauvegarder
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
     <!-- =====================================================
          FOOTER
          ===================================================== -->

php/api_update_table_indice.php

@@ -0,0 +1,322 @@
+<?php
+
+declare(strict_types=1);
+
+/*
+ * =========================================================
+ * API : MODIFICATION D'UN ENREGISTREMENT DE LA TABLE indice
+ * =========================================================
+ */
+
+require_once __DIR__ . '/database.php';
+
+header(
+    'Content-Type: application/json; charset=utf-8'
+);
+
+/*
+ * =========================================================
+ * VERIFICATION METHODE HTTP
+ * =========================================================
+ */
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+
+    http_response_code(405);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Méthode HTTP non autorisée.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+/*
+ * =========================================================
+ * LECTURE DU JSON
+ * =========================================================
+ */
+
+$contenu = file_get_contents('php://input');
+
+if ($contenu === false || trim($contenu) === '') {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Aucune donnée reçue.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+$data = json_decode(
+    $contenu,
+    true
+);
+
+/*
+ * Vérification JSON
+ */
+
+if (!is_array($data)) {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Données JSON invalides.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+/*
+ * =========================================================
+ * RECUPERATION DES CHAMPS
+ * =========================================================
+ */
+
+$id = isset($data['id'])
+    ? (int) $data['id']
+    : 0;
+
+$indice = isset($data['indice'])
+    ? trim((string) $data['indice'])
+    : '';
+
+$nom = isset($data['nom'])
+    ? trim((string) $data['nom'])
+    : '';
+
+$isin = isset($data['isin'])
+    ? strtoupper(trim((string) $data['isin']))
+    : '';
+
+$symbole = isset($data['symbole'])
+    ? strtoupper(trim((string) $data['symbole']))
+    : '';
+
+$actif = !empty($data['actif']) ? 1 : 0;
+
+$afficher = !empty($data['afficher']) ? 1 : 0;
+
+/*
+ * =========================================================
+ * VALIDATION
+ * =========================================================
+ */
+
+if ($id <= 0) {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'ID invalide.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+if ($indice === '') {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Le champ Indice est obligatoire.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+if ($nom === '') {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Le champ Nom est obligatoire.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+if ($isin === '') {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Le champ ISIN est obligatoire.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+if ($symbole === '') {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Le champ Symbole est obligatoire.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+/*
+ * Vérification longueur ISIN.
+ */
+
+if (strlen($isin) > 12) {
+
+    http_response_code(400);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Le code ISIN ne doit pas dépasser 12 caractères.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+
+    exit;
+}
+
+/*
+ * =========================================================
+ * MODIFICATION
+ * =========================================================
+ */
+
+try {
+
+    /*
+     * Vérification existence.
+     */
+
+    $sqlCheck = "
+        SELECT id
+        FROM indice
+        WHERE id = :id
+        LIMIT 1
+    ";
+
+    $stmtCheck = $pdo->prepare($sqlCheck);
+
+    $stmtCheck->execute(
+        [
+            ':id' => $id
+        ]
+    );
+
+    $existant = $stmtCheck->fetch();
+
+    if (!$existant) {
+
+        http_response_code(404);
+
+        echo json_encode(
+            [
+                'status'  => 'error',
+                'message' => 'L\'enregistrement demandé n\'existe pas.'
+            ],
+            JSON_UNESCAPED_UNICODE
+        );
+
+        exit;
+    }
+
+    /*
+     * Mise à jour.
+     *
+     * updated_at est mis à jour automatiquement ici.
+     */
+
+    $sql = "
+        UPDATE indice
+        SET
+            indice = :indice,
+            nom = :nom,
+            isin = :isin,
+            symbole = :symbole,
+            actif = :actif,
+            afficher = :afficher,
+            updated_at = NOW()
+        WHERE id = :id
+    ";
+
+    $stmt = $pdo->prepare($sql);
+
+    $stmt->execute(
+        [
+            ':indice'   => $indice,
+            ':nom'      => $nom,
+            ':isin'     => $isin,
+            ':symbole'  => $symbole,
+            ':actif'    => $actif,
+            ':afficher' => $afficher,
+            ':id'       => $id
+        ]
+    );
+
+    /*
+     * =====================================================
+     * REPONSE
+     * =====================================================
+     */
+
+    echo json_encode(
+        [
+            'status'  => 'success',
+            'message' => 'Enregistrement modifié avec succès.',
+            'id'      => $id
+        ],
+        JSON_UNESCAPED_UNICODE |
+            JSON_UNESCAPED_SLASHES
+    );
+} catch (PDOException $e) {
+
+    /*
+     * Erreur MySQL.
+     */
+
+    http_response_code(500);
+
+    echo json_encode(
+        [
+            'status'  => 'error',
+            'message' => 'Erreur lors de la modification de l\'enregistrement.'
+        ],
+        JSON_UNESCAPED_UNICODE
+    );
+}