Skip to content

Commit

Permalink
fix: Refactor InsigthsLayoutHeader
Browse files Browse the repository at this point in the history
Aldemylla committed May 13, 2024
1 parent a8ceeba commit 3dd3409
Showing 2 changed files with 96 additions and 58 deletions.
65 changes: 7 additions & 58 deletions src/layouts/InsightsLayout/Header.vue
Original file line number Diff line number Diff line change
@@ -8,28 +8,26 @@
<h1 class="header__title">
{{ isInHome ? 'Insights' : selectedDashboardLabel }}
</h1>
<section class="header__filters">
<section class="header__content">
<UnnnicSelectSmart
v-model="selectedDashboard"
:options="dashboards"
orderedByIndex
/>
<UnnnicInputDatePicker
class="filters__date-picker"
v-model="filterDate"
size="sm"
inputFormat="DD/MM/YYYY"
/>

<InsightsLayoutHeaderFilters />
</section>
</header>
</template>

<script>
import moment from 'moment';
import InsightsLayoutHeaderFilters from './HeaderFilters.vue';
export default {
name: 'InsightsLayoutHeader',
components: { InsightsLayoutHeaderFilters },
data() {
return {
dashboards: [
@@ -42,10 +40,6 @@ export default {
{ value: 'human-service', label: 'Atendimento Humano' },
],
selectedDashboard: [],
filterDate: {
start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
end: moment().format('YYYY-MM-DD'),
},
};
},
@@ -86,25 +80,6 @@ export default {
this.selectedDashboard[0] = dashboardRelativeToPath;
},
routeUpdateFilterDate() {
const { query } = this.$route;
if (query.startDate && query.endDate) {
this.filterDate = {
start: query.startDate,
end: query.endDate,
};
}
},
retainRouteQueries(newRoute, oldRoute) {
const oldQueryKeys = Object.keys(oldRoute?.query);
if (oldQueryKeys.length) {
this.$router.replace({ name: newRoute.name, query: oldRoute.query });
}
},
},
watch: {
@@ -115,17 +90,9 @@ export default {
},
$route(newRoute, oldRoute) {
if (newRoute.name !== oldRoute.name) {
this.retainRouteQueries(newRoute, oldRoute);
this.routeUpdateSelectedDashboard();
this.routeUpdateFilterDate();
}
},
filterDate(newDate) {
this.$router.replace({
name: this.$route.name,
query: { startDate: newDate.start, endDate: newDate.end },
});
},
},
};
</script>
@@ -142,7 +109,7 @@ export default {
font-family: $unnnic-font-family-primary;
line-height: $unnnic-line-height-large * 2;
}
.header__filters {
.header__content {
display: flex;
flex-direction: row;
gap: $unnnic-spacing-xs;
@@ -152,24 +119,6 @@ export default {
z-index: 2;
}
}
.filters__date-picker {
display: grid;
:deep(.unnnic-form-input) {
height: 100%;
.unnnic-icon {
// It was necessary to follow bad practices here (px) because
// of how the component was initially implemented.
top: $unnnic-spacing-sm - 1px;
}
.input {
font-size: $unnnic-font-size-body-gt;
}
}
}
}
}
</style>
89 changes: 89 additions & 0 deletions src/layouts/InsightsLayout/HeaderFilters.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<section class="insights-layout-header-filters">
<UnnnicInputDatePicker
class="filters__date-picker"
v-model="filterDate"
size="sm"
inputFormat="DD/MM/YYYY"
/>
</section>
</template>

<script>
import moment from 'moment';
export default {
name: 'InsightsLayoutHeaderFilters',
data() {
return {
filterDate: {
start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
end: moment().format('YYYY-MM-DD'),
},
};
},
methods: {
routeUpdateFilterDate() {
const { query } = this.$route;
if (query.startDate && query.endDate) {
this.filterDate = {
start: query.startDate,
end: query.endDate,
};
}
},
retainRouteQueries(newRoute, oldRoute) {
const oldQueryKeys = Object.keys(oldRoute?.query);
if (oldQueryKeys.length) {
this.$router.replace({ name: newRoute.name, query: oldRoute.query });
}
},
},
watch: {
$route(newRoute, oldRoute) {
if (newRoute.name !== oldRoute.name) {
this.retainRouteQueries(newRoute, oldRoute);
this.routeUpdateFilterDate();
}
},
filterDate(newDate) {
this.$router.replace({
name: this.$route.name,
query: { startDate: newDate.start, endDate: newDate.end },
});
},
},
};
</script>
<style lang="scss" scoped>
.insights-layout-header-filters {
display: flex;
flex-direction: row;
gap: $unnnic-spacing-xs;
.filters__date-picker {
display: grid;
:deep(.unnnic-form-input) {
height: 100%;
.unnnic-icon {
// It was necessary to follow bad practices here (px) because
// of how the component was initially implemented.
top: $unnnic-spacing-sm - 1px;
}
.input {
font-size: $unnnic-font-size-body-gt;
}
}
}
}
</style>

0 comments on commit 3dd3409

Please sign in to comment.