Skip to content

Commit 4c6e05b

Browse files
marcmatiasmarcmatias
committed
WIP
1 parent 54211c3 commit 4c6e05b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+5505
-147
lines changed

‎index.html‎

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,53 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="stylesheet" href="./src/assets/css/style.css" />
7+
<link rel="icon" href="vite.svg" />
78
<title>Map Chart Table</title>
89
</head>
910
<body>
11+
<button class="glossary">glossary</button>
12+
<button class="about">about</button>
13+
<button class="about-vaccines">about vaccines</button>
14+
<button class="error-example">error example</button>
15+
<button class="extra">Extra filter button</button>
1016
<div id="app"></div>
11-
<!-- Main App -->
17+
18+
<!-- Import as file -->
19+
<!--
20+
<script src="./dist/mct-1.6.1.js"></script>
21+
<script>
22+
const dashboard = new MCT({ api: "http://localhost" });
23+
</script>
24+
-->
25+
26+
<!-- Import as module -->
27+
1228
<script type="module">
13-
import Mct from "./src/main.js";
14-
const dashboard = new Mct("http://localhost:5000/");
29+
import MCT from "./src/main.js";
30+
const dashboard = new MCT({ api: "http://localhost" });
31+
32+
document.querySelector(".glossary").addEventListener("click", () => {
33+
dashboard.genericModal("Glossário", "?slug=glossario-vacinabr")
34+
});
35+
36+
document.querySelector(".about").addEventListener("click", () => {
37+
dashboard.genericModal("Sobre", "?slug=sobre-vacinabr")
38+
});
39+
40+
document.querySelector(".about-vaccines").addEventListener("click", () => {
41+
dashboard.genericModal("Sobre Vacinas", "?slug=sobre-vacinas-vacinabr")
42+
});
43+
44+
document.querySelector(".error-example").addEventListener("click", () => {
45+
dashboard.genericModal("Error example", "?slug=anything")
46+
});
47+
48+
49+
dashboard.genericModalWithFilterButton("Extra filter button", "?slug=sobre-vacinabr")
50+
51+
document.querySelector(".extra").addEventListener("click", () => {
52+
dashboard.genericModal("Extra filter button", "?slug=sobre-vacinabr")
53+
});
1554
</script>
1655
</body>
1756
</html>

‎oldSrc/components/main-card.js‎

Lines changed: 0 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -83,146 +83,6 @@ export const mainCard = {
8383
mapTooltip.value = tooltip;
8484
};
8585

