Switching frontend to vue. Adding crc32b algorithm.

9 files changed, 233 insertions, 143 deletions

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..36e7509
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+    extends: [
+        '@nextcloud'
+    ]
+};
diff --git a/.gitignore b/.gitignore
index 88ca803..4fb33bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
 js/
+*.lock
diff --git a/lib/Controller/ChecksumController.php b/lib/Controller/ChecksumController.php
index a04e1d6..ec69913 100644
--- a/lib/Controller/ChecksumController.php
+++ b/lib/Controller/ChecksumController.php
@@ -127,7 +127,8 @@ class ChecksumController extends Controller {
             'sha256',
             'sha384',
             'sha512',
-            'crc32'
+            'crc32',
+            'crc32b'
         ];
     }
 }
diff --git a/package.json b/package.json
index 8fc1ba7..7b2349e 100644
--- a/package.json
+++ b/package.json
@@ -12,16 +12,36 @@
   },
   "dependencies": {
     "@nextcloud/axios": "^1.5.0",
-    "@nextcloud/l10n": "^1.4.1",
     "@nextcloud/router": "^1.2.0",
-    "core-js": "^3.8.1",
-    "jquery": "^3.5.1"
+    "@nextcloud/vue": "^3.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@nextcloud/browserslist-config": "^1.0.0",
+    "@nextcloud/eslint-config": "^4.0.0-alpha.0",
+    "@nextcloud/eslint-plugin": "^2.0.0",
+    "@nextcloud/l10n": "^1.4.1",
+    "@nextcloud/webpack-vue-config": "^3.0.0-alpha.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
+    "core-js": "^3.8.1",
+    "css-loader": "^5.1.0",
+    "eslint": "^7.20.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-vue": "^7.6.0",
+    "eslint-webpack-plugin": "^2.5.2",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
+    "stylelint": "^13.11.0",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^3.19.0",
+    "stylelint-webpack-plugin": "^2.1.1",
+    "vue-loader": "^15.9.6",
+    "vue-template-compiler": "^2.6.12",
     "webpack": "^5.11.0",
     "webpack-cli": "^4.2.0",
     "webpack-merge": "^5.7.2"
diff --git a/src/ChecksumTab.js b/src/ChecksumTab.js
deleted file mode 100644
index e7b1bf6..0000000
--- a/src/ChecksumTab.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import {translate as t} from '@nextcloud/l10n'
-import axios from '@nextcloud/axios'
-import {generateUrl, imagePath} from '@nextcloud/router'
-import $ from 'jquery'
-
-export default class ChecksumTab {
-  /**
-   * Instantiate a new tab.
-   */
-  constructor(el) {
-    this.$el = $(el)
-  }
-
-  /**
-   * Return associated file info object.
-   */
-  getFileInfo() {
-    return this.fileInfo
-  }
-
-  /**
-   * Renders this details view.
-   */
-  render(fileInfo) {
-    this.fileInfo = fileInfo
-    this._renderSelectList(this.$el)
-  }
-
-  _renderSelectList($el) {
-    $el.html('<div class="get-checksum">'
-      + '<select id="choose-algorithm">'
-        + '<option value="">' + t('checksum', 'Choose Algorithm') + '</option>'
-        + '<option value="md5">MD5</option>'
-        + '<option value="sha1">SHA1</option>'
-        + '<option value="sha256">SHA256</option>'
-        + '<option value="sha384">SHA384</option>'
-        + '<option value="sha512">SHA512</option>'
-        + '<option value="crc32">CRC32</option>'
-      + '</select></div>'
-    )
-    $el.find('#choose-algorithm').change((e) => this._onChangeEvent(e))
-  }
-
-  /**
-   * Ajax callback for generating checksum hash.
-   */
-  async check(fileInfo, algorithmType) {
-    // skip call if fileInfo is null
-    if(null == fileInfo) {
-      this.updateDisplay({
-        response: 'error',
-        msg: t('checksum', 'No fileinfo provided.')
-      })
-
-      return
-    }
-
-    const url = generateUrl('/apps/checksum/check')
-    const params = {source: fileInfo.path + fileInfo.name, type: algorithmType}
-    const {data} = await axios.get(url, {params})
-    this.updateDisplay(data, algorithmType)
-  }
-
-  /**
-   * Display message from ajax callback.
-   */
-  updateDisplay(data, algorithmType) {
-    let msg = ''
-    if('success' == data.response) {
-      msg = algorithmType + ': ' + data.msg
-    }
-    if('error' == data.response) {
-      msg = data.msg
-    }
-
-    msg += '<br><br><a id="reload-checksum" class="icon icon-history" style="display:block" href=""></a>'
-    this.$el.find('.get-checksum').html(msg)
-    this.$el.find('#reload-checksum').click((e) => this._onReloadEvent(e))
-  }
-
-  /**
-   * Handle algorithm change.
-   */
-  _onChangeEvent(ev) {
-    var algorithmType = $(ev.currentTarget).val()
-    if(algorithmType != '') {
-      this.$el.html('<div style="text-align:center word-wrap:break-word" class="get-checksum"><p><img src="'
-        + imagePath('core','loading.gif')
-        + '"><br><br></p><p>'
-        + t('checksum', 'Creating Checksum ...')
-        + '</p></div>')
-      this.check(this.getFileInfo(), algorithmType)
-    }
-  }
-
-  /**
-   * Handle form reset.
-   */
-  _onReloadEvent(ev) {
-    ev.preventDefault()
-    this._renderSelectList(this.$el)
-  }
-}
diff --git a/src/main.js b/src/main.js
index dfd67b4..cc7ad6d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,9 @@
 /**
- * @copyright Copyright (C) 2020 Richard Steinmetz <richard@steinmetz.cloud>
+ * @copyright Copyright (c) 2021 Patrick Herzberg <patrick@westberliner.net>
  *
- * @author Richard Steinmetz <richard@steinmetz.cloud>
+ * @author Patrick Herzberg <patrick@westberliner.net>
+ *
+ * @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
@@ -14,40 +16,14 @@
  * 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 <https://www.gnu.org/licenses/>.
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
  */
 
-import {translate as t} from '@nextcloud/l10n'
-import ChecksumTab from './ChecksumTab'
-
-let tabInstance = null
-const checksumTab = new OCA.Files.Sidebar.Tab({
-  id: 'checksumTabView',
-  name: t('checksum', 'Checksum'),
-  icon: 'icon-category-auth',
-
-  enabled(fileInfo) {
-    return fileInfo && !fileInfo.isDirectory()
-  },
-
-  mount(el, fileInfo, context) {
-    if (!tabInstance) {
-      tabInstance = new ChecksumTab(el)
-    }
-    tabInstance.render(fileInfo)
-  },
-
-  update(fileInfo) {
-    tabInstance.render(fileInfo)
-  },
-
-  destroy() {
-    tabInstance = null
-  },
-})
+import ChecksumTab from './views/ChecksumTab'
 
 window.addEventListener('DOMContentLoaded', function() {
-  if (OCA.Files && OCA.Files.Sidebar) {
-    OCA.Files.Sidebar.registerTab(checksumTab)
-  }
+	if (OCA.Files && OCA.Files.Sidebar) {
+		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab('checksum', ChecksumTab))
+	}
 })
