verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

Merge pull request 'Removed vue-class-component in favour of composition API' (#2) from vue-composition-api into dev 

Reviewed-on: #2
This commit is contained in:
Carlos Jimenez Ruiz 2022-03-08 10:37:48 +00:00
parent ec05b368e9 b89163704d
commit cea499936f
11 changed files with 126 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -13,7 +13,6 @@
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
@ -19418,14 +19417,6 @@
"@vue/shared": "3.2.31"
}
},
"node_modules/vue-class-component": {
"version": "8.0.0-rc.1",
"resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
"integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-cli-plugin-i18n": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",
@ -37109,12 +37100,6 @@
"@vue/shared": "3.2.31"
}
},
"vue-class-component": {
"version": "8.0.0-rc.1",
"resolved": "https://registry.npmmirror.com/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
"integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
"requires": {}
},
"vue-cli-plugin-i18n": {
"version": "2.3.1",
"resolved": "https://registry.npmmirror.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-2.3.1.tgz",

3
package.json
View File

@ -16,7 +16,6 @@
"core-js": "^3.6.5",
"quasar": "^2.0.0",
"vue": "^3.0.0",
"vue-class-component": "^8.0.0-0",
"vue-i18n": "^9.1.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
@ -49,4 +48,4 @@
"vue-cli-plugin-quasar": "~4.0.4",
"vue-jest": "^5.0.0-0"
}
}
}

6
src/App.vue
View File

