Skip to content

Commit 0acaec1

Browse files
author
minjk-bl
committed
Edit package manager
1 parent afafa8b commit 0acaec1

3 files changed

Lines changed: 54 additions & 8 deletions

File tree

‎visualpython/css/component/packageManager.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
}
7575
.vp-pm-func-right {
7676
float: right;
77+
display: flex;
7778
}
7879
.vp-pm-sort {
7980
cursor: pointer;
@@ -100,6 +101,14 @@
100101
.vp-pm-sort-menu-item:hover {
101102
color: var(--vp-font-highlight);
102103
}
104+
.vp-pm-func-reload {
105+
width: 22px;
106+
height: 22px;
107+
display: inline-block;
108+
margin-top: 4px;
109+
margin-right: 10px;
110+
cursor: pointer;
111+
}
103112
/* Empty List */
104113
.vp-pm-table {
105114
margin-top: 10px;

‎visualpython/html/component/packageManager.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,16 @@
1212
<div class="vp-pm-sort vp-close-on-blur-btn" data-menu="sort" title="Sort">
1313
</div>
1414
<div class="vp-pm-sort-menu-box vp-temp-popup-menu vp-close-on-blur">
15+
<div class="vp-pm-sort-menu-item" data-menu="registered">Registered</div>
1516
<div class="vp-pm-sort-menu-item" data-menu="name">by Names</div>
1617
<div class="vp-pm-sort-menu-item" data-menu="installed">Installed</div>
1718
<div class="vp-pm-sort-menu-item" data-menu="uninstalled">Uninstalled</div>
1819
</div>
1920
</div>
2021
<div class="vp-pm-func-right">
22+
<div class="vp-pm-func-reload vp-icon-refresh" title="Reload package list">
23+
24+
</div>
2125
<div class="vp-pm-func-default-mode">
2226
<button class="vp-button vp-pm-add" data-menu="add" title="Add new package to manage">+ Package</button>
2327
</div>

‎visualpython/js/com/component/PackageManager.js‎

Lines changed: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,11 @@ define([
1717
'vp_base/js/com/com_util',
1818
'vp_base/js/com/com_Const',
1919
'vp_base/js/com/com_String',
20+
'vp_base/js/com/component/SuggestInput',
2021
'vp_base/js/com/component/PopupComponent',
2122
'vp_base/js/com/component/FileNavigation',
2223
'vp_base/js/com/component/LoadingSpinner'
23-
], function(ifHtml, ifCss, com_util, com_Const, com_String, PopupComponent, FileNavigation, LoadingSpinner) {
24+
], function(ifHtml, ifCss, com_util, com_Const, com_String, SuggestInput, PopupComponent, FileNavigation, LoadingSpinner) {
2425

2526
/**
2627
* PackageManager
@@ -89,18 +90,24 @@ define([
8990
}
9091
}
9192

93+
_unbindEvent() {
94+
super._unbindEvent();
95+
$(document).off('change', this.wrapSelector('.vp-pm-search'));
96+
}
97+
9298
_bindEvent() {
9399
super._bindEvent();
94100
/** Implement binding events */
95101
let that = this;
96102

97103
// search item
98-
$(this.wrapSelector('.vp-pm-search')).on('change', function(evt) {
104+
$(document).on('change', this.wrapSelector('.vp-pm-search'), function(evt) {
99105
var value = $(this).val();
100106
if (value != '') {
101107
$(that.wrapSelector('.vp-pm-item')).hide();
102108
$(that.wrapSelector('.vp-pm-item')).filter(function() {
103-
return $(this).data('key').search(value) >= 0;
109+
let key = $(this).data('key');
110+
return key.search(value.toLowerCase()) >= 0;
104111
}).show();
105112
} else {
106113
$(that.wrapSelector('.vp-pm-item')).show();
@@ -116,7 +123,14 @@ define([
116123
// sort item
117124
$(this.wrapSelector('.vp-pm-sort-menu-item')).on('click', function() {
118125
var menu = $(this).data('menu');
119-
if (menu === 'name') {
126+
if (menu === 'registered') {
127+
// sort by name
128+
$(that.wrapSelector('.vp-pm-item')).sort(function(a, b) {
129+
var keyA = parseInt($(a).data('seq'));
130+
var keyB = parseInt($(b).data('seq'));
131+
return keyA > keyB ? 1 : -1
132+
}).appendTo($(that.wrapSelector('.vp-pm-table')))
133+
} else if (menu === 'name') {
120134
// sort by name
121135
$(that.wrapSelector('.vp-pm-item')).sort(function(a, b) {
122136
var keyA = $(a).data('key');
@@ -147,6 +161,16 @@ define([
147161
return insA > insB ? 1 : -1
148162
}).appendTo($(that.wrapSelector('.vp-pm-table')))
149163
}
164+
$(that.wrapSelector('.vp-pm-sort-menu-box')).hide();
165+
});
166+
167+
// reload package list
168+
$(this.wrapSelector('.vp-pm-func-reload')).on('click', function() {
169+
// reset search keyword
170+
$(that.wrapSelector('.vp-pm-search')).val('');
171+
172+
// load package list
173+
that.loadPackageList();
150174
});
151175

152176
// add package
@@ -355,11 +379,12 @@ define([
355379
*
356380
* @param {String} key
357381
* @param {Object} info installed, version, path
382+
* @param {number} index sequence of initial package list
358383
* @returns
359384
*/
360-
renderPackageItem(key, info) {
385+
renderPackageItem(key, info, index) {
361386
var item = new com_String();
362-
item.appendFormatLine('<div class="{0}" data-key="{1}" data-installed="{2}">', 'vp-pm-item', key, info.installed===true?'1':'0');
387+
item.appendFormatLine('<div class="{0}" data-key="{1}" data-installed="{2}" data-seq="{3}">', 'vp-pm-item', key, info.installed===true?'1':'0', index);
363388
item.appendFormatLine('<div class="{0}" title="{1}">', 'vp-pm-item-header', (info.path?info.path:''));
364389
item.appendFormatLine('<label>{0}</label>', key);
365390
if (info.installed === true) {
@@ -401,17 +426,25 @@ define([
401426
$(this.wrapSelector('.vp-pm-table')).html('');
402427

403428
let packageList = Object.keys(this.packageLib);
429+
430+
// set auto search
431+
let searchInput = new SuggestInput();
432+
searchInput.addClass('vp-pm-search vp-input');
433+
searchInput.setPlaceholder("Search");
434+
searchInput.setSuggestList(function () { return packageList; });
435+
$(this.wrapSelector('.vp-pm-search')).replaceWith(searchInput.toTagString());
436+
404437
let loadingSpinner = new LoadingSpinner($(this.wrapSelector('.vp-popup-body')));
405438
vpKernel.getPackageList(packageList).then(function(resultObj) {
406439
let { result } = resultObj;
407440
let packageInfo = JSON.parse(result);
408441

409442
// load code list
410443
var innerFuncCode = new com_String();
411-
Object.keys(packageInfo).forEach(key => {
444+
Object.keys(packageInfo).forEach((key, idx) => {
412445
let info = packageInfo[key]; // installed, version, path
413446
if (info) {
414-
var item = that.renderPackageItem(key, info);
447+
var item = that.renderPackageItem(key, info, idx);
415448
innerFuncCode.append(item);
416449
}
417450
});

0 commit comments

Comments
 (0)