data-primals-engine 1.0.11 → 1.1.0

package/client/src/AddWidgetTypeModal.jsx

@@ -0,0 +1,44 @@
+// src/components/AddWidgetTypeModal.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { FaChartBar, FaTachometerAlt, FaThLarge } from 'react-icons/fa';
+import './AddWidgetTypeModal.scss';
+import {Dialog} from "./Dialog.jsx"; // Créez ce fichier SCSS
+
+const AddWidgetTypeModal = ({ onClose, onSelectType }) => {
+    const { t } = useTranslation();
+
+    return (
+        <Dialog className={"add-widget-type-modal-content"} isModal={true} isClosable={true} onClose={onClose} title={t('dashboard.addWidgetTitle', 'Ajouter un élément au tableau de bord')}>
+<>
+                <div className="flex widget-type-options">
+                    <button onClick={() => onSelectType('KPI')} className="widget-type-button">
+                        <FaTachometerAlt size={40} />
+                        <span>{t('dashboard.addKPI', 'Ajouter un KPI')}</span>
+                    </button>
+                    <button onClick={() => onSelectType('Chart')} className="widget-type-button">
+                        <FaChartBar size={40} />
+                        <span>{t('dashboard.addChart', 'Ajouter un Graphique')}</span>
+                    </button>
+                    <button disabled={false} onClick={() => onSelectType('FlexView')} className="widget-type-button">
+                        <FaThLarge size={40} />
+                        <span>{t('dashboard.addFlexView', 'Ajouter une Vue Flex')}</span>
+                    </button>
+                </div>
+    <div className={"flex actions center"}>
+                <button onClick={onClose} className="btn-close-modal">
+                    {t('btns.cancel', 'Annuler')}
+                </button>
+    </div>
+</>
+        </Dialog>
+    );
+};
+
+AddWidgetTypeModal.propTypes = {
+    onClose: PropTypes.func.isRequired,
+    onSelectType: PropTypes.func.isRequired,
+};
+
+export default AddWidgetTypeModal;

package/client/src/AddWidgetTypeModal.scss

@@ -0,0 +1,87 @@
+// src/components/AddWidgetTypeModal.scss
+
+.add-widget-type-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1050; // S'assurer qu'il est au-dessus des autres modales
+  padding: 15px;
+}
+
+.add-widget-type-modal-content {
+  background-color: white;
+  padding: 25px 30px;
+  border-radius: 8px;
+  min-width: 320px;
+  width: auto;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.25);
+  text-align: center;
+    max-width: 700px !important;
+  h4 {
+    margin-top: 0;
+    margin-bottom: 25px;
+    font-size: 1.3em;
+    color: #333;
+  }
+
+  .widget-type-options {
+    display: flex;
+    justify-content: space-around; // Ou space-between
+    gap: 20px;
+    margin-bottom: 30px;
+
+    .widget-type-button{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 8px;
+      background-color: #f9f9f9;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+      min-width: 150px; // Assurer une taille minimale
+      color: #333;
+      text-decoration: none;
+
+      &:not(:disabled):hover {
+        background-color: #e9e9e9;
+        border-color: #007bff;
+        color: #007bff;
+        transform: translateY(-3px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
+
+      svg {
+        margin-bottom: 10px;
+        color: #007bff; // Couleur initiale de l'ice
+      }
+
+      span {
+        font-size: 1em;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .btn-close-modal {
+    padding: 10px 20px;
+    background-color: #6c757d;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+
+    &:hover {
+      background-color: #5a6268;
+    }
+  }
+}

package/client/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}