init

app/stores/materials/types.materials.ts

@@ -0,0 +1,15 @@
+export interface MaterialsState {
+  isLoadingMaterials: boolean,
+  errorMaterials: null | string,
+  materials: Material[],
+}
+export interface Material {
+  id: number;
+  title: string;
+  short_description: string;
+  datetime: string;
+  description_html: string
+  description_json: Record<string, unknown>
+}
+
+export type MaterialSendDto = Omit<Material, 'id' | 'description_html'> & Partial<Pick<Material, 'description_html'>>;

app/stores/materials/useMaterialsStore.ts

@@ -0,0 +1,35 @@
+import type {Material, MaterialsState} from "~/stores/materials/types.materials";
+import { orderBy } from 'lodash-es'
+import dayjs from "dayjs";
+
+export const useMaterialsStore = defineStore('materials', {
+  state: (): MaterialsState => ({
+    isLoadingMaterials: false,
+    errorMaterials: null,
+    materials: [],
+  }),
+
+  getters: {
+    getMaterialsSorted: (state) => orderBy(state.materials, (item) => dayjs(item.datetime).valueOf(), 'desc'),
+    getById: (state) => (id:string): Material | undefined => state.materials.find(item => item.id === +id)
+  },
+
+  actions: {
+    async fetchMaterials() {
+      this.isLoadingMaterials = true
+      this.errorMaterials = null
+      try {
+        const {data} = await useFetch<Material[]>('/api', {key: 'fetch-materials'})
+        if (data.value) {
+          this.materials = data.value
+        }
+      } catch (e) {
+        console.log('Error:', e)
+        this.errorMaterials = String(e)
+      } finally {
+        this.isLoadingMaterials = false
+      }
+    },
+
+  }
+})