@saooti/octopus-sdk 37.0.6 → 37.0.7

package/README.md

@@ -492,7 +492,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 29.0.23 Eslint
  * 29.0.24 Version stable vue3
  * 29.0.25 Specific category does not display in correct order
- * 29.0.26 Snackbar position
+ * 29.0.26 SnackBar position
  * 29.0.27 Petit cursor:pointer des familles
  * 29.0.28 Petite couleur des familles
  * 29.0.29 Amélioration Popover
@@ -617,7 +617,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 31.0.24 Amélioration accessibilité
  * 31.0.25 Erreur audioUrl
  * 31.0.26 Erreur 403 page expose 
- * 31.0.27 Snackbar chose holdtime
+ * 31.0.27 SnackBar chose holdtime
  * 31.0.28 Mixins orgComputed
  * 31.0.29 Changement css
  * 31.0.30 Changement css

package/index.ts

@@ -1,34 +1,34 @@
 //Pages
-export const getLives = () => import("./src/components/pages/Lives.vue");
-export const getPodcast = () => import("./src/components/pages/Podcast.vue");
-export const getPodcasts = () => import("./src/components/pages/Podcasts.vue");
-export const getEmission = () => import("./src/components/pages/Emission.vue");
-export const getEmissions = () => import("./src/components/pages/Emissions.vue");
-export const getPlaylist = () => import("./src/components/pages/Playlist.vue");
-export const getPlaylists = () => import("./src/components/pages/Playlists.vue");
-export const getParticipant = () => import("./src/components/pages/Participant.vue");
-export const getParticipants = () => import("./src/components/pages/Participants.vue");
-export const getSearch = () => import("./src/components/pages/Search.vue");
-export const getHome = () => import("./src/components/pages/Home.vue");
-export const getCategory = () => import("./src/components/pages/Category.vue");
-export const getRubrique = () => import("./src/components/pages/Rubrique.vue");
+export const getLives = () => import("./src/components/pages/LivesPage.vue");
+export const getPodcast = () => import("./src/components/pages/PodcastPage.vue");
+export const getPodcasts = () => import("./src/components/pages/PodcastsPage.vue");
+export const getEmission = () => import("./src/components/pages/EmissionPage.vue");
+export const getEmissions = () => import("./src/components/pages/EmissionsPage.vue");
+export const getPlaylist = () => import("./src/components/pages/PlaylistPage.vue");
+export const getPlaylists = () => import("./src/components/pages/PlaylistsPage.vue");
+export const getParticipant = () => import("./src/components/pages/ParticipantPage.vue");
+export const getParticipants = () => import("./src/components/pages/ParticipantsPage.vue");
+export const getSearch = () => import("./src/components/pages/SearchPage.vue");
+export const getHome = () => import("./src/components/pages/HomePage.vue");
+export const getCategory = () => import("./src/components/pages/CategoryPage.vue");
+export const getRubrique = () => import("./src/components/pages/RubriquePage.vue");
 export const getError403Page = () => import("./src/components/pages/Error403Page.vue");
-export const getRadio = () => import("./src/components/pages/Radio.vue");
+export const getRadio = () => import("./src/components/pages/RadioPage.vue");
 
 //Misc
-export const getAccordion = () => import("./src/components/misc/Accordion.vue");
-export const getNav = () => import("./src/components/misc/Nav.vue");
+export const getAccordion = () => import("./src/components/misc/ClassicAccordion.vue");
+export const getNav = () => import("./src/components/misc/ClassicNav.vue");
 export const getProgressBar = () => import("./src/components/misc/ProgressBar.vue");
-export const getSpinner = () => import("./src/components/misc/Spinner.vue");
+export const getSpinner = () => import("./src/components/misc/ClassicSpinner.vue");
 export const getFooter = () => import("./src/components/misc/Footer.vue");
 export const getLeftMenu = () => import("./src/components/misc/LeftMenu.vue");
-export const getPlayer = () => import("./src/components/misc/player/Player.vue");
-export const getSnackbar = () => import("./src/components/misc/Snackbar.vue");
+export const getPlayer = () => import("./src/components/misc/player/PlayerComponent.vue");
+export const getSnackbar = () => import("./src/components/misc/SnackBar.vue");
 export const getTopBar = () => import("./src/components/misc/TopBar.vue");
 export const getHomeDropdown = () => import("./src/components/misc/HomeDropdown.vue");
 export const getMessageModal = () => import("./src/components/misc/modal/MessageModal.vue");
 export const getErrorMessage = () => import("./src/components/misc/ErrorMessage.vue");
