Skip to content

Commit 5d21d4e

Browse files
susnuxsusnux
committed
refactor(appstore): migrate daemon selection dialog to Typescript and Vue 3
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
1 parent 1a9aeae commit 5d21d4e

4 files changed

Lines changed: 145 additions & 158 deletions

File tree

‎apps/appstore/src/components/AppAPI/DaemonSelectionEntry.vue‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

apps/appstore/src/components/AppAPI/DaemonSelectionDialog.vue renamed to apps/appstore/src/components/DaemonSelectionDialog/DaemonSelectionDialog.vue

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,48 @@
22
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
5+
6+
<script setup lang="ts">
7+
import type { IAppstoreExApp, IDeployOptions } from '../../apps.d.ts'
8+
9+
import { t } from '@nextcloud/l10n'
10+
import NcDialog from '@nextcloud/vue/components/NcDialog'
11+
import DaemonSelectionDialogList from './DaemonSelectionDialogList.vue'
12+
13+
/**
14+
* Whether the dialog is shown
15+
*/
16+
const show = defineModel<boolean>('show')
17+
18+
defineProps<{
19+
/**
20+
* The app to enable
21+
*/
22+
app: IAppstoreExApp
23+
24+
/**
25+
* Deployment options
26+
*/
27+
deployOptions?: IDeployOptions
28+
}>()
29+
30+
/**
31+
* Close the dialog
32+
*/
33+
function closeModal() {
34+
show.value = false
35+
}
36+
</script>
37+
538
<template>
639
<NcDialog
740
:open="show"
841
:name="t('settings', 'Choose Deploy Daemon for {appName}', { appName: app.name })"
942
size="normal"
1043
@update:open="closeModal">
11-
<DaemonSelectionList
44+
<DaemonSelectionDialogList
1245
:app="app"
1346
:deploy-options="deployOptions"
1447
@close="closeModal" />
1548
</NcDialog>
1649
</template>
17-
18-
<script setup>
19-
import { defineEmits, defineProps } from 'vue'
20-
import NcDialog from '@nextcloud/vue/components/NcDialog'
21-
import DaemonSelectionList from './DaemonSelectionList.vue'
22-
23-
defineProps({
24-
show: {
25-
type: Boolean,
26-
required: true,
27-
},
28-
app: {
29-
type: Object,
30-
required: true,
31-
},
32-
deployOptions: {
33-
type: Object,
34-
required: false,
35-
default: () => ({}),
36-
},
37-
})
38-
39-
const emit = defineEmits(['update:show'])
40-
/**
41-
*
42-
*/
43-
function closeModal() {
44-
emit('update:show', false)
45-
}
46-
</script>

apps/appstore/src/components/AppAPI/DaemonSelectionList.vue renamed to apps/appstore/src/components/DaemonSelectionDialog/DaemonSelectionDialogList.vue

Lines changed: 42 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,54 @@
22
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
5+
6+
<script setup lang="ts">
7+
import type { IAppstoreExApp, IDeployOptions } from '../../apps.d.ts'
8+
9+
import { t } from '@nextcloud/l10n'
10+
import { generateUrl } from '@nextcloud/router'
11+
import NcButton from '@nextcloud/vue/components/NcButton'
12+
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
13+
import FormatListBullet from 'vue-material-design-icons/FormatListBulleted.vue'
14+
import DaemonSelectionDialogListEntry from './DaemonSelectionDialogListEntry.vue'
15+
import { useExAppsStore } from '../../store/exApps.ts'
16+
17+
defineProps<{
18+
/**
19+
* The app to enable
20+
*/
21+
app: IAppstoreExApp
22+
23+
/**
24+
* Deployment options
25+
*/
26+
deployOptions?: IDeployOptions | undefined
27+
}>()
28+
29+
const emit = defineEmits(['close'])
30+
31+
const appApiAdminPage = generateUrl('/settings/admin/app_api')
32+
33+
const store = useExAppsStore()
34+
35+
/**
36+
* Close the modal
37+
*/
38+
function closeModal() {
39+
emit('close')
40+
}
41+
</script>
42+
543
<template>
644
<div class="daemon-selection-list">
745
<ul
8-
v-if="dockerDaemons.length > 0"
46+
v-if="store.dockerDaemons.length > 0"
947
:aria-label="t('settings', 'Registered Deploy daemons list')">
10-
<DaemonSelectionEntry
11-
v-for="daemon in dockerDaemons"
48+
<DaemonSelectionDialogListEntry
49+
v-for="daemon in store.dockerDaemons"
1250
:key="daemon.id"
1351
:daemon="daemon"
14-
:is-default="defaultDaemon.name === daemon.name"
52+
:is-default="store.defaultDaemon!.name === daemon.name"
1553
:app="app"
1654
:deploy-options="deployOptions"
1755
@close="closeModal" />
@@ -33,42 +71,6 @@
3371
</div>
3472
</template>
3573

