Skip to content

Commit b32a1a7

Browse files
deepanchaldeepanchal
committed
--wip-- [skip ci]
1 parent 91e5443 commit b32a1a7

25 files changed

+455
-460
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ module.exports = {
6868
'vue/max-attributes-per-line': 'off',
6969
'vue/multi-word-component-names': 'warn',
7070
'vue/no-reserved-component-names': 'warn',
71+
// turn off this rule for vue3. see: https://eslint.vuejs.org/rules/no-v-for-template-key.html
72+
'vue/no-v-for-template-key': 'off',
7173
},
7274

7375
settings: {

‎src/App.vue‎

Lines changed: 121 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -13,139 +13,138 @@
1313
</div>
1414
</template>
1515

16-
<script lang="ts">
17-
// @ts-nocheck TODO(tabiodun): Fix this file
16+
<script lang="ts" setup>
17+
import { computed, watch, onBeforeUnmount, ref, onMounted } from 'vue';
1818
import { mapActions, mapGetters, mapMutations } from 'vuex';
19-
import { defineComponent } from '@vue/composition-api';
19+
import { useRoute } from 'vue-router';
20+
import { useI18n } from 'vue-i18n';
2021
import CCP from '@/components/phone/CCP.vue';
21-
import Version from '@/components/Version.vue';
2222
import BannerOverlay from '@/components/notifications/BannerOverlay.vue';
2323
import { cachedGet, hash } from '@/utils/promise';
24-
import PhoneLegacy from './pages/phone_legacy/Index.vue';
24+
import useHttp from '@/use/useHttp';
2525
26+
const { t: $t } = useI18n();
27+
const route = useRoute();
2628
const defaultLayout = 'authenticated';
27-
export default defineComponent({
28-
name: 'App',
29-
components: { PhoneLegacy, CCP, Version, BannerOverlay },
30-
computed: {
31-
...mapGetters('ui', ['currentBanner']),
32-
layout() {
33-
return `${this.$route.meta?.layout || defaultLayout}-layout`;
34-
},
35-
},
36-
watch: {
37-
$route: {
38-
immediate: true,
39-
handler(to) {
40-
const newTitle = `${this.$t(to.name)}: Crisis Cleanup`;
41-
if (document.title !== newTitle) {
42-
document.title = newTitle;
43-
}
44-
},
45-
},
46-
},
47-
created(): void {
48-
if (process.env.NODE_ENV === 'development') {
49-
this.eventsInterval = setInterval(this.pushCurrentEvents, 2000);
50-
}
51-
this.$http.interceptors.request.use(function (config) {
52-
config.headers.CCU_WEB_URL = window.location.href;
53-
config.headers.CCU_PORTAL_KEY = process.env.VUE_APP_PORTAL_KEY;
54-
return config;
55-
});
56-
},
57-
beforeDestroy(): void {
58-
if (this.eventsInterval) {
59-
clearInterval(this.eventsInterval);
60-
this.eventsInterval = undefined;
29+
// const $t = (s: any) => s;
30+
const { $http } = useHttp();
31+
32+
const eventsInterval = ref<any>(null);
33+
const layout = computed(() => `${route.meta?.layout || defaultLayout}-layout`);
34+
const currentBanner = computed(() => {
35+
const { currentBanner: _currentBanner } = mapGetters('ui', ['currentBanner']);
36+
return _currentBanner;
37+
});
38+
39+
const { login, logout } = mapActions('auth', ['login', 'logout']);
40+
const { pushEvents } = mapActions('events', ['pushEvents']);
41+
const { validateBrowser } = mapActions('ui', ['validateBrowser']);
42+
const { isLoggedIn } = mapGetters('auth', ['isLoggedIn']);
43+
const { setStatuses, setWorkTypes, setLocationTypes, setPhases, setPortal } =
44+
mapMutations('enums', [
45+
'setStatuses',
46+
'setWorkTypes',
47+
'setLocationTypes',
48+
'setPhases',
49+
'setPortal',
50+
]);
51+
52+
watch(
53+
() => route,
54+
(to) => {
55+
const newTitle = `${$t(to.name)}: Crisis Cleanup`;
56+
if (document.title !== newTitle) {
57+
document.title = newTitle;
6158
}
6259
},
63-
methods: {
64-
...mapActions('auth', ['login', 'logout']),
65-
...mapActions('events', ['pushEvents']),
66-
...mapActions('ui', ['validateBrowser']),
67-
...mapGetters('auth', ['isLoggedIn']),
68-
...mapMutations('enums', [
69-
'setStatuses',
70-
'setWorkTypes',
71-
'setLocationTypes',
72-
'setPhases',
73-
'setPortal',
74-
]),
75-
async getEnums(): Promise<void> {
76-
const enums = await hash({
77-
statuses: cachedGet(
78-
`${process.env.VUE_APP_API_BASE_URL}/statuses`,
79-
{
80-
headers: {
81-
Authorization: null,
82-
},
83-
},
84-
'statuses',
85-
),
86-
workTypes: cachedGet(
87-
`${process.env.VUE_APP_API_BASE_URL}/work_types`,
88-
{
89-
headers: {
90-
Authorization: null,
91-
},
92-
},
93-
'work_types',
94-
),
95-
phases: cachedGet(
96-
`${process.env.VUE_APP_API_BASE_URL}/incidents_phases`,
97-
{
98-
headers: {
99-
Authorization: null,
100-
},
101-
},
102-
'incidents_phases',
103-
),
104-
locationTypes: cachedGet(
105-
`${process.env.VUE_APP_API_BASE_URL}/location_types`,
106-
{
107-
headers: {
108-
Authorization: null,
109-
},
110-
},
111-
'location_types',
112-
),
113-
portal: cachedGet(
114-
`${process.env.VUE_APP_API_BASE_URL}/portals/current`,
115-
{
116-
headers: {
117-
Authorization: null,
118-
},
119-
},
120-
'portal',
121-
),
122-
});
123-
this.setStatuses(enums.statuses.data.results);
124-
this.setWorkTypes(enums.workTypes.data.results);
125-
this.setLocationTypes(enums.locationTypes.data.results);
126-
this.setPhases(enums.phases.data.results);
127-
this.setPortal(enums.portal.data);
128-
},
129-
async pushCurrentEvents(): Promise<void> {
130-
if (this.isLoggedIn()) {
131-
await this.pushEvents();
132-
}
133-
},
134-
},
135-
async mounted(): Promise<void> {
136-
await this.validateBrowser();
137-
await this.getEnums();
138-
},
139-
data(): any {
140-
return {
141-
eventsInterval: null as any,
142-
};
143-
},
60+
{ immediate: true },
61+
);
62+
63+
async function getEnums(): Promise<void> {
64+
const enums = await hash({
65+
statuses: cachedGet(
66+
`${process.env.VUE_APP_API_BASE_URL}/statuses`,
67+
{
68+
headers: {
69+
Authorization: null,
70+
},
71+
},
72+
'statuses',
73+
),
74+
workTypes: cachedGet(
75+
`${process.env.VUE_APP_API_BASE_URL}/work_types`,
76+
{
77+
headers: {
78+
Authorization: null,
79+
},
80+
},
81+
'work_types',
82+
),
83+
phases: cachedGet(
84+
`${process.env.VUE_APP_API_BASE_URL}/incidents_phases`,
85+
{
86+
headers: {
87+
Authorization: null,
88+
},
89+
},
90+
'incidents_phases',
91+
),
92+
locationTypes: cachedGet(
93+
`${process.env.VUE_APP_API_BASE_URL}/location_types`,
94+
{
95+
headers: {
96+
Authorization: null,
97+
},
98+
},
99+
'location_types',
100+
),
101+
portal: cachedGet(
102+
`${process.env.VUE_APP_API_BASE_URL}/portals/current`,
103+
{
104+
headers: {
105+
Authorization: null,
106+
},
107+
},
108+
'portal',
109+
),
110+
});
111+
setStatuses(enums.statuses.data.results);
112+
setWorkTypes(enums.workTypes.data.results);
113+
setLocationTypes(enums.locationTypes.data.results);
114+
setPhases(enums.phases.data.results);
115+
setPortal(enums.portal.data);
116+
}
117+
118+
async function pushCurrentEvents(): Promise<void> {
119+
if (isLoggedIn()) {
120+
await pushEvents();
121+
}
122+
}
123+
124+
if (process.env.NODE_ENV === 'development') {
125+
eventsInterval.value = setInterval(pushCurrentEvents, 2000);
126+
}
127+
$http.interceptors.request.use(function (config) {
128+
config.headers.CCU_WEB_URL = window.location.href;
129+
config.headers.CCU_PORTAL_KEY = process.env.VUE_APP_PORTAL_KEY;
130+
return config;
131+
});
132+
133+
onMounted(async () => {
134+
await validateBrowser();
135+
await getEnums();
136+
});
137+
138+
onBeforeUnmount(() => {
139+
if (eventsInterval.value) {
140+
clearInterval(eventsInterval.value);
141+
eventsInterval.value = undefined;
142+
}
144143
});
145144
</script>
146145
<style>
147-
@import '~vue-resize/dist/vue-resize.css';
148-
@import '~vue-phone-number-input/dist/vue-phone-number-input.css';
146+
@import 'vue-resize/dist/vue-resize.css';
147+
@import 'vue-phone-number-input/dist/vue-phone-number-input.css';
149148
@lost flexbox flex;
150149
151150
html {

‎src/components/FormSelect.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
</div>
6464
</template>
6565

66-
<script>
66+
<script lang="tsx">
6767
import { xor, kebabCase, isEmpty } from 'lodash';
6868
export default {
6969
name: 'FormSelect',
@@ -289,7 +289,7 @@ export default {
289289
</script>
290290

291291
<style>
292-
@import '~vue-select/dist/vue-select.css';
292+
@import 'vue-select/dist/vue-select.css';
293293
.form-select .vs__dropdown-menu {
294294
border-radius: 0;
295295
}

‎src/components/LocationTool.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -783,8 +783,8 @@ export default {
783783
</script>
784784

785785
<style scoped>
786-
@import '~leaflet/dist/leaflet.css';
787-
@import '~@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
786+
@import 'leaflet/dist/leaflet.css';
787+
@import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
788788
789789
.select__container {
790790
@apply w-full;

‎src/components/OverlayMap.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default {
9696
</script>
9797

9898
<style>
99-
@import '~leaflet/dist/leaflet.css';
99+
@import 'leaflet/dist/leaflet.css';
100100
101101
.home-map {
102102
height: 100%;

‎src/components/PublicMap.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ export default {
234234
</script>
235235

236236
<style>
237-
@import '~leaflet/dist/leaflet.css';
237+
@import 'leaflet/dist/leaflet.css';
238238
239239
.map-svg-container svg {
240240
width: 15px;

‎src/components/WorkTypeMap.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default {
112112
</script>
113113

114114
<style>
115-
@import '~leaflet/dist/leaflet.css';
115+
@import 'leaflet/dist/leaflet.css';
116116
117117
.leaflet-data-marker svg {
118118
width: 30px;

‎src/components/WorksiteMap.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -689,7 +689,7 @@ export default {
689689
</script>
690690

691691
<style>
692-
@import '~leaflet/dist/leaflet.css';
692+
@import 'leaflet/dist/leaflet.css';
693693
694694
.map-svg-container svg {
695695
width: 25px;

‎src/components/WorksiteSearchInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</div>
4141
</template>
4242

43-
<script>
43+
<script lang="tsx">
4444
import Highlighter from 'vue-highlight-words';
4545
import Worksite from '@/models/Worksite';
4646
import User from '@/models/User';

‎src/components/admin/incidents/IncidentForm.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
:timezone="currentIncident.timezone"
3333
:popover="{ placement: 'bottom', visibility: 'click' }"
3434
>
35-
<template v-slot="{ inputValue, inputEvents }">
35+
<template #default="{ inputValue, inputEvents }">
3636
<input
3737
class="
3838
h-12
@@ -158,7 +158,7 @@
158158
:timezone="currentAni.timezone"
159159
:popover="{ placement: 'bottom', visibility: 'click' }"
160160
>
161-
<template v-slot="{ inputValue, inputEvents }">
161+
<template #default="{ inputValue, inputEvents }">
162162
<input
163163
class="
164164
h-12
@@ -199,7 +199,7 @@
199199
:timezone="currentAni.timezone"
200200
:popover="{ placement: 'bottom', visibility: 'click' }"
201201
>
202-
<template v-slot="{ inputValue, inputEvents }">
202+
<template #default="{ inputValue, inputEvents }">
203203
<input
204204
class="
205205
h-12

0 commit comments

Comments
 (0)