Implémenter une app vue avec la liste des tickets attribués

src/Bundle/ChillMainBundle/Resources/public/lib/api/apiMethods.ts

@@ -5,11 +5,16 @@ export type fetchOption = Record<string, boolean | string | number | null>;
 
 export type Params = Record<string, number | string>;
 
+export interface Pagination {
+  first: number;
+  items_per_page: number;
+  more: boolean;
+  next: string | null;
+  previous: string | null;
+}
+
 export interface PaginationResponse<T> {
-  pagination: {
-    more: boolean;
-    items_per_page: number;
-  };
+  pagination: Pagination;
   results: T[];
   count: number;
 }

src/Bundle/ChillMainBundle/Resources/public/lib/localizationHelper/localizationHelper.ts

@@ -8,6 +8,26 @@ import { TranslatableString } from "ChillMainAssets/types";
  * @param locale defaults to browser locale
  * @returns The localized string or null if no translation is available
  */
+
+/**
+ * Prepends the current HTML lang code to the given URL.
+ * Example: If lang="fr" and url="/about", returns "/fr/about"
+ *
+ * @param url The URL to localize
+ * @returns The localized URL
+ */
+export function localizedUrl(url: string): string {
+  const lang =
+    document.documentElement.lang || navigator.language.split("-")[0] || "fr";
+  // Ensure url starts with a slash and does not already start with /{lang}/
+  const normalizedUrl = url.startsWith("/") ? url : `/${url}`;
+  const langPrefix = `/${lang}`;
+  if (normalizedUrl.startsWith(langPrefix + "/")) {
+    return normalizedUrl;
+  }
+  return `${langPrefix}${normalizedUrl}`;
+}
+
 export function localizeString(
   translatableString: TranslatableString | null | undefined,
   locale?: string,

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="grey-card">
-    <ul :class="listClasses" v-if="picked.length > 0 && displayPicked">
+  <div class="grey-card p-2">
+    <ul :class="listClasses" v-if="displayPicked">
       <li
         v-for="p in picked"
         @click="removeEntity(p)"
@@ -21,14 +21,15 @@
         </span>
       </li>
     </ul>
-    <ul class="record_actions">
+    <ul class="record_actions mb-0">
       <li v-if="isCurrentUserPicker" class="btn btn-sm btn-misc">
-        <label class="flex items-center gap-2">
+        <label class="flex items-center gap-1">
           <input
             :checked="isMePicked"
             ref="itsMeCheckbox"
             :type="multiple ? 'checkbox' : 'radio'"
             @change="selectItsMe($event as InputEvent)"
+            style="margin: 0"
           />
           {{ trans(USER_CURRENT_USER) }}
         </label>
@@ -45,11 +46,15 @@
       </li>
     </ul>
 
-    <ul class="badge-suggest add-items inline" style="float: right">
+    <ul
+      class="badge-suggest add-items inline"
+      style="justify-content: flex-end; display: flex"
+    >
       <li
         v-for="s in suggested"
         :key="s.type + s.id"
         @click="addNewSuggested(s)"
+        style="margin: 0"
       >
         <span :class="getBadgeClass(s)" :style="getBadgeStyle(s)">
           {{ s.text }}
@@ -221,8 +226,6 @@ function getBadgeStyle(entities: Entities) {
 .grey-card {
   background: #f8f9fa;
   border-radius: 8px;
-  padding: 1.5rem;
-  min-height: 160px;
 }
 
 .btn-check:checked + .btn,
@@ -242,6 +245,7 @@ ul.badge-suggest {
   list-style-type: none;
   padding-left: 0;
   margin-bottom: 0px;
+  min-height: 30px;
 }
 ul.badge-suggest li > span {
   white-space: normal;