@saooti/octopus-sdk 40.2.19 → 41.0.0-SNAPSHOT

package/src/components/display/categories/CategoryChooser.vue

@@ -5,9 +5,9 @@
     :option-chosen="model"
     option-label="name"
     :display-label="displayLabel"
-    :label="label ?? $t('By category')"
+    :label="label ?? t('By category')"
     :text-danger="textDanger"
-    :placeholder="$t('Type string to filter by categories')"
+    :placeholder="t('Type string to filter by categories')"
     :max-element="maxElement"
     :in-modal="inModal"
     :multiple="multiple"
@@ -21,158 +21,155 @@
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useGeneralStore } from "../../../stores/GeneralStore";
-import { mapState } from "pinia";
 import ClassicMultiselect from "../../form/ClassicMultiselect.vue";
 import { Category } from "@/stores/class/general/category";
-import { defineComponent } from "vue";
-export default defineComponent({
-  components: {
-    ClassicMultiselect,
-  },
-  props: {
-    defaultanswer: { default: "", type: String },
-    width: { default: "100%", type: String },
-    multiple: { default: false, type: Boolean },
-    isDisabled: { default: false, type: Boolean },
-    initCategories: {
-      default: undefined,
-      type: Array as () => Array<Category>,
-    },
-    displayAllCategories: { default: false, type: Boolean },
-    categorySelected: { default: undefined, type: Number },
-    categorySelectedArray: {
-      default: undefined,
-      type: Array as () => Array<number>,
-    },
-    inModal: { default: false, type: Boolean },
-    noDeselect: { default: true, type: Boolean },
-    label:{default: undefined, type: String },
-    displayLabel: { default: false, type: Boolean },
-    textDanger :{ default: undefined, type: String },
-    displayRequired: { default: false, type: Boolean },
+import { computed, onMounted, Ref, ref, useTemplateRef, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+//Props 
+const props = defineProps({
+  defaultanswer: { default: "", type: String },
+  width: { default: "100%", type: String },
+  multiple: { default: false, type: Boolean },
+  isDisabled: { default: false, type: Boolean },
+  initCategories: {
+    default: undefined,
+    type: Array as () => Array<Category>,
   },
-  emits: [
-    "update:categorySelected",
-    "update:categorySelectedArray",
-    "selected",
-  ],
-  data() {
-    return {
-      maxElement: 50 as number,
-      category: undefined as Category | undefined,
-      categoryForArray: [] as Array<Category> | undefined,
-    };
+  displayAllCategories: { default: false, type: Boolean },
+  categorySelected: { default: undefined, type: Number },
+  categorySelectedArray: {
+    default: undefined,
+    type: Array as () => Array<number>,
   },
+  inModal: { default: false, type: Boolean },
+  noDeselect: { default: true, type: Boolean },
+  label:{default: undefined, type: String },
+  displayLabel: { default: false, type: Boolean },
+  textDanger :{ default: undefined, type: String },
+  displayRequired: { default: false, type: Boolean },
+})
 
-  computed: {
-    ...mapState(useGeneralStore, ["storedCategories"]),
-    categoriesChosen(): Array<Category> {
-      if (this.initCategories) {
-        return this.initCategories;
-      }
-      return this.storedCategories;
-    },
-    categoriesOrdered(): Array<Category> {
-      let allCategoriesOrdered = this.categoriesChosen.toSorted(
-        (a: Category, b: Category) => (a.name > b.name ? 1 : -1),
-      );
-      if (!this.displayAllCategories) {
-        allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {
-          return c.podcastCount;
-        });
-      }
-      if (this.getDefaultCategory) {
-        allCategoriesOrdered.unshift(this.getDefaultCategory);
-      }
-      return allCategoriesOrdered;
-    },
-    getDefaultCategory(): Category | undefined {
-      if ("" === this.defaultanswer) {
-        return undefined;
-      }
-      return { id: 0, name: this.defaultanswer };
-    },
-    idClassicMultiselect(): string {
-      if (this.multiple) return "categoryChooser" + this.multiple;
-      return "categoryChooser";
-    },
+//Emits
+const emit = defineEmits([
+  "update:categorySelected",
+  "update:categorySelectedArray",
+  "selected"
+]);
 
-    model: {
-      get(): Category | Array<Category> | undefined {
-        return this.multiple ? this.categoryForArray : this.category;
-      },
-      set(value: Category | Array<Category> | undefined): void {
-        if (!this.multiple) {
-          this.category = value as Category | undefined;
-          return;
-        }
-        this.categoryForArray = value as Array<Category> | undefined;
-      },
-    },
-  },
-  watch: {
-    categorySelected: {
-      immediate: true,
-      handler() {
-        if (this.categorySelected) {
-          this.initCategorySelected();
-        } else {
-          this.category = this.getDefaultCategory;
-        }
-      },
-    },
-  },
 
-  mounted() {
-    this.initCategoryArray();
+//Data 
+const maxElement = ref(50);
+const category: Ref<Category | undefined> = ref(undefined);
+const categoryForArray: Ref<Array<Category> | undefined> = ref([]);
+const selectCategoryRef=useTemplateRef('selectCategory');
+
+//Composables
+const { t } = useI18n();
+const generalStore = useGeneralStore();
+
+
+//Computed
+const categoriesChosen = computed(() => {
+  if (props.initCategories) {
+    return props.initCategories;
+  }
+  return generalStore.storedCategories;
+});
+const categoriesOrdered = computed(() => {
+  let allCategoriesOrdered = categoriesChosen.value.toSorted(
+    (a: Category, b: Category) => (a.name > b.name ? 1 : -1),
+  );
+  if (!props.displayAllCategories) {
+    allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {
+      return c.podcastCount;
+    });
+  }
+  if (getDefaultCategory.value) {
+    allCategoriesOrdered.unshift(getDefaultCategory.value);
+  }
+  return allCategoriesOrdered;
+});
+const getDefaultCategory = computed(() => {
+  if ("" === props.defaultanswer) {
+    return undefined;
+  }
+  return { id: 0, name: props.defaultanswer };
+});
+const idClassicMultiselect = computed(() => {
+  if (props.multiple) return "categoryChooser" + props.multiple;
+  return "categoryChooser";
+});
+const model = computed({
+  get(): Category | Array<Category> | undefined {
+    return props.multiple ? categoryForArray.value :category.value;
   },
-  methods: {
-    async onSearchCategory(query?: string): Promise<void> {
-      let categories = this.categoriesOrdered;
-      if (query) {
-        categories = categories.filter((item: Category) => {
-          return item.name.toUpperCase().includes(query.toUpperCase());
-        });
-      }
-      (
-        this.$refs.selectCategory as InstanceType<typeof ClassicMultiselect>
-      ).afterSearch(categories, categories.length);
-    },
-    onCategorySelected(category: Category | Array<Category>): void {
-      if (undefined !== this.categorySelected) {
-        this.$emit("update:categorySelected", (category as Category).id);
-      } else if (undefined !== this.categorySelectedArray) {
-        const idsArray: Array<number> = [];
-        (category as Array<Category>).forEach((el: Category) => {
-          idsArray.push(el.id);
-        });
-        this.$emit("update:categorySelectedArray", idsArray);
-      } else {
-        this.$emit("selected", category);
-      }
-    },
-    initCategorySelected(): void {
-      this.category =
-        this.categoriesChosen.find((el: Category) => {
-          return el.id === this.categorySelected;
-        }) ?? this.getDefaultCategory;
-    },
-    initCategoryArray(): void {
-      if (!this.categoryForArray || !this.categorySelectedArray) {
-        return;
-      }
-      this.categoryForArray.length = 0;
-      this.categorySelectedArray.forEach((element: number) => {
-        const item = this.categoriesChosen.find((el: Category) => {
-          return el.id === element;
-        });
-        if (this.categoryForArray && item) {
-          this.categoryForArray.push(item);
-        }
-      });
-    },
+  set(value: Category | Array<Category> | undefined): void {
+    if (!props.multiple) {
+      category.value = value as Category | undefined;
+      return;
+    }
+    categoryForArray.value = value as Array<Category> | undefined;
   },
 });
+
+
+//Watch
+watch(()=>props.categorySelected, async () => {
+  if (props.categorySelected) {
+    initCategorySelected();
+  } else {
+    category.value = getDefaultCategory.value;
+  }
+}, {immediate: true});
+
+
+onMounted(()=>initCategoryArray())
+
+
+//Methods
+async function onSearchCategory(query?: string): Promise<void> {
+  let categories = categoriesOrdered.value;
+  if (query) {
+    categories = categories.filter((item: Category) => {
+      return item.name.toUpperCase().includes(query.toUpperCase());
+    });
+  }
+  (selectCategoryRef?.value as InstanceType<typeof ClassicMultiselect>).afterSearch(categories, categories.length);
+}
+function onCategorySelected(category: Category | Array<Category>): void {
+  if (undefined !== props.categorySelected) {
+    emit("update:categorySelected", (category as Category).id);
+  } else if (undefined !== props.categorySelectedArray) {
+    const idsArray: Array<number> = [];
+    (category as Array<Category>).forEach((el: Category) => {
+      idsArray.push(el.id);
+    });
+    emit("update:categorySelectedArray", idsArray);
+  } else {
+    emit("selected", category);
+  }
+}
+function initCategorySelected(): void {
+  category.value =
+    categoriesChosen.value.find((el: Category) => {
+      return el.id === props.categorySelected;
+    }) ?? getDefaultCategory.value;
+}
+function initCategoryArray(): void {
+  if (!categoryForArray.value || !props.categorySelectedArray) {
+    return;
+  }
+  categoryForArray.value.length = 0;
+  props.categorySelectedArray.forEach((element: number) => {
+    const item = categoriesChosen.value.find((el: Category) => {
+      return el.id === element;
+    });
+    if (categoryForArray.value && item) {
+      categoryForArray.value.push(item);
+    }
+  });
+}
 </script>