diff --git a/package.json b/package.json index 1ae0e7f68..f447ec786 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "markdown-it": "^8.3.1", "markdown-it-task-lists": "^2.0.0", "moment": "^2.12.0", - "vue": "^2.2.6" + "vue": "^2.2.6", + "vuedraggable": "^2.14.1" }, "browser": { "vue": "vue/dist/vue.common.js" diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js index de3ce81c6..c317da753 100644 --- a/resources/assets/js/controllers.js +++ b/resources/assets/js/controllers.js @@ -157,74 +157,7 @@ module.exports = function (ngApp, events) { containment: "parent", axis: "y" }; - - /** - * Push an empty tag to the end of the scope tags. - */ - function addEmptyTag() { - $scope.tags.push({ - name: '', - value: '' - }); - } - $scope.addEmptyTag = addEmptyTag; - - /** - * Get all tags for the current book and add into scope. - */ - function getTags() { - let url = window.baseUrl(`/ajax/tags/get/page/${pageId}`); - $http.get(url).then((responseData) => { - $scope.tags = responseData.data; - addEmptyTag(); - }); - } - getTags(); - - /** - * Set the order property on all tags. - */ - function setTagOrder() { - for (let i = 0; i < $scope.tags.length; i++) { - $scope.tags[i].order = i; - } - } - - /** - * When an tag changes check if another empty editable - * field needs to be added onto the end. - * @param tag - */ - $scope.tagChange = function(tag) { - let cPos = $scope.tags.indexOf(tag); - if (cPos !== $scope.tags.length-1) return; - - if (tag.name !== '' || tag.value !== '') { - addEmptyTag(); - } - }; - - /** - * When an tag field loses focus check the tag to see if its - * empty and therefore could be removed from the list. - * @param tag - */ - $scope.tagBlur = function(tag) { - let isLast = $scope.tags.length - 1 === $scope.tags.indexOf(tag); - if (tag.name === '' && tag.value === '' && !isLast) { - let cPos = $scope.tags.indexOf(tag); - $scope.tags.splice(cPos, 1); - } - }; - - /** - * Remove a tag from the current list. - * @param tag - */ - $scope.removeTag = function(tag) { - let cIndex = $scope.tags.indexOf(tag); - $scope.tags.splice(cIndex, 1); - }; + // TODO - Delete }]); diff --git a/resources/assets/js/vues/tag-manager.js b/resources/assets/js/vues/tag-manager.js new file mode 100644 index 000000000..cf3e4d34e --- /dev/null +++ b/resources/assets/js/vues/tag-manager.js @@ -0,0 +1,65 @@ +const draggable = require('vuedraggable'); + +let data = { + pageId: false, + tags: [], +}; + +const components = {draggable}; + +let computed = { + +}; + +let methods = { + + addEmptyTag() { + this.tags.push({name: '', value: '', key: Math.random().toString(36).substring(7)}); + }, + + /** + * When an tag changes check if another empty editable field needs to be added onto the end. + * @param tag + */ + tagChange(tag) { + let tagPos = this.tags.indexOf(tag); + if (tagPos !== this.tags.length-1 || tag.name !== '' || tag.value !== '') return; + this.addEmptyTag(); + }, + + /** + * When an tag field loses focus check the tag to see if its + * empty and therefore could be removed from the list. + * @param tag + */ + tagBlur(tag) { + let isLast = (this.tags.indexOf(tag) === this.tags.length-1); + if (tag.name !== '' || tag.value !== '' || isLast) return; + let cPos = this.tags.indexOf(tag); + this.tags.splice(cPos, 1); + }, + + removeTag(tag) { + let tagPos = this.tags.indexOf(tag); + if (tagPos === -1) return; + this.tags.splice(tagPos, 1); + } +}; + +function mounted() { + this.pageId = Number(this.$el.getAttribute('page-id')); + + let url = window.baseUrl(`/ajax/tags/get/page/${this.pageId}`); + this.$http.get(url).then(response => { + let tags = response.data; + for (let i = 0, len = tags.length; i < len; i++) { + tags[i].key = Math.random().toString(36).substring(7); + } + this.tags = tags; + this.addEmptyTag(); + }); +} + +module.exports = { + data, computed, methods, mounted, components +}; \ No newline at end of file diff --git a/resources/assets/js/vues/vues.js b/resources/assets/js/vues/vues.js index e6d4b9f5b..a3f6ec8e5 100644 --- a/resources/assets/js/vues/vues.js +++ b/resources/assets/js/vues/vues.js @@ -9,6 +9,7 @@ let vueMapping = { 'entity-dashboard': require('./entity-search'), 'code-editor': require('./code-editor'), 'image-manager': require('./image-manager'), + 'tag-manager': require('./tag-manager'), }; window.vues = {}; diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index b06892c1d..65fdfbc4b 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -226,7 +226,7 @@ width: 100%; min-width: 50px; } - .tags td { + .tags td, .tag-table > div > div > div { padding-right: $-s; padding-top: $-s; position: relative; diff --git a/resources/assets/sass/_tables.scss b/resources/assets/sass/_tables.scss index 21553b839..ea517fee3 100644 --- a/resources/assets/sass/_tables.scss +++ b/resources/assets/sass/_tables.scss @@ -67,4 +67,17 @@ table.file-table { .ui-sortable-helper { display: table; } +} + +.fake-table { + display: table; + > div { + display: table-row-group; + } + > div > div { + display: table-row; + } + > div > div > div { + display: table-cell; + } } \ No newline at end of file diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php index ecf7619b7..9b8cd4ed3 100644 --- a/resources/views/pages/form-toolbox.blade.php +++ b/resources/views/pages/form-toolbox.blade.php @@ -9,31 +9,36 @@ @endif -
+

{{ trans('entities.page_tags') }}

{!! nl2br(e(trans('entities.tags_explain'))) !!}

- - - - - - - - - -
+ + + +
+
+
+
+
+
+ + + - - +
+
+