Merge branch 'client/startpage' into 'master'

Client/startpage

Closes #69

See merge request collectivecloud/collectives!86

src/App.vue

@@ -46,6 +46,13 @@
 		opacity: 1;
 	}
 
+	.page-title, #titleform input[type="text"]:disabled {
+		background-color: var(--color-main-background);
+		color: var(--color-text-lighter);
+		margin: 3px 3px 3px 0;
+		padding: 7px 6px;
+	}
+
 	#action-menu {
 		position: absolute;
 		right: 0;

src/components/Collective.vue

@@ -0,0 +1,180 @@
+<template>
+	<div id="app-content-wrapper">
+		<PagesList
+			@newPage="newPage" />
+		<AppContentDetails v-if="currentPage">
+			<Version v-if="currentVersion"
+				:page="currentPage"
+				:version="currentVersion"
+				:current-version-timestamp="currentVersionTimestamp"
+				@toggleSidebar="$emit('toggleSidebar')"
+				@showCurrent="$emit('preview-version', null)"
+				@resetVersion="resetVersion" />
+			<Page v-else
+				key="currentPage.timestamp"
+				:edit="edit"
+				@deletePage="deletePage"
+				@edit="edit = true"
+				@toggleEdit="edit = !edit"
+				@showVersions="$emit('showVersions')"
+				@renamePage="renamePage" />
+		</AppContentDetails>
+	</div>
+</template>
+
+<script>
+
+import { showSuccess, showError } from '@nextcloud/dialogs'
+import AppContentDetails from '@nextcloud/vue/dist/Components/AppContentDetails'
+import Page from '../components/Page'
+import PagesList from '../components/PagesList'
+import Version from '../components/Version'
+
+const EditState = { Unset: 0, Edit: 1, Read: 2 }
+
+export default {
+	name: 'Collective',
+
+	components: {
+		AppContentDetails,
+		Page,
+		PagesList,
+		Version,
+	},
+
+	props: {
+		currentVersion: {
+			type: Object,
+			default: null,
+		},
+		currentVersionTimestamp: {
+			type: Number,
+			required: true,
+		},
+	},
+
+	data: function() {
+		return {
+			editToggle: EditState.Unset,
+		}
+	},
+
+	computed: {
+
+		/**
+		 * Return the currently selected collective
+		 * @returns {Object|undefined}
+		 */
+		currentCollective() {
+			return this.$store.getters.currentCollective
+		},
+
+		/**
+		 * Return the url param for the currently selected page
+		 * @returns {String|undefined}
+		 */
+		pageParam() {
+			return this.$store.getters.pageParam
+		},
+
+		/**
+		 * Return the currently selected page object
+		 * @returns {Object|undefined}
+		 */
+		currentPage() {
+			return this.$store.getters.currentPage
+		},
+
+		edit: {
+			get: function() {
+				return this.editToggle === EditState.Edit
+			},
+			set: function(val) {
+				this.editToggle = val ? EditState.Edit : EditState.Read
+			},
+		},
+	},
+
+	watch: {
+
+		'pageParam': function() {
+			this.editToggle = EditState.Unset
+		},
+	},
+
+	methods: {
+
+		/**
+		 * Fetch and update one particular page
+		 * @param {number} pageId Page ID
+		 */
+		async getPage(pageId) {
+			if (!this.currentCollective) {
+				return
+			}
+			try {
+				await this.$store.dispatch('getPage', pageId)
+			} catch (e) {
+				console.error(e)
+				showError(t('collectives', `Could not fetch page ${pageId}`))
+			}
+		},
+
+		/**
+		 * Create a new page and focus the page  automatically
+		 */
+		async newPage() {
+			const page = {
+				title: t('collectives', 'New Page'),
+			}
+			try {
+				await this.$store.dispatch('newPage', page)
+				this.$router.push(this.$store.getters.updatedPagePath)
+			} catch (e) {
+				console.error(e)
+				showError(t('collectives', 'Could not create the page'))
+			}
+		},
+
+		/**
+		 * Rename currentPage on the server
+		 * @param {string} newTitle New title for the page
+		 */
+		async renamePage(newTitle) {
+			if (this.currentPage.title === newTitle) {
+				return
+			}
+			try {
+				await this.$store.dispatch('renamePage', newTitle)
+				this.$router.push(this.$store.getters.updatedPagePath)
+			} catch (e) {
+				console.error(e)
+				showError(t('collectives', 'Could not rename the page'))
+			}
+		},
+
+		/**
+		 * Delete the current page,
+		 * remove it from the frontend and show a hint
+		 */
+		async deletePage() {
+			try {
+				await this.$store.dispatch('deletePage')
+				this.$router.push(`/${this.collectiveParam}`)
+				showSuccess(t('collectives', 'Page deleted'))
+			} catch (e) {
+				console.error(e)
+				showError(t('collectives', 'Could not delete the page'))
+			}
+		},
+
+		/**
+		 * reload current page in order to update page properties and reset the version
+		 */
+		resetVersion() {
+			this.getPage(this.currentPage.id)
+			this.$emit('resetVersion')
+		},
+	},
+}
+</script>

