Merge pull request #220 from ladesa-ro/refactor/use-form-context-ever…

…ywhere

feat: turma: split serie and turma and make it work propertly; enhancements in the ui-autocomplete-api component

components/API/Form/Context/Context.ts

@@ -91,8 +91,15 @@ export const createAPIFormContext = <
 
   //
 
+  const onError = (...args: any[]) => {
+    if (import.meta.env.DEV) {
+      console.error(...args);
+    }
+  };
+
   const { handleSubmit } = form;
-  const formOnSubmit = handleSubmit(props.onSubmit);
+
+  const formOnSubmit = handleSubmit(props.onSubmit, onError);
 
   //
 

components/Section/Turmas/Form/-Helpers/schema.ts

@@ -11,10 +11,41 @@ const schema = yup.object().shape({
     id: yup.string().uuid().nullable().optional().default(null),
   }),
 
+  //
+
   periodo: yup.string().required('Período é obrigatório!').default(''),
-});
 
+  //
+
+  _: yup
+    .object({
+      modoPeriodo: yup
+        .string()
+        .oneOf(['periodo', 'serie-letra'])
+        .default('periodo'),
+
+      serie: yup.string().when('modoPeriodo', {
+        is: 'serie-letra',
+        then: (schema) => schema.required('Série é obrigatória!'),
+        otherwise: (schema) =>
+          schema
+            .transform(() => null)
+            .optional()
+            .nullable(),
+      }),
+      letra: yup.string().when('modoPeriodo', {
+        is: 'serie-letra',
+        then: (schema) => schema.required('Letra é obrigatória!'),
+        otherwise: (schema) =>
+          schema
+            .transform(() => null)
+            .optional()
+            .nullable(),
+      }),
+    })
+    .default({}),
+});
 
 export const useTurmaFormSchema = () => {
   return schema;
-}
+};

components/Section/Turmas/Form/-Helpers/typings.ts

@@ -14,4 +14,6 @@ export type TurmaFormOutput = {
   ambientePadraoAula: { id: string } | null;
 
   periodo: string;
+
+  _?: any;
 };

components/Section/Turmas/Form/-Helpers/useTurmaSubmit.ts

@@ -14,7 +14,7 @@ export const useTurmaSubmit = () => {
   const turmaSubmitBase = async (options: ITurmaHandleSubmitOptions) => {
     const { editId, values } = options;
 
-    const { imagem, ...data } = values;
+    const { _, imagem, ...data } = values;
 
     let id;
 

components/Section/Turmas/Form/Fields/Periodo/-Helpers/verificar-modalidade.ts

@@ -1,12 +1,13 @@
 import type { ModalidadeFindOneResultDto } from '@ladesa-ro/api-client-fetch';
 
 export const verificarModalidade = (
-  modalidade: ModalidadeFindOneResultDto
-): 'serie-turma' | 'periodo' | 'nao-implementado' => {
-  switch (modalidade.id) {
+  modalidade: ModalidadeFindOneResultDto | null,
+  fallbackToPeriodo = false
+): 'serie-letra' | 'periodo' | 'nao-implementado' => {
+  switch (modalidade?.id) {
     case '1f08fe79-8f99-493b-ade1-fe082b4761e1':
     case 'aab71668-9dfc-46ae-8593-99dcb616a88d': {
-      return 'serie-turma';
+      return 'serie-letra';
     }
 
     case '3ec92df1-1c11-4990-8664-f17fbbd3ca41':
@@ -16,7 +17,7 @@ export const verificarModalidade = (
     }
 
     default: {
-      return 'nao-implementado';
+      return fallbackToPeriodo ? 'periodo' : 'nao-implementado';
     }
   }
 };

components/Section/Turmas/Form/Fields/Periodo/Bruto/Bruto.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useField } from 'vee-validate';
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    required: false,
+  },
+  isLoading: {
+    type: Boolean,
+    required: false,
+  },
+});
+
+const { value: modoPeriodo } = useField('_.modoPeriodo');
+
+onMounted(() => {
+  modoPeriodo.value = 'periodo';
+});
+</script>
+
+<template>
+  <VVTextField
+    type="text"
+    name="periodo"
+    label="Período"
+    :disabled="isLoading || disabled"
+    placeholder="1° Período, 2° Período, 3° Período..."
+    v-bind="$attrs"
+  />
+</template>

components/Section/Turmas/Form/Fields/Periodo/Periodo.vue

@@ -1,46 +1,61 @@
 <script setup lang="ts">
-import { useTurmaFormValues } from '../../-Helpers/context';
+import { useField } from 'vee-validate';
 import { QuerySuspenseBehaviourMode } from '../../../../../../integrations';
 import { verificarModalidade } from './-Helpers/verificar-modalidade';
 
+//
+
+const FALLBACK_TO_PERIODO = true;
+
+//
+
 type Props = {
   disabled?: boolean;
   isLoading?: boolean;
 };
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
-const formValues = useTurmaFormValues();
+//
 
