/
Finish.vue
148 lines (124 loc) · 5.5 KB
/
Finish.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<template>
<div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden">
<div class="pr-10">
<WizardSteps :active_state="active"></WizardSteps>
</div>
<div modal-container class="flex flex-col justify-between" style="height:565px;">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
</div>
<div class="flex flex-col lg:flex-row mt-6">
<div class="w-full lg:w-1/2 ltr:pr-10 rtl:pl-10 mt-3">
<div class="grid sm:grid-cols-6">
<h1 class="sm:col-span-6 text-black-300 mb-2">
{{ translations.finish.recommended_apps }}
</h1>
<div v-for="(item, index) in modules" :key="index" class="sm:col-span-6 mb-6">
<a :href="route_url + '/apps/' + item.slug" class="flex items-center">
<div class="w-1/4">
<img v-for="(file, indis) in item.files" :key="indis" v-if="file.media_type == 'image' && file.pivot.zone == 'thumbnail'"
:src="file.path_string"
:alt="item.name"
class="rounded-lg object-cover"
/>
</div>
<div class="w-3/4 ltr:pl-8 rtl:pr-8">
<span class="font-medium">
{{ item.name }}
</span>
<div class="text-black-300 text-sm my-2 line-clamp-2 h-10" v-html="item.description"></div>
</div>
</a>
</div>
</div>
<div class="lg:hidden">
<base-button class="btn flex items-center justify-center text-base disabled:opacity-50 relative mt-5 mx-auto bg-green hover:bg-gray-100 text-white rounded-md py-3 px-5 font-semibold" @click="finish()">
{{ translations.finish.create_first_invoice }}
</base-button>
</div>
</div>
<div class="relative w-1/2 right-0 ltr:pl-10 rtl:pr-10 mt-3 hidden lg:flex lg:flex-col">
<div class="bg-purple rounded-tl-lg rounded-bl-lg p-6">
<div class="w-48 text-white rtl:float-left rtl:text-left text-2xl font-semibold leading-9">
{{ translations.finish.apps_managing }}
</div>
<div style="width:372px; height:372px;"></div>
<img :src="image_src" class="absolute top-0 right-2" alt="" />
</div>
<base-button
class="relative flex items-center justify-center text-base rounded-lg m-auto bottom-48 bg-white hover:bg-gray-100 text-purple py-3 px-5 font-semibold disabled:bg-gray-100 "
:disabled="anchor_loading"
@click="finish()"
>
<i v-if="anchor_loading" class="animate-submit_second delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-2.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit_second before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit_second before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': anchor_loading}]">
{{ translations.finish.create_first_invoice }}
</span>
</base-button>
</div>
</div>
</div>
</div>
</template>
<script>
import WizardSteps from "./Steps.vue";
export default {
name: "Finish",
components: {
WizardSteps
},
props: {
modules: {
type: [Object, Array],
},
translations: {
type: [Object, Array],
},
pageLoad: {
type: [Boolean, String]
}
},
data() {
return {
active: 3,
route_url: url,
image_src: app_url + "/public/img/wizard-modules.png",
anchor_loading: false
};
},
created() {
window.axios({
method: "PATCH",
url: url + "/wizard/finish",
})
.then((response) => {
})
.catch((error) => {
this.$notify({
message: this.translations.finish.error_message,
timeout: 1000,
icon: "",
type: 0
});
this.prev();
});
},
methods: {
prev() {
if (this.active-- > 2);
this.$router.push("/wizard/taxes");
},
finish() {
window.location.href = url + "/sales/invoices/create";
this.anchor_loading = true;
},
},
};
</script>
<style scoped>
@media only screen and (max-width: 991px) {
[modal-container] {
height: 100% !important;
}
}
</style>