Move EmptyContent to vue

Signed-off-by: Jonas Rittershofer <jotoeri@users.noreply.github.com>

lib/Constants.php

@@ -122,4 +122,11 @@ class Constants {
 		self::PERMISSION_RESULTS,
 		self::PERMISSION_SUBMIT
 	];
+
+	/**
+	 * !! Keep in sync with src/FormsEmptyContent.vue !!
+	 * InitialStates for emptyContent to render as...
+	 */
+	public const EMPTY_NOTFOUND = 'notfound';
+	public const EMPTY_EXPIRED = 'expired';
 }

lib/Controller/PageController.php

@@ -53,10 +53,8 @@
 use Psr\Log\LoggerInterface;
 
 class PageController extends Controller {
-	private const TEMPLATE_EXPIRED = 'expired';
+	private const TEMPLATE_EMPTYCONTENT = 'emptyContent';
 	private const TEMPLATE_MAIN = 'main';
-	private const TEMPLATE_NOSUBMIT = 'nosubmit';
-	private const TEMPLATE_NOTFOUND = 'notfound';
 
 	protected $appName;
 
@@ -177,15 +175,15 @@ public function internalLinkView(string $hash): Response {
 		try {
 			$form = $this->formMapper->findByHash($hash);
 		} catch (DoesNotExistException $e) {
-			return $this->provideTemplate(self::TEMPLATE_NOTFOUND);
+			return $this->provideEmptyContent(Constants::EMPTY_NOTFOUND);
 		}
 		if (isset($form->getAccess()['legacyLink'])) {
 			// Inject style on all templates
 			Util::addStyle($this->appName, 'forms');
 
 			// Has form expired
 			if ($this->formsService->hasFormExpired($form->getId())) {
-				return $this->provideTemplate(self::TEMPLATE_EXPIRED, $form);
+				return $this->provideEmptyContent(Constants::EMPTY_EXPIRED, $form);
 			}
 
 			// Public Template to fill the form
@@ -217,12 +215,12 @@ public function publicLinkView(string $hash): Response {
 			$share = $this->shareMapper->findPublicShareByHash($hash);
 			$form = $this->formMapper->findById($share->getFormId());
 		} catch (DoesNotExistException $e) {
-			return $this->provideTemplate(self::TEMPLATE_NOTFOUND);
+			return $this->provideEmptyContent(Constants::EMPTY_NOTFOUND);
 		}
 
 		// Has form expired
 		if ($this->formsService->hasFormExpired($form->getId())) {
-			return $this->provideTemplate(self::TEMPLATE_EXPIRED, $form);
+			return $this->provideEmptyContent(Constants::EMPTY_EXPIRED, $form);
 		}
 
 		// Main Template to fill the form
@@ -235,6 +233,12 @@ public function publicLinkView(string $hash): Response {
 		return $this->provideTemplate(self::TEMPLATE_MAIN, $form);
 	}
 
+	public function provideEmptyContent(string $renderAs, Form $form = null): ?TemplateResponse {
+		Util::addScript($this->appName, 'forms-emptyContent');
+		$this->initialStateService->provideInitialState($this->appName, 'renderAs', $renderAs);
+		return $this->provideTemplate(self::TEMPLATE_EMPTYCONTENT, $form);
+	}
+
 	/**
 	 * @NoAdminRequired
 	 * @NoCSRFRequired
@@ -251,7 +255,7 @@ public function provideTemplate(string $template, Form $form = null): ?TemplateR
 
 			// Set Header
 			$response->setHeaderTitle($this->l10n->t('Forms'));
-			if ($template !== self::TEMPLATE_NOTFOUND) {
+			if ($form !== null) {
 				$response->setHeaderTitle($form->getTitle());
 
 				// Get owner and check display name privacy settings

src/FormsEmptyContent.vue

@@ -0,0 +1,83 @@
+<!--
+  - @copyright Copyright (c) 2022 Jonas Rittershofer <jotoeri@users.noreply.github.com>
+  -
+  - @author Jonas Rittershofer <jotoeri@users.noreply.github.com>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<NcContent app-name="forms" class="forms-emptycontent">
+		<NcEmptyContent :title="model.title"
+			:description="model.description">
+			<template #icon>
+				<FormsIcon />
+			</template>
+		</NcEmptyContent>
+	</NcContent>
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import FormsIcon from './components/Icons/FormsIcon.vue'
+
+export default {
+	name: 'FormsEmptyContent',
+
+	components: {
+		FormsIcon,
+		NcContent,
+		NcEmptyContent,
+	},
+
+	data() {
+		return {
+			/**
+			 * !! Keep Model-Names in sync with Constants EMTPY_... in lib/Constants.php !!
+			 * Models for each EmptyContent rendering taking resp. title and subtitle
+			 */
+			renderModels: {
+				notfound: {
+					title: t('forms', 'Form not found'),
+					description: t('forms', 'This form does not exist'),
+				},
+				expired: {
+					title: t('forms', 'Form expired'),
+					description: t('forms', 'This form has expired and is no longer taking answers'),
+				},
+			},
+			renderAs: loadState(appName, 'renderAs'),
+		}
+	},
+
+	computed: {
+		model() {
+			return this.renderModels[this.renderAs]
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.forms-emptycontent {
+	flex-basis: 100vw;
+	flex-direction: column;
+	min-height: calc(100vh - 65px - 50px);
+}
+</style>

templates/expired.php → src/emptyContent.js

@@ -1,9 +1,7 @@
-<?php
 /**
- * @copyright Copyright (c) 2020 John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2022 Jonas Rittershofer <jotoeri@users.noreply.github.com>
  *
- * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
- * @author rakekniven <mark.ziegler@rakekniven.de>
+ * @author Jonas Rittershofer <jotoeri@users.noreply.github.com>
  *
  * @license AGPL-3.0-or-later
  *
@@ -21,11 +19,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { translate, translatePlural } from '@nextcloud/l10n'
+import Vue from 'vue'
 
-?>
+import FormsEmptyContent from './FormsEmptyContent.vue'
 
-<div id="emptycontent" class="">
-	<div class="icon-forms"></div>
-	<h2><?php p($l->t('Form expired')); ?></h2>
-	<p><?php p($l->t('This form has expired and is no longer taking answers')); ?></p>
-</div>
+Vue.prototype.t = translate
+Vue.prototype.n = translatePlural
+
+export default new Vue({
+	 el: '#emptycontent',
+	 // eslint-disable-next-line vue/match-component-file-name
+	 name: 'FormsEmptyContent',
+	 render: h => h(FormsEmptyContent),
+})

templates/nosubmit.php → templates/emptyContent.php

@@ -1,8 +1,8 @@
 <?php
 /**
- * @copyright Copyright (c) 2020 John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ * @copyright Copyright (c) 2022 Jonas Rittershofer <jotoeri@users.noreply.github.com>
  *
- * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ * @author Jonas Rittershofer <jotoeri@users.noreply.github.com>
  *
  * @license AGPL-3.0-or-later
  *
@@ -20,10 +20,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
 ?>
 
-<div id="emptycontent" class="">
-	<div class="icon-checkmark"></div>
-	<h2><?php p($l->t('Thank you for completing the form!')); ?></h2>
-</div>
+<div id="emptycontent"></div>

webpack.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 
+webpackConfig.entry.emptyContent = path.resolve(path.join('src', 'emptyContent.js'))
 webpackConfig.entry.submit =  path.resolve(path.join('src', 'submit.js'))
 webpackConfig.entry.settings = path.resolve(path.join('src', 'settings.js'))