Switching frontend to vue. Adding crc32b algorithm.

3 files changed, 166 insertions, 137 deletions

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>