Skip to content

Commit fe2cc41

Browse files
gdarkogdarko
committed
Add better loading management on service level
1 parent 1e1b1d5 commit fe2cc41

File tree

22 files changed

+293
-165
lines changed

22 files changed

+293
-165
lines changed

‎app/Services/User/UserService.php‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ public function create(array $data)
9191
}
9292
// Set roles
9393
if (!empty($roles)) {
94-
$roles = array_map('intval', $roles);
9594
Bouncer::sync($record)->roles($roles);
9695
}
9796
return $record->fresh();

‎resources/js/App.vue‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,14 @@
9494
</template>
9595

9696
<script>
97-
import {onBeforeMount, reactive} from "vue";
97+
import {computed, onBeforeMount, reactive} from "vue";
9898
9999
import {trans} from '@/helpers/i18n';
100100
import Menu from "@/views/layouts/Menu";
101101
import Icon from "@/views/components/icons/Icon";
102102
import AvatarIcon from "@/views/components/icons/Avatar";
103103
import {useAuthStore} from "@/stores/auth";
104+
import {useGlobalStateStore} from "@/stores";
104105
import {useRoute} from "vue-router";
105106
import {useAlertStore} from "@/stores";
106107
import {getAbilitiesForRoute} from "@/helpers/routing";
@@ -116,8 +117,20 @@ export default {
116117
117118
const alertStore = useAlertStore();
118119
const authStore = useAuthStore();
120+
const globalStateStore = useGlobalStateStore();
119121
const route = useRoute();
120122
123+
const isLoading = computed(() => {
124+
var value = false;
125+
for(var i in globalStateStore.loadingElements) {
126+
if(globalStateStore.loadingElements[i]){
127+
value = true;
128+
break;
129+
}
130+
}
131+
return value || globalStateStore.isUILoading;
132+
})
133+
121134
const state = reactive({
122135
mainMenu: [
123136
{
@@ -183,11 +196,7 @@ export default {
183196
});
184197
185198
function onLogout() {
186-
authStore.logout().then(() => {
187-
if (!authStore.user) {
188-
window.location.href = '/login'
189-
}
190-
})
199+
authStore.logout()
191200
}
192201
193202
onBeforeMount(() => {
@@ -199,8 +208,10 @@ export default {
199208
return {
200209
state,
201210
authStore,
211+
globalStateStore,
202212
trans,
203213
onLogout,
214+
isLoading,
204215
}
205216
}
206217
};

‎resources/js/helpers/data.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,13 @@ export const clearObject = (object) => {
4848
* @returns {*}
4949
*/
5050
export const reduceProperties = (data, properties, singleProperty) => {
51-
5251
let obj = {};
5352
for (let i in data) {
5453
obj[i] = data[i];
5554
}
56-
5755
if (!Array.isArray(properties)) {
5856
properties = [properties];
5957
}
60-
6158
for (let i in properties) {
6259
if (obj.hasOwnProperty(properties[i])) {
6360
let value = obj[properties[i]];
@@ -67,7 +64,6 @@ export const reduceProperties = (data, properties, singleProperty) => {
6764
for (let j in value) {
6865
newVal[j] = value[j] && value[j].hasOwnProperty(singleProperty) ? value[j][singleProperty] : newVal;
6966
}
70-
console.log(newVal);
7167
} else if (typeof value === 'object') {
7268
newVal = value && value.hasOwnProperty(singleProperty) ? singleProperty[singleProperty] : newVal;
7369
} else {

‎resources/js/services/AuthService.ts‎

Lines changed: 48 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,83 @@
1-
import BaseService from "@/services/BaseService";
21
import axios from "axios";
2+
import BaseService from "@/services/BaseService";
3+
import {useGlobalStateStore} from "@/stores/global"
34

45
export default class AuthService extends BaseService {
56

7+
private globalStateStore;
8+
69
constructor() {
710
super();
811
this.url = '/';
912
this.setupAPI(axios.defaults.baseURL);
13+
this.globalStateStore = useGlobalStateStore();
14+
}
15+
16+
async getCurrentUser() {
17+
await this.get("/sanctum/csrf-cookie");
18+
return this.get("/api/users/auth");
1019
}
1120

1221
async forgotPassword(payload) {
13-
await this.api.get("/sanctum/csrf-cookie");
14-
return this.api.post("/forgot-password", payload);
22+
this.globalStateStore.loadingElements['forgot-password-form'] = true;
23+
await this.get("/sanctum/csrf-cookie");
24+
return this.post("/forgot-password", payload).finally(() => {
25+
this.globalStateStore.loadingElements['forgot-password-form'] = false;
26+
});
1527
}
1628

1729
async resetPassword(payload) {
18-
await this.api.get("/sanctum/csrf-cookie");
19-
return this.api.post("/reset-password", payload);
30+
this.globalStateStore.loadingElements['reset-password-form'] = true;
31+
await this.get("/sanctum/csrf-cookie");
32+
return this.post("/reset-password", payload).finally(() => {
33+
this.globalStateStore.loadingElements['reset-password-form'] = false;
34+
});
2035
}
2136

2237
async registerUser(payload) {
23-
await this.api.get("/sanctum/csrf-cookie");
24-
return this.api.post("/register", payload);
25-
}
26-
27-
async getCurrentUser() {
28-
await this.api.get("/sanctum/csrf-cookie");
29-
return this.api.get("/api/users/auth");
38+
this.globalStateStore.loadingElements['register-form'] = true;
39+
await this.get("/sanctum/csrf-cookie");
40+
return this.post("/register", payload).finally(() => {
41+
this.globalStateStore.loadingElements['register-form'] = false;
42+
});
3043
}
3144

3245
async updatePassword(payload) {
33-
await this.api.get("/sanctum/csrf-cookie");
34-
return this.api.put("/user/password", payload);
46+
this.globalStateStore.loadingElements['update-password-form'] = true;
47+
await this.get("/sanctum/csrf-cookie");
48+
return this.put("/user/password", payload).finally(() => {
49+
this.globalStateStore.loadingElements['update-password-form'] = false;
50+
});
3551
}
3652

3753
async sendVerification(payload) {
38-
await this.api.get("/sanctum/csrf-cookie");
39-
return this.api.post("/email/verification-notification", payload);
54+
this.globalStateStore.loadingElements['send-verification-form'] = true;
55+
await this.get("/sanctum/csrf-cookie");
56+
return this.post("/email/verification-notification", payload).finally(() => {
57+
this.globalStateStore.loadingElements['send-verification-form'] = false;
58+
});
4059
}
4160

4261
async updateUser(payload) {
43-
await this.api.get("/sanctum/csrf-cookie");
44-
return this.api.put("/user/profile-information", payload);
62+
this.globalStateStore.loadingElements['update-profile-form'] = true;
63+
await this.get("/sanctum/csrf-cookie");
64+
return this.put("/user/profile-information", payload).finally(() => {
65+
this.globalStateStore.loadingElements['update-profile-form'] = false;
66+
});
4567
}
4668

4769
login(payload) {
48-
return this.api.post("/login", payload);
70+
this.globalStateStore.loadingElements['login-form'] = true;
71+
return this.post("/login", payload).finally(() => {
72+
this.globalStateStore.loadingElements['login-form'] = false;
73+
});
4974
}
5075

5176
logout() {
52-
return this.api.post("/logout");
77+
this.globalStateStore.loadingElements['logout-form'] = true;
78+
return this.post("/logout", {}, {}).finally(() => {
79+
this.globalStateStore.loadingElements['logout-form'] = false;
80+
});
5381
}
5482

5583
}

‎resources/js/services/BaseService.ts‎

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
import axios from "@/plugins/axios"
22
import type {AxiosInstance} from "axios";
33

4-
import {useGlobalStateStore} from "@/stores";
5-
64
export default abstract class BaseService {
75

86
api: AxiosInstance;
97
url: string;
108

11-
protected globalStateStore;
12-
13-
constructor() {
14-
this.globalStateStore = useGlobalStateStore();
15-
}
16-
179
setupAPI(baseURL) {
1810
this.api = axios.create({
1911
baseURL: baseURL,
@@ -38,38 +30,24 @@ export default abstract class BaseService {
3830
})
3931
}
4032
return Promise.reject(error);
41-
}
33+
},
4234
)
4335
}
4436

45-
protected post(url, data, config = {}, id = null) {
46-
const self = this;
47-
self.globalStateStore.setLoading(id, true);
48-
return this.api.post(url, data, config).finally(() => {
49-
setTimeout(() => {
50-
self.globalStateStore.setLoading(id, false);
51-
},200)
52-
})
37+
protected post(url, data, config = {}) {
38+
return this.api.post(url, data, config);
39+
}
40+
41+
protected put(url, data, config = {}) {
42+
return this.api.put(url, data, config);
5343
}
5444

55-
protected get(url, config = {}, id = null) {
56-
const self = this;
57-
self.globalStateStore.setLoading(id, true);
58-
return this.api.get(url, config).finally(() => {
59-
setTimeout(() => {
60-
self.globalStateStore.setLoading(id, false);
61-
},200)
62-
})
45+
protected get(url, config = {}) {
46+
return this.api.get(url, config);
6347
}
6448

65-
protected delete(url, config = {}, id = null) {
66-
const self = this;
67-
self.globalStateStore.setLoading(id, true);
68-
return this.api.delete(url, config).finally(() => {
69-
setTimeout(() => {
70-
self.globalStateStore.setLoading(id, false);
71-
},200)
72-
})
49+
protected delete(url, config = {}) {
50+
return this.api.delete(url, config);
7351
}
7452
}
7553

‎resources/js/services/ModelService.ts‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,75 +4,85 @@ import axios from "@/plugins/axios";
44
import {useAlertStore} from "@/stores";
55
import {getResponseError} from "@/helpers/api";
66

7+
import {useGlobalStateStore} from "@/stores";
8+
79
export default abstract class ModelService extends BaseService {
810

911
constructor() {
1012
super();
1113
this.setupAPI(axios.defaults.baseURL + '/api');
1214
}
1315

14-
public create(id = null) {
15-
return this.get(this.url + `/create`, {}, id);
16+
public create() {
17+
return this.get(this.url + `/create`, {});
1618
}
1719

18-
public find(object_id, id = null) {
19-
return this.get(this.url + `/${object_id}`, {}, id);
20+
public find(object_id) {
21+
return this.get(this.url + `/${object_id}`, {});
2022
}
2123

22-
public edit(object_id, id = null) {
23-
return this.get(this.url + `/${object_id}/edit`, {}, id);
24+
public edit(object_id) {
25+
return this.get(this.url + `/${object_id}/edit`, {});
2426
}
2527

26-
public store(payload, id = null) {
28+
public store(payload) {
2729
let data = this.transformPayloadForSubmission(payload);
2830
return this.post(this.url, data, {
2931
headers: {
3032
'Content-Type': 'multipart/form-data'
3133
},
32-
},id)
34+
})
3335
}
3436

35-
public update(object_id, payload, id = null) {
37+
public update(object_id, payload) {
3638
let data = this.transformPayloadForSubmission(payload);
3739
data.append('_method', 'patch');
3840
return this.post(this.url + `/${object_id}`, data, {
3941
headers: {
4042
'Content-Type': 'multipart/form-data'
4143
},
42-
}, id);
44+
});
4345
}
4446

45-
public delete(object_id, id = null) {
46-
return super.delete(this.url + `/${id}`, {}, id);
47+
public delete(object_id) {
48+
return super.delete(this.url + `/${object_id}`, {});
4749
}
4850

49-
public index(params = {}, id = null) {
51+
public index(params = {}) {
5052
let path = this.url;
5153
let query = new URLSearchParams(params).toString();
5254
if (query) {
5355
path += '?' + query
5456
}
55-
return this.get(path, {}, id);
57+
return this.get(path, {});
5658
}
5759

58-
public handleUpdate(object_id, form, id = null) {
60+
public handleUpdate(ui_element_id, object_id, data) {
5961
const alertStore = useAlertStore();
60-
return this.update(object_id, form, id).then((response) => {
62+
const globalUserState = useGlobalStateStore();
63+
globalUserState.loadingElements[ui_element_id] = true;
64+
return this.update(object_id, data).then((response) => {
6165
let answer = response.data;
6266
alertStore.success(answer.message);
6367
}).catch((error) => {
6468
alertStore.error(getResponseError(error));
65-
});
69+
}).finally(() => {
70+
globalUserState.loadingElements[ui_element_id] = false;
71+
})
6672
}
6773

68-
public handleCreate(form, id = null) {
74+
public handleCreate(ui_element_id, data) {
6975
const alertStore = useAlertStore();
70-
return this.store(form, id).then((response) => {
76+
const globalUserState = useGlobalStateStore();
77+
globalUserState.setElementLoading(ui_element_id, true);
78+
return this.store(data).then((response) => {
7179
let answer = response.data;
7280
alertStore.success(answer.message);
7381
}).catch((error) => {
7482
alertStore.error(getResponseError(error));
75-
});
83+
}).finally(() => {
84+
globalUserState.setElementLoading(ui_element_id, false);
85+
})
7686
}
7787

7888
public transformPayloadForSubmission(payload) {

‎resources/js/services/SearchService.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default class SearchService extends BaseService {
1010
}
1111

1212
public begin(phrase, page, perPage) {
13-
return this.api.get(this.url + `/?search=${phrase}&per_page=${perPage}&page=${page}`)
13+
return this.get(this.url + `/?search=${phrase}&per_page=${perPage}&page=${page}`)
1414
}
1515

1616
}

‎resources/js/services/UserService.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class UserService extends ModelService {
1111
const formData = new FormData();
1212
formData.append("avatar", payload.avatar);
1313
formData.append('_method', 'put');
14-
return this.api.post(`/users/${id}/avatar`, formData);
14+
return this.post(`/users/${id}/avatar`, formData);
1515
}
1616

1717
}

0 commit comments

Comments
 (0)