src/components/Page.vue

@@ -1,8 +1,15 @@
 <template>
 	<div>
 		<h1 id="titleform" class="page-title">
-			<input ref="title"
+			<input v-if="landingPage"
+				class="title"
+				type="text"
+				disabled
+				:value="collective.name">
+			<input v-else
+				ref="title"
 				v-model="newTitle"
+				class="title"
 				:placeholder="t('collectives', 'Title')"
 				type="text"
 				:disabled="updating || !savePossible"
@@ -21,7 +28,7 @@
 				</ActionButton>
 			</Actions>
 			<Actions>
-				<ActionButton
+				<ActionButton v-if="!landingPage"
 					icon="icon-delete"
 					@click="$emit('deletePage')">
 					{{ t('collectives', 'Delete page') }}
@@ -93,10 +100,18 @@ export default {
 
 	computed: {
 
+		landingPage() {
+			return !this.$store.getters.pageParam
+		},
+
 		page() {
 			return this.$store.getters.currentPage
 		},
 
+		collective() {
+			return this.$store.getters.currentCollective
+		},
+
 		readOnly() {
 			return this.preview || !this.edit
 		},

src/components/PagesList.vue

@@ -51,7 +51,7 @@ export default {
 		},
 
 		pages() {
-			return this.$store.state.pages
+			return this.$store.getters.mostRecentPages
 		},
 
 		currentPage() {

src/components/Version.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
-		<h1 class="page-title">
-			<input id="version-title"
+		<h1 id="titleform" class="page-title">
+			<input class="title"
 				type="text"
 				disabled
 				:value="versionTitle">
@@ -15,7 +15,7 @@
 			<Actions>
 				<ActionButton
 					icon="icon-play-next"
-					@click="$emit('preview-version', null)">
+					@click="$emit('showCurrent')">
 					{{ t('collectives', 'Back to current version') }}
 				</ActionButton>
 			</Actions>
@@ -63,6 +63,10 @@ export default {
 			return this.$store.getters.currentPage
 		},
 
+		collective() {
+			return this.$store.getters.currentCollective
+		},
+
 		/**
 		 * Return the URL for currently selected page version
 		 * @returns {string}
@@ -87,8 +91,13 @@ export default {
 			return getCurrentUser().uid
 		},
 
+		landingPage() {
+			return !this.$store.getters.pageParam
+		},
+
 		versionTitle() {
-			return `${this.page.title} (${this.version.relativeTimestamp})`
+			const title = this.landingPage ? this.collective.name : this.page.title
+			return `${title} (${this.version.relativeTimestamp})`
 		},
 	},
 
@@ -121,13 +130,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-    #version-title {
-		background-color: var(--color-main-background);
-		color: var(--color-text-lighter);
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px;
-	}
-
-</style>

src/store.js

@@ -45,8 +45,9 @@ export default new Vuex.Store({
 		},
 
 		currentPage(state, getters) {
+			const title = getters.pageParam || 'Readme'
 			return state.pages.find(
-				(page) => page.title === getters.pageParam
+				(page) => page.title === title
 			)
 		},
 
@@ -60,6 +61,14 @@ export default new Vuex.Store({
 			)
 		},
 
+		mostRecentPages(_state, getters) {
+			return getters.visiblePages.sort((a, b) => b.timestamp - a.timestamp)
+		},
+
+		visiblePages(state) {
+			return state.pages.filter((p) => p.title !== 'Readme')
+		},
+
 		pagesUrl(_state, getters) {
 			return generateUrl(`/apps/collectives/_collectives/${getters.currentCollective.id}/_pages`)
 		},
@@ -123,10 +132,7 @@ export default new Vuex.Store({
 		async getPages({ commit, getters }) {
 			commit('loading')
 			const response = await axios.get(getters.pagesUrl)
-			this.commit('pages',
-				// sort pages by timestamp
-				response.data.sort((a, b) => b.timestamp - a.timestamp)
-			)
+			commit('pages', response.data)
 			commit('done')
 		},
 
@@ -183,7 +189,6 @@ export default new Vuex.Store({
 		async getCollectives({ commit }) {
 			commit('loading')
 			const response = await axios.get(generateUrl(`/apps/collectives/_collectives`))
-
 			commit('collectives', response.data)
 			commit('done')
 		},