diff --git a/src/views/ChecksumTab.vue b/src/views/ChecksumTab.vue
new file mode 100644
index 0000000..f450bfb
--- /dev/null
+++ b/src/views/ChecksumTab.vue
@@ -0,0 +1,156 @@
+<!--
+  - @copyright Copyright (c) 2021 Patrick Herzberg <patrick@westberliner.net>
+  -
+  - @author Patrick Herzberg <patrick@westberliner.net>
+  -
+  - @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/>.
+  -
+  -->
+
+<template>
+	<Tab :id="id"
+		:icon="icon"
+		:name="name">
+		<!-- checksum content -->
+		<Multiselect
+			v-model="algorithm"
+			:options="algorithms"
+			track-by="id"
+			label="label"
+			@change="onAlgorithmChangeHandler" />
+		<br>
+		<br>
+		<p :class="{ 'icon-loading': loading }" class="checksum-hash-result">
+			<span v-if="!loading && algorithm.id !== ''"><strong>{{ algorithm.label }}:</strong>{{ hash }}</span>
+		</p>
+	</Tab>
+</template>
+
+<script>
+import { generateUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import Tab from '@nextcloud/vue/dist/Components/AppSidebarTab'
+
+const algorithms = [
+	{ id: '', label: t('checksum', 'Choose Algorithm') },
+	{ id: 'md5', label: 'MD5' },
+	{ id: 'sha1', label: 'SHA1' },
+	{ id: 'sha256', label: 'SHA256' },
+	{ id: 'sha384', label: 'SHA384' },
+	{ id: 'sha512', label: 'SHA1' },
+	{ id: 'crc32', label: 'CRC32' },
+	{ id: 'crc32b', label: 'CRC32b' },
+]
+
+export default {
+	name: 'ChecksumTab',
+
+	components: {
+		Tab,
+		Multiselect,
+	},
+
+	mixins: [],
+
+	props: {
+		fileInfo: {
+			type: Object,
+			default: () => {},
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			icon: 'icon-category-auth',
+			loading: false,
+			name: t('checksum', 'Checksum'),
+			algorithm: algorithms[0],
+			algorithms,
+			hash: '',
+		}
+	},
+
+	computed: {
+		/**
+		 * Needed to differenciate the tabs.
+		 * Pulled from the AppSidebarTab component.
+		 *
+		 * @returns {string}
+		 */
+		id() {
+			return 'checksum'
+		},
+
+		/**
+		 * Returns the current active tab.
+		 * Needed because AppSidebarTab also uses $parent.activeTab.
+		 *
+		 * @returns {string}
+		 */
+		activeTab() {
+			return this.$parent.activeTab
+		},
+	},
+
+	methods: {
+		/**
+		 * Handles selection change event by triggering hash ajax call.
+		 *
+		 * @param {Object} algorithm - The selected algorithm object.
+		 * @param {string} algorithm.id - The selected algorithm id.
+		 * @param {string} algorithm.label - The selected algorithm label.
+		 */
+		onAlgorithmChangeHandler(algorithm) {
+			this.hash = ''
+			if (algorithm.id.length) {
+				this.loading = true
+				this.getChecksum(algorithm.id)
+			}
+		},
+
+		/**
+		 * @param {string} algorithmType - The hasg algorithm type.
+		 */
+		getChecksum(algorithmType) {
+			const url = generateUrl('/apps/checksum/check')
+			const params = { source: this.fileInfo.path + this.fileInfo.name, type: algorithmType }
+			axios.get(url, { params }).then(response => {
+				this.loading = false
+				this.hash = response.data.msg
+			}).catch(err => {
+				console.error(err)
+			})
+		},
+
+		/**
+		 * Reset the current view to its default state
+		 */
+		resetState() {
+			this.loading = false
+			this.algorithm = ''
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.checksum-hash-result {
+		text-align: center;
+		word-wrap: break-word;
+	}
+</style>
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 0000000..e6e8707
--- /dev/null
+++ b/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'],
+}
diff --git a/webpack.common.js b/webpack.common.js
index 24853b5..0c9e8b8 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -1,6 +1,8 @@
 const path = require('path')
+const {merge} = require('webpack-merge')
+const webpackConfig = require('@nextcloud/webpack-vue-config')
 
-module.exports = {
+module.exports = merge(webpackConfig, {
   entry: {
     main: path.join(__dirname, 'src/main.js'),
   },
@@ -17,4 +19,4 @@ module.exports = {
       },
     ],
   },
-}
+});