Add vue

.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	extends: [
+		'@nextcloud'
+	]
+};

.gitignore

@@ -1 +1,21 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+js
+
+# Editor directories and files
+.idea
 .vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+.marginalia
+
+build/
+coverage/
+.php_cs.cache
+vendor

.npmignore

@@ -0,0 +1 @@
+node_modules

Makefile

@@ -1,155 +1,52 @@
-# This file is licensed under the Affero General Public License version 3 or
+all: dev-setup lint build-js-production test
-# later. See the COPYING file.
-# @author Bernhard Posselt <dev@bernhard-posselt.com>
-# @copyright Bernhard Posselt 2016
 
-# Generic Makefile for building and packaging a Nextcloud app which uses npm and
+# Dev env management
-# Composer.
+dev-setup: clean clean-dev npm-init
-#
-# Dependencies:
-# * make
-# * which
-# * curl: used if phpunit and composer are not installed to fetch them from the web
-# * tar: for building the archive
-# * npm: for building and testing everything JS
-#
-# If no composer.json is in the app root directory, the Composer step
-# will be skipped. The same goes for the package.json which can be located in
-# the app root or the js/ directory.
-#
-# The npm command by launches the npm build script:
-#
-#    npm run build
-#
-# The npm test command launches the npm test script:
-#
-#    npm run test
-#
-# The idea behind this is to be completely testing and build tool agnostic. All
-# build tools and additional package managers should be installed locally in
-# your project, since this won't pollute people's global namespace.
-#
-# The following npm scripts in your package.json install and update the bower
-# and npm dependencies and use gulp as build system (notice how everything is
-# run from the node_modules folder):
-#
-#    "scripts": {
-#        "test": "node node_modules/gulp-cli/bin/gulp.js karma",
-#        "prebuild": "npm install && node_modules/bower/bin/bower install && node_modules/bower/bin/bower update",
-#        "build": "node node_modules/gulp-cli/bin/gulp.js"
-#    },
 
-app_name=$(notdir $(CURDIR))
+npm-init:
-build_tools_directory=$(CURDIR)/build/tools
+	npm ci
-source_build_directory=$(CURDIR)/build/artifacts/source
-source_package_name=$(source_build_directory)/$(app_name)
-appstore_build_directory=$(CURDIR)/build/artifacts/appstore
-appstore_package_name=$(appstore_build_directory)/$(app_name)
-npm=$(shell which npm 2> /dev/null)
-composer=$(shell which composer 2> /dev/null)
 
-all: build
+npm-update:
+	npm update
 
-# Fetches the PHP and JS dependencies and compiles the JS. If no composer.json
+# Building
-# is present, the composer step is skipped, if no package.json or js/package.json
+build-js:
-# is present, the npm step is skipped
+	npm run dev
-.PHONY: build
-build:
-ifneq (,$(wildcard $(CURDIR)/composer.json))
-	make composer
-endif
-ifneq (,$(wildcard $(CURDIR)/package.json))
-	make npm
-endif
-ifneq (,$(wildcard $(CURDIR)/js/package.json))
-	make npm
-endif
 
-# Installs and updates the composer dependencies. If composer is not installed
+build-js-production:
-# a copy is fetched from the web
-.PHONY: composer
-composer:
-ifeq (, $(composer))
-	@echo "No composer command available, downloading a copy from the web"
-	mkdir -p $(build_tools_directory)
-	curl -sS https://getcomposer.org/installer | php
-	mv composer.phar $(build_tools_directory)
-	php $(build_tools_directory)/composer.phar install --prefer-dist
-else
-	composer install --prefer-dist
-endif
-
-# Installs npm dependencies
-.PHONY: npm
-npm:
-ifeq (,$(wildcard $(CURDIR)/package.json))
-	cd js && $(npm) run build
-else
 	npm run build
-endif
 
-# Removes the appstore build
+watch-js:
-.PHONY: clean
+	npm run watch
+
+# Testing
+test:
+	npm run test
+
+test-watch:
+	npm run test:watch
+
+test-coverage:
+	npm run test:coverage
+
+# Linting
+lint:
+	npm run lint
+
+lint-fix:
+	npm run lint:fix
+
+# Style linting
+stylelint:
+	npm run stylelint
+
+stylelint-fix:
+	npm run stylelint:fix
+
+# Cleaning
 clean:
-	rm -rf ./build
+	rm -f js/*
 
-# Same as clean but also removes dependencies installed by composer, bower and
+clean-dev:
-# npm
-.PHONY: distclean
-distclean: clean
-	rm -rf vendor
 	rm -rf node_modules
-	rm -rf js/vendor
-	rm -rf js/node_modules
 
-# Builds the source and appstore package
-.PHONY: dist
-dist:
-	make source
-	make appstore
-
-# Builds the source package
-.PHONY: source
-source:
-	rm -rf $(source_build_directory)
-	mkdir -p $(source_build_directory)
-	tar cvzf $(source_package_name).tar.gz ../$(app_name) \
-	--exclude-vcs \
-	--exclude="../$(app_name)/build" \
-	--exclude="../$(app_name)/js/node_modules" \
-	--exclude="../$(app_name)/node_modules" \
-	--exclude="../$(app_name)/*.log" \
-	--exclude="../$(app_name)/js/*.log" \
-
-# Builds the source package for the app store, ignores php and js tests
-.PHONY: appstore
-appstore:
-	rm -rf $(appstore_build_directory)
-	mkdir -p $(appstore_build_directory)
-	tar cvzf $(appstore_package_name).tar.gz ../$(app_name) \
-	--exclude-vcs \
-	--exclude="../$(app_name)/build" \
-	--exclude="../$(app_name)/tests" \
-	--exclude="../$(app_name)/Makefile" \
-	--exclude="../$(app_name)/*.log" \
-	--exclude="../$(app_name)/phpunit*xml" \
-	--exclude="../$(app_name)/composer.*" \
-	--exclude="../$(app_name)/js/node_modules" \
-	--exclude="../$(app_name)/js/tests" \
-	--exclude="../$(app_name)/js/test" \
-	--exclude="../$(app_name)/js/*.log" \
-	--exclude="../$(app_name)/js/package.json" \
-	--exclude="../$(app_name)/js/bower.json" \
-	--exclude="../$(app_name)/js/karma.*" \
-	--exclude="../$(app_name)/js/protractor.*" \
-	--exclude="../$(app_name)/package.json" \
-	--exclude="../$(app_name)/bower.json" \
-	--exclude="../$(app_name)/karma.*" \
-	--exclude="../$(app_name)/protractor\.*" \
-	--exclude="../$(app_name)/.*" \
-	--exclude="../$(app_name)/js/.*" \
-
-.PHONY: test
-test: composer
-	$(CURDIR)/vendor/phpunit/phpunit/phpunit -c phpunit.xml
-	$(CURDIR)/vendor/phpunit/phpunit/phpunit -c phpunit.integration.xml

babel.config.js

@@ -0,0 +1,3 @@
+const babelConfig = require('@nextcloud/babel-config')
+
+module.exports = babelConfig

css/icons.scss

@@ -0,0 +1,24 @@
+ 
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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/>.
+ *
+ */
+
+@include icon-black-white('vueexample', 'app', 1);

lib/Controller/PageController.php

@@ -5,13 +5,16 @@ use OCP\IRequest;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Http\DataResponse;
 use OCP\AppFramework\Controller;
+use OCP\Util;
 
 class PageController extends Controller {
 	private $userId;
+	protected $appName;
 
 	public function __construct($AppName, IRequest $request, $UserId){
 		parent::__construct($AppName, $request);
 		$this->userId = $UserId;
+		$this->appName = $AppName;
 	}
 
 	/**
@@ -19,7 +22,11 @@ class PageController extends Controller {
 	 * @NoCSRFRequired
 	 */
 	public function index() {
-		return new TemplateResponse('betterphotos', 'index');
+		Util::addScript($this->appName, 'betterphotos-main');
+		Util::addStyle($this->appName, 'icons');
+
+		$response = new TemplateResponse($this->appName, 'main');
+		return $response;
 	}
 
 }

package.json

@@ -0,0 +1,53 @@
+{
+	"name": "betterphotos",
+	"description": "A better photos app",
+	"version": "0.0.0",
+	"author": "Varun Patil <radialapps@gmail.com>",
+	"contributors": [
+		"Varun Patil <radialapps@gmail.com>"
+	],
+	"keywords": [
+		"nextcloud",
+		"app",
+		"dev",
+		"vuejs"
+	],
+	"bugs": {
+		"url": "https://github.com/pulsejet/betterphotos/issues"
+	},
+	"repository": {
+		"url": "https://github.com/pulsejet/betterphotos.git",
+		"type": "git"
+	},
+	"homepage": "https://github.com/pulsejet/betterphotos",
+	"license": "agpl",
+	"private": true,
+	"scripts": {
+		"build": "NODE_ENV=production webpack --progress --config webpack.js",
+		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
+		"lint": "eslint --ext .js,.vue src",
+		"lint:fix": "eslint --ext .js,.vue src --fix",
+		"stylelint": "stylelint src",
+		"stylelint:fix": "stylelint src --fix"
+	},
+	"dependencies": {
+		"@nextcloud/l10n": "^1.6.0",
+		"@nextcloud/vue": "^5.4.0",
+		"vue": "^2.7.8"
+	},
+	"browserslist": [
+		"extends @nextcloud/browserslist-config"
+	],
+	"engines": {
+		"node": ">=14.0.0",
+		"npm": ">=7.0.0"
+	},
+	"devDependencies": {
+		"@nextcloud/babel-config": "^1.0.0",
+		"@nextcloud/browserslist-config": "^2.3.0",
+		"@nextcloud/eslint-config": "^8.1.2",
+		"@nextcloud/stylelint-config": "^2.2.0",
+		"@nextcloud/webpack-vue-config": "^5.3.0"
+	}
+}