86-
const URLquery = { ...route.query };
87-
const removeQueryFromRouter = (key) => {
88-
delete URLquery[key];
89-
message.warning('URL contém valor inválido para filtragem')
90-
router.replace({ query: URLquery });
91-
}
92-
93-
const setStateFromUrl = () => {
94-
const formState = store.state.content.form
95-
const routeArgs = { ...route.query };
96-
const routerResult = {};
97-
const routerResultTabs = {};
98-
99-
if (!Object.keys(routeArgs).length) {
100-
return;
101-
}
102-
103-
for (const [key, value] of Object.entries(routeArgs)) {
104-
if (key === "sickImmunizer") {
105-
if (value.includes(",")) {
106-
const values = value.split(",")
107-
const sicks = formState["sicks"].map(el => el.value)
108-
const immunizers = formState["immunizers"].map(el => el.value)
109-
if (
110-
values.every(val => sicks.includes(val)) ||
111-
values.every(val => immunizers.includes(val))
112-
) {
113-
routerResult[key] = values;
114-
} else {
115-
removeQueryFromRouter(key);
116-
}
117-
} else if (
118-
formState["sicks"].some(el => el.value === value) ||
119-
formState["immunizers"].some(el => el.value === value)
120-
) {
121-
routerResult[key] = value;
122-
} else {
123-
removeQueryFromRouter(key);
124-
}
125-
} else if (key === "city") {
126-
// TODO: define if cities will be in URL state
127-
// const values = value.split(",")
128-
// const cities = formState["cities"].map(el => el.value)
129-
// if (values.every(val => cities.includes(val))) {
130-
// routerResult[key] = values;
131-
// } else {
132-
// removeQueryFromRouter(key);
133-
// }
134-
} else if (key === "local") {
135-
const values = value.split(",")
136-
const locals = formState["locals"].map(el => el.value)
137-
if (values.every(val => locals.includes(val))) {
138-
routerResult[key] = values;
139-
} else {
140-
removeQueryFromRouter(key);
141-
}
142-
} else if (key === "granularity") {
143-
formState["granularities"].some(el => el.value === value) ?
144-
routerResult[key] = value : removeQueryFromRouter(key);
145-
} else if (key === "dose") {
146-
formState["doses"].some(el => el.value === value) ?
147-
routerResult[key] = value : removeQueryFromRouter(key);
148-
} else if (key === "type") {
149-
formState["types"].some(el => el.value === value) ?
150-
routerResult[key] = value : removeQueryFromRouter(key);
151-
} else if (key === "tab") {
152-
["map", "chart", "table"].some(el => el === value) ?
153-
routerResultTabs[key] = value : removeQueryFromRouter(key);
154-
} else if (key === "tabBy") {
155-
["immunizers", "sicks"].some(el => el === value) ?
156-
routerResultTabs[key] = value : removeQueryFromRouter(key);
157-
} else if (["periodStart", "periodEnd"].includes(key)) {
158-
const resultValue = Number(value)
159-
formState["years"].some(el => el.value === resultValue) ?
160-
routerResult[key] = resultValue : removeQueryFromRouter(key);
161-
} else if (key === "period") {
162-
routerResult[key] = Number(value);
163-
} else if (value.includes(",")) {
164-
routerResult[key] = value.split(",");
165-
} else {
166-
routerResult[key] = value ?? null;
167-
}
168-
}
169-
170-
store.commit("content/UPDATE_FROM_URL", {
171-
tab: routerResultTabs?.tab ? routerResultTabs.tab : "map",
172-
tabBy: routerResultTabs?.tabBy ? routerResultTabs.tabBy : "sicks",
173-
form: { ...routerResult },
174-
});
175-
};
176-
177-
const setUrlFromState = () => {
178-
const routeArgs = { ...route.query };
179-
let stateResult = formatToApi({
180-
form: { ...store.state.content.form },
181-
tab: store.state.content.tab !== "map" ? store.state.content.tab : undefined,
182-
tabBy: store.state.content.tabBy !== "sicks" ? store.state.content.tabBy : undefined,
183-
});
184-
if (Array.isArray(stateResult.sickImmunizer) && stateResult.sickImmunizer.length) {
185-
stateResult.sickImmunizer = [...stateResult?.sickImmunizer].join(",");
186-
}
187-
if (Array.isArray(stateResult.local) && stateResult.local.length) {
188-
stateResult.local = [...stateResult?.local].join(",");
189-
}
190-
// TODO: define if cities will be in URL state
191-
// if (Array.isArray(stateResult.city) && stateResult.city.length) {
192-
// stateResult.city = [...stateResult?.city].join(",");
193-
// }
194-
delete stateResult.city
195-
196-
if (!JSON.stringify(routeArgs) == JSON.stringify(stateResult)) {
197-
return;
198-
}
199-
200-
return router.replace({ query: stateResult });
201-
}
202-
203-
watch(() => {
204-
const form = store.state.content.form;
205-
return [
206-
form.dose,
207-
form.granularity,
208-
form.granularity,
209-
form.local,
210-
form.period,
211-
form.periodEnd,
212-
form.periodStart,
213-
form.sickImmunizer,
214-
form.type,
215-
// TODO: define if cities will be in URL state
216-
// form.city,
217-
store.state.content.tab,
218-
store.state.content.tabBy
219-
]
220-
},
221-
async () => {
222-
setUrlFromState();
223-
}
224-
)
225-
22686
onMounted(async () => {
22787
getWindowWidth();
22888
await store.dispatch("content/updateFormSelect");

‎oldSrc/components/sub-select.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const subSelect = {
2929
const sickTemp = ref(null);
3030
const localTemp = ref(null);
3131
const citiesTemp = ref([]);
32+
3233
const disableLocalSelect = computed(() => store.getters[`content/disableLocalSelect`]);
3334
const sick = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "sickImmunizer" }));
3435
const sicks = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "sicks" }));
@@ -47,6 +48,7 @@ export const subSelect = {
4748
const years = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "years" }))
4849
const city = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "city" }))
4950
const cities = computed(computedVar({ store, base: "form", mutation: "content/UPDATE_FORM", field: "cities" }))
51+
5052
const selectRefsMap = reactive({});
5153
const resizeObserver = ref(null);
5254
const isLoadingCities = ref(false);

