diff options
Diffstat (limited to 'apps/workflowengine/src/components/Workflow.vue')
| -rw-r--r-- | apps/workflowengine/src/components/Workflow.vue | 106 |
1 files changed, 73 insertions, 33 deletions
diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue index 121e517e964..03ec2a79324 100644 --- a/apps/workflowengine/src/components/Workflow.vue +++ b/apps/workflowengine/src/components/Workflow.vue @@ -1,63 +1,94 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div id="workflowengine"> - <div class="section"> - <h2>{{ t('workflowengine', 'Available flows') }}</h2> - - <p v-if="scope === 0" class="settings-hint"> + <NcSettingsSection :name="t('workflowengine', 'Available flows')" + :doc-url="workflowDocUrl"> + <p v-if="isAdminScope" class="settings-hint"> <a href="https://nextcloud.com/developer/">{{ t('workflowengine', 'For details on how to write your own flow, check out the development documentation.') }}</a> </p> - <transition-group name="slide" tag="div" class="actions"> - <Operation v-for="operation in getMainOperations" + <NcEmptyContent v-if="!isUserAdmin && mainOperations.length === 0" + :name="t('workflowengine', 'No flows installed')" + :description="!isUserAdmin ? t('workflowengine', 'Ask your administrator to install new flows.') : undefined"> + <template #icon> + <NcIconSvgWrapper :svg="WorkflowOffSvg" :size="20" /> + </template> + </NcEmptyContent> + <transition-group v-else + name="slide" + tag="div" + class="actions"> + <Operation v-for="operation in mainOperations" :key="operation.id" :operation="operation" @click.native="createNewRule(operation)" /> - <a v-if="showAppStoreHint" - :key="'add'" + key="add" :href="appstoreUrl" class="actions__item colored more"> <div class="icon icon-add" /> <div class="actions__item__description"> <h3>{{ t('workflowengine', 'More flows') }}</h3> - <small>{{ t('workflowengine', 'Browse the app store') }}</small> + <small>{{ t('workflowengine', 'Browse the App Store') }}</small> </div> </a> </transition-group> <div v-if="hasMoreOperations" class="actions__more"> - <button class="icon" - :class="showMoreOperations ? 'icon-triangle-n' : 'icon-triangle-s'" - @click="showMoreOperations=!showMoreOperations"> + <NcButton @click="showMoreOperations = !showMoreOperations"> + <template #icon> + <MenuUp v-if="showMoreOperations" :size="20" /> + <MenuDown v-else :size="20" /> + </template> {{ showMoreOperations ? t('workflowengine', 'Show less') : t('workflowengine', 'Show more') }} - </button> + </NcButton> </div> + </NcSettingsSection> - <h2 v-if="scope === 0" class="configured-flows"> - {{ t('workflowengine', 'Configured flows') }} - </h2> - <h2 v-else class="configured-flows"> - {{ t('workflowengine', 'Your flows') }} - </h2> - </div> - - <transition-group v-if="rules.length > 0" name="slide"> - <Rule v-for="rule in rules" :key="rule.id" :rule="rule" /> - </transition-group> + <NcSettingsSection v-if="mainOperations.length > 0" + :name="isAdminScope ? t('workflowengine', 'Configured flows') : t('workflowengine', 'Your flows')"> + <transition-group v-if="rules.length > 0" name="slide"> + <Rule v-for="rule in rules" :key="rule.id" :rule="rule" /> + </transition-group> + <NcEmptyContent v-else :name="t('workflowengine', 'No flows configured')"> + <template #icon> + <NcIconSvgWrapper :svg="WorkflowOffSvg" :size="20" /> + </template> + </NcEmptyContent> + </NcSettingsSection> </div> </template> <script> -import Rule from './Rule' -import Operation from './Operation' +import Rule from './Rule.vue' +import Operation from './Operation.vue' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import { mapGetters, mapState } from 'vuex' import { generateUrl } from '@nextcloud/router' +import { loadState } from '@nextcloud/initial-state' +import MenuUp from 'vue-material-design-icons/MenuUp.vue' +import MenuDown from 'vue-material-design-icons/MenuDown.vue' +import WorkflowOffSvg from '../../img/workflow-off.svg?raw' const ACTION_LIMIT = 3 +const ADMIN_SCOPE = 0 +// const PERSONAL_SCOPE = 1 export default { name: 'Workflow', components: { + MenuDown, + MenuUp, + NcButton, + NcEmptyContent, + NcIconSvgWrapper, + NcSettingsSection, Operation, Rule, }, @@ -65,6 +96,8 @@ export default { return { showMoreOperations: false, appstoreUrl: generateUrl('settings/apps/workflow'), + workflowDocUrl: loadState('workflowengine', 'doc-url'), + WorkflowOffSvg, } }, computed: { @@ -79,14 +112,20 @@ export default { hasMoreOperations() { return Object.keys(this.operations).length > ACTION_LIMIT }, - getMainOperations() { + mainOperations() { if (this.showMoreOperations) { return Object.values(this.operations) } return Object.values(this.operations).slice(0, ACTION_LIMIT) }, showAppStoreHint() { - return this.scope === 0 && this.appstoreEnabled && OC.isUserAdmin() + return this.appstoreEnabled && OC.isUserAdmin() + }, + isUserAdmin() { + return OC.isUserAdmin() + }, + isAdminScope() { + return this.scope === ADMIN_SCOPE }, }, mounted() { @@ -101,9 +140,12 @@ export default { </script> <style scoped lang="scss"> + @use "./../styles/operation"; + #workflowengine { border-bottom: 1px solid var(--color-border); } + .section { max-width: 100vw; @@ -112,6 +154,7 @@ export default { margin-bottom: 0; } } + .actions { display: flex; flex-wrap: wrap; @@ -122,9 +165,8 @@ export default { } } - button.icon { - padding-left: 32px; - background-position: 10px center; + .actions__more { + margin-bottom: 10px; } .slide-enter-active { @@ -161,8 +203,6 @@ export default { padding-bottom: 0; } - @import "./../styles/operation"; - .actions__item.more { background-color: var(--color-background-dark); } |