exchange: option api to composition api in projectsPage (and extract crudOperations method to generic one)

Author: renanjava

frontend/src/api.ts frontend/src/api/api.tsfrontend/src/api.ts renamed to frontend/src/api/api.ts

@@ -0,0 +1,35 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type Ref } from 'vue'
+import { deleteGenericEndPoint } from '@/api/api'
+
+interface CrudOptions<T> {
+  listRef: Ref<T[]>
+  onEdit: (item: T) => void
+  onCreate: () => void
+}
+
+export function useCrudOperations<T extends { id: string | number }>(
+  entityName: string,
+  options: CrudOptions<T>,
+) {
+  const { listRef, onEdit, onCreate } = options
+
+  async function handleCrudOperation(data: Record<string, any>) {
+    switch (data.event) {
+      case 'delete':
+        await deleteGenericEndPoint(entityName, data.item.id)
+        listRef.value = listRef.value.filter((item: T) => item.id !== data.item.id)
+        break
+      case 'edit':
+        onEdit(data.item)
+        break
+      case 'create':
+        onCreate()
+        break
+    }
+  }
+
+  return {
+    handleCrudOperation,
+  }
+}

frontend/src/api/utils/crud-operations.ts

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { loginEndPoint } from '../api'
+import { loginEndPoint } from '../api/api'
 
 export default defineComponent({
   name: 'LoginForm',

frontend/src/components/LoginForm.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { patchGenericEndPoint, postGenericEndPoint } from '@/api'
+import { patchGenericEndPoint, postGenericEndPoint } from '@/api/api'
 import { defineComponent } from 'vue'
 
 export default defineComponent({

frontend/src/components/ModalForm.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { getGenericEndPoint } from '@/api'
+import { getGenericEndPoint } from '@/api/api'
 import DefaultMain from '@/components/DefaultMain.vue'
 import List from '@/components/List.vue'
 import type { ICollaborators } from '@/interfaces.ts/collaborators.interface'

frontend/src/pages/CollaboratorsPage.vue

@@ -36,7 +36,7 @@ export default defineComponent({
       if (!resJson.user_id) {
         throw new Error('não foi possível encontrar nenhum usuário com esse token')
       }
-      
+
       this.username = resJson.username
     } catch (err) {
       console.error('Token inválido:', err)

frontend/src/pages/HomePage.vue

@@ -1,8 +1,8 @@
 <template>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" />
   <DefaultMain :primary-text="'Projetos'" :second-text="'Organize seu trabalho em projetos'">
-    <CreateButton :name="name" @open-modal="crudOperation" />
-    <List :list="projectsList" @edit="crudOperation" @delete="crudOperation" />
+    <CreateButton :name="name" @open-modal="handleCrudOperation" />
+    <List :list="projectsList" @edit="handleCrudOperation" @delete="handleCrudOperation" />
     <ModalForm
       :class="{ 'is-active': showEditOrCreateModal }"
       :inputData="projectNameModal"
@@ -16,71 +16,69 @@
 </template>
 
 <script lang="ts">
-import { deleteGenericEndPoint, getGenericEndPoint } from '@/api'
+import { defineComponent, ref, onMounted } from 'vue'
 import DefaultMain from '@/components/DefaultMain.vue'
 import List from '@/components/List.vue'
-import type { IProjects } from '@/interfaces.ts/projects.interface'
-import { defineComponent } from 'vue'
 import CreateButton from '../components/CreateButton.vue'
 import ModalForm from '@/components/ModalForm.vue'
+import { getGenericEndPoint } from '@/api/api'
+import { useCrudOperations } from '@/api/utils/crud-operations'
+import type { IProjects } from '@/interfaces.ts/projects.interface'
 
 export default defineComponent({
   name: 'ProjectsPage',
-  components: {
-    DefaultMain,
-    List,
-    CreateButton,
-    ModalForm,
-  },
-  data() {
+  components: { DefaultMain, List, CreateButton, ModalForm },
+  setup() {
+    const projectsList = ref<IProjects[]>([])
+    const showEditOrCreateModal = ref(false)
+    const projectNameModal = ref('')
+    const projectIdModal = ref('')
+    const event = ref('')
+    const name = 'projeto'
+
+    const { handleCrudOperation } = useCrudOperations<IProjects>('projects', {
+      listRef: projectsList,
+      onEdit: (item) => {
+        event.value = 'edit'
+        projectNameModal.value = item.name
+        projectIdModal.value = item.id
+        showEditOrCreateModal.value = true
+      },
+      onCreate: () => {
+        event.value = 'create'
+        projectIdModal.value = ''
+        projectNameModal.value = ''
+        showEditOrCreateModal.value = true
+      },
+    })
+
+    const updateListWithNewCreatedData = (data: IProjects) => {
+      projectsList.value.push(data)
+      showEditOrCreateModal.value = false
+    }
+
+    const updateListWithNewUpdatedData = (data: IProjects) => {
+      const index = projectsList.value.findIndex((p) => p.id === data.id)
+      if (index !== -1) projectsList.value[index].name = data.name
+      showEditOrCreateModal.value = false
+    }
+
+    onMounted(async () => {
+      projectsList.value = await getGenericEndPoint('projects')
+    })
+
     return {
-      projectsList: [] as IProjects[],
-      name: 'projeto',
-      showEditOrCreateModal: false,
-      projectNameModal: '',
-      projectIdModal: '',
-      event: '',
+      projectsList,
+      showEditOrCreateModal,
+      projectNameModal,
+      projectIdModal,
+      event,
+      name,
+      handleCrudOperation,
+      updateListWithNewCreatedData,
+      updateListWithNewUpdatedData,
     }
   },
-  methods: {
-    async crudOperation(data: Record<string, any>) {
-      console.log({ data })
-      switch (data.event) {
-        case 'delete':
-          await deleteGenericEndPoint('projects', data.item.id)
-          this.projectsList = this.projectsList.filter((project) => project.id != data.item.id)
-          break
-        case 'edit':
-          this.event = data.event
-          this.projectNameModal = data.item.name
-          this.projectIdModal = data.item.id
-          this.showEditOrCreateModal = true
-          break
-        case 'create':
-          this.event = data.event
-          this.projectIdModal = ''
-          this.projectNameModal = ''
-          this.showEditOrCreateModal = true
-          break
-      }
-    },
-    updateListWithNewCreatedData(data: IProjects) {
-      this.projectsList.push(data)
-      this.showEditOrCreateModal = false
-    },
-    updateListWithNewUpdatedData(data: IProjects) {
-      this.projectsList = this.projectsList.filter((project) => {
-        if (project.id === data.id) {
-          project.name = data.name
-        }
-        return project
-      })
-      this.showEditOrCreateModal = false
-    },
-  },
-  async created() {
-    this.projectsList = await getGenericEndPoint('projects')
-  },
 })
 </script>
 

frontend/src/pages/ProjectsPage.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { getGenericEndPoint } from '@/api'
+import { getGenericEndPoint } from '@/api/api'
 import DefaultMain from '@/components/DefaultMain.vue'
 import List from '@/components/List.vue'
 import type { ITasks } from '@/interfaces.ts/tasks.interface'

frontend/src/pages/TasksPage.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { getGenericEndPoint } from '@/api'
+import { getGenericEndPoint } from '@/api/api'
 import DefaultMain from '@/components/DefaultMain.vue'
 import List from '@/components/List.vue'
 import type { IUsers } from '@/interfaces.ts/users.interface'