Skip to content

Commit b77e55c

Browse files
mykh-hailomykh-hailo
committed
fix: move download and enable button to outside of details tab
Signed-off-by: mykh-hailo <kristianderonta0205@gmail.com>
1 parent b012e5c commit b77e55c

File tree

3 files changed

+202
-125
lines changed

3 files changed

+202
-125
lines changed

‎apps/settings/src/components/AppStoreSidebar/AppDetailsTab.vue‎

Lines changed: 1 addition & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -46,67 +46,6 @@
4646
<span slot="noResult">{{ t('settings', 'No results') }}</span>
4747
</NcSelect>
4848
</div>
49-
<div class="app-details__actions-manage">
50-
<input
51-
v-if="app.update"
52-
class="update primary"
53-
type="button"
54-
:value="t('settings', 'Update to {version}', { version: app.update })"
55-
:disabled="installing || isLoading || isManualInstall"
56-
@click="update(app.id)">
57-
<input
58-
v-if="app.canUnInstall"
59-
class="uninstall"
60-
type="button"
61-
:value="t('settings', 'Remove')"
62-
:disabled="installing || isLoading"
63-
@click="remove(app.id, removeData)">
64-
<input
65-
v-if="app.active"
66-
class="enable"
67-
type="button"
68-
:value="disableButtonText"
69-
:disabled="installing || isLoading || isInitializing || isDeploying"
70-
@click="disable(app.id)">
71-
<input
72-
v-if="!app.active && (app.canInstall || app.isCompatible)"
73-
:title="enableButtonTooltip"
74-
:aria-label="enableButtonTooltip"
75-
class="enable primary"
76-
type="button"
77-
:value="enableButtonText"
78-
:disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying"
79-
@click="enableButtonAction">
80-
<input
81-
v-else-if="!app.active && !app.canInstall"
82-
:title="forceEnableButtonTooltip"
83-
:aria-label="forceEnableButtonTooltip"
84-
class="enable force"
85-
type="button"
86-
:value="forceEnableButtonText"
87-
:disabled="installing || isLoading"
88-
@click="forceEnable(app.id)">
89-
<NcButton
90-
v-if="app?.app_api && (app.canInstall || app.isCompatible)"
91-
:aria-label="t('settings', 'Advanced deploy options')"
92-
variant="secondary"
93-
@click="() => showDeployOptionsModal = true">
94-
<template #icon>
95-
<NcIconSvgWrapper :path="mdiToyBrickPlusOutline" />
96-
</template>
97-
{{ t('settings', 'Deploy options') }}
98-
</NcButton>
99-
</div>
100-
<p v-if="!defaultDeployDaemonAccessible" class="warning">
101-
{{ t('settings', 'Default Deploy daemon is not accessible') }}
102-
</p>
103-
<NcCheckboxRadioSwitch
104-
v-if="app.canUnInstall"
105-
:model-value="removeData"
106-
:disabled="installing || isLoading || !defaultDeployDaemonAccessible"
107-
@update:modelValue="toggleRemoveData">
108-
{{ t('settings', 'Delete data on remove') }}
109-
</NcCheckboxRadioSwitch>
11049
</div>
11150

11251
<ul class="app-details__dependencies">
@@ -208,10 +147,6 @@
208147
</div>
209148
</div>
210149

211-
<AppDeployOptionsModal
212-
v-if="app?.app_api"
213-
:show.sync="showDeployOptionsModal"
214-
:app="app" />
215150
<DaemonSelectionDialog
216151
v-if="app?.app_api"
217152
:show.sync="showSelectDaemonModal"
@@ -222,16 +157,14 @@
222157
</template>
223158

