* Refactor browse view of store.
This commit is contained in:
zhaoke
@@ -688,6 +688,7 @@ $lang->navGroup->app = 'devops';
|
||||
$lang->navGroup->pipeline = 'devops';
|
||||
$lang->navGroup->devopssetting = 'devops';
|
||||
$lang->navGroup->space = 'devops';
|
||||
$lang->navGroup->store = 'devops';
|
||||
$lang->navGroup->instance = 'devops';
|
||||
|
||||
$lang->navGroup->company = 'system';
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
.app-name {font-size: 16px; font-weight: 700; display: inline-block;padding: 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
|
||||
#storeTree .tree-item {cursor: pointer;}
|
||||
.store-item {justify-content: space-between;}
|
||||
.tree li.tree-item.selected{color: #438EFF !important;}
|
||||
#storePager {background: white; margin-top: 20px; padding: 6px 15px; display: flex; justify-content: end; font-weight: 700; color: rgb(131, 138, 157);}
|
||||
#storePager .ghost {color: rgb(131, 138, 157);}
|
||||
#mainContent > .icon-search {display: none;}
|
||||
#storeTree {background: white; padding: 20px;}
|
||||
#cloudAppContainer .install-btn {padding-left: 25px; padding-right: 25px;}
|
||||
@@ -0,0 +1,51 @@
|
||||
var checkedCategories = {};
|
||||
|
||||
/**
|
||||
* 菜单点击刷新数据。
|
||||
* Refresh data when click menu item.
|
||||
*/
|
||||
window.treeClick = function(info)
|
||||
{
|
||||
if (info.item.items && info.item.items.length > 0) return;
|
||||
if(checkedCategories[info.item.id] != undefined)
|
||||
{
|
||||
$('#' + info.item.id).parent().removeClass('selected');
|
||||
delete checkedCategories[info.item.id];
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#' + info.item.id).parent().addClass('selected');
|
||||
checkedCategories[info.item.id] = true;
|
||||
}
|
||||
|
||||
const form = new FormData();
|
||||
form.append('keyword', $('#name').val());
|
||||
Object.keys(checkedCategories).forEach((id) => form.append('categories[]', id));
|
||||
|
||||
postAndLoadPage(link, form, '#cloudAppContainer');
|
||||
}
|
||||
|
||||
/**
|
||||
* 安装应用。
|
||||
* Install app.
|
||||
*/
|
||||
window.installApp = function()
|
||||
{
|
||||
zui.Modal.open({
|
||||
url: $(this).data('url'),
|
||||
id: 'installModal'
|
||||
});
|
||||
}
|
||||
|
||||
$('#mainContent').on('keydown', '#name', function(event)
|
||||
{
|
||||
console.log(1111, event.key);
|
||||
if (event.key === 'Enter')
|
||||
{
|
||||
const form = new FormData();
|
||||
form.append('keyword', $('#name').val());
|
||||
Object.keys(checkedCategories).forEach((id) => form.append('categories[]', id));
|
||||
|
||||
postAndLoadPage(link, form, '#cloudAppContainer');
|
||||
}
|
||||
});
|
||||
@@ -6,7 +6,7 @@ $lang->store->author = '发布者';
|
||||
$lang->store->empty = '暂无应用';
|
||||
$lang->store->install = '安装';
|
||||
$lang->store->customInstall = '自定义安装';
|
||||
$lang->store->searchApp = '查找应用';
|
||||
$lang->store->searchApp = '请输入应用名称';
|
||||
$lang->store->testChannel = '测试版';
|
||||
$lang->store->stableChannel = '稳定版';
|
||||
$lang->store->appBasicInfo = '基本信息';
|
||||
@@ -21,8 +21,6 @@ $lang->store->gitUrl = '应用源码';
|
||||
$lang->store->dockerfileUrl = 'Dockerfile';
|
||||
$lang->store->forumUrl = '论坛';
|
||||
|
||||
$lang->store->sortTypes = array();
|
||||
$lang->store->sortTypes['id'] = '默认';
|
||||
$lang->store->sortTypes['create_time'] = '最新上架';
|
||||
$lang->store->sortTypes['update_time'] = '最近更新';
|
||||
//$lang->store->sortTypes['name'] = '名称';
|
||||
$lang->store->featureBar['browse']['id'] = '默认';
|
||||
$lang->store->featureBar['browse']['create_time'] = '最新上架';
|
||||
$lang->store->featureBar['browse']['update_time'] = '最近更新';
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
/**
|
||||
* The browse view file of store module of ZenTaoPMS.
|
||||
*
|
||||
* @copyright Copyright 2009-2023 禅道软件（青岛）有限公司(ZenTao Software (Qingdao) Co., Ltd. www.zentao.net)
|
||||
* @license ZPL(https://zpl.pub/page/zplv12.html) or AGPL(https://www.gnu.org/licenses/agpl-3.0.en.html)
|
||||
* @author Ke Zhao<zhaoke@easycorp.ltd>
|
||||
* @package store
|
||||
* @link http://www.zentao.net
|
||||
*/
|
||||
|
||||
namespace zin;
|
||||
|
||||
$tree = array();
|
||||
foreach($categories as $id => $category)
|
||||
{
|
||||
$tree[] = array(
|
||||
'id' => $id,
|
||||
'parent' => 0,
|
||||
'name' => $category,
|
||||
'key' => 'storeTree-' . $id,
|
||||
);
|
||||
}
|
||||
jsVar('tree', $tree);
|
||||
jsVar('postCategories', $postCategories);
|
||||
jsVar('link', inLink('browse', "sortType=$sortType"));
|
||||
|
||||
$setting = usePager();
|
||||
$cloudApps = array_chunk($cloudApps, 3);
|
||||
$groups = array();
|
||||
foreach ($cloudApps as $group)
|
||||
{
|
||||
$items = array();
|
||||
if(count($group) < 3) $group = array_merge($group, array_fill(count($group) - 1, 3 - count($group), new stdclass()));
|
||||
|
||||
foreach($group as $cloudApp)
|
||||
{
|
||||
if(empty($cloudApp->id))
|
||||
{
|
||||
$items[] = div(setClass('flex-1 p-2 content-between flex col store-item'));
|
||||
continue;
|
||||
}
|
||||
|
||||
$items[] = div
|
||||
(
|
||||
setClass('flex-1 bg-white shadow p-2 content-between flex col store-item state'),
|
||||
on::click("openUrl('" . $this->createLink('store', 'appview', "id=$cloudApp->id") . "')"),
|
||||
div
|
||||
(
|
||||
setStyle('height', '100px'),
|
||||
setClass('flex border-b border-light'),
|
||||
img(set::src($cloudApp->logo), setStyle(array('width' => '80px', 'height' => '80px'))),
|
||||
div
|
||||
(
|
||||
setClass('ml-4'),
|
||||
div($cloudApp->alias, setClass('app-name'), span($cloudApp->app_version, setClass('ml-5 label lighter rounded-full'))),
|
||||
div($cloudApp->introduction, setClass('line-2'))
|
||||
)
|
||||
),
|
||||
div
|
||||
(
|
||||
setClass('mt-5 flex justify-between'),
|
||||
span
|
||||
(
|
||||
$lang->store->author,
|
||||
span($cloudApp->author, setClass('font-semibold ml-2'))
|
||||
),
|
||||
btn
|
||||
(
|
||||
$lang->store->install,
|
||||
setClass('primary btn size-sm install-btn'),
|
||||
setData('prevent', true),
|
||||
setData('toggle', 'modal'),
|
||||
setData('url', $this->createLink('instance', 'install', "id={$cloudApp->id}")),
|
||||
on::click('installApp', array('stop' => true)),
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$groups[] = div
|
||||
(
|
||||
setClass('flex gap-5 mt-5'),
|
||||
...$items
|
||||
);
|
||||
}
|
||||
|
||||
div
|
||||
(
|
||||
setID('cloudAppContainer'),
|
||||
setClass('mb-5 flex col'),
|
||||
|
||||
div
|
||||
(
|
||||
setClass('flex'),
|
||||
featureBar
|
||||
(
|
||||
set::current($sortType),
|
||||
set::linkParams("sortType={key}"),
|
||||
),
|
||||
|
||||
toolbar
|
||||
(
|
||||
formGroup
|
||||
(
|
||||
set::name('name'),
|
||||
set::control(array
|
||||
(
|
||||
'type' => 'inputControl',
|
||||
'prefix' => icon('search'),
|
||||
'prefixWidth' => 'icon',
|
||||
'placeholder' => $lang->store->searchApp,
|
||||
'value' => $keyword,
|
||||
)),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
div(...$groups),
|
||||
pager(
|
||||
setID('storePager'),
|
||||
set::page($setting['page']),
|
||||
set::recTotal($setting['recTotal']),
|
||||
set::recPerPage($setting['recPerPage']),
|
||||
set::linkCreator($setting['linkCreator']),
|
||||
set::items($setting['items']),
|
||||
set::gap($setting['gap']),
|
||||
),
|
||||
);
|
||||
|
||||
sidebar
|
||||
(
|
||||
tree
|
||||
(
|
||||
set::id('storeTree'),
|
||||
set::items($tree),
|
||||
set::onClickItem(jsRaw('window.treeClick')),
|
||||
)
|
||||
);
|
||||
Reference in New Issue
Block a user