‎oldSrc/components/table.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ref, onMounted, computed, watch } from "vue/dist/vue.esm-bundler";
1+
import { ref, onMounted, onBeforeUnomount, computed, watch } from "vue/dist/vue.esm-bundler";
22
import { NButton, NDataTable, NSelect, NEmpty } from "naive-ui";
33
import { computedVar, formatToTable } from "../utils";
44
import { useStore } from 'vuex';
@@ -17,14 +17,16 @@ export const table = {
1717
},
1818
setup() {
1919
const store = useStore();
20+
2021
const rows = ref([]);
2122
const columns = ref([]);
2223
const page = ref(1);
2324
const pageCount = ref(0);
2425
const pageTotalItems = ref(10);
25-
const loading = computed(computedVar({ store, mutation: "content/UPDATE_LOADING", field: "loading" }));
2626
const sorter = ref(null);
2727

28+
const loading = computed(computedVar({ store, mutation: "content/UPDATE_LOADING", field: "loading" }));
29+
2830
const pagination = computed(() => ({
2931
page: page.value,
3032
pageCount: pageCount.value,
@@ -74,7 +76,11 @@ export const table = {
7476

7577
onMounted(async () => {
7678
updateTableContent()
77-
});
79+
})
80+
81+
onBeforeUnomount(() => {
82+
tableStore.resetState()
83+
})
7884

7985
watch(
8086
() => {

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"private": true,
44
"version": "1.6.1",
55
"type": "module",
6+
"main": "dist/mct.js",
67
"scripts": {
78
"development": "run-p start dev",
89
"dev": "vite --host",

‎src/assets/css/base.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
:root {
2+
--body-color: rgba(0, 0, 0, 0.87);
3+
--text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
4+
--gray-color: #ececec;
5+
--gray-color-light: #fafafa;
6+
--primary-color: #e96f5f;
7+
--label-color: #827e7e;
8+
--embed-color: #fafafa;
9+
10+
--padding-container: 200px;
11+
}
12+
13+
/* MediaQuery */
14+
15+
@media (max-width: 1368px) {
16+
:root {
17+
--padding-container: 20px;
18+
}
19+
}

‎src/assets/css/components/collapsable.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.n-collapse-item.n-collapse-item--left-arrow-placement {
2+
outline: 1px solid #e0e0e0;
3+
border: none;
4+
border-radius: 3px;
5+
padding: 8px;
6+
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
7+
}
8+
9+
.n-collapse
10+
.n-collapse-item
11+
.n-collapse-item__header
12+
.n-collapse-item__header-main {
13+
font-weight: 500;
14+
}
15+
16+
.n-collapse .n-collapse-item:not(:first-child) {
17+
border-top: none !important;
18+
}
19+
20+
.n-collapse .n-collapse-item .n-collapse-item__header {
21+
padding: 0px;
22+
}
23+
24+
.n-collapse .n-collapse-item__header-extra .bi {
25+
fill: var(--primary-color);
26+
}

‎src/assets/css/components/container.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* Components Styles */
2+
3+
.main {
4+
display: flex;
5+
flex-direction: column;
6+
}
7+
8+
.main-content {
9+
position: relative;
10+
max-width: 1368px;
11+
margin: 0px auto;
12+
padding: 0px 24px;
13+
}
14+
15+
.main-content--sub {
16+
margin-bottom: 64px;
17+
}
18+
19+
.container-elements {
20+
display: flex;
21+
justify-content: end;
22+
}
23+
24+
.container-elements--table {
25+
display: flex;
26+
gap: 12px;
27+
padding-bottom: 16px;
28+
}
29+
30+
.container-elements--theme {
31+
padding: 15px 65px;
32+
}
33+
34+
.container-elements__selects {
35+
display: flex;
36+
gap: 12px;
37+
}
38+
39+
.container-input-card {
40+
display: flex;
41+
gap: 8px;
42+
justify-content: end;
43+
}
44+
45+
.element-hidden {
46+
display: none !important;
47+
}
48+
49+
@media (max-width: 800px) {
50+
.container-elements--table {
51+
display: flex;
52+
flex-direction: column;
53+
gap: 8px;
54+
}
55+
.container-input-card {
56+
flex-direction: column;
57+
}
58+
}

0 commit comments

Comments
 (0)