Add UI to preview and fill out own forms

This implements #1023 by providing a button to switch to the submit view of an owned form like suggested in the [issue comment](#1023 (comment)). This also adds the TopBar to the submit view (for owned forms) to make the UX more consistent. Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Sep 1, 2022 · ed174ba · ed174ba
1 parent e92357e
commit ed174ba
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 22 deletions.
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -82,6 +82,7 @@
  <template v-else>
  <router-view :form.sync="selectedForm"
  :sidebar-opened.sync="sidebarOpened"
+ :is-owned-form="isOwnedForm"
  @open-sharing="openSharing" />
  <router-view v-if="!selectedForm.partial"
  :form="selectedForm"
@@ -201,6 +202,10 @@ export default {
  }
  },
  },
+
+ isOwnedForm() {
+ return this.forms.findIndex(form => form.hash === this.selectedForm?.hash) !== -1
+ },
  },
 
  beforeMount() {

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
@@ -55,6 +55,15 @@
  </template>
  {{ t('forms', 'Results') }}
  </NcActionRouter>
+ <NcActionRouter :close-after-click="true"
+ :exact="true"
+ :to="{ name: 'submit', params: { hash: form.hash } }"
+ @click="mobileCloseNavigation">
+ <template #icon>
+ <IconEye :size="20" />
+ </template>
+ {{ t('forms', 'View form') }}
+ </NcActionRouter>
  <NcActionButton :close-after-click="true" @click="onCloneForm">
  <template #icon>
  <IconContentCopy :size="20" />
@@ -85,6 +94,7 @@ import moment from '@nextcloud/moment'
 import IconCheck from 'vue-material-design-icons/Check'
 import IconContentCopy from 'vue-material-design-icons/ContentCopy'
 import IconDelete from 'vue-material-design-icons/Delete'
+import IconEye from 'vue-material-design-icons/Eye'
 import IconMessageReplyText from 'vue-material-design-icons/MessageReplyText'
 import IconShareVariant from 'vue-material-design-icons/ShareVariant'
 
@@ -100,6 +110,7 @@ export default {
  IconCheck,
  IconContentCopy,
  IconDelete,
+ IconEye,
  IconMessageReplyText,
  IconShareVariant,
  NcActionButton,

diff --git a/src/mixins/ViewsMixin.js b/src/mixins/ViewsMixin.js
@@ -42,6 +42,10 @@ export default {
  type: Object,
  required: true,
  },
+ isOwnedForm: {
+ type: Boolean,
+ default: false,
+ },
  publicView: {
  type: Boolean,
  default: false,
@@ -121,5 +125,35 @@ export default {
  showError(t('forms', 'Error while saving form'))
  }
  },
+
+ /**
+ * Topbar methods
+ */
+ showEdit() {
+ this.$router.push({
+ name: 'edit',
+ params: {
+ hash: this.form.hash,
+ },
+ })
+ },
+
+ showResults() {
+ this.$router.push({
+ name: 'results',
+ params: {
+ hash: this.form.hash,
+ },
+ })
+ },
+
+ filloutForm() {
+ this.$router.push({
+ name: 'submit',
+ params: {
+ hash: this.form.hash,
+ },
+ })
+ },
  },
 }
diff --git a/src/views/Create.vue b/src/views/Create.vue
@@ -41,6 +41,14 @@
  <IconMessageReplyText :size="20" />
  </template>
  </NcButton>
+ <NcButton v-tooltip="t('forms', 'Fill out form')"
+ :aria-label="t('forms', 'Fill out form')"
+ type="tertiary"
+ @click="filloutForm">
+ <template #icon>
+ <IconEye :size="20" />
+ </template>
+ </NcButton>
  <NcButton v-if="!sidebarOpened"
  v-tooltip="t('forms', 'Share form')"
  :aria-label="t('forms', 'Share form')"
@@ -134,6 +142,7 @@ import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import Draggable from 'vuedraggable'
 import IconMessageReplyText from 'vue-material-design-icons/MessageReplyText'
+import IconEye from 'vue-material-design-icons/Eye'
 import IconShareVariant from 'vue-material-design-icons/ShareVariant'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
@@ -160,6 +169,7 @@ export default {
  components: {
  Draggable,
  EmptyContent,
+ IconEye,
  IconMessageReplyText,
  IconShareVariant,
  NcActionButton,
@@ -384,18 +394,6 @@ export default {
  }, 10)
  },
 
- /**
- * Topbar methods
- */
- showResults() {
- this.$router.push({
- name: 'results',
- params: {
- hash: this.form.hash,
- },
- })
- },
-
  /**
  * Auto adjust the title height based on lines number
  */

diff --git a/src/views/Results.vue b/src/views/Results.vue
@@ -39,6 +39,14 @@
  <IconReply :size="24" />
  </template>
  </NcButton>
+ <NcButton v-tooltip="t('forms', 'Fill out form')"
+ :aria-label="t('forms', 'Fill out form')"
+ type="tertiary"
+ @click="filloutForm">
+ <template #icon>
+ <IconEye :size="20" />
+ </template>
+ </NcButton>
  <NcButton v-if="!noSubmissions"
  v-tooltip="t('forms', 'Share form')"
  :aria-label="t('forms', 'Share form')"
@@ -146,6 +154,7 @@ import moment from '@nextcloud/moment'
 
 import IconShareVariant from 'vue-material-design-icons/ShareVariant'
 import IconReply from 'vue-material-design-icons/Reply'
+import IconEye from 'vue-material-design-icons/Eye'
 
 import EmptyContent from '../components/EmptyContent.vue'
 import Summary from '../components/Results/Summary.vue'
@@ -169,6 +178,7 @@ export default {
 
  components: {
  EmptyContent,
+ IconEye,
  IconReply,
  IconShareVariant,
  NcActions,
@@ -230,15 +240,6 @@ export default {
  },
 
  methods: {
- showEdit() {
- this.$router.push({
- name: 'edit',
- params: {
- hash: this.form.hash,
- },
- })
- },
-
  onShareForm() {
  this.$emit('open-sharing', this.form.hash)
  },

diff --git a/src/views/Submit.vue b/src/views/Submit.vue
@@ -28,6 +28,25 @@
  </NcAppContent>
 
  <NcAppContent v-else>
+ <TopBar v-if="isOwnedForm">
+ <NcButton v-tooltip="t('forms', 'Back to questions')"
+ :aria-label="t('forms', 'Back to questions')"
+ type="tertiary"
+ @click="showEdit">
+ <template #icon>
+ <IconReply :size="24" />
+ </template>
+ </NcButton>
+ <NcButton v-tooltip="t('forms', 'Results')"
+ :aria-label="t('forms', 'Results')"
+ type="tertiary"
+ @click="showResults">
+ <template #icon>
+ <IconMessageReplyText :size="20" />
+ </template>
+ </NcButton>
+ </TopBar>
+
  <!-- Forms title & description-->
  <header>
  <h2 ref="title" class="form-title">
@@ -81,6 +100,9 @@ import { generateOcsUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import IconMessageReplyText from 'vue-material-design-icons/MessageReplyText.vue'
+import IconReply from 'vue-material-design-icons/Reply.vue'
 
 import answerTypes from '../models/AnswerTypes.js'
 import logger from '../utils/Logger.js'
@@ -90,6 +112,7 @@ import Question from '../components/Questions/Question.vue'
 import QuestionLong from '../components/Questions/QuestionLong.vue'
 import QuestionShort from '../components/Questions/QuestionShort.vue'
 import QuestionMultiple from '../components/Questions/QuestionMultiple.vue'
+import TopBar from '../components/TopBar.vue'
 import SetWindowTitle from '../utils/SetWindowTitle.js'
 import ViewsMixin from '../mixins/ViewsMixin.js'
 
@@ -98,11 +121,15 @@ export default {
 
  components: {
  EmptyContent,
+ IconMessageReplyText,
+ IconReply,
  NcAppContent,
+ NcButton,
  Question,
  QuestionLong,
  QuestionShort,
  QuestionMultiple,
+ TopBar,
  },
 
  mixins: [ViewsMixin],

diff --git a/webpack.js b/webpack.js
@@ -1,7 +1,7 @@
 const path = require('path')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 
-webpackConfig.entry.submit =  path.resolve(path.join('src', 'submit.js'))
+webpackConfig.entry.submit = path.resolve(path.join('src', 'submit.js'))
 webpackConfig.entry.settings = path.resolve(path.join('src', 'settings.js'))
 
 module.exports = webpackConfig