mirror of https://github.com/nextcloud/server
chore(systemtags): Replace php markup with vue
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng
parent
e1a934d90c
commit
b4b5612d7c
|
|
@ -1,29 +0,0 @@
|
|||
.systemtag-input {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.systemtag-input--name {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.systemtag-input--name,
|
||||
.systemtag-input--level {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.systemtag-input--actions {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#systemtags .select2-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
#systemtags .select2-container .select2-choice {
|
||||
height: auto;
|
||||
}
|
||||
#systemtag_name {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2016 Joas Schilling <coding@schilljs.com>
|
||||
* @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
|
||||
*
|
||||
* @license AGPL-3.0-or-later
|
||||
*
|
||||
* 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/>.
|
||||
*
|
||||
*/
|
||||
|
||||
(function() {
|
||||
if (!OCA.SystemTags) {
|
||||
/**
|
||||
* @namespace
|
||||
*/
|
||||
OCA.SystemTags = {};
|
||||
}
|
||||
|
||||
OCA.SystemTags.Admin = {
|
||||
|
||||
collection: null,
|
||||
|
||||
init: function() {
|
||||
var self = this;
|
||||
|
||||
this.collection = OC.SystemTags.collection;
|
||||
this.collection.fetch({
|
||||
success: function() {
|
||||
$('#systemtag').select2(_.extend(self.select2));
|
||||
$('#systemtag').parent().children('.select2-container').attr('aria-expanded', 'false')
|
||||
}
|
||||
});
|
||||
|
||||
var self = this;
|
||||
$('#systemtag_name').on('keyup', function(e) {
|
||||
if (e.which === 13) {
|
||||
_.bind(self._onClickSubmit, self)();
|
||||
}
|
||||
});
|
||||
$('#systemtag_submit').on('click', _.bind(this._onClickSubmit, this));
|
||||
$('#systemtag_delete').on('click', _.bind(this._onClickDelete, this));
|
||||
$('#systemtag_reset').on('click', _.bind(this._onClickReset, this));
|
||||
$('#systemtag').select2(_.extend(self.select2)).on('select2-open', () => {
|
||||
$('.select2-container').attr('aria-expanded', 'true')
|
||||
});
|
||||
$('#systemtag').select2(_.extend(self.select2)).on('select2-close', () => {
|
||||
$('.select2-container').attr('aria-expanded', 'false')
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Selecting a systemtag in select2
|
||||
*
|
||||
* @param {OC.SystemTags.SystemTagModel} tag
|
||||
*/
|
||||
onSelectTag: function (tag) {
|
||||
var level = 0;
|
||||
if (tag.get('userVisible')) {
|
||||
level += 2;
|
||||
if (tag.get('userAssignable')) {
|
||||
level += 1;
|
||||
}
|
||||
}
|
||||
|
||||
$('#systemtag_name').val(tag.get('name'));
|
||||
$('#systemtag_level').val(level);
|
||||
|
||||
this._prepareForm(tag.get('id'));
|
||||
},
|
||||
|
||||
/**
|
||||
* Clicking the "Create"/"Update" button
|
||||
*/
|
||||
_onClickSubmit: function () {
|
||||
var level = parseInt($('#systemtag_level').val(), 10),
|
||||
tagId = $('#systemtags').attr('data-systemtag-id');
|
||||
var data = {
|
||||
name: $('#systemtag_name').val(),
|
||||
userVisible: level === 2 || level === 3,
|
||||
userAssignable: level === 3
|
||||
};
|
||||
|
||||
if (!data.name) {
|
||||
OCP.Toast.error(t('systemtags_manager', 'Tag name is empty'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (tagId) {
|
||||
var model = this.collection.get(tagId);
|
||||
model.save(data);
|
||||
} else {
|
||||
this.collection.create(data);
|
||||
}
|
||||
|
||||
this._onClickReset();
|
||||
},
|
||||
|
||||
/**
|
||||
* Clicking the "Delete" button
|
||||
*/
|
||||
_onClickDelete: function () {
|
||||
var tagId = $('#systemtags').attr('data-systemtag-id');
|
||||
var model = this.collection.get(tagId);
|
||||
model.destroy();
|
||||
|
||||
this._onClickReset();
|
||||
},
|
||||
|
||||
/**
|
||||
* Clicking the "Reset" button
|
||||
*/
|
||||
_onClickReset: function () {
|
||||
$('#systemtag_name').val('');
|
||||
$('#systemtag_level').val(3);
|
||||
this._prepareForm(0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Prepare the form for create/update
|
||||
*
|
||||
* @param {number} tagId
|
||||
*/
|
||||
_prepareForm: function (tagId) {
|
||||
if (tagId > 0) {
|
||||
$('#systemtags').attr('data-systemtag-id', tagId);
|
||||
$('#systemtag_delete').removeClass('hidden');
|
||||
$('#systemtag_submit span').text(t('systemtags_manager', 'Update'));
|
||||
$('#systemtag_create').addClass('hidden');
|
||||
} else {
|
||||
$('#systemtag').select2('val', '');
|
||||
$('#systemtags').attr('data-systemtag-id', '');
|
||||
$('#systemtag_delete').addClass('hidden');
|
||||
$('#systemtag_submit span').text(t('systemtags_manager', 'Create'));
|
||||
$('#systemtag_create').removeClass('hidden');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Select2 options for the SystemTag dropdown
|
||||
*/
|
||||
select2: {
|
||||
allowClear: false,
|
||||
multiple: false,
|
||||
placeholder: t('systemtags_manager', 'Select tag …'),
|
||||
query: _.debounce(function(query) {
|
||||
query.callback({
|
||||
results: OCA.SystemTags.Admin.collection.filterByName(query.term)
|
||||
});
|
||||
}, 100, true),
|
||||
id: function(element) {
|
||||
return element;
|
||||
},
|
||||
initSelection: function(element, callback) {
|
||||
var selection = ($(element).val() || []).split('|').sort();
|
||||
callback(selection);
|
||||
},
|
||||
formatResult: function (tag) {
|
||||
return OC.SystemTags.getDescriptiveTag(tag);
|
||||
},
|
||||
formatSelection: function (tag) {
|
||||
OCA.SystemTags.Admin.onSelectTag(tag);
|
||||
return OC.SystemTags.getDescriptiveTag(tag);
|
||||
},
|
||||
escapeMarkup: function(m) {
|
||||
return m;
|
||||
},
|
||||
sortResults: function(results) {
|
||||
results.sort(function(a, b) {
|
||||
return OC.Util.naturalSortCompare(a.get('name'), b.get('name'));
|
||||
});
|
||||
return results;
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
if (!window.TESTING) {
|
||||
OCA.SystemTags.Admin.init();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -32,6 +32,7 @@ class Admin implements ISettings {
|
|||
* @return TemplateResponse
|
||||
*/
|
||||
public function getForm() {
|
||||
\OCP\Util::addScript('systemtags', 'admin');
|
||||
return new TemplateResponse('systemtags', 'admin', [], '');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* @copyright 2023 Christopher Ng <chrng8@gmail.com>
|
||||
*
|
||||
* @author Christopher Ng <chrng8@gmail.com>
|
||||
*
|
||||
* @license AGPL-3.0-or-later
|
||||
*
|
||||
* 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 { getRequestToken } from '@nextcloud/auth'
|
||||
|
||||
import SystemTagsSection from './views/SystemTagsSection.vue'
|
||||
|
||||
// @ts-expect-error __webpack_nonce__ is injected by webpack
|
||||
__webpack_nonce__ = btoa(getRequestToken())
|
||||
|
||||
const SystemTagsSectionView = Vue.extend(SystemTagsSection)
|
||||
new SystemTagsSectionView().$mount('#vue-admin-systemtags')
|
||||
|
|
@ -18,43 +18,6 @@
|
|||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
script('core', 'systemtags');
|
||||
|
||||
script('systemtags', 'admin');
|
||||
style('systemtags', 'settings');
|
||||
|
||||
/** @var \OCP\IL10N $l */
|
||||
?>
|
||||
|
||||
<form id="systemtags" class="section" data-systemtag-id="">
|
||||
<h2><?php p($l->t('Collaborative tags')); ?></h2>
|
||||
<p class="settings-hint"><?php p($l->t('Collaborative tags are available for all users. Restricted tags are visible to users but cannot be assigned by them. Invisible tags are for internal use, since users cannot see or assign them.')); ?></p>
|
||||
|
||||
<input type="hidden" name="systemtag" id="systemtag" placeholder="<?php p($l->t('Select tag …')); ?>" />
|
||||
|
||||
<h3 id="systemtag_create"><?php p($l->t('Create a new tag')); ?></h3>
|
||||
|
||||
<div class="systemtag-input">
|
||||
<div class="systemtag-input--name">
|
||||
<label for="systemtag_name"><?php p($l->t('Tag name')); ?></label>
|
||||
<input type="text" id="systemtag_name" name="systemtag_name" placeholder="<?php p($l->t('Name')); ?>">
|
||||
</div>
|
||||
|
||||
<div class="systemtag-input--level">
|
||||
<label for="systemtag_level"><?php p($l->t('Tag level')); ?></label>
|
||||
<select id="systemtag_level">
|
||||
<option value="3"><?php p($l->t('Public')); ?></option>
|
||||
<option value="2"><?php p($l->t('Restricted')); ?></option>
|
||||
<option value="0"><?php p($l->t('Invisible')); ?></option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="systemtag-input--actions">
|
||||
<a id="systemtag_delete" class="hidden button systemtag-input--actions-button"><span><?php p($l->t('Delete')); ?></span></a>
|
||||
<a id="systemtag_reset" class="button systemtag-input--actions-button"><span><?php p($l->t('Reset')); ?></span></a>
|
||||
<a id="systemtag_submit" class="button systemtag-input--actions-button"><span><?php p($l->t('Create')); ?></span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div id="vue-admin-systemtags"></div>
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@ module.exports = {
|
|||
},
|
||||
systemtags: {
|
||||
init: path.join(__dirname, 'apps/systemtags/src', 'init.ts'),
|
||||
admin: path.join(__dirname, 'apps/systemtags/src', 'admin.ts'),
|
||||
},
|
||||
theming: {
|
||||
'personal-theming': path.join(__dirname, 'apps/theming/src', 'personal-settings.js'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue