diff options
Diffstat (limited to 'apps/settings/src/components/AppAPI')
3 files changed, 238 insertions, 0 deletions
diff --git a/apps/settings/src/components/AppAPI/DaemonEnableSelection.vue b/apps/settings/src/components/AppAPI/DaemonEnableSelection.vue new file mode 100644 index 00000000000..e8aac3705d0 --- /dev/null +++ b/apps/settings/src/components/AppAPI/DaemonEnableSelection.vue @@ -0,0 +1,84 @@ +<template> + <div class="daemon"> + <NcListItem :name="itemTitle" + :details="isDefault ? t('settings', 'Default') : ''" + :force-display-actions="true" + :counter-number="daemon.exAppsCount" + :class="{'daemon-default': isDefault }" + counter-type="highlighted" + @click.stop="selectDaemonAndInstall"> + <template #subname> + {{ daemon.accepts_deploy_id }} + </template> + </NcListItem> + </div> +</template> + +<script> +import NcListItem from '@nextcloud/vue/components/NcListItem' +import AppManagement from '../../mixins/AppManagement.js' +import { useAppsStore } from '../../store/apps-store' +import { useAppApiStore } from '../../store/app-api-store' + +export default { + name: 'DaemonEnableSelection', + components: { + NcListItem, + }, + mixins: [AppManagement], + props: { + daemon: { + type: Object, + required: true, + default: () => {}, + }, + isDefault: { + type: Boolean, + required: true, + default: () => false, + }, + app: { + type: Object, + required: true, + default: () => {}, + }, + deployOptions: { + type: Object, + required: false, + default: () => null, + }, + }, + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + } + }, + computed: { + itemTitle() { + return this.daemon.name + ' - ' + this.daemon.display_name + }, + daemons() { + return this.appApiStore.dockerDaemons + }, + }, + methods: { + closeModal() { + this.$emit('close') + }, + selectDaemonAndInstall() { + this.closeModal() + this.enable(this.app.id, this.daemon, this.deployOptions) + }, + }, +} +</script> + +<style lang="scss"> +.daemon-default > .list-item { + background-color: var(--color-background-dark); +} +</style> diff --git a/apps/settings/src/components/AppAPI/DaemonSelectionList.vue b/apps/settings/src/components/AppAPI/DaemonSelectionList.vue new file mode 100644 index 00000000000..7c88c1da81e --- /dev/null +++ b/apps/settings/src/components/AppAPI/DaemonSelectionList.vue @@ -0,0 +1,84 @@ +<template> + <div class="daemon-selection-list"> + <ul v-if="dockerDaemons.length > 0" + :aria-label="t('settings', 'Registered Deploy daemons list')"> + <DaemonEnableSelection v-for="daemon in dockerDaemons" + :key="daemon.id" + :daemon="daemon" + :is-default="defaultDaemon.name === daemon.name" + :app="app" + :deploy-options="deployOptions" + @close="closeModal" /> + </ul> + <NcEmptyContent v-else + :name="t('settings', 'No Deploy daemons configured')" + :description="t('settings', 'Register a custom one or setup from available templates')"> + <template #icon> + <FormatListBullet :size="20" /> + </template> + </NcEmptyContent> + </div> +</template> + +<script> +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import FormatListBullet from 'vue-material-design-icons/FormatListBulleted.vue' +import DaemonEnableSelection from './DaemonEnableSelection.vue' +import { useAppApiStore } from '../../store/app-api-store.ts' +import { useAppsStore } from '../../store/apps-store.ts' + +export default { + name: 'DaemonSelectionList', + components: { + FormatListBullet, + DaemonEnableSelection, + NcEmptyContent, + }, + props: { + app: { + type: Object, + required: true, + }, + deployOptions: { + type: Object, + required: false, + default: () => ({}), + }, + }, + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + } + }, + computed: { + dockerDaemons() { + return this.appApiStore.dockerDaemons + }, + defaultDaemon() { + return this.appApiStore.defaultDaemon + }, + }, + methods: { + closeModal() { + this.$emit('close') + }, + }, +} +</script> + +<style scoped lang="scss"> +.daemon-selection-list { + max-height: 300px; + overflow-y: scroll; + padding: 2rem; + + .empty-content { + margin-top: 0; + text-align: center; + } +} +</style> diff --git a/apps/settings/src/components/AppAPI/DaemonSelectionModal.vue b/apps/settings/src/components/AppAPI/DaemonSelectionModal.vue new file mode 100644 index 00000000000..2f77cd8a992 --- /dev/null +++ b/apps/settings/src/components/AppAPI/DaemonSelectionModal.vue @@ -0,0 +1,70 @@ +<template> + <div class="daemon-selection-modal"> + <NcModal :show="show" + :name="t('settings', 'Daemon selection')" + size="normal" + @close="closeModal"> + <div class="select-modal-body"> + <h3>{{ t('settings', 'Choose Deploy Daemon for {appName}', {appName: app.name }) }}</h3> + <DaemonSelectionList :app="app" + :deploy-options="deployOptions" + @close="closeModal" /> + </div> + </NcModal> + </div> +</template> + +<script> +import NcModal from '@nextcloud/vue/components/NcModal' +import DaemonSelectionList from './DaemonSelectionList.vue' +import { useAppsStore } from '../../store/apps-store' +import { useAppApiStore } from '../../store/app-api-store' + +export default { + name: 'DaemonSelectionModal', + components: { + NcModal, + DaemonSelectionList, + }, + props: { + show: { + type: Boolean, + required: true, + default: false, + }, + app: { + type: Object, + required: true, + }, + deployOptions: { + type: Object, + required: false, + default: () => ({}), + }, + }, + setup() { + const store = useAppsStore() + const appApiStore = useAppApiStore() + + return { + store, + appApiStore, + } + }, + data() { + return { + selectDaemonModal: false, + } + }, + methods: { + closeModal() { + this.$emit('update:show', false) + }, + }, +} +</script> +<style scoped> +.select-modal-body h3 { + text-align: center; +} +</style> |