Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

chore(systemtags): Replace php markup with vue 

Signed-off-by: Christopher Ng <chrng8@gmail.com>
pull/41335/head
Christopher Ng 2 years ago
parent
e1a934d90c
commit
b4b5612d7c
6 changed files with 35 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      apps/systemtags/css/settings.css
  2. 193
      apps/systemtags/js/admin.js
  3. 1
      apps/systemtags/lib/Settings/Admin.php
  4. 32
      apps/systemtags/src/admin.ts
  5. 39
      apps/systemtags/templates/admin.php
  6. 1
      webpack.modules.js

29
apps/systemtags/css/settings.css
View File

@ -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;
}

193
apps/systemtags/js/admin.js
View File

@ -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();
}
});

1
apps/systemtags/lib/Settings/Admin.php
View File

@ -32,6 +32,7 @@ class Admin implements ISettings {
* @return TemplateResponse
*/
public function getForm() {
\OCP\Util::addScript('systemtags', 'admin');
return new TemplateResponse('systemtags', 'admin', [], '');
}

32
apps/systemtags/src/admin.ts
View File

@ -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')

39
apps/systemtags/templates/admin.php
View File

@ -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>

1
webpack.modules.js
View File

@ -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'),

Write Preview
Loading…
Cancel
Save