fixup! Show archived forms in a modal

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud · Feb 19, 2024 · 2ffdaaf · 2ffdaaf
1 parent 5729dd5
commit 2ffdaaf
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 17 deletions.
diff --git a/src/Forms.vue b/src/Forms.vue
@@ -52,19 +52,19 @@
 					@open-sharing="openSharing"
 					@mobile-close-navigation="mobileCloseNavigation" />
 
-				<!-- Archived Forms-->
-				<NcAppNavigationItem v-if="archivedForms.length > 0"
+				<!-- Closed Forms-->
+				<NcAppNavigationItem v-if="closedForms.length > 0"
 					allow-collapse
-					:name="t('forms', 'Archived forms')"
-					:open.sync="showArchivedForms">
+					:name="t('forms', 'Closed or expired forms')"
+					:open.sync="showClosedForms">
 					<template #icon>
-						<IconLock :size="20" />
+						<IconClock :size="20" />
 					</template>
 					<template #counter>
-						{{ archivedForms.length > 99 ? '99+' : archivedForms.length }}
+						{{ closedForms.length > 99 ? '99+' : closedForms.length }}
 					</template>
 					<template #default>
-						<AppNavigationForm v-for="form in archivedForms"
+						<AppNavigationForm v-for="form in closedForms"
 							:key="form.id"
 							:form="form"
 							:read-only="true"
@@ -74,6 +74,17 @@
 					</template>
 				</NcAppNavigationItem>
 			</template>
+			<template #footer>
+				<NcButton v-if="archivedForms.length > 0"
+					type="tertiary"
+					wide
+					@click="showArchivedForms = true">
+					<template #icon>
+						<IconArchive :size="20" />
+					</template>
+					{{ t('forms', 'Archived forms') }}
+				</NcButton>
+			</template>
 		</NcAppNavigation>
 
 		<!-- No forms & loading emptycontents -->
@@ -124,6 +135,9 @@
 				:active.sync="sidebarActive"
 				name="sidebar" />
 		</template>
+
+		<!-- Archived forms modal -->
+		<ArchivedFormsModal :open.sync="showArchivedForms" :forms="archivedForms" />
 	</NcContent>
 </template>
 
@@ -146,11 +160,13 @@ import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 
-import IconLock from 'vue-material-design-icons/Lock.vue'
+import IconArchive from 'vue-material-design-icons/Archive.vue'
+import IconClock from 'vue-material-design-icons/Lock.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 
-import FormsIcon from './components/Icons/FormsIcon.vue'
+import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import AppNavigationForm from './components/AppNavigationForm.vue'
+import FormsIcon from './components/Icons/FormsIcon.vue'
 import PermissionTypes from './mixins/PermissionTypes.js'
 import OcsResponse2Data from './utils/OcsResponse2Data.js'
 import logger from './utils/Logger.js'
@@ -161,8 +177,10 @@ export default {
 
 	components: {
 		AppNavigationForm,
+		ArchivedFormsModal,
 		FormsIcon,
-		IconLock,
+		IconArchive,
+		IconClock,
 		IconPlus,
 		NcAppContent,
 		NcAppNavigation,
@@ -190,7 +208,9 @@ export default {
 			sidebarActive: 'forms-sharing',
 			forms: [],
 			allSharedForms: [],
+
 			showArchivedForms: false,
+			showClosedForms: false,
 
 			canCreateForms: loadState(appName, 'appConfig').canCreateForms,
 		}
@@ -206,17 +226,25 @@ export default {
 		},
 
 		/**
-		 * All own forms that are not archived
+		 * All own active forms
 		 */
 		ownedForms() {
-			return this.forms.filter((form) => form.state !== FormState.FormArchived)
+			const now = Date.now() / 1000
+
+			return this.forms
+				.filter((form) => form.state === FormState.FormActive)
+				.filter((form) => form.expires === 0 || form.expires >= now)
 		},
 
 		/**
-		 * All shared forms that are not archived
+		 * All active shared forms
 		 */
 		sharedForms() {
-			return this.allSharedForms.filter((form) => form.state !== FormState.FormArchived)
+			const now = Date.now() / 1000
+
+			return this.allSharedForms
+				.filter((form) => form.state === FormState.FormActive)
+				.filter((form) => form.expires === 0 || form.expires >= now)
 		},
 
 		/**
@@ -229,6 +257,16 @@ export default {
 			].filter((form) => form.state === FormState.FormArchived)
 		},
 
+		/**
+		 * All closed or expired forms
+		 */
+		closedForms() {
+			return [
+				...this.forms,
+				...this.allSharedForms,
+			].filter(this.isFormClosedOrExpired)
+		},
+
 		routeHash() {
 			return this.$route.params.hash
 		},
@@ -279,7 +317,7 @@ export default {
 
 	watch: {
 		selectedForm(form) {
-			this.showArchivedForms = form.state === FormState.FormArchived
+			this.showClosedForms = this.isFormClosedOrExpired(form)
 		},
 	},
 
@@ -298,6 +336,13 @@ export default {
 	},
 
 	methods: {
+		isFormClosedOrExpired(form) {
+			const now = Date.now() / 1000
+
+			return form.state === FormState.FormClosed
+				|| (form.expires > 0 && form.expires < now)
+		},
+
 		/**
 		 * Closes the App-Navigation on mobile-devices
 		 */

diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
@@ -41,7 +41,8 @@
 			{{ formSubtitle }}
 		</template>
 		<template v-if="!loading && !readOnly" #actions>
-			<NcActionRouter :close-after-click="true"
+			<NcActionRouter v-if="!isArchived"
+				:close-after-click="true"
 				:exact="true"
 				:to="{ name: 'edit', params: { hash: form.hash } }"
 				@click="mobileCloseNavigation">
@@ -50,7 +51,9 @@
 				</template>
 				{{ t('forms', 'Edit form') }}
 			</NcActionRouter>
-			<NcActionButton :close-after-click="true" @click="onShareForm">
+			<NcActionButton v-if="!isArchived"
+				:close-after-click="true"
+				@click="onShareForm">
 				<template #icon>
 					<IconShareVariant :size="20" />
 				</template>
@@ -208,6 +211,10 @@ export default {
 			return this.formSubtitle !== ''
 		},
 
+		isArchived() {
+			return this.form.state === FormState.FormArchived
+		},
+
 		/**
 		 * Route to use, depending on readOnly
 		 *

diff --git a/src/components/ArchivedFormsModal.vue b/src/components/ArchivedFormsModal.vue
@@ -0,0 +1,78 @@
+<!--
+  - @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @author Ferdinand Thiessen <opensource@fthiessen.de>
+  -
+  - @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>
+	<NcDialog content-classes="archived-forms"
+		:name="t('forms', 'Archived forms')"
+		:open="open"
+		size="normal"
+		@update:open="$emit('update:open', $event)">
+		<ul :aria-label="t('forms', 'Archived forms')">
+			<AppNavigationForm v-for="form, key in forms"
+				:key="key"
+				:form="form"
+				:read-only="false"
+				@mobile-close-navigation="$emit('update:open', false)" />
+		</ul>
+	</NcDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
+
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
+import AppNavigationForm from './AppNavigationForm.vue'
+
+export default defineComponent({
+	name: 'ArchivedFormsModal',
+
+	components: {
+		AppNavigationForm,
+		NcDialog,
+	},
+
+	props: {
+		open: {
+			type: Boolean,
+			required: true,
+		},
+		forms: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	emits: ['update:open'],
+
+	methods: {
+		t,
+	},
+})
+</script>
+
+<style scoped>
+:deep(.archived-forms) {
+	min-height: 50vh !important;
+	padding-block-end: 22px;
+}
+</style>