@ -2,12 +2,6 @@
<router-view></router-view>
</template>
<script lang="ts">
import { Vue } from 'vue-class-component';
export default class App extends Vue {}
</script>
<style lang="scss">
.body--light {
background-color: #ccc;

30
src/components/Topbar.vue
View File

@ -27,7 +27,7 @@
<q-btn dense flat no-wrap>
<q-avatar size="lg">
<q-img
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
spinner-color="white"
/>
</q-avatar>
@ -40,8 +40,9 @@
</q-header>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
<script lang="ts" setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
import UserPanel from '@/components/UserPanel.vue';
interface UserProfile {
@ -51,18 +52,13 @@ interface UserProfile {
token: string;
}
@Options({
components: {
UserPanel,
},
})
export default class Topbar extends Vue {
get user(): UserProfile {
return this.$store.state.user;
}
get token(): string {
return this.$store.getters.token;
}
}
const store = useStore();
const user = computed((): UserProfile => {
return {
id: store.state.user.id,
username: store.state.user.username,
nickname: store.state.user.nickname,
token: store.getters.token,
};
});
</script>

102
src/components/UserPanel.vue
View File

@ -2,16 +2,16 @@
<q-menu>
<div class="row no-wrap q-pa-md">
<div class="column">
<div class="text-h6 q-mb-md">{{ $t('components.userPanel.settings') }}</div>
<div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
<q-toggle
:label="$t(`globals.lang['${language}']`)"
:label="t(`globals.lang['${locale}']`)"
icon="public"
color="orange"
false-value="es"
true-value="en"
v-model="language"
v-model="locale"
/>
<q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
<q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
<q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
</div>
@ -21,7 +21,7 @@
<div class="column items-center" style="min-width: 150px">
<q-avatar size="80px">
<q-img
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
spinner-color="white"
/>
</q-avatar>
@ -37,10 +37,18 @@
</q-menu>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
<script lang="ts" setup>
import { onMounted, computed } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { Dark } from 'quasar';
const quasar = useQuasar();
const store = useStore();
const router = useRouter();
const { t, locale } = useI18n();
interface UserProfile {
id: number;
@ -49,54 +57,42 @@ interface UserProfile {
token: string;
}
@Options({})
export default class UserPanel extends Vue {
private lang = 'es';
mounted(): void {
axios
.get('/api/accounts/acl')
.then((response) => {
this.$store.dispatch('updateUserData', response.data);
})
.catch(() => {
this.$q.notify({
message: this.$t('errors.statusUnauthorized'),
type: 'negative',
});
this.$store.dispatch('logOut');
this.$router.push('/login');
});
}
logout(): void {
this.$store.dispatch('logOut');
this.$router.push('/login');
}
get user(): UserProfile {
return this.$store.state.user;
}
get token(): string {
return this.$store.getters.token;
}
get mode(): boolean {
const darkMode = computed({
get(): boolean {
return Dark.isActive;
}
set mode(value: boolean) {
},
set(value: boolean): void {
Dark.set(value);
}
},
});
get language(): string {
return this.lang;
}
const user = computed((): UserProfile => {
return {
id: store.state.user.id,
username: store.state.user.username,
nickname: store.state.user.nickname,
token: store.getters.token,
};
});
set language(value: string) {
this.lang = value;
this.$i18n.locale = value;
}
onMounted(() => {
axios
.get('/api/accounts/acl')
.then((response) => {
store.dispatch('updateUserData', response.data);
})
.catch(() => {
quasar.notify({
message: t('errors.statusUnauthorized'),
type: 'negative',
});
store.dispatch('logOut');
router.push('/login');
});
});
function logout(): void {
store.dispatch('logOut');
router.push('/login');
}
</script>

2
src/i18n.ts
View File

@ -20,7 +20,7 @@ function loadLocaleMessages(): LocaleMessages<VueMessageType> {
}
export default createI18n({
legacy: true,
legacy: false, // Disabled for composition API usage
locale: process.env.VUE_APP_I18N_LOCALE || 'en',
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
messages: loadLocaleMessages(),

7
src/views/Customer/Customer.vue
View File

@ -4,11 +4,4 @@
</q-page>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class Customer extends Vue {}
</script>
<style lang="scss" scoped></style>

7
src/views/Dashboard/Dashboard.vue
View File

@ -4,11 +4,4 @@
</q-page>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class Dashboard extends Vue {}
</script>
<style lang="scss" scoped></style>

20
src/views/Layout/Main.vue
View File

@ -59,22 +59,14 @@
</q-layout>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
<script lang="ts" setup>
import { ref } from 'vue';
import Topbar from '@/components/Topbar.vue';
const drawer = ref(false);
const miniState = ref(true);
@Options({
components: {
Topbar,
},
})
export default class Main extends Vue {
drawer = false;
miniState = true;
onToggleDrawer(): void {
this.drawer = !this.drawer;
}
function onToggleDrawer(): void {
drawer.value = !drawer.value;
}
</script>

7
src/views/Layout/NotFound.vue
View File

@ -2,11 +2,4 @@
<q-page> Page not found </q-page>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({})
export default class NotFound extends Vue {}
</script>
<style lang="scss" scoped></style>

135
src/views/Login/Login.vue
View File

@ -4,14 +4,14 @@
<q-toolbar>
<q-space></q-space>
<q-toggle
:label="$t(`globals.lang['${language}']`)"
:label="t(`globals.lang['${locale}']`)"
icon="public"
color="orange"
false-value="es"
true-value="en"
v-model="language"
v-model="locale"
/>
<q-toggle v-model="mode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
<q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
</q-toolbar>
</q-header>
<q-page-container>
@ -24,7 +24,7 @@
filled
color="orange"
v-model="username"
:label="$t('login.username')"
:label="t('login.username')"
lazy-rules
:rules="[
(val: string) => (val && val.length > 0) || 'Please type something',
@ -35,16 +35,16 @@
color="orange"
type="password"
v-model="password"
:label="$t('login.password')"
:label="t('login.password')"
lazy-rules
:rules="[
(val: string) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-toggle v-model="keepLogin" :label="$t('login.keepLogin')" color="orange" />
<q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
<div>
<q-btn :label="$t('login.submit')" type="submit" color="orange" />
<q-btn :label="t('login.submit')" type="submit" color="orange" />
</div>
</q-form>
</q-card>
@ -54,88 +54,65 @@
</q-layout>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Dark, useQuasar } from 'quasar';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
interface LoginForm {
username: string;
password: string;
keepLogin: boolean;
}
const quasar = useQuasar();
const store = useStore();
const router = useRouter();
const { t, locale } = useI18n();
@Options({
setup() {
return {
$q: useQuasar(),
};
},
})
export default class Login extends Vue {
username?: string;
password?: string;
keepLogin?: boolean;
private lang = 'es';
let username = ref('');
let password = ref('');
let keepLogin = true;
get mode(): boolean {
const darkMode = computed({
get(): boolean {
return Dark.isActive;
}
set mode(value: boolean) {
},
set(value: boolean): void {
Dark.set(value);
}
},
});
get language(): string {
return this.lang;
}
set language(value: string) {
this.lang = value;
this.$i18n.locale = value;
}
onSubmit(): void {
axios
.post('/api/accounts/login', {
user: this.username,
password: this.password,
})
.then((response) => {
this.$store.dispatch('logIn', {
token: response.data.token,
keepLogin: this.keepLogin,
});
this.$q.notify({
message: this.$t('login.loginSuccess'),
type: 'positive',
});
this.$router.push('/dashboard');
})
.catch((error) => {
const errorCode = error.response.status;
if (errorCode === 401) {
this.$q.notify({
message: this.$t('login.loginFailed'),
type: 'negative',
});
} else {
this.$q.notify({
message: this.$t('errors.statusInternalServerError'),
type: 'negative',
});
}
function onSubmit(): void {
axios
.post('/api/accounts/login', {
user: username.value,
password: password.value,
})
.then((response) => {
store.dispatch('logIn', {
token: response.data.token,
keepLogin: keepLogin,
});
}
data(): LoginForm {
return {
username: '',
password: '',
keepLogin: true,
};
}
quasar.notify({
message: t('login.loginSuccess'),
type: 'positive',
});
router.push('/dashboard');
})
.catch((error) => {
console.log(error);
const errorCode = error.response.status;
if (errorCode === 401) {
quasar.notify({
message: t('login.loginFailed'),
type: 'negative',
});
} else {
quasar.notify({
message: t('errors.statusInternalServerError'),
type: 'negative',
});
}
});
}
</script>