src/App.vue

@@ -0,0 +1,50 @@
+<template>
+	<Content :class="{'icon-loading': loading}" app-name="betterphotos">
+		<AppNavigation>
+			<template id="app-betterphotos-navigation" #list>
+				<AppNavigationItem icon="icon-user" title="Timeline">
+				</AppNavigationItem>
+			</template>
+		</AppNavigation>
+
+		<AppContent>
+			<div>This is the s</div>
+		</AppContent>
+	</Content>
+</template>
+
+<script>
+import Content from '@nextcloud/vue/dist/Components/Content'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
+import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+
+export default {
+	name: 'App',
+	components: {
+		Content,
+		AppContent,
+		AppNavigation,
+		AppNavigationItem,
+	},
+	data() {
+		return {
+			loading: false,
+			show: true,
+			starred: false,
+		}
+	},
+	methods: {
+		close() {
+			this.show = false
+			console.debug(arguments)
+		},
+		newButtonAction() {
+			console.debug(arguments)
+		},
+		log() {
+			console.debug(arguments)
+		},
+	},
+}
+</script>

src/main.js

@@ -0,0 +1,38 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * 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/>.
+ *
+ */
+import Vue from 'vue'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
+
+import App from './App'
+
+// Adding translations to the whole app
+Vue.mixin({
+	methods: {
+		t,
+		n,
+	},
+})
+
+export default new Vue({
+	el: '#content',
+	render: h => h(App),
+})

stylelint.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+	extends: 'stylelint-config-recommended-scss',
+	rules: {
+		indentation: 'tab',
+		'selector-type-no-unknown': null,
+		'number-leading-zero': null,
+		'rule-empty-line-before': [
+			'always',
+			{
+				ignore: ['after-comment', 'inside-block'],
+			}
+		],
+		'declaration-empty-line-before': [
+			'never',
+			{
+				ignore: ['after-declaration'],
+			},
+		],
+		'comment-empty-line-before': null,
+		'selector-type-case': null,
+		'selector-list-comma-newline-after': null,
+		'no-descending-specificity': null,
+		'string-quotes': 'single',
+		'selector-pseudo-element-no-unknown': [
+			true,
+			{
+				ignorePseudoElements: ['v-deep'],
+			},
+		],
+	},
+	plugins: ['stylelint-scss'],
+}

templates/content/index.php

@@ -1,3 +0,0 @@
-<div id="photos">
-    <div style="grid-column: 1 / -1;">efef</div>
-</div>

templates/index.php

@@ -1,18 +0,0 @@
-<?php
-\OCP\Util::addScript('betterphotos', 'script');
-\OCP\Util::addStyle('betterphotos', 'style');
-?>
-
-<div id="app">
-	<div id="app-navigation">
-		<?php print_unescaped($this->inc('navigation/index')); ?>
-		<?php print_unescaped($this->inc('settings/index')); ?>
-	</div>
-
-	<div id="app-content">
-		<div id="app-content-wrapper">
-			<?php print_unescaped($this->inc('content/index')); ?>
-		</div>
-	</div>
-</div>
-

templates/main.php

@@ -0,0 +1 @@
+<div id="vue-content"></div>

templates/navigation/index.php

@@ -1,3 +0,0 @@
-<ul>
-	<li><a href="#">Timeline</a></li>
-</ul>

templates/settings/index.php

@@ -1,10 +0,0 @@
-<div id="app-settings">
-	<div id="app-settings-header">
-		<button class="settings-button"
-				data-apps-slide-toggle="#app-settings-content"
-		></button>
-	</div>
-	<div id="app-settings-content">
-		<!-- Your settings in here -->
-	</div>
-</div>

webpack.js

@@ -0,0 +1,3 @@
+const webpackConfig = require('@nextcloud/webpack-vue-config')
+
+module.exports = webpackConfig