36-
<script setup>
37-
import { generateUrl } from '@nextcloud/router'
38-
import { computed, defineProps } from 'vue'
39-
import NcButton from '@nextcloud/vue/components/NcButton'
40-
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
41-
import FormatListBullet from 'vue-material-design-icons/FormatListBulleted.vue'
42-
import DaemonSelectionEntry from './DaemonSelectionEntry.vue'
43-
import { useAppApiStore } from '../../store/app-api-store.ts'
44-
45-
defineProps({
46-
app: {
47-
type: Object,
48-
required: true,
49-
},
50-
deployOptions: {
51-
type: Object,
52-
required: false,
53-
default: () => ({}),
54-
},
55-
})
56-
57-
const emit = defineEmits(['close'])
58-
59-
const appApiStore = useAppApiStore()
60-
61-
const dockerDaemons = computed(() => appApiStore.dockerDaemons)
62-
const defaultDaemon = computed(() => appApiStore.defaultDaemon)
63-
const appApiAdminPage = computed(() => generateUrl('/settings/admin/app_api'))
64-
/**
65-
*
66-
*/
67-
function closeModal() {
68-
emit('close')
69-
}
70-
</script>
71-
7274
<style scoped lang="scss">
7375
.daemon-selection-list {
7476
max-height: 350px;

‎apps/appstore/src/components/DaemonSelectionDialog/DaemonSelectionDialogListEntry.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<script setup lang="ts">
7+
import type { IAppstoreExApp, IDeployDaemon, IDeployOptions } from '../../apps.d.ts'
8+
9+
import { t } from '@nextcloud/l10n'
10+
import { computed } from 'vue'
11+
import NcListItem from '@nextcloud/vue/components/NcListItem'
12+
import { useExAppsStore } from '../../store/exApps.ts'
13+
14+
const props = defineProps<{
15+
/**
16+
* The app to enable
17+
*/
18+
app: IAppstoreExApp
19+
/**
20+
* The daemon to use
21+
*/
22+
daemon: IDeployDaemon
23+
/**
24+
* Whether this daemon is the default one
25+
*/
26+
isDefault: boolean
27+
/**
28+
* Deployment options
29+
*/
30+
deployOptions?: IDeployOptions
31+
}>()
32+
33+
const emit = defineEmits<{
34+
close: []
35+
}>()
36+
37+
const store = useExAppsStore()
38+
const itemTitle = computed(() => `${props.daemon.name} - ${props.daemon.display_name}`)
39+
40+
/**
41+
* Close the modal
42+
*/
43+
function closeModal() {
44+
emit('close')
45+
}
46+
47+
/**
48+
* Enable the app using the selected daemon
49+
*/
50+
function selectDaemonAndInstall() {
51+
store.enable(props.app.id, props.daemon, props.deployOptions)
52+
closeModal()
53+
}
54+
</script>
55+
56+
<template>
57+
<NcListItem
58+
:name="itemTitle"
59+
:details="isDefault ? t('settings', 'Default') : ''"
60+
:force-display-actions="true"
61+
:counter-number="daemon.exAppsCount"
62+
:active="isDefault"
63+
counter-type="highlighted"
64+
@click.stop="selectDaemonAndInstall">
65+
<template #subname>
66+
{{ daemon.accepts_deploy_id }}
67+
</template>
68+
</NcListItem>
69+
</template>

0 commit comments

Comments
 (0)