Converted tag manager to be fully vue based

This commit is contained in:
Dan Brown 2017-08-13 11:50:40 +01:00
parent f338dbe3f8
commit b023699f1b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 13 additions and 27 deletions

View File

@ -145,23 +145,6 @@ module.exports = function (ngApp, events) {
}]); }]);
ngApp.controller('PageTagController', ['$scope', '$http', '$attrs',
function ($scope, $http, $attrs) {
const pageId = Number($attrs.pageId);
$scope.tags = [];
$scope.sortOptions = {
handle: '.handle',
items: '> tr',
containment: "parent",
axis: "y"
};
// TODO - Delete
}]);
ngApp.controller('PageAttachmentController', ['$scope', '$http', '$attrs', ngApp.controller('PageAttachmentController', ['$scope', '$http', '$attrs',
function ($scope, $http, $attrs) { function ($scope, $http, $attrs) {

View File

@ -23,8 +23,7 @@ let methods = {
*/ */
tagChange(tag) { tagChange(tag) {
let tagPos = this.tags.indexOf(tag); let tagPos = this.tags.indexOf(tag);
if (tagPos !== this.tags.length-1 || tag.name !== '' || tag.value !== '') return; if (tagPos === this.tags.length-1 && (tag.name !== '' || tag.value !== '')) this.addEmptyTag();
this.addEmptyTag();
}, },
/** /**
@ -43,7 +42,11 @@ let methods = {
let tagPos = this.tags.indexOf(tag); let tagPos = this.tags.indexOf(tag);
if (tagPos === -1) return; if (tagPos === -1) return;
this.tags.splice(tagPos, 1); this.tags.splice(tagPos, 1);
} },
getTagFieldName(index, key) {
return `tags[${index}][${key}]`;
},
}; };
function mounted() { function mounted() {

View File

@ -18,9 +18,9 @@
<transition-group name="test" tag="div"> <transition-group name="test" tag="div">
<div v-for="(tag, i) in tags" :key="tag.key"> <div v-for="(tag, i) in tags" :key="tag.key">
<div width="20" class="handle" ><i class="zmdi zmdi-menu"></i></div> <div width="20" class="handle" ><i class="zmdi zmdi-menu"></i></div>
<div><input autosuggest="{{ baseUrl('/ajax/tags/suggest/names') }}" autosuggest-type="name" class="outline" :name="tags[i].name" <div><input autosuggest="{{ baseUrl('/ajax/tags/suggest/names') }}" autosuggest-type="name" class="outline" :name="getTagFieldName(i, 'name')"
v-model="tag.name" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag') }}"></div> v-model="tag.name" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag') }}"></div>
<div><input autosuggest="{{ baseUrl('/ajax/tags/suggest/values') }}" autosuggest-type="value" class="outline" :name="tags[i].value" <div><input autosuggest="{{ baseUrl('/ajax/tags/suggest/values') }}" autosuggest-type="value" class="outline" :name="getTagFieldName(i, 'value')"
v-model="tag.value" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_value') }}"></div> v-model="tag.value" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_value') }}"></div>
<div width="10" v-show="tags.length !== 1" class="text-center text-neg" style="padding: 0;" @click="removeTag(tag)"><i class="zmdi zmdi-close"></i></div> <div width="10" v-show="tags.length !== 1" class="text-center text-neg" style="padding: 0;" @click="removeTag(tag)"><i class="zmdi zmdi-close"></i></div>
</div> </div>
@ -86,15 +86,15 @@
<p class="muted small">{{ trans('entities.attachments_explain_link') }}</p> <p class="muted small">{{ trans('entities.attachments_explain_link') }}</p>
<div class="form-group"> <div class="form-group">
<label for="attachment-via-link">{{ trans('entities.attachments_link_name') }}</label> <label for="attachment-via-link">{{ trans('entities.attachments_link_name') }}</label>
<input type="text" placeholder="{{ trans('entities.attachments_link_name') }}" ng-model="file.name"> <input placeholder="{{ trans('entities.attachments_link_name') }}" ng-model="file.name">
<p class="small neg" ng-repeat="error in errors.link.name" ng-bind="error"></p> <p class="small neg" ng-repeat="error in errors.link.name" ng-bind="error"></p>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="attachment-via-link">{{ trans('entities.attachments_link_url') }}</label> <label for="attachment-via-link">{{ trans('entities.attachments_link_url') }}</label>
<input type="text" placeholder="{{ trans('entities.attachments_link_url_hint') }}" ng-model="file.link"> <input placeholder="{{ trans('entities.attachments_link_url_hint') }}" ng-model="file.link">
<p class="small neg" ng-repeat="error in errors.link.link" ng-bind="error"></p> <p class="small neg" ng-repeat="error in errors.link.link" ng-bind="error"></p>
</div> </div>
<button type="submit" class="button pos">{{ trans('entities.attach') }}</button> <button class="button pos">{{ trans('entities.attach') }}</button>
</div> </div>
</div> </div>
@ -122,14 +122,14 @@
<div tab-content="link"> <div tab-content="link">
<div class="form-group"> <div class="form-group">
<label for="attachment-link-edit">{{ trans('entities.attachments_link_url') }}</label> <label for="attachment-link-edit">{{ trans('entities.attachments_link_url') }}</label>
<input type="text" id="attachment-link-edit" placeholder="{{ trans('entities.attachment_link') }}" ng-model="editFile.link"> <input id="attachment-link-edit" placeholder="{{ trans('entities.attachment_link') }}" ng-model="editFile.link">
<p class="small neg" ng-repeat="error in errors.edit.link" ng-bind="error"></p> <p class="small neg" ng-repeat="error in errors.edit.link" ng-bind="error"></p>
</div> </div>
</div> </div>
</div> </div>
<button type="button" class="button" ng-click="cancelEdit()">{{ trans('common.back') }}</button> <button type="button" class="button" ng-click="cancelEdit()">{{ trans('common.back') }}</button>
<button type="submit" class="button pos">{{ trans('common.save') }}</button> <button class="button pos">{{ trans('common.save') }}</button>
</div> </div>
</div> </div>