#326 - Abonnement au calendrier Robert2 depuis application de calendrier externe

.github/workflows/ci.yml

@@ -68,7 +68,7 @@ jobs:
         runs-on  : ubuntu-latest
         strategy :
             matrix:
-                php: [7.3, 7.4, 8.0]
+                php: [7.4, 8.0]
         defaults : { run: { working-directory: ./server }}
         services :
             mysql:

CHANGELOG.md

@@ -6,8 +6,11 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 
 ## 0.18.0 (UNRELEASED)
 
+- __[CHANGEMENT CRITIQUE]__ Robert2 requiert maintenant au minimum PHP 7.4 pour fonctionner (#327).
 - Ajoute la possibilité de configurer les données affichées dans les événements du calendrier 
   via la page des paramètres de l'application (fin du ticket #302).
+- Il est maintenant possible de s'abonner depuis votre application de calendrier préférée (Google Agenda, Apple Calendrier, etc.) au calendrier Robert2 / Loxya. 
+  Pour plus d'informations, rendez-vous dans les paramètres de votre instance Robert2 / Loxya, onglet "Calendrier" (#326).
 
 ## 0.17.1 (2022-01-06)
 

client/package.json

@@ -17,9 +17,7 @@
         "deep-freeze-strict": "1.1.1",
         "invariant": "2.2.4",
         "js-cookie": "2.2.1",
-        "lodash.clonedeep": "4.5.0",
-        "lodash.pick": "4.4.0",
-        "lodash.times": "4.3.2",
+        "lodash": "^4.17.21",
         "moment": "2.29.1",
         "react": "17.0.2",
         "react-dom": "17.0.2",
@@ -45,13 +43,12 @@
         "@babel/core": "7.14.8",
         "@babel/preset-react": "7.16.7",
         "@babel/preset-typescript": "7.15.0",
-        "@pulsanova/eslint-config-vue": "2.1.2",
         "@pulsanova/eslint-config-react": "2.1.2",
+        "@pulsanova/eslint-config-vue": "2.1.2",
         "@pulsanova/stylelint-config-scss": "2.0.1",
         "@types/debounce": "1.2",
         "@types/invariant": "2.2",
-        "@types/lodash.clonedeep": "4.5",
-        "@types/lodash.times": "4.3",
+        "@types/lodash": "^4.14.178",
         "@types/react": "17.0",
         "@types/react-dom": "17.0",
         "@vue/babel-preset-app": "4.5.15",

client/src/components/Alert/index.js

@@ -8,7 +8,7 @@ const ConfirmDelete = ($t, entityName, isSoft = true) => Swal.fire({
     icon: 'warning',
     showCancelButton: true,
     customClass: {
-        confirmButton: isSoft ? 'swal2-confirm--trash' : 'swal2-confirm--delete',
+        confirmButton: isSoft ? 'swal2-confirm--warning' : 'swal2-confirm--danger',
     },
     confirmButtonText: isSoft ? $t('yes-delete') : $t('yes-permanently-delete'),
     cancelButtonText: $t('cancel'),

client/src/components/Button/_variables.scss

@@ -1,3 +1,58 @@
+@use '~@/style/globals';
+@use 'sass:color';
+
 /// Marge entre l'icône et le texte des boutons (quand il y en a une, d'icône)
 /// @type Number
 $icon-margin: 0.3571rem !default;
+
+//
+// - Default variant
+//
+
+$default-color: globals.$color-base-button !default;
+$default-background: globals.$bg-color-button-default !default;
+
+$default-focused-color: color.adjust(globals.$bg-color-button-default, $lightness: 8%) !default;
+$default-focused-background: globals.$color-hover-button !default;
+
+$default-active-color: color.adjust(globals.$bg-color-button-default, $lightness: -8%) !default;
+$default-active-background: globals.$color-active-button !default;
+
+//
+// - Success variant
+//
+
+$success-variant-color: #fff !default;
+$success-variant-background: globals.$bg-color-button-success !default;
+
+$success-variant-focused-color: $success-variant-color !default;
+$success-variant-focused-background: color.adjust(globals.$bg-color-button-success, $lightness: 5%) !default;
+
+$success-variant-active-color: globals.$color-active-button !default;
+$success-variant-active-background: color.adjust(globals.$bg-color-button-success, $lightness: -5%) !default;
+
+//
+// - Warning variant
+//
+
+$warning-variant-color: #fff !default;
+$warning-variant-background: #be692d !default;
+
+$warning-variant-focused-color: $warning-variant-color !default;
+$warning-variant-focused-background: color.adjust(#be692d, $lightness: 8%) !default;
+
+$warning-variant-active-color: globals.$color-active-button !default;
+$warning-variant-active-background: color.adjust(#be692d, $lightness: 8%) !default;
+
+//
+// - Danger variant
+//
+
+$danger-variant-color: #fff !default;
+$danger-variant-background: globals.$bg-color-button-danger !default;
+
+$danger-variant-focused-color: $danger-variant-color !default;
+$danger-variant-focused-background: color.adjust(globals.$bg-color-button-danger, $lightness: 8%) !default;
+
+$danger-variant-active-color: globals.$color-active-button !default;
+$danger-variant-active-background: color.adjust(globals.$bg-color-button-danger, $lightness: -8%) !default;

client/src/components/Button/index.js

@@ -2,6 +2,8 @@ import './index.scss';
 import { toRefs, computed } from '@vue/composition-api';
 import Icon from '@/components/Icon';
 
+const BUTTON_TYPE = ['default', 'success', 'warning', 'danger'];
+
 // type Props = {
 //     /**
 //      * Le type de bouton pour l'attribut `type` de la balise `<button>`?
@@ -28,8 +30,8 @@ import Icon from '@/components/Icon';
 // };
 
 // @vue/component
-const Button = (props, { slots }) => {
-    const { htmlType, icon, disabled } = toRefs(props);
+const Button = (props, { slots, emit }) => {
+    const { htmlType, icon, disabled, type } = toRefs(props);
     const _icon = computed(() => {
         if (!icon.value) {
             return null;
@@ -43,16 +45,22 @@ const Button = (props, { slots }) => {
         return { name: iconType, variant };
     });
 
-    const _className = ['Button', {
+    const _className = ['Button', `Button--${type.value}`, {
+        'Button--disabled': disabled.value,
         'Button--with-icon': !!_icon,
     }];
 
     return () => {
         const children = slots.default?.();
 
         return (
-            // eslint-disable-next-line react/button-has-type
-            <button type={htmlType.value} class={_className} disabled={disabled.value}>
+            <button
+                // eslint-disable-next-line react/button-has-type
+                type={htmlType.value}
+                class={_className}
+                disabled={disabled.value}
+                onClick={emit.bind(null, 'click')}
+            >
                 {_icon.value && <Icon {...{ props: _icon.value }} class="Button__icon" />}
                 {children && <span class="Button__content">{children}</span>}
             </button>
@@ -68,8 +76,15 @@ Button.props = {
             ['button', 'submit', 'reset'].includes(value)
         ),
     },
+    type: {
+        type: String,
+        validator: (value) => BUTTON_TYPE.includes(value),
+        default: 'default',
+    },
     icon: { type: String, default: undefined },
     disabled: { type: Boolean, default: false },
 };
 
+Button.emits = ['click'];
+
 export default Button;

client/src/components/Button/index.scss

@@ -1,7 +1,49 @@
 @use './variables' as *;
+@use '~@/style/globals';
+@use 'sass:color';
 
 .Button {
+    display: inline-block;
+    padding: 0.55rem 0.78rem;
+    border: none;
+    border-radius: 2px;
+    background-color: $default-background;
+    color: $default-color;
+    font-size: 1rem;
+    line-height: 1.25;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 300ms;
+
+    & + & {
+        margin-left: 5px;
+    }
+
+    &:hover,
+    &:focus {
+        outline: 0;
+        background-color: $default-focused-color;
+        color: $default-focused-background;
+    }
+
+    &:active {
+        background-color: $default-active-color;
+        color: $default-active-background;
+    }
+
+    //
+    // - Disabled
+    //
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    //
     // - Icône
+    //
+
     &::before,
     &__icon {
         display: inline-flex;
@@ -18,4 +60,56 @@
     &__icon + &__content {
         margin-left: $icon-margin;
     }
+
+    //
+    // - Variantes
+    //
+
+    &--success {
+        background-color: $success-variant-background;
+        color: $success-variant-color;
+
+        &:hover,
+        &:focus {
+            background-color: $success-variant-focused-background;
+            color: $success-variant-focused-color;
+        }
+
+        &:active {
+            background-color: $success-variant-active-background;
+            color: $success-variant-active-color;
+        }
+    }
+
+    &--warning {
+        background-color: $warning-variant-background;
+        color: $warning-variant-color;
+
+        &:hover,
+        &:focus {
+            background-color: $warning-variant-focused-background;
+            color: $warning-variant-focused-color;
+        }
+
+        &:active {
+            background-color: $warning-variant-active-background;
+            color: $warning-variant-active-color;
+        }
+    }
+
+    &--danger {
+        background-color: $danger-variant-background;
+        color: $danger-variant-color;
+
+        &:hover,
+        &:focus {
+            background-color: $danger-variant-focused-background;
+            color: $danger-variant-focused-color;
+        }
+
+        &:active {
+            background-color: $danger-variant-active-background;
+            color: $danger-variant-active-color;
+        }
+    }
 }

client/src/components/EventDetails/Header/Actions/index.js

@@ -90,7 +90,7 @@ const EventDetailsHeaderActions = (props, { root, emit }) => {
             title: __('please-confirm'),
             text: __('page-calendar.confirm-delete'),
             confirmButtonText: __('yes-delete'),
-            type: 'warning',
+            type: 'danger',
         });
         if (!isConfirmed) {
             return;

client/src/components/FormField/index.js

@@ -3,10 +3,13 @@ import moment from 'moment';
 import { defineComponent } from '@vue/composition-api';
 import Datepicker from '@/components/Datepicker';
 import SwitchToggle from '@/components/SwitchToggle';
+import InputCopy from '@/components/InputCopy';
 
 const ALLOWED_TYPES = [
     'text',
     'email',
+    'copy',
+    'static',
     'password',
     'number',
     'tel',
@@ -84,6 +87,7 @@ export default defineComponent({
     render() {
         const {
             $t: __,
+            $scopedSlots: slots,
             type,
             label,
             name,
@@ -202,11 +206,18 @@ export default defineComponent({
                         />
                     </div>
                 )}
+                {type === 'copy' && (
+                    <InputCopy class="FormField__input" value={value} />
+                )}
+                {type === 'static' && (
+                    <p class="FormField__static-value">{value}</p>
+                )}
                 {errors && (
                     <div class="FormField__error">
                         <span class="FormField__error__text">{errors[0]}</span>
                     </div>
                 )}
+                {(!errors && slots.help) && <div class="FormField__help">{slots.help()}</div>}
             </div>
         );
     },

client/src/components/FormField/index.scss

@@ -23,10 +23,18 @@
 
     &__input,
     &__textarea,
-    &__datepicker {
+    &__datepicker,
+    &__static-value {
         width: 90%;
     }
 
+    &__static-value {
+        margin: 0;
+        padding: 10px 0;
+        font-weight: 500;
+        font-style: italic;
+    }
+
     &__switch {
         display: flex;
     }
@@ -46,9 +54,13 @@
         min-height: 50px;
     }
 
+    &__help,
     &__error {
         flex: 0 0 100%;
         margin-top: 0.3rem;
+    }
+
+    &__error {
         color: globals.$text-danger-color;
 
         &__text {
@@ -62,6 +74,10 @@
             padding-right: 0;
             border-right: 0;
             border-radius: globals.$input-border-radius 0 0 globals.$input-border-radius;
+
+            &:focus + #{$block}__addon {
+                border-color: globals.$input-focus-border-color;
+            }
         }
     }
 
@@ -88,7 +104,8 @@
 
         &__input,
         &__textarea,
-        &__datepicker {
+        &__datepicker,
+        &__static-value {
             flex: 1;
         }