Merge branch 'refactor/typescript-define-props' into refactor/use-for…

…m-context-everywhere
ladesa-ro · Jul 24, 2024 · d9f7b59 · d9f7b59
2 parents fd68dee + d3b8148
commit d9f7b59
Show file tree

Hide file tree

Showing 31 changed files with 330 additions and 201 deletions.
diff --git a/components/Appbar/SpeechBubbles/SpeechBubbles.vue b/components/Appbar/SpeechBubbles/SpeechBubbles.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core';
 
-const props = defineProps<{ notificationsButtonEl: HTMLElement | null }>();
+type Props = {
+  notificationsButtonEl: HTMLElement | null;
+};
+
+const props = defineProps<Props>();
+
 const bubbleEl = ref(null);
 
 const boundingActivator = useElementBounding(props.notificationsButtonEl);

diff --git a/components/Pages/DashboardCalendar/Event.vue b/components/Pages/DashboardCalendar/Event.vue
@@ -2,24 +2,31 @@
 // Interface and types
 
 // Props
-const props = defineProps({
-  id: String,
-  name: String,
-  details: String,
-  locale: String,
-  color: String,
-});
+
+type Props = {
+  id?: string;
+
+  name?: string;
+  details?: string;
+  color?: string;
+
+  locale?: string;
+};
+
+const props = defineProps<Props>();
 
 // Event
 </script>
 
 <template>
   <v-card class="-event flex-shrink-0 mx-auto rounded-lg w-full" height="128px">
-    <div class="w-2 h-full" :style="{ backgroundColor: props.color! }"></div>
+    <div class="w-2 h-full" :style="{ backgroundColor: props.color }"></div>
+
     <v-container class="flex flex-col w-full h-full">
-      <p class="font-semibold">{{ props.name! }}</p>
-      <p class="font-medium h-full mb-auto">{{ props.details! }}</p>
-      <p class="font-medium">{{ props.locale! }}</p>
+      <p class="font-semibold">{{ props.name }}</p>
+      <p class="font-medium h-full mb-auto">{{ props.details }}</p>
+
+      <p class="font-medium" v-if="props.locale">{{ props.locale }}</p>
     </v-container>
   </v-card>
 </template>

diff --git a/components/Pages/DashboardCalendar/EventList.vue b/components/Pages/DashboardCalendar/EventList.vue
@@ -25,12 +25,15 @@ type EventItem = Omit<Event, 'locale' | 'type'> & {
 };
 
 // Props
-const props = defineProps({
-  year: Number,
-  steps: Array<Step>,
-  events: Array<Event>,
-  monthNum: Number,
-});
+
+type Props = {
+  year: number;
+  steps: Step[];
+  events: Event[];
+  monthNum: number;
+};
+
+const props = defineProps<Props>();
 
 // Set event data
 let allEventItems = ref<EventItem[]>([

diff --git a/components/Pages/DashboardCalendar/Month.vue b/components/Pages/DashboardCalendar/Month.vue
@@ -26,12 +26,15 @@ type Event = {
 };
 
 // Props
-const props = defineProps({
-  year: Number,
-  toggleMonth: Boolean,
-  steps: Array<Step>,
-  events: Array<Event>,
-});
+
+type Props = {
+  year: number;
+  toggleMonth: boolean;
+  steps: Step[];
+  events: Event[];
+};
+
+const props = defineProps<Props>();
 
 // Month
 const daysInTheWeek = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
@@ -244,7 +247,7 @@ onMounted(async () => {
         @click="toggleMonth(-1)"
         v-show="props.toggleMonth!"
       />
-      
+
       <!-- Month name -->
       <h1 class="font-medium text-center text-xl w-full">
         {{

diff --git a/components/Section/Ambientes/Form/Form.vue b/components/Section/Ambientes/Form/Form.vue
@@ -5,15 +5,18 @@ import { computed } from 'vue';
 import * as yup from 'yup';
 import { useApiAmbienteFindOne, useApiClient } from '~/composables';
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -68,12 +71,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esse ambiente?'
   );
 
   if (resposta) {
-    await apiClient.ambientes.ambienteDeleteById({ id: editIdRef.value });
+    await apiClient.ambientes.ambienteDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['ambientes'] });
     $emit('close');
   }

diff --git a/components/Section/Ambientes/Modal/Modal.vue b/components/Section/Ambientes/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);

diff --git a/components/Section/Blocos/Form/Form.vue b/components/Section/Blocos/Form/Form.vue
@@ -5,15 +5,18 @@ import { computed } from 'vue';
 import * as yup from 'yup';
 import { useApiBlocosFindOne, useApiClient } from '~/composables';
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -57,12 +60,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esse bloco?'
   );
 
   if (resposta) {
-    await apiClient.blocos.blocoDeleteById({ id: editIdRef.value });
+    await apiClient.blocos.blocoDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['blocos'] });
     $emit('close');
   }

diff --git a/components/Section/Blocos/Modal/Modal.vue b/components/Section/Blocos/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
@@ -23,10 +27,7 @@ const isActive = ref(false);
 
     <template v-slot:="{ isActive }">
       <v-card class="dialog-style">
-        <SectionBlocosForm
-          :editId="editId"
-          @close="isActive.value = false"
-        />
+        <SectionBlocosForm :editId="editId" @close="isActive.value = false" />
       </v-card>
     </template>
   </v-dialog>

diff --git a/components/Section/Cursos/Form/Form.vue b/components/Section/Cursos/Form/Form.vue
@@ -5,15 +5,18 @@ import { computed } from 'vue';
 import * as yup from 'yup';
 import { useApiClient, useApiCursosFindOne } from '~/composables';
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -67,12 +70,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esse curso?'
   );
 
   if (resposta) {
-    await apiClient.cursos.cursoDeleteById({ id: editIdRef.value });
+    await apiClient.cursos.cursoDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['cursos'] });
     $emit('close');
   }

diff --git a/components/Section/Cursos/Modal/Modal.vue b/components/Section/Cursos/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);

diff --git a/components/Section/Diarios/Form/Geral/02-Turmas/02-Turmas.vue b/components/Section/Diarios/Form/Geral/02-Turmas/02-Turmas.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue';
 
-const props = defineProps({
-  searchBarText: String,
-});
+//
+
+type Props = {
+  searchBarText?: string;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const $emit = defineEmits(['close', 'back', 'next']);
 
@@ -79,10 +85,7 @@ const selectRole = (role: string) => {
                     </template>
 
                     <template #actions>
-                      <v-radio 
-                        class="detail"
-                        :value="disciplina.id"
-                      ></v-radio>
+                      <v-radio class="detail" :value="disciplina.id"></v-radio>
                     </template>
 
                     <UICardLine>
@@ -96,7 +99,7 @@ const selectRole = (role: string) => {
             </div>
 
             <div v-if="showGroupingSection" class="Seaction-Grouping pt-3">
-              <UIDaySelectionClass/>
+              <UIDaySelectionClass />
             </div>
           </v-expansion-panel-text>
         </v-expansion-panel>
@@ -110,9 +113,9 @@ const selectRole = (role: string) => {
         <UIButtonModalAddNewClassButton />
       </div>
       <div class="button-group">
-        <UIButtonModalBackButton @click="backForm"/>
+        <UIButtonModalBackButton @click="backForm" />
         <UIButtonModalCancelButton @click="closeForm" />
-        <UIButtonModalSaveButton/>
+        <UIButtonModalSaveButton />
       </div>
     </div>
   </v-form>