Mediacentre UI completed

packages/info-modal/.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Archives
+*.tgz

packages/info-modal/vite.config.ts

@@ -24,6 +24,7 @@ export default ({ mode }: { mode: string }) => {
 
   return defineConfig({
     build: {
+      sourcemap: true,
       lib: {
         entry: './src/info-modal.ts',
         formats: ['es'],

packages/mediacentre/.env.production

@@ -0,0 +1,15 @@
+VITE_BASE_URI="/"
+VITE_AXIOS_TIMEOUT=10000
+VITE_APP_MEDIACENTRE_CONTEXT="/portail"
+VITE_APP_MEDIACENTRE_API_URI="/mediacentre-api/api/resources"
+VITE_APP_MEDIACENTRE_CONFIG_API_URI="/mediacentre-api/api/config"
+VITE_APP_MEDIACENTRE_FNAME="Mediacentre"
+VITE_APP_MEDIACENTRE_USER_INFO_API_URI="/api/v5-1/userinfo?claims=&groups="
+VITE_APP_MEDIACENTRE_USER_RIGHTS_API_URI="/api/groups"
+VITE_APP_MEDIACENTRE_USER_GET_USER_FAVORITE_RESOURCES_API_URI="/api/prefs/getentityonlyprefs/"
+VITE_APP_MEDIACENTRE_USER_PUT_USER_FAVORITE_RESOURCES_API_URI="/api/prefs/putprefs?fname="
+VITE_APP_MEDIACENTRE_CLAIM_UAI=""
+VITE_APP_MEDIACENTRE_CLAIM_UAI_CURRENT=""
+VITE_APP_MEDIACENTRE_HELP_PAGE_LOCATION=""
+VITE_APP_MEDIACENTRE_GESTION_API_URI="/mediacentre-api/api/resources/gestion"
+VITE_APP_MEDIACENTRE_REDIRECTION_REGEX="\?[\w-]*redirect=([^&]+)(?:&[^&]*base64=(true|false))?"

packages/mediacentre/.env.schema

@@ -1,11 +1,16 @@
 
-VITE_APP_MEDIACENTRE_BASE_URI="/"
+VITE_BASE_URI="/"
 VITE_AXIOS_TIMEOUT=10000
 VITE_APP_MEDIACENTRE_CONTEXT=""
 VITE_APP_MEDIACENTRE_API_URI=""
+VITE_APP_MEDIACENTRE_CONFIG_API_URI=""
 VITE_APP_MEDIACENTRE_FNAME=""
 VITE_APP_MEDIACENTRE_USER_INFO_API_URI=""
 VITE_APP_MEDIACENTRE_USER_RIGHTS_API_URI=""
 VITE_APP_MEDIACENTRE_USER_GET_USER_FAVORITE_RESOURCES_API_URI=""
 VITE_APP_MEDIACENTRE_USER_PUT_USER_FAVORITE_RESOURCES_API_URI=""
-
+VITE_APP_MEDIACENTRE_CLAIM_UAI=""
+VITE_APP_MEDIACENTRE_CLAIM_UAI_CURRENT=""
+VITE_APP_MEDIACENTRE_HELP_PAGE_LOCATION=""
+VITE_APP_MEDIACENTRE_GESTION_API_URI=""
+VITE_APP_MEDIACENTRE_REDIRECTION_REGEX=""

packages/mediacentre/README.md

@@ -19,7 +19,7 @@ npm install @gip-recia/mediacentre-ui
 Dans un module JavaScript :
 
 ```js
-import '@gip-recia/mediacentre-ui';
+import '@gip-recia/mediacentre-ui'
 ```
 
 Dans une page HTML :
@@ -31,8 +31,8 @@ Dans une page HTML :
 3. Ajout du composant sur une page HTML :
 
 ```js
-const component = document.createElement('mediacentre-ui');
-document.body.appendChild(component);
+const component = document.createElement('mediacentre-ui')
+document.body.appendChild(component)
 ```
 
 ## Paramètres
@@ -41,13 +41,17 @@ Propriétés disponibles :
 
 | Nom                               |   Type   | Obligatoire | Default | Description                                                                                                |
 | --------------------------------- | :------: | :---------: | :-----: | ---------------------------------------------------------------------------------------------------------- |
-| `mediacentre-context-url`         | `string` |    `non`    |         | contexte de l'URL.                                                                                         |
 | `base-api-url`                    | `string` |    `non`    |         | URL de l'API REST MediaCentre.                                                                             |
+| `config-api-url`                  | `string` |    `non`    |         | URL de la configuration de l'API REST MediaCentre.                                                         |
+| `gestion-api-url`                 | `string` |    `non`    |         | URL des informations de gestion du GAR de de l'API REST MediaCentre.                                       |
 | `user-info-api-url`               | `string` |    `non`    |         | URL de l'API des informations utilisateurs.                                                                |
 | `user-rights-api-url`             | `string` |    `non`    |         | URL de l'API des droits utilisateurs.                                                                      |
 | `get-user-favorite-resources-url` | `string` |    `non`    |         | URL de l'API pour récupèrer la liste des identifiants des ressources favorites de l'utilisateur.           |
 | `put-user-favorite-resources-url` | `string` |    `non`    |         | URL de l'API pour modifier la liste des identifiants des ressources favorites de l'utilisateur.            |
 | `fname-mediacentre-ui`            | `string` |    `non`    |         | Fname de la portlet du Mediacentre-UI (utilisé pour la gestion des ressources favorites de l'utilisateur). |
+| `uai-current`                     | `string` |    `non`    |         | Clé de la soffit pour obtenir la valeur de l'UAI de l'établissement courant.                               |
+| `uai`                             | `string` |    `non`    |         | Clé de la soffit pour obtenir la valeur de la liste des UAI des établissements de l'utilisateur.           |
+| `help-location`                   | `string` |    `non`    |         | URL de la page d'aide du Médiacentre.                                                                      |
 
 <br/>
 
@@ -78,3 +82,9 @@ Plusieurs variables CSS peuvent être définis pour personnaliser le webcomponen
 | `--ui-mediacentre-menu-title-background-color`      | Couleur de fond du titre du menu et de l'icône infos.        |
 | `--ui-mediacentre-category-hover-background-color`  | Couleur de fond au survol d'une catégorie.                   |
 | `--ui-mediacentre-category-active-background-color` | Couleur de fond d'une catégorie sélectionnée.                |
+| `--recia-btn-primary-bg`                            | Couleur de fond des boutons et des selects.                  |
+| `--recia-btn-primary-color`                         | Couleur du texte des boutons et des selectse.                |
+| `--mediacentre-menu-bg`                             | Couleur de fond du menu.                                     |
+| `--primary-transparent`                             | Couleur de fond des boutons.                                 |
+| `--ui-mediacentre-category-active-background-color` | Couleur de fond d'une catégorie sélectionnée.                |
+| `--ui-mediacentre-blue-link`                        | Couleur des hyperliens.                                      |

packages/mediacentre/index.html

@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@gip-recia/mediacentre-ui</title>
-    <script type="text/javascript">
+    <!-- <script type="text/javascript">
       let triggerElement
       document.addEventListener('openModale', (event) => {
         triggerElement = event.detail.originalEvent
         const modalElement = document.querySelector('info-modal')
         modalElement.isOpen = !modalElement.isOpen
         modalElement.titleModal = event.detail.title
-        modalElement.mainElement = document.getElementsByTagName('main')[0]
+        modalElement.mainElement = document.querySelector('body > div')[0]
       })
 
       document.addEventListener('closeModale', (event) => {
@@ -20,7 +20,7 @@
           event.preventDefault()
         }
       })
-    </script>
+    </script> -->
   </head>
   <body>
     <main id="app"></main>

packages/mediacentre/package.json

@@ -51,6 +51,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@gip-recia/info-modal": "file:../info-modal/package.tgz",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@tsconfig/node22": "^22.0.0",
     "@types/lodash.debounce": "^4",
@@ -59,6 +60,7 @@
     "@uportal/open-id-connect": "^1.40.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
+    "@vueform/multiselect": "^2.6.11",
     "@vueuse/core": "^12.5.0",
     "axios": "^1.7.9",
     "dotenv-checker": "^1.1.7",

packages/mediacentre/src/AppDev.vue

@@ -42,7 +42,7 @@ mediacentre-ui {
 }
 /* Variables */
 :root {
-  --ui-mediacentre-background-color: #ffffff;
+  --ui-mediacentre-background-color: #f3f3f3;
   --ui-mediacentre-font-color: #000000;
   --ui-mediacentre-border-color: #d35959;
   --ui-mediacentre-menu-title-background-color: #ededed;

packages/mediacentre/src/assets/scss/_buttons.scss

@@ -0,0 +1,191 @@
+/**
+ * Copyright (C) 2023 GIP-RECIA, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'variables' as *;
+
+%tag-and-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 8px;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 50px;
+  text-decoration: none;
+  color: unset;
+}
+
+%disabled {
+  opacity: 0.33;
+  pointer-events: none;
+}
+
+%tag {
+  @extend %tag-and-button;
+  padding: 8px 16px;
+  font-family: $dm-sans;
+  font-weight: 500;
+  font-size: 14px;
+
+  &.active {
+    background-color: $standard-colour-black;
+    color: white;
+
+    &:hover {
+      background-color: $primary;
+    }
+
+    &:focus-visible {
+      background-color: $primary;
+      color: $standard-colour-white;
+      outline: 3px solid #0062bc4d;
+    }
+  }
+
+  &:not(.active) {
+    &:hover {
+      background-color: $primary-transparent;
+      color: $primary;
+    }
+
+    &:focus-visible {
+      background-color: $primary-transparent;
+      color: $primary;
+      outline: 3px solid $primary;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.33;
+    pointer-events: none;
+  }
+}
+
+%tag-circle {
+  @extend %tag;
+  border-radius: 50%;
+  width: 34px;
+  height: 34px;
+  padding: 8px;
+}
+
+%tag-small {
+  @extend %tag;
+  padding: 4px 12px;
+}
+
+%tag-small-circle {
+  @extend %tag;
+  border-radius: 50%;
+  width: 26px;
+  height: 26px;
+  padding: 4px;
+}
+
+%button {
+  @extend %tag-and-button;
+  padding: 12px 24px;
+  font-family: $sora;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+%button-primary {
+  @extend %button;
+  background-color: $basic-black;
+  color: $standard-colour-white;
+
+  &:hover {
+    background-color: $primary;
+  }
+
+  &:focus-visible {
+    background-color: $primary;
+    outline: 4px solid #0062bc4d;
+  }
+
+  &:disabled,
+  &.disabled {
+    @extend %disabled;
+  }
+}
+
+%button-primary-circle {
+  @extend %button-primary;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  padding: 12px;
+}
+
+%button-secondary {
+  @extend %button;
+  background-color: $basic-grey;
+  color: $basic-black;
+
+  &:hover {
+    background-color: $secondary-hover;
+    color: $primary;
+  }
+
+  &:focus-visible {
+    background-color: $secondary-hover;
+    color: $primary;
+    outline: 4px solid $primary;
+  }
+
+  &:disabled,
+  &.disabled {
+    @extend %disabled;
+  }
+}
+
+%button-tertiary {
+  @extend %button;
+  padding: 8px 16px;
+  font-family: $dm-sans;
+  font-weight: 600;
+  font-size: 14px;
+  border-radius: 17px;
+  color: $basic-black;
+
+  &:hover {
+    color: $primary;
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    color: $primary;
+    text-decoration: underline;
+    outline: 4px solid $primary;
+  }
+
+  &:disabled,
+  &.disabled {
+    @extend %disabled;
+  }
+}
+
+%button-tertiary-circle {
+  @extend %button-tertiary;
+  border-radius: 50%;
+  width: 34px;
+  height: 34px;
+  padding: 8px;
+}

packages/mediacentre/src/assets/scss/_variables.scss

@@ -15,9 +15,25 @@
  */
 
 $border-color: var(--ui-mediacentre-border-color, #25b2f3);
-$background-color: var(--ui-mediacentre-background-color, #beb2b2);
+$background-color: var(--ui-mediacentre-background-color, #ffffff);
 $card-background-color: var(--ui-mediacentre-card-background-color, #ffffff);
 $font-color: var(--ui-mediacentre-font-color, #000000);
 $menu-title-background-color: var(--ui-mediacentre-menu-title-background-color, #ededed);
 $category-hover-background-color: var(--ui-mediacentre-category-hover-background-color, #f3f3f3);
 $category-active-background-color: var(--ui-mediacentre-category-active-background-color, #f8f8f8);
+$vueform-option-selected-background: var(--recia-btn-primary-bg, #0d9eff);
+$vueform-option-selected: var(--recia-btn-primary-color, #fff);
+$background-color-menu: var(--mediacentre-menu-bg, #f4f4f4);
+
+$dm-sans: 'DM Sans', 'sans-serif';
+$sora: 'Sora', 'sans-serif';
+$standard-colour-white: #fff;
+$standard-colour-black: #1e1e1e;
+$primary: var(--primary, #0062bc);
+$primary-transparent: var(--primary-transparent, #0062bc0d);
+$basic-black: #1e1e1e;
+$basic-grey: #f4f4f4;
+//unused, but declared beacause an unused button requires it
+$secondary-hover: var(--secondary-hover, #e6eff8);
+
+$blue-link: var(--ui-mediacentre-blue-link, #005099);

packages/mediacentre/src/assets/scss/global.scss

@@ -15,7 +15,17 @@
  */
 
 @forward 'variables';
+@use 'variables' as *;
+@use 'buttons';
 
 * {
   box-sizing: border-box;
 }
+
+a {
+  color: $blue-link;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}