Skip to content

Commit 4f94dc4

Browse files
megastarymegastary
committed
Started moving huge pages to components
1 parent 076e605 commit 4f94dc4

16 files changed

+276
-213
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lazy-admin",
3-
"version": "0.4.4",
3+
"version": "0.4.5",
44
"description": "GUI for PowerShell scripts to simplify day to day IT tasks.",
55
"productName": "Lazy Admin",
66
"cordovaId": "eu.houby-studio.lazy-admin",

‎quasar.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ module.exports = function (ctx) {
66
// app boot file (/src/boot)
77
// --> boot files are part of "main.js"
88
// https://quasar.dev/quasar-cli/cli-documentation/boot-files
9-
boot: ['electron-log', 'i18n', 'powershell', 'titlebar-color', 'clipboard2', 'auto-updater', 'utils'],
9+
boot: ['electron-log', 'i18n', 'powershell', 'titlebar-color', 'clipboard2', 'auto-updater', 'utils', 'components'],
1010

1111
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
1212
css: ['app.sass'],

‎src/boot/components.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// import components
2+
import WindowTitlebar from 'components/WindowTitlebar.vue'
3+
import SettingsItems from 'components/SettingsItems.vue'
4+
import ModulesList from 'components/ModulesList.vue'
5+
import VersionList from 'components/VersionList.vue'
6+
7+
// add components to Vue
8+
export default async ({ Vue }) => {
9+
Vue.component('WindowTitlebar', WindowTitlebar)
10+
Vue.component('SettingsItems', SettingsItems)
11+
Vue.component('ModulesList', ModulesList)
12+
Vue.component('VersionList', VersionList)
13+
}

‎src/components/.gitkeep

Whitespace-only changes.

‎src/components/ModulesList.vue

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<q-list>
3+
<q-item
4+
dense
5+
v-if="definitionsUpdateStatus === 'error'"
6+
>
7+
<q-item-section avatar>
8+
<q-icon
9+
name="error"
10+
color="primary"
11+
/>
12+
</q-item-section>
13+
<q-item-label caption>{{ $t('definitionsError') }}</q-item-label>
14+
<q-item-section>
15+
</q-item-section>
16+
</q-item>
17+
<q-item
18+
v-for="info in value"
19+
:key="info.name"
20+
>
21+
<q-item-section avatar>
22+
<q-icon :name="info.icon" />
23+
</q-item-section>
24+
25+
<q-item-section>
26+
<q-item-label>{{ info.displayName }}</q-item-label>
27+
<q-item-label caption>{{ info.version }}</q-item-label>
28+
</q-item-section>
29+
</q-item>
30+
</q-list>
31+
</template>
32+
33+
<script>
34+
// https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components
35+
36+
export default {
37+
props: {
38+
value: { required: true, type: Array },
39+
definitionsUpdateStatus: { required: true, type: String }
40+
}
41+
}
42+
</script>

‎src/components/SettingsItems.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="row">
3+
<div class="col-12">
4+
<q-checkbox
5+
:label="$t(label)"
6+
v-model="localValue"
7+
/>
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
// https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components
14+
15+
export default {
16+
props: {
17+
value: { required: true, type: Boolean },
18+
label: { required: true, type: String }
19+
},
20+
computed: {
21+
localValue: {
22+
get () {
23+
return this.value
24+
},
25+
set (val) {
26+
this.$emit('input', val)
27+
}
28+
}
29+
}
30+
}
31+
</script>

‎src/components/VersionList.vue

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<q-list>
3+
<q-item>
4+
<q-item-section avatar>
5+
<q-icon name="mdi-sleep" />
6+
</q-item-section>
7+
8+
<q-item-section>
9+
<q-item-label>Lazy Admin</q-item-label>
10+
<q-item-label caption>{{ lazyVersion }}</q-item-label>
11+
<q-item-label caption>{{ updateProgress }}</q-item-label>
12+
</q-item-section>
13+
14+
<q-item-section avatar>
15+
<q-icon
16+
v-if="appVersionStatus === 'uptodate'"
17+
name="check"
18+
color="white"
19+
size="1.1rem"
20+
/>
21+
<q-icon
22+
v-if="appVersionStatus === 'error'"
23+
name="error"
24+
color="primary"
25+
size="1.1rem"
26+
/>
27+
<q-spinner
28+
v-else-if="appVersionStatus === 'checking'"
29+
color="primary"
30+
size="1.1rem"
31+
/>
32+
<q-icon
33+
v-else
34+
name="warning"
35+
color="yellow"
36+
size="1.1rem"
37+
v-show="appVersionStatus === 'restart'"
38+
/>
39+
</q-item-section>
40+
</q-item>
41+
<q-item>
42+
<q-item-section avatar>
43+
<q-icon name="mdi-json" />
44+
</q-item-section>
45+
46+
<q-item-section>
47+
<q-item-label>{{ $t('masterDefinition') }}</q-item-label>
48+
<q-item-label caption>{{ masterDefinitionVersion }}</q-item-label>
49+
</q-item-section>
50+
51+
<q-item-section avatar>
52+
<q-spinner
53+
v-if="masterDefinitionUpdateStatus === 'checking'"
54+
color="primary"
55+
size="1.1rem"
56+
/>
57+
<q-icon
58+
v-else-if="masterDefinitionUpdateStatus === 'error'"
59+
name="error"
60+
color="primary"
61+
size="1.1rem"
62+
/>
63+
<q-icon
64+
v-else
65+
name="check"
66+
color="white"
67+
size="1.1rem"
68+
v-show="masterDefinitionUpdateStatus === 'uptodate'"
69+
/>
70+
</q-item-section>
71+
</q-item>
72+
</q-list>
73+
</template>
74+
75+
<script>
76+
// https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components
77+
78+
export default {
79+
props: {
80+
lazyVersion: { required: true, type: String },
81+
updateProgress: { required: true, type: String },
82+
appVersionStatus: { required: true, type: String },
83+
masterDefinitionVersion: { required: true, type: String },
84+
masterDefinitionUpdateStatus: { required: true, type: String }
85+
}
86+
}
87+
</script>

‎src/components/WindowTitlebar.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<q-bar class="q-electron-drag q-pr-none">
3+
<q-icon name="navigate_next" />
4+
<div class="text-no-wrap hide-title">Lazy Admin</div>
5+
6+
<q-space />
7+
8+
<q-btn
9+
@click="$emit('minimize')"
10+
dense
11+
flat
12+
icon="minimize"
13+
style="height: 100%"
14+
/>
15+
<q-btn
16+
@click="$emit('maximize')"
17+
dense
18+
flat
19+
icon="crop_square"
20+
style="height: 100%"
21+
/>
22+
<q-btn
23+
@click="$emit('close-app')"
24+
dense
25+
flat
26+
icon="close"
27+
style="height: 100%"
28+
/>
29+
</q-bar>
30+
</template>
31+
32+
<script>
33+
// https://simonkollross.de/posts/vuejs-using-v-model-with-objects-for-custom-components
34+
35+
export default {}
36+
</script>

‎src/i18n/cs-cz/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export default {
6666
definitionsError: 'Chyba aktualizace definic.', // Used in: AboutPage.vue
6767
downloadCompleted: 'Stahování dokončeno, zavřete aplikaci ke spuštění aktualizace.', // Used in: FullLayout.vue
6868
alwaysConfirm: 'Vždy požadovat potvrzení před spuštěním příkazu.', // Used in: SettingsPage.vue
69-
inputDense: 'Zobrazovat vstupní parametry v těsném rozložení.', // Used in: SettingsPage.vue
70-
tableDense: 'Zobrazovat tabulky v těsném rozložení.', // Used in: SettingsPage.vue
69+
denseInput: 'Zobrazovat vstupní parametry v těsném rozložení.', // Used in: SettingsPage.vue
70+
denseTable: 'Zobrazovat tabulky v těsném rozložení.', // Used in: SettingsPage.vue
7171
displayProgress: 'Vždy zobrazovat průběh skriptu.', // Used in: SettingsPage.vue
7272
masterDefinition: 'Hlavní definice', // Used in: AboutPage.vue
7373
update: 'Aktualizovat', // Used in: AboutPage.vue

‎src/i18n/en-us/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,8 @@ export default {
6666
definitionsError: 'Definitions update error.', // Used in: AboutPage.vue
6767
downloadCompleted: 'Download completed, close the application to start the update.', // Used in: FullLayout.vue
6868
alwaysConfirm: 'Always require confirmation before script execution.', // Used in: SettingsPage.vue
69-
inputDense: 'Display input parameters in dense layout.', // Used in: SettingsPage.vue
70-
tableDense: 'Display tables in dense layout.', // Used in: SettingsPage.vue
69+
denseInput: 'Display input parameters in dense layout.', // Used in: SettingsPage.vue
70+
denseTable: 'Display tables in dense layout.', // Used in: SettingsPage.vue
7171
displayProgress: 'Always display script progress.', // Used in: SettingsPage.vue
7272
autoClipboard: 'Automatically store command results to clipboard.', // Used in: SettingsPage.vue
7373
masterDefinition: 'Master definition', // Used in: AboutPage.vue

‎src/layouts/FullLayout.vue

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,11 @@
66
reveal
77
class="window-color window-color-text"
88
>
9-
<q-bar class="q-electron-drag q-pr-none">
10-
<q-icon name="navigate_next" />
11-
<div class="text-no-wrap hide-title">Lazy Admin</div>
12-
13-
<q-space />
14-
15-
<q-btn
16-
@click="minimize"
17-
dense
18-
flat
19-
icon="minimize"
20-
style="height: 100%"
21-
/>
22-
<q-btn
23-
@click="maximize"
24-
dense
25-
flat
26-
icon="crop_square"
27-
style="height: 100%"
28-
/>
29-
<q-btn
30-
@click="closeApp"
31-
dense
32-
flat
33-
icon="close"
34-
style="height: 100%"
35-
/>
36-
</q-bar>
9+
<window-titlebar
10+
@minimize="minimize"
11+
@maximize="maximize"
12+
@close-app="closeApp"
13+
></window-titlebar>
3714

3815
<transition
3916
appear

‎src/layouts/LoginLayout.vue

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,34 +5,11 @@
55
elevated
66
class="window-color text-white"
77
>
8-
<q-bar class="q-electron-drag q-pr-none">
9-
<q-icon name="navigate_next" />
10-
<div class="text-no-wrap hide-title">Lazy Admin</div>
11-
12-
<q-space />
13-
14-
<q-btn
15-
dense
16-
flat
17-
icon="minimize"
18-
@click="minimize"
19-
style="height: 100%"
20-
/>
21-
<q-btn
22-
dense
23-
flat
24-
icon="crop_square"
25-
@click="maximize"
26-
style="height: 100%"
27-
/>
28-
<q-btn
29-
dense
30-
flat
31-
icon="close"
32-
@click="closeApp"
33-
style="height: 100%"
34-
/>
35-
</q-bar>
8+
<window-titlebar
9+
@minimize="minimize"
10+
@maximize="maximize"
11+
@close-app="closeApp"
12+
></window-titlebar>
3613
</q-header>
3714

3815
<q-page-container>

0 commit comments

Comments
 (0)