224159
<script>
225-
import { mdiBugOutline, mdiFeatureSearchOutline, mdiStar, mdiTextBoxOutline, mdiTooltipQuestionOutline, mdiToyBrickPlusOutline } from '@mdi/js'
160+
import { mdiBugOutline, mdiFeatureSearchOutline, mdiStar, mdiTextBoxOutline, mdiTooltipQuestionOutline } from '@mdi/js'
226161
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
227162
import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
228163
import NcButton from '@nextcloud/vue/components/NcButton'
229-
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
230164
import NcDateTime from '@nextcloud/vue/components/NcDateTime'
231165
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
232166
import NcSelect from '@nextcloud/vue/components/NcSelect'
233167
import DaemonSelectionDialog from '../AppAPI/DaemonSelectionDialog.vue'
234-
import AppDeployOptionsModal from './AppDeployOptionsModal.vue'
235168
import AppManagement from '../../mixins/AppManagement.js'
236169
import { useAppApiStore } from '../../store/app-api-store.js'
237170
import { useAppsStore } from '../../store/apps-store.js'
@@ -245,8 +178,6 @@ export default {
245178
NcDateTime,
246179
NcIconSvgWrapper,
247180
NcSelect,
248-
NcCheckboxRadioSwitch,
249-
AppDeployOptionsModal,
250181
DaemonSelectionDialog,
251182
},
252183
@@ -274,15 +205,12 @@ export default {
274205
mdiStar,
275206
mdiTextBoxOutline,
276207
mdiTooltipQuestionOutline,
277-
mdiToyBrickPlusOutline,
278208
}
279209
},
280210
281211
data() {
282212
return {
283213
groupCheckedAppsData: false,
284-
removeData: false,
285-
showDeployOptionsModal: false,
286214
showSelectDaemonModal: false,
287215
deployOptions: null,
288216
}
@@ -409,29 +337,10 @@ export default {
409337
},
410338
411339
methods: {
412-
toggleRemoveData() {
413-
this.removeData = !this.removeData
414-
},
415-
416340
showSelectionModal(deployOptions = null) {
417341
this.deployOptions = deployOptions
418342
this.showSelectDaemonModal = true
419343
},
420-
421-
async enableButtonAction() {
422-
if (!this.app?.app_api) {
423-
this.enable(this.app.id)
424-
return
425-
}
426-
await this.appApiStore.fetchDockerDaemons()
427-
if (this.appApiStore.dockerDaemons.length === 1 && this.app.needsDownload) {
428-
this.enable(this.app.id, this.appApiStore.dockerDaemons[0])
429-
} else if (this.app.needsDownload) {
430-
this.showSelectionModal()
431-
} else {
432-
this.enable(this.app.id, this.app.daemon)
433-
}
434-
},
435344
},
436345
}
437346
</script>
@@ -440,21 +349,6 @@ export default {
440349
.app-details {
441350
padding: 20px;
442351
443-
&__actions {
444-
// app management
445-
&-manage {
446-
// if too many, shrink them and ellipsis
447-
display: flex;
448-
align-items: center;
449-
input {
450-
flex: 0 1 auto;
451-
min-width: 0;
452-
text-overflow: ellipsis;
453-
white-space: nowrap;
454-
overflow: hidden;
455-
}
456-
}
457-
}
458352
&__authors {
459353
color: var(--color-text-maxcontrast);
460354
}
@@ -498,19 +392,6 @@ export default {
498392
}
499393
}
500394
501-
.force {
502-
color: var(--color-text-error);
503-
border-color: var(--color-border-error);
504-
background: var(--color-main-background);
505-
}
506-
507-
.force:hover,
508-
.force:active {
509-
color: var(--color-main-background);
510-
border-color: var(--color-border-error) !important;
511-
background: var(--color-error);
512-
}
513-
514395
.missing-dependencies {
515396
list-style: initial;
516397
list-style-type: initial;

‎apps/settings/src/components/AppStoreSidebar/AppStoreSidebarManageActions.vue‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
6+
<template>
7+
<div class="app-sidebar-manage">
8+
<div class="app-sidebar-manage__actions">
9+
<input
10+
v-if="app.update"
11+
class="update primary"
12+
type="button"
13+
:value="t('settings', 'Update to {version}', { version: app.update })"
14+
:disabled="installing || isLoading || isManualInstall"
15+
@click="update(app.id)">
16+
<input
17+
v-if="app.canUnInstall"
18+
class="uninstall"
19+
type="button"
20+
:value="t('settings', 'Remove')"
21+
:disabled="installing || isLoading"
22+
@click="remove(app.id, removeData)">
23+
<input
24+
v-if="app.active"
25+
class="enable"
26+
type="button"
27+
:value="disableButtonText"
28+
:disabled="installing || isLoading || isInitializing || isDeploying"
29+
@click="disable(app.id)">
30+
<input
31+
v-if="!app.active && (app.canInstall || app.isCompatible)"
32+
:title="enableButtonTooltip"
33+
:aria-label="enableButtonTooltip"
34+
class="enable primary"
35+
type="button"
36+
:value="enableButtonText"
37+
:disabled="!app.canInstall || installing || isLoading || !defaultDeployDaemonAccessible || isInitializing || isDeploying"
38+
@click="enableButtonAction">
39+
<input
40+
v-else-if="!app.active && !app.canInstall"
41+
:title="forceEnableButtonTooltip"
42+
:aria-label="forceEnableButtonTooltip"
43+
class="enable force"
44+
type="button"
45+
:value="forceEnableButtonText"
46+
:disabled="installing || isLoading"
47+
@click="forceEnable(app.id)">
48+
<NcButton
49+
v-if="app?.app_api && (app.canInstall || app.isCompatible)"
50+
:aria-label="t('settings', 'Advanced deploy options')"
51+
variant="secondary"
52+
@click="() => showDeployOptionsModal = true">
53+
<template #icon>
54+
<NcIconSvgWrapper :path="mdiToyBrickPlusOutline" />
55+
</template>
56+
{{ t('settings', 'Deploy options') }}
57+
</NcButton>
58+
</div>
59+
<p v-if="!defaultDeployDaemonAccessible" class="warning">
60+
{{ t('settings', 'Default Deploy daemon is not accessible') }}
61+
</p>
62+
<NcCheckboxRadioSwitch
63+
v-if="app.canUnInstall"
64+
:model-value="removeData"
65+
:disabled="installing || isLoading || !defaultDeployDaemonAccessible"
66+
@update:modelValue="toggleRemoveData">
67+
{{ t('settings', 'Delete data on remove') }}
68+
</NcCheckboxRadioSwitch>
69+
<AppDeployOptionsModal
70+
v-if="app?.app_api"
71+
:show.sync="showDeployOptionsModal"
72+
:app="app" />
73+
</div>
74+
</template>
75+
76+
<script>
77+
import { mdiToyBrickPlusOutline } from '@mdi/js'
78+
import { emit } from '@nextcloud/event-bus'
79+
import { translate as t } from '@nextcloud/l10n'
80+
import NcButton from '@nextcloud/vue/components/NcButton'
81+
import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
82+
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
83+
import AppDeployOptionsModal from './AppDeployOptionsModal.vue'
84+
import AppManagement from '../../mixins/AppManagement.js'
85+
import { useAppApiStore } from '../../store/app-api-store.js'
86+
import { useAppsStore } from '../../store/apps-store.js'
87+
88+
export default {
89+
name: 'AppStoreSidebarManageActions',
90+
91+
components: {
92+
NcButton,
93+
NcCheckboxRadioSwitch,
94+
NcIconSvgWrapper,
95+
AppDeployOptionsModal,
96+
},
97+
98+
mixins: [AppManagement],
99+
100+
props: {
101+
app: {
102+
type: Object,
103+
required: true,
104+
},
105+
},
106+
107+
setup() {
108+
const store = useAppsStore()
109+
const appApiStore = useAppApiStore()
110+
return {
111+
store,
112+
appApiStore,
113+
t,
114+
mdiToyBrickPlusOutline,
115+
}
116+
},
117+
118+
data() {
119+
return {
120+
removeData: false,
121+
showDeployOptionsModal: false,
122+
}
123+
},
124+
125+
methods: {
126+
toggleRemoveData() {
127+
this.removeData = !this.removeData
128+
},
129+
130+
async enableButtonAction() {
131+
if (!this.app?.app_api) {
132+
this.enable(this.app.id)
133+
return
134+
}
135+
await this.appApiStore.fetchDockerDaemons()
136+
if (this.appApiStore.dockerDaemons.length === 1 && this.app.needsDownload) {
137+
this.enable(this.app.id, this.appApiStore.dockerDaemons[0])
138+
} else if (this.app.needsDownload) {
139+
emit('showDaemonSelectionModal')
140+
} else {
141+
this.enable(this.app.id, this.app.daemon)
142+
}
143+
},
144+
},
145+
}
146+
</script>
147+
148+
<style scoped lang="scss">
149+
.app-sidebar-manage {
150+
&__actions {
151+
display: flex;
152+
align-items: center;
153+
flex-wrap: wrap;
154+
gap: 4px;
155+
156+
input {
157+
flex: 0 1 auto;
158+
min-width: 0;
159+
text-overflow: ellipsis;
160+
white-space: nowrap;
161+
overflow: hidden;
162+
}
163+
}
164+
}
165+
166+
.force {
167+
color: var(--color-text-error);
168+
border-color: var(--color-border-error);
169+
background: var(--color-main-background);
170+
}
171+
172+
.force:hover,
173+
.force:active {
174+
color: var(--color-main-background);
175+
border-color: var(--color-border-error) !important;
176+
background: var(--color-error);
177+
}
178+
</style>

0 commit comments

Comments
 (0)