@ouestfrance/sipa-bms-ui 8.8.1 → 8.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.8.1",
+  "version": "8.9.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

package/src/components/form/BmsMultiSelect.vue

@@ -58,11 +58,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useTemplateRef } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
 import BmsTag from './BmsTag.vue';
 import { InputOption } from '@/models';
-import _ from 'lodash';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
@@ -77,7 +76,8 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   required: false,
 });
-const inputElement = useTemplateRef('inputElement');
+
+const inputElement: Ref<HTMLElement | null> = ref(null);
 
 const isDatalistOpen = ref(false);
 

package/src/components/form/BmsSelect.vue

@@ -32,13 +32,12 @@
 
 <script lang="ts" setup>
 import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-import { computed, Ref, ref, useTemplateRef } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import _ from 'lodash';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
 import { onClickOutside } from '@vueuse/core';
-import { v4 as uuid } from 'uuid';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -56,7 +55,8 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const modelValue = defineModel<any>('modelValue', { required: true });
-const inputElement = useTemplateRef('inputElement');
+
+const inputElement: Ref<HTMLElement | null> = ref(null);
 
 const isDatalistOpen = ref(props.open);
 

package/src/components/form/BmsServerAutocomplete.stories.js

@@ -0,0 +1,74 @@
+import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
+import { http, HttpResponse } from 'msw';
+
+export default {
+  title: 'Composants/form/ServerAutocomplete',
+  component: BmsServerAutocomplete,
+  argTypes: {
+    disableSearch: {
+      control: { type: 'boolean' },
+    },
+    headers: {},
+  },
+};
+
+const mswRequestHandler = () =>
+  http.get('https://fakeapi.com/items', () =>
+    HttpResponse.json([
+      {
+        label: 'Label 1',
+        value: '1',
+      },
+      {
+        label: 'Label 2',
+        value: '2',
+      },
+    ]),
+  );
+
+const Template = (args) => ({
+  components: {
+    BmsServerAutocomplete,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsServerAutocomplete v-bind="args">
+    </BmsServerAutocomplete>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+Default.args = {
+  label: 'My autocomplete field',
+  modelValue: '',
+  url: 'https://fakeapi.com/items',
+};
+
+export const WithRequest = Template.bind({});
+WithRequest.args = {
+  label: 'My autocomplete field',
+  modelValue: '',
+  request: () => {
+    return new Promise((resolve) =>
+      resolve({
+        data: [
+          {
+            label: 'Label 1',
+            value: '1',
+          },
+          {
+            label: 'Label 2',
+            value: '2',
+          },
+        ],
+      }),
+    );
+  },
+};

package/src/components/form/BmsServerAutocomplete.vue

@@ -0,0 +1,143 @@
+<template>
+  <RawAutocomplete
+    v-model="modelValue"
+    :options="options"
+    :open="open"
+    :label="label"
+    :optional="optional"
+    :disabled="disabled"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :helperText="helperText"
+    :placeholder="placeholder"
+    :small="small"
+    :canAddNewOption="false"
+    @input="onInput"
+    @select="(option: any) => emits('select', option)"
+  >
+    <template #icon-start v-if="currentOptionIcon">
+      <span
+        class="icon"
+        v-if="typeof currentOptionIcon === 'string'"
+        v-html="currentOptionIcon"
+      ></span>
+      <component v-else :is="currentOptionIcon" />
+    </template>
+    <template #icon-end>
+      <BmsLoader v-if="loading" :size="16" />
+    </template>
+    <template #option="{ option }: { option: any }">
+      <template v-if="option.icon">
+        <span
+          class="icon datalist-icon"
+          v-if="typeof option.icon === 'string'"
+          v-html="option.icon"
+        ></span>
+
+        <component class="icon datalist-icon" v-else :is="option.icon" />
+      </template>
+      {{ option.label }}
+    </template>
+  </RawAutocomplete>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import RawAutocomplete from './RawAutocomplete.vue';
+import { InputOption } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
+import BmsLoader from '../feedback/BmsLoader.vue';
+
+export interface Props extends FieldComponentProps {
+  url?: string;
+  request?: (
+    abortController: AbortController,
+    inputValue?: string,
+    url?: string,
+  ) => Promise<{ data: InputOption[] }>;
+
+  modelValue?: string;
+  placeholder?: string;
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  request: async (controller: AbortController, url?: string) => {
+    if (!url) {
+      throw 'URL must be defined';
+    }
+
+    const response = await fetch(url, {
+      method: 'GET',
+      signal: controller.signal,
+    });
+
+    const data = await response.json();
+    return { data };
+  },
+});
+
+const modelValue = defineModel<string>('modelValue', {
+  default: null,
+});
+const emits = defineEmits<{
+  addNewOption: [newOption: string];
+  select: [option: InputOption];
+}>();
+
+const options = ref<InputOption[]>([]);
+const loading = ref(true);
+const controller = ref<AbortController>();
+
+const loadData = async (search: string) => {
+  loading.value = true;
+  try {
+    if (controller.value) {
+      controller.value.abort();
+    }
+    controller.value = new AbortController();
+    loading.value = true;
+
+    const { data } = await props.request(controller.value, search, props.url);
+
+    options.value = data;
+  } catch (e) {
+    console.error(e);
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => loadData(''));
+const onInput = (e: InputEvent) => {
+  loadData((e.target as HTMLInputElement)?.value);
+};
+
+const currentOptionIcon = computed(() => {
+  const option = options.value.find((o) => o.value === modelValue.value);
+  if (!option || typeof option === 'string') return undefined;
+  return option.icon;
+});
+</script>
+
+<style scoped lang="scss">
+.icon {
+  height: 1em;
+  width: 1em;
+
+  &.datalist-icon {
+    margin: 0 0.5em;
+  }
+
+  :deep(svg) {
+    height: 100%;
+    width: 100%;
+
+    * {
+      fill: currentColor !important;
+    }
+  }
+}
+</style>

package/src/components/form/RawAutocomplete.vue

@@ -53,7 +53,7 @@
 <script setup lang="ts">
 import { searchString } from '@/helpers/string.helper';
 import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
-import { computed, ref, useTemplateRef, watch } from 'vue';
+import { computed, Ref, ref, watch } from 'vue';
 import RawInputText from '@/components/form/RawInputText.vue';
 import { InputOption, InputType } from '@/models';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
@@ -72,11 +72,12 @@ export interface Props extends FieldComponentProps {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
   open: false,
+  canAddNewOption: false,
 });
 
 const modelValue = defineModel<string | null>('modelValue', { required: true });
 
-const rawInput = useTemplateRef('rawInput');
+const rawInput: Ref<HTMLElement | null> = ref(null);
 
 const emits = defineEmits<{
   addNewOption: [newOption: string];

package/src/components/table/BmsTableFilters.vue

@@ -50,6 +50,7 @@
             transformValueForComponent(filter?.valueFrom, filter.type)
           "
           :valueTo="transformValueForComponent(filter?.valueTo, filter.type)"
+          :autocompleteRequest="filter?.autocompleteRequest"
           :options="getFilterOptions(filter) as any"
           @input="
             (e: InputEvent) =>
@@ -95,6 +96,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 import BmsIconButton from '../button/BmsIconButton.vue';
 import BmsBetweenInput from '@/components/form/BmsBetweenInput.vue';
 import { isBetweenFilter } from '@/composables/search.helper';
+import BmsServerAutocomplete from '../form/BmsServerAutocomplete.vue';
 
 const route = useRoute();
 
@@ -156,6 +158,8 @@ const getFilterComponent = (type: FilterType) => {
       return BmsInputDateTime;
     case 'autocomplete':
       return BmsAutocomplete;
+    case 'autocompleteServer':
+      return BmsServerAutocomplete;
     case 'select':
       return BmsSelect;
     case 'betweenNumber':

package/src/models/table.model.ts

@@ -1,4 +1,4 @@
-import { InputType } from './form.model';
+import { InputOption, InputType } from './form.model';
 import { Sort, SortFunction } from './sort.model';
 
 export enum ColumnType {
@@ -34,6 +34,7 @@ export type FilterType =
   | 'inputDate'
   | 'boolean'
   | 'autocomplete'
+  | 'autocompleteServer'
   | 'betweenNumber'
   | 'betweenDate'
   | 'betweenDateTime';
@@ -48,6 +49,10 @@ export interface Filter {
   valueTo?: any;
   selectOptions?: { label: string; value: any }[];
   autocompleteOptions?: string[] | { label: string; value: string }[];
+  autocompleteRequest?: (
+    abortController: AbortController,
+    url?: string,
+  ) => Promise<{ data: InputOption[] }>;
   customFilter?: Function;
 }
 

package/src/showroom/pages/autocomplete.vue

@@ -39,6 +39,12 @@
     :options="optionsLabelValue"
   />
   <br />
+  Valeur: {{ autocompleteText }}
+  <BmsServerAutocomplete
+    label="Autocomplete avec un appel API"
+    :request="autocompleteRequest"
+    v-model="autocompleteText"
+  />
 </template>
 
 <script setup lang="ts">
@@ -49,12 +55,10 @@ import { ref } from 'vue';
 import BmsButton from '@/components/button/BmsButton.vue';
 import BmsSelect from '@/components/form/BmsSelect.vue';
 import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
-import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
-import RawAutocomplete from '@/components/form/RawAutocomplete.vue';
-import BmsInputText from '@/components/form/BmsInputText.vue';
 
 const select = ref('');
 const multiSelect = ref([]);
+import BmsServerAutocomplete from '@/components/form/BmsServerAutocomplete.vue';
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>
@@ -69,6 +73,7 @@ const optionsText = ref(
   range(0, 30).map((i) => (Math.random() > 0.5 ? `toto-${i}` : `titi-${i}`)),
 );
 const inputText = ref('');
+const autocompleteText = ref('');
 
 const optionsIcon = ref(
   range(0, 30).map((i) =>
@@ -82,4 +87,12 @@ const inputValueIcon = ref('');
 const onAddNewOption = (newOption: string) => {
   optionsLabelValue.value.push({ label: newOption, value: newOption });
 };
+
+const autocompleteRequest = (
+  abortController: AbortController,
+  searchString?: string,
+) =>
+  fetch(`http://localhost:3000/pokemon-types?search=${searchString}`).then(
+    (res) => res.json(),
+  );
 </script>

package/src/showroom/pages/server-table.vue

@@ -1,5 +1,4 @@
 <template>
-  {{ filters }}
   <bms-server-table
     v-model:selectedItems="selectedItems"
     v-model:selectMode="selectMode"
@@ -14,8 +13,6 @@
     :total="totalItems"
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
-    @filterInput="onFilterInput"
-    @filterChange="onFilterChange"
   >
     <template #default="{ row }: { row: any }">
       <td>
@@ -41,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Filter, SavedFilter, SelectMode } from '@/models';
+import { Filter, InputType, SavedFilter, SelectMode } from '@/models';
 import axios from 'axios';
 import { computed, Ref, ref } from 'vue';
 import { isEmptyStringOrNotDefined } from '@/helpers';
@@ -52,27 +49,19 @@ const serverHeaders = [
   { label: 'Type', key: 'type' },
 ];
 
-const typeOptions = ref([
-  'Grass',
-  'Poison',
-  'Fire',
-  'Flying',
-  'Water',
-  'Bug',
-  'Normal',
-  'Electric',
-  'Ground',
-  'Fairy',
-  'Fighting',
-  'Psychic',
-  'Rock',
-  'Steel',
-  'Ice',
-  'Ghost',
-  'Dragon',
-]);
+const pokemonTypeAutocompleteRequest = async (
+  abortController: AbortController,
+) => {
+  const { data } = await axios.get('http://localhost:3000/pokemon-types', {
+    signal: abortController.signal,
+  });
+
+  return {
+    data,
+  };
+};
 
-const filters = computed(() => [
+const filters: Filter[] = [
   {
     label: 'Name',
     key: 'name',
@@ -82,15 +71,15 @@ const filters = computed(() => [
     label: 'Number',
     key: 'idBetween',
     type: 'betweenNumber',
-    inputType: 'number',
+    inputType: InputType.NUMBER,
   },
   {
     label: 'Type',
     key: 'type',
-    type: 'autocomplete',
-    autocompleteOptions: typeOptions.value,
+    type: 'autocompleteServer',
+    autocompleteRequest: pokemonTypeAutocompleteRequest,
   },
-]);
+];
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
 const selectedItems = ref<any[]>([]);
@@ -106,33 +95,6 @@ const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
     (filter) => filter.id !== savedFilter.id,
   );
 };
-
-const onFilterInput = ({
-  filterKey,
-  e,
-}: {
-  filterKey: string;
-  e: InputEvent;
-}) => {
-  typeOptions.value = [];
-  console.log(
-    `user filtered key ${filterKey} with val ${(e.target as HTMLInputElement)?.value}`,
-  );
-};
-
-const onFilterChange = ({
-  filterKey,
-  e,
-}: {
-  filterKey: string;
-  e: InputEvent;
-}) => {
-  typeOptions.value = [];
-  console.log(
-    `user filtered key ${filterKey} changed with val ${(e.target as HTMLInputElement)?.value}`,
-  );
-};
-
 const customFetchData = async (
   params: any,
   abortController: AbortController,
@@ -170,22 +132,4 @@ const customFetchData = async (
     data,
   };
 };
-
-const customQueryBuilder = (
-  size: number,
-  _: number,
-  page: number,
-  search: string,
-) => {
-  const params: any = {
-    size: '' + size,
-    page: '' + (page + 1),
-  };
-
-  if (search) {
-    params['beer_name'] = search;
-  }
-
-  return params;
-};
 </script>

package/src/showroom/server.js

@@ -8,6 +8,30 @@ app.use(cors());
 
 const port = 3000;
 
+app.get('/pokemon-types', (req, res) => {
+  res.send({
+    data: [
+      { label: 'Grass', value: 'Grass' },
+      { label: 'Poison', value: 'Poison' },
+      { label: 'Fire', value: 'Fire' },
+      { label: 'Flying', value: 'Flying' },
+      { label: 'Water', value: 'Water' },
+      { label: 'Bug', value: 'Bug' },
+      { label: 'Normal', value: 'Normal' },
+      { label: 'Electric', value: 'Electric' },
+      { label: 'Ground', value: 'Ground' },
+      { label: 'Fairy', value: 'Fairy' },
+      { label: 'Fighting', value: 'Fighting' },
+      { label: 'Psychic', value: 'Psychic' },
+      { label: 'Rock', value: 'Rock' },
+      { label: 'Steel', value: 'Steel' },
+      { label: 'Ice', value: 'Ice' },
+      { label: 'Ghost', value: 'Ghost' },
+      { label: 'Dragon', value: 'Dragon' },
+    ],
+  });
+});
+
 app.get('/pokemons', (req, res) => {
   let data = pokemons;
   let total = 0;