Showing options in type data and granularity

Author: marcmatias

src/common.js

@@ -9,21 +9,21 @@ export const formatToApi = ({
   if (form) {
     for (let formField in form) {
       switch (formField) {
-        case "types":
         case "local":
-        case "granuralities":
           if (form[formField] && form[formField].length) {
             routerResult[formField] = form[formField];
           }
           break;
-        case "periodStart":
         case "periodEnd":
+        case "periodStart":
           if (form[formField]) {
             routerResult[formField] = formatDate(form[formField]);
           }
           break;
         case "locals":
         case "sicksImmunizers":
+        case "types":
+        case "granularities":
           // Do Nothing
           break;
         default:

src/components/main-card.js

@@ -49,8 +49,8 @@ export const mainCard = {
           "periods",
           "periodStart",
           "periodEnd",
-          "granurality",
-          "granuralities"
+          "granularity",
+          "granularities"
         ],
         base: "form",
         mutation: "UPDATE_FORM"
@@ -133,7 +133,7 @@ export const mainCard = {
         store.state.form.period,
         store.state.form.periodStart,
         store.state.form.periodEnd,
-        store.state.form.granurality,
+        store.state.form.granularity,
         store.state.tab,
         store.state.tabBy
       ],
@@ -147,6 +147,8 @@ export const mainCard = {
       await store.dispatch("updateSicksImmunizers", "sicks")
       // Set locals options
       store.dispatch("updateLocals", "sicks")
+      store.dispatch("updateTypes")
+      store.dispatch("updateGranularities")
 
       // TODO: How years range will work
       // TODO: Get states from API

src/components/sub-select.js

@@ -150,12 +150,10 @@ export const subSelect = {
       </n-form-item>
       <n-form-item label="Tipo de dado">
         <n-select
-          v-model="type"
+          v-model:value="type"
           :options="types"
           style="width: 200px"
           placeholder="Selecione Tipo de dado"
-          multiple
-          disabled
         />
       </n-form-item>
       <n-form-item label="Estados">
@@ -201,8 +199,6 @@ export const subSelect = {
           :options="granularities"
           style="width: 200px"
           placeholder="Selecione Granularidade"
-          multiple
-          disabled
         />
       </n-form-item>
     </section>

src/exampleData.js

@@ -1,3 +1,14 @@
+export const types = [
+  { label: 'Cobertura', value: 'Cobertura' },
+  { label: 'Abandono', value: 'Abandono' },
+  { label: 'Homogeneidade', value: 'Homogeneidade' }
+];
+
+export const granularities = [
+  { label: 'Municípios', value: 'Municípios' },
+  { label: 'Região de saúde', value: 'Região de saúde' },
+];
+
 export const ufs = [
   { label: 'AC', value: 'AC' },
   { label: 'AL', value: 'AL' },
@@ -26,5 +37,5 @@ export const ufs = [
   { label: 'SP', value: 'SP' },
   { label: 'SE', value: 'SE' },
   { label: 'TO', value: 'TO' }
-]
+];
 

src/store.js

@@ -1,7 +1,7 @@
 import { createStore } from "vuex";
 import { timestampToYear } from "./utils";
 import { DataFetcher } from "./data-fetcher";
-import { ufs } from "./exampleData";
+import { ufs, types, granularities } from "./exampleData";
 
 const getDefaultState = () => {
   return {
@@ -19,8 +19,8 @@ const getDefaultState = () => {
       periods: null,
       periodStart: null,
       periodEnd: null,
-      granurality: null,
-      granuralities: [],
+      granularity: null,
+      granularities: [],
     }
   }
 }
@@ -38,11 +38,23 @@ export default createStore({
       const result = await api.request("options");
       commit("UPDATE_FORM_SICKSIMMUNIZERS", result[type].map(x => { return { label: x, value: x } }));
     },
+    updateTypes(
+      { commit }
+    ) {
+      let t = types.map(x => x.label).sort();
+      commit("UPDATE_FORM_OPTIONS", { types: t.map((x) =>  { return { label: x, value: x } }) });
+    },
+    updateGranularities(
+      { commit }
+    ) {
+      let g = granularities.map(x => x.label).sort();
+      commit("UPDATE_FORM_OPTIONS", { granularities: g.map((x) =>  { return { label: x, value: x } })});
+    },
     updateLocals(
       { commit }
     ) {
       let locals = ufs.map(x => x.label).sort();
-      commit("UPDATE_FORM_LOCALS", locals.map((local) =>  { return { label: local, value: local } }));
+      commit("UPDATE_FORM_OPTIONS", { locals: locals.map((x) =>  { return { label: x, value: x } })});
     },
     async requestBySick(
       { state },
@@ -67,8 +79,8 @@ export default createStore({
       state.form.sicksImmunizers = payload;
       state.form.sickImmunizer = null;
     },
-    UPDATE_FORM_LOCALS(state, payload) {
-      state.form.locals = payload;
+    UPDATE_FORM_OPTIONS(state, payload) {
+      state.form[Object.keys(payload)[0]] =  Object.values(payload)[0];
     },
     UPDATE_TAB(state, payload) {
       state.tab = Object.values(payload)[0];