-export const getPopover = () => import("./src/components/misc/Popover.vue");
+export const getPopover = () => import("./src/components/misc/ClassicPopover.vue");
 export const getClassicModal = () => import("./src/components/misc/modal/ClassicModal.vue");
 
 
@@ -65,7 +65,7 @@ export const getClassicRadio = () => import("./src/components/form/ClassicRadio.
 export const getClassicLoading = () => import("./src/components/form/ClassicLoading.vue");
 export const getClassicSelect = () => import("./src/components/form/ClassicSelect.vue");
 export const getClassicDatePicker = () => import("./src/components/form/ClassicDatePicker.vue");
-export const getPaginate = () => import("./src/components/display/list/Paginate.vue");
+export const getPaginate = () => import("./src/components/display/list/PaginateSection.vue");
 export const getPaginateParams = () => import("./src/components/display/list/PaginateParams.vue");
 export const getListPaginate = () => import("./src/components/display/list/ListPaginate.vue");
 export const getClassicMultiselect = () => import("./src/components/form/ClassicMultiselect.vue");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.6",
+  "version": "37.0.7",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -18,45 +18,47 @@
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@saooti/octopus-api": "^0.34.3",
-    "@tiptap/extension-link": "^2.0.3",
-    "@tiptap/pm": "^2.0.3",
-    "@tiptap/extension-underline": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.3",
+    "@tiptap/extension-link": "^2.0.4",
+    "@tiptap/extension-underline": "^2.0.4",
+    "@tiptap/pm": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
+    "@tiptap/vue-3": "^2.0.4",
     "@vue/cli": "^5.0.8",
     "@vue/compat": "^3.3.4",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
     "express": "^4.18.2",
-    "hls.js": "^1.4.7",
-    "humanize-duration": "^3.28.0",
-    "jest": "^29.5.0",
+    "hls.js": "^1.4.9",
+    "humanize-duration": "^3.29.0",
+    "jest": "^29.6.1",
     "pinia": "^2.1.4",
     "qrcode.vue": "^3.4.0",
     "sass": "^1.63.6",
     "sonarqube-scanner": "^3.0.0",
-    "swiper": "^9.3.2",
+    "swiper": "^10.0.4",
     "v-calendar": "^3.0.3",
-    "vite": "^4.3.9",
+    "vite": "^4.4.4",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-recaptcha": "^2.0.3",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.4",
     "vue-select": "^4.0.0-beta.6",
     "vue3-lazyload": "^0.3.6",
     "vue3-swatches": "^1.2.3"
   },
   "devDependencies": {
     "@types/vue-select": "^3.16.2",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/compiler-sfc": "^3.3.4",
-    "@vue/eslint-config-typescript": "^8.0.0",
-    "eslint": "^8.44.0",
-    "eslint-plugin-vue": "^7.17.0",
-    "typescript": "^4.9.5"
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-vue": "^9.15.1",
+    "typescript": "^5.1.6"
   },
   "eslintConfig": {
     "root": true,
@@ -71,14 +73,18 @@
       "plugin:vue/base",
       "plugin:vue/vue3-recommended",
       "plugin:vue/vue3-essential",
-      "plugin:vue/vue3-strongly-recommended"
+      "plugin:vue/vue3-strongly-recommended",
+      "prettier",
+      "plugin:prettier/recommended"
     ],
+    "plugins": ["prettier"],
     "rules": {
       "no-console": "off",
       "no-debugger": "off",
       "@typescript-eslint/ban-ts-ignore": "off",
       "@typescript-eslint/ban-ts-comment": "off",
-      "no-async-promise-executor": "off"
+      "no-async-promise-executor": "off",
+      "prettier/prettier": ["error", {}]
     },
     "parserOptions": {
       "parser": "@typescript-eslint/parser"

package/src/App.vue

@@ -1,50 +1,45 @@
 <template>
-  <div
-    v-if="isInit"
-    :key="reload"
-    class="d-flex flex-column h-100 octopus-app"
-  >
-    <TopBar
-      v-model:displayMenu="displayMenu"
-      :is-education="false"
-    />
+  <div v-if="isInit" :key="reload" class="d-flex flex-column h-100 octopus-app">
+    <TopBar v-model:displayMenu="displayMenu" :is-education="false" />
     <LeftMenu
       v-if="displayMenu"
       :is-education="false"
-      @close="displayMenu=false"
+      @close="displayMenu = false"
     />
     <CategoryFilter />
     <router-view />
     <FooterOctopus />
-    <Player />
+    <PlayerComponent />
   </div>
 </template>
 
 <script lang="ts">
-import TopBar from '@/components/misc/TopBar.vue';
-import FooterOctopus from '@/components/misc/Footer.vue';
-import Player from '@/components/misc/player/Player.vue';
-import CategoryFilter from '@/components/display/categories/CategoryFilter.vue';
-import { state } from './stores/ParamSdkStore';
-import { Rubriquage } from './stores/class/rubrique/rubriquage';
-import { RubriquageFilter } from './stores/class/rubrique/rubriquageFilter';
-import { Rubrique } from './stores/class/rubrique/rubrique';
-import initSDK from './components/mixins/init';
-import { useFilterStore } from '@/stores/FilterStore';
-import { useGeneralStore } from '@/stores/GeneralStore';
-import { mapState, mapActions } from 'pinia';
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { Category } from './stores/class/general/category';
-const LeftMenu = defineAsyncComponent(() => import('@/components/misc/LeftMenu.vue'));
+import TopBar from "@/components/misc/TopBar.vue";
+import FooterOctopus from "@/components/misc/FooterSection.vue";
+import PlayerComponent from "@/components/misc/player/PlayerComponent.vue";
+import CategoryFilter from "@/components/display/categories/CategoryFilter.vue";
+import { state } from "./stores/ParamSdkStore";
+import { Rubriquage } from "./stores/class/rubrique/rubriquage";
+import { RubriquageFilter } from "./stores/class/rubrique/rubriquageFilter";
+import { Rubrique } from "./stores/class/rubrique/rubrique";
+import initSDK from "./components/mixins/init";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { mapState, mapActions } from "pinia";
+import { defineAsyncComponent, defineComponent } from "vue";
+import { Category } from "./stores/class/general/category";
+const LeftMenu = defineAsyncComponent(
+  () => import("@/components/misc/LeftMenu.vue"),
+);
 export default defineComponent({
-  name: 'App',
-  
+  name: "App",
+
   components: {
     TopBar,
     LeftMenu,
     CategoryFilter,
     FooterOctopus,
-    Player
+    PlayerComponent,
   },
 
   mixins: [initSDK],
@@ -57,82 +52,96 @@ export default defineComponent({
     };
   },
 
-  computed:{
-    ...mapState(useFilterStore, ['filterRubriquage', 'filterOrgaId']),
-    ...mapState(useGeneralStore, ['storedCategories']),
+  computed: {
+    ...mapState(useFilterStore, ["filterRubriquage", "filterOrgaId"]),
+    ...mapState(useGeneralStore, ["storedCategories"]),
   },
 
   watch: {
-    '$i18n.locale'(){
+    "$i18n.locale"() {
       this.$forceUpdate();
       this.reload = !this.reload;
-    }
+    },
   },
-  async created(){
+  async created() {
     await this.initApp();
   },
-  methods:{
-    ...mapActions(useFilterStore, ['filterUpdateIab', 'filterUpdateRubrique']),
-    async initApp(){
+  methods: {
+    ...mapActions(useFilterStore, ["filterUpdateIab", "filterUpdateRubrique"]),
+    async initApp() {
       await this.initSdk();
       await this.handleOrganisationFilter();
       this.handleIabIdFilter();
       this.handleRubriquesFilter();
-      this.isInit =true;
+      this.isInit = true;
     },
-    async handleOrganisationFilter(){
-      let orgaId = '';
-      if (this.$route.query.productor && 'string'===typeof this.$route.query.productor) {
+    async handleOrganisationFilter() {
+      let orgaId = "";
+      if (
+        this.$route.query.productor &&
+        "string" === typeof this.$route.query.productor
+      ) {
         orgaId = this.$route.query.productor;
-      } else if(state.generalParameters.organisationId){
+      } else if (state.generalParameters.organisationId) {
         orgaId = state.generalParameters.organisationId;
       }
-      if(''===orgaId){
+      if ("" === orgaId) {
         return;
       }
       await this.selectOrganisation(orgaId);
     },
-    handleIabIdFilter(){
-      if(this.filterOrgaId){
+    handleIabIdFilter() {
+      if (this.filterOrgaId) {
         return;
       }
-      if (this.$route.query.iabId && 'string'===typeof this.$route.query.iabId) {
+      if (
+        this.$route.query.iabId &&
+        "string" === typeof this.$route.query.iabId
+      ) {
         const iabId = parseInt(this.$route.query.iabId, 10);
         const category = this.storedCategories.filter((c: Category) => {
           return c.id === iabId;
         });
-        if(category.length){
+        if (category.length) {
           this.filterUpdateIab(category[0]);
         }
       }
     },
-    handleRubriquesFilter(){
-      if(0===this.filterRubriquage.length){
+    handleRubriquesFilter() {
+      if (0 === this.filterRubriquage.length) {
         return;
       }
-      if (this.$route.query.rubriquesId && 'string'===typeof this.$route.query.rubriquesId) {
-        const arrayFilter = this.$route.query.rubriquesId.split(',');
-        const rubriquesFilter: Array<RubriquageFilter>=[];
+      if (
+        this.$route.query.rubriquesId &&
+        "string" === typeof this.$route.query.rubriquesId
+      ) {
+        const arrayFilter = this.$route.query.rubriquesId.split(",");
+        const rubriquesFilter: Array<RubriquageFilter> = [];
         const filterLength = arrayFilter.length;
         for (let index = 0; index < filterLength; index++) {
-          const rubriqueFilter = arrayFilter[index].split(':');
+          const rubriqueFilter = arrayFilter[index].split(":");
           const rubriquage = this.filterRubriquage.find((x: Rubriquage) => {
             return x.rubriquageId === parseInt(rubriqueFilter[0]);
           });
-          if(rubriquage){
+          if (rubriquage) {
             const rubrique = rubriquage.rubriques.find((x: Rubrique) => {
               return x.rubriqueId === parseInt(rubriqueFilter[1]);
             });
-            rubriquesFilter.push({rubriquageId: rubriquage.rubriquageId, rubriqueId:rubrique.rubriqueId, nameRubriquage: rubriquage.title, nameRubrique :rubrique.name});
+            rubriquesFilter.push({
+              rubriquageId: rubriquage.rubriquageId,
+              rubriqueId: rubrique.rubriqueId,
+              nameRubriquage: rubriquage.title,
+              nameRubrique: rubrique.name,
+            });
           }
         }
-        if(rubriquesFilter.length){
+        if (rubriquesFilter.length) {
           this.filterUpdateRubrique(rubriquesFilter);
         }
       }
-    }
-  }
-})
+    },
+  },
+});
 </script>
 
 <style lang="scss" src="@/assets/octopus-library.scss"></style>

package/src/api/classicCrud.ts

@@ -1,16 +1,16 @@
 import axios from "axios";
 enum ModuleApi {
-    DEFAULT = 0,
-    MEDIA = 1,
-    COMMENT = 2,
-    KEYCLOAK = 3,
-    FRONTOFFICE = 4,
-    PLAYER = 6,
-    STORAGE = 8,
-    STUDIO = 9,
-    PROCESSOR= 10,
-    SPEECHTOTEXT=11
-  }
+  DEFAULT = 0,
+  MEDIA = 1,
+  COMMENT = 2,
+  KEYCLOAK = 3,
+  FRONTOFFICE = 4,
+  PLAYER = 6,
+  STORAGE = 8,
+  STUDIO = 9,
+  PROCESSOR = 10,
+  SPEECHTOTEXT = 11,
+}
 /* eslint-disable */
 export default {
     async fetchData<Type>(moduleName: ModuleApi,wsPath:string, forceRefresh?:boolean): Promise<Type>{
@@ -30,4 +30,4 @@ export default {
         await axios.delete('/mock');
     },
 };
-/* eslint-enable */ 
+/* eslint-enable */

package/src/api/initialize.ts

@@ -5,4 +5,4 @@ export default{
     return true;
   },
 };
-/* eslint-enable */
+/* eslint-enable */

package/src/components/display/aggregator/RssSection.vue

@@ -3,6 +3,6 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({})
-</script>
+import { defineComponent } from "vue";
+export default defineComponent({});
+</script>

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

@@ -13,56 +13,65 @@
     :width="width"
     :is-disabled="isDisabled"
     :no-deselect="noDeselect"
-    @onSearch="onSearchCategory"
+    @on-search="onSearchCategory"
     @selected="onCategorySelected"
   />
 </template>
 
 <script 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'
+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
+    ClassicMultiselect,
   },
   props: {
-    defaultanswer: { default: '', type: String },
-    width: { default: '100%', type: String },
+    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> },
+    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},
+    categorySelectedArray: {
+      default: undefined,
+      type: Array as () => Array<number>,
+    },
+    inModal: { default: false, type: Boolean },
+    noDeselect: { default: true, type: Boolean },
   },
-  emits: ['update:categorySelected','update:categorySelectedArray','selected'],
+  emits: [
+    "update:categorySelected",
+    "update:categorySelectedArray",
+    "selected",
+  ],
   data() {
     return {
       maxElement: 50 as number,
-      category: undefined as Category|undefined,
-      categoryForArray: [] as Array<Category>|undefined,
+      category: undefined as Category | undefined,
+      categoryForArray: [] as Array<Category> | undefined,
     };
   },
 
-
   computed: {
-    ...mapState(useGeneralStore, ['storedCategories']),
-    categoriesChosen(): Array<Category>{
-      if(this.initCategories){
+    ...mapState(useGeneralStore, ["storedCategories"]),
+    categoriesChosen(): Array<Category> {
+      if (this.initCategories) {
         return this.initCategories;
       }
       return this.storedCategories;
     },
     categoriesOrdered(): Array<Category> {
-      let allCategoriesOrdered = [...this.categoriesChosen].sort((a: Category, b: Category) =>
-        a.name > b.name ? 1 : -1
-      )
-      if(!this.displayAllCategories){
+      let allCategoriesOrdered = [...this.categoriesChosen].sort(
+        (a: Category, b: Category) => (a.name > b.name ? 1 : -1),
+      );
+      if (!this.displayAllCategories) {
         allCategoriesOrdered = allCategoriesOrdered.filter((c: Category) => {
           return c.podcastCount;
         });
@@ -72,87 +81,91 @@ export default defineComponent({
       }
       return allCategoriesOrdered;
     },
-    getDefaultCategory(): Category|undefined{
-      if(''===this.defaultanswer){
+    getDefaultCategory(): Category | undefined {
+      if ("" === this.defaultanswer) {
         return undefined;
       }
-      return {id: 0, name: this.defaultanswer};
+      return { id: 0, name: this.defaultanswer };
     },
     idClassicMultiselect(): string {
-      if (this.multiple) return 'categoryChooser' + this.multiple;
-      return 'categoryChooser';
+      if (this.multiple) return "categoryChooser" + this.multiple;
+      return "categoryChooser";
     },
-   
+
     model: {
-      get(): Category| Array<Category>|undefined{
-        return this.multiple ? this.categoryForArray:this.category; 
+      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);
+      set(value: Category | Array<Category> | undefined): void {
+        if (!this.multiple) {
+          this.category = value as Category | undefined;
           return;
         }
-        this.categoryForArray = (value as Array<Category>|undefined);
-      }
-
-    }
+        this.categoryForArray = value as Array<Category> | undefined;
+      },
+    },
   },
   watch: {
     categorySelected: {
-      immediate:true,
-      handler(){
-        if(this.categorySelected){
+      immediate: true,
+      handler() {
+        if (this.categorySelected) {
           this.initCategorySelected();
-        }else{
+        } else {
           this.category = this.getDefaultCategory;
         }
-      }
-    }
+      },
+    },
   },
- 
+
   mounted() {
     this.initCategoryArray();
   },
   methods: {
     async onSearchCategory(query?: string): Promise<void> {
       let categories = this.categoriesOrdered;
-      if(query){
+      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);
+      (
+        this.$refs.selectCategory as InstanceType<typeof ClassicMultiselect>
+      ).afterSearch(categories, categories.length);
     },
-    onCategorySelected(category: Category| Array<Category>): void {
+    onCategorySelected(category: Category | Array<Category>): void {
       if (undefined !== this.categorySelected) {
-        this.$emit('update:categorySelected', (category as Category).id);
+        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);
+        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;
+      this.category =
+        this.categoriesChosen.find((el: Category) => {
+          return el.id === this.categorySelected;
+        }) ?? this.getDefaultCategory;
     },
     initCategoryArray(): void {
-      if(!this.categoryForArray || !this.categorySelectedArray){return; }
+      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){
+        if (this.categoryForArray && item) {
           this.categoryForArray.push(item);
         }
       });
     },
   },
-})
-</script>
+});
+</script>