-const { curso: cursoSelecionado, query } = await useApiCursosFindOne(
-  computed(() => formValues.value.curso?.id),
-  {
-    mode: QuerySuspenseBehaviourMode.NEVER_WAIT,
-  }
-);
+const { value: cursoId } = useField<string | null>('curso.id');
+
+const { curso: cursoSelecionado, query } = await useApiCursosFindOne(cursoId, {
+  mode: QuerySuspenseBehaviourMode.NEVER_WAIT,
+});
+
+//
 
 const isLoading = computed(() => props.isLoading || unref(query.isLoading));
 
 const estrategiaModalidade = computed(() => {
-  return (
-    cursoSelecionado.value &&
-    verificarModalidade(cursoSelecionado.value.modalidade)
-  );
-});
+  if (cursoSelecionado.value) {
+    const estrategiaAutomatica = verificarModalidade(
+      cursoSelecionado.value.modalidade,
+      FALLBACK_TO_PERIODO
+    );
 
-const FALLBACK_TO_PERIODO = true;
+    if (estrategiaAutomatica !== 'nao-implementado') {
+      return estrategiaAutomatica;
+    }
+  }
+
+  if (FALLBACK_TO_PERIODO) {
+    return 'periodo';
+  }
+
+  return null;
+});
 </script>
 
 <template>
-  <SectionTurmasFormFieldsPeriodoSerieTurma
-    v-if="cursoSelecionado && estrategiaModalidade === 'serie-turma'"
+  <SectionTurmasFormFieldsPeriodoSerieLetra
+    v-if="estrategiaModalidade === 'serie-letra'"
     :is-loading="isLoading"
     :disabled="disabled"
   />
 
-  <template
-    v-else-if="FALLBACK_TO_PERIODO || estrategiaModalidade === 'periodo'"
-  >
+  <template v-else-if="estrategiaModalidade === 'periodo'">
     <SectionTurmasFormFieldsPeriodoBruto
       :is-loading="isLoading"
       :disabled="disabled"
@@ -50,7 +65,7 @@ const FALLBACK_TO_PERIODO = true;
   <template v-else-if="cursoSelecionado">
     <v-alert type="warning">
       O sistema ainda não suporta o cadastro de turmas para a modalidade
-      {{ cursoSelecionado.modalidade.nome }}.
+      <span>"{{ cursoSelecionado.modalidade.nome }}".</span>
     </v-alert>
   </template>
 </template>

components/Section/Turmas/Form/Fields/Periodo/SerieLetra/SerieLetra.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { useField } from 'vee-validate';
+import { useSplittedSerieLetra } from './composables/useSplittedSerieLetra';
+
+type Props = {
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+defineProps<Props>();
+
+const { value: formPeriodo } = useField<string>('periodo');
+
+const { value: formSerie } = useField<string>('_.serie');
+const { value: formLetra } = useField<string>('_.letra');
+
+const { serie, letra } = useSplittedSerieLetra(formPeriodo);
+
+watch(
+  [serie, letra],
+  ([serie, letra]) => {
+    formSerie.value = serie;
+    formLetra.value = letra;
+  },
+  { immediate: true }
+);
+
+const { value: modoPeriodo } = useField('_.modoPeriodo');
+
+onMounted(() => {
+  requestIdleCallback(() => {
+    modoPeriodo.value = 'serie-letra';
+  });
+});
+</script>
+
+<template>
+  <div class="grid grid-cols-[2fr,1fr] gap-4">
+    <VVTextField
+      type="text"
+      name="_.serie"
+      :disabled="isLoading || disabled"
+      v-model="serie"
+      label="Série"
+      placeholder="1°, 2°, 3°..."
+    />
+
+    <VVTextField
+      type="text"
+      name="_.letra"
+      :disabled="isLoading || disabled"
+      label="Letra"
+      v-model="letra"
+      placeholder="A, B, C..."
+    />
+  </div>
+</template>

components/Section/Turmas/Form/Fields/Periodo/SerieLetra/composables/useSplittedSerieLetra.ts

@@ -0,0 +1,83 @@
+export const splitPeriodo = (periodo: string) => {
+  const [serie, letra] = periodo.split(' ');
+
+  return {
+    serie,
+    letra,
+  };
+};
+
+export const joinPeriodo = (serie: string, letra: string) => {
+  return `${serie.replace(/ /g, '')} ${letra.replace(/ /g, '')}`;
+};
+
+const getModifiedSplitted = (
+  currentPeriodo: string,
+  newSerie: string | null,
+  newLetra: string | null
+) => {
+  const currentSplitted = splitPeriodo(currentPeriodo);
+
+  return {
+    serie: newSerie !== null ? newSerie : currentSplitted.serie,
+    letra: newLetra !== null ? newLetra : currentSplitted.letra,
+  };
+};
+
+const getModifiedCombined = (
+  currentPeriodo: string,
+  newSerie: string | null,
+  newLetra: string | null
+) => {
+  const { serie, letra } = getModifiedSplitted(
+    currentPeriodo,
+    newSerie,
+    newLetra
+  );
+
+  return joinPeriodo(serie, letra);
+};
+
+export const useSplittedSerieLetra = (periodo: Ref<string>) => {
+  const splittedSerieLetra = computed(() => splitPeriodo(periodo.value));
+
+  const modify = (serie: string | null, letra: string | null) => {
+    periodo.value = getModifiedCombined(unref(periodo), serie, letra);
+  };
+
+  const modifySerie = (serie: string) => {
+    return modify(serie, null);
+  };
+
+  const modifyLetra = (letra: string) => {
+    return modify(null, letra);
+  };
+
+  const serie = computed({
+    get: () => {
+      return unref(splittedSerieLetra).serie;
+    },
+
+    set: (value) => {
+      modifySerie(value);
+    },
+  });
+
+  const letra = computed({
+    get: () => {
+      return unref(splittedSerieLetra).letra;
+    },
+    set: (value) => {
+      modifyLetra(value);
+    },
+  });
+
+  return {
+    serie,
+    letra,
+    modify,
+    modifyLetra,
+    modifySerie,
+    splittedSerieLetra,
+  };
+};