title: $:/plugins/Gk0Wk/CPL-Repo/views/plugins/list-item
code-body: yes
created: 20231009081025598
modified: 20231013171005230
tags: 
type: text/vnd.tiddlywiki

\define tag-plain(text:"",icon:"",color:"",bg:"")
\whitespace trim
<span class="tc-tag-label" style="background-color:$bg$;color:$color$;fill:$color$;user-select:none;margin-right:6px;">
	{{$icon$}}$text$
</span>
\end

<!-- 安装插件的按钮 -->
\define install-plugin-button(plugin,libraryVersion,installedVersion)
\whitespace trim
<$list filter="[[$:/language]get[text]removeprefix[$:/languages/]else[en-GB]search[zh]then[yes]else[no]]" variable="chinese">
<$let libraryVersion=<<__libraryVersion__>> installedVersion=<<__installedVersion__>> plugin=<<__plugin__>>>
<$set name="reinstall-type" value={{{ [<libraryVersion>compare:version:eq<installedVersion>then[tc-reinstall]] [<libraryVersion>compare:version:gt<installedVersion>then[tc-reinstall-upgrade]] [<libraryVersion>compare:version:lt<installedVersion>then[tc-reinstall-downgrade]] }}}>
<$button class={{{ [<installedVersion>!is[blank]then<reinstall-type>] tc-btn-invisible tc-install-plugin +[join[ ]] }}} disabled={{{ [[$:/temp/CPL-Repo/install-plugin-requesting]field:text[yes]] [[$:/temp/CPL-Repo/installing-plugin]field:text[yes]] +[unique[]match[yes]limit[1]else[no]] }}}>
<$action-sendmessage $message="cpl-install-plugin-request" title=<<plugin>> version=<<libraryVersion>>/>
<$list filter="[[$:/temp/CPL-Repo/install-plugin-requesting]field:plugin-title<plugin>]">{{$:/core/images/timestamp-on}}</$list>
<$list filter="[[$:/temp/CPL-Repo/install-plugin-requesting]!field:plugin-title<plugin>]">
    {{$:/core/images/download-button}}
    &#32;
    <$list filter="[<installedVersion>is[blank]]"><$text text={{{ [<chinese>match[yes]then[安装]else[Install]] }}}/></$list>
    <$list filter="[<installedVersion>!is[blank]]">
        <$list filter="[<libraryVersion>compare:version:gt<installedVersion>]"><$text text={{{ [<chinese>match[yes]then[升级]else[Update]] }}}/></$list>
        <$list filter="[<libraryVersion>compare:version:lt<installedVersion>]"><$text text={{{ [<chinese>match[yes]then[降级]else[Downgrade]] }}}/></$list>
        <$list filter="[<libraryVersion>compare:version:eq<installedVersion>]"><$text text={{{ [<chinese>match[yes]then[重装]else[Reinstall]] }}}/></$list>
    </$list>
</$list>
</$button>
</$set>
</$let>
</$list>
\end

\define open-plugin-detail(pluginTitle)
\whitespace trim
<$action-setfield $tiddler="$:/temp/CPL-Repo/plugin-detail-title" text=<<__pluginTitle__>>/>
<$action-sendmessage $message="tm-modal" $param="$:/plugins/Gk0Wk/CPL-Repo/templates/modals/plugin-detail"/>
\end

\define plugin-list-item(json,field,show-suggestion:"yes",class:"")
\whitespace trim
\import $:/plugins/Gk0Wk/CPL-Repo/views/plugins/size
<$list filter="[[$:/language]get[text]removeprefix[$:/languages/]else[en-GB]search[zh]then[yes]else[no]]" variable="chinese">
<div class="$class$">
<$let json=<<__json__>>>
<$let
    title={{{ [<json>jsonget[title]] }}}
    tags={{{ [<json>jsonget[tags]] }}}
    icon={{{ [<json>jsonget[icon]trim[]] }}}
    type={{{ [<json>jsonget[type]else[plugin]] }}}
    name={{{ [<json>jsonget[name]] ~[<json>jsonget[title]split[/]last[1]] }}}
    description={{{ [<json>jsonget[description]] }}}
    version={{{ [<json>jsonget[version]] }}}
    versions={{{ [<json>jsonget[versions]] }}}
    author={{{ [<json>jsonget[author]] }}}
    category={{{ [<json>jsonget[category]!is[blank]else[Unknown]] }}}
    installedVersion={{{ [<json>jsonget[title]get[version]] }}}
>

<!-- Card Container -->
<div class="cpl-plugin-card">

<$button class="tc-btn-invisible cpl-plugin-card-open-button" tooltip={{{ [<chinese>match[yes]then[查看插件详情]else[View plugin details]] }}}>
<$action-setfield $tiddler="$:/temp/CPL-Repo/plugin-detail-versions" text={{{ [<json>jsonget[versions]] }}} type="application/json"/>
<$macrocall $name="open-plugin-detail" pluginTitle=<<title>>/>

<span class="cpl-plugin-card-main">

<!-- Plugin Icon -->
<span class="cpl-plugin-card-icon-wrapper">
<span class="cpl-plugin-card-icon-frame">
<$list filter="[<icon>!is[blank]]">
<img src=<<icon>> style="width: 40px; height: 40px; object-fit: contain;"/>
</$list>
<$list filter="[<icon>is[blank]]">
<$transclude tiddler={{{ [[$:/core/images/plugin-generic-]addsuffix<type>] }}} style="width: 40px; height: 40px;"/>
</$list>
</span>
</span>

<!-- Plugin Info -->
<span class="cpl-plugin-card-body">

<!-- Name -->
<span class="cpl-plugin-card-title"><$text text=<<name>>/></span>

<!-- Description -->
<span class="cpl-plugin-card-description">
<$text text=<<description>>/>
</span>

<!-- Meta info -->
<span class="cpl-plugin-card-meta">
<span class="cpl-plugin-card-meta-text">v<$text text=<<version>>/></span>
<$list filter="[<author>!is[blank]]">
<span class="cpl-plugin-card-meta-text">by <$text text=<<author>>/></span>
</$list>
<$list filter="[<installedVersion>!is[blank]]" variable="t">
<span class="cpl-plugin-card-meta-text cpl-status-success"><em>{{$:/language/ControlPanel/Plugins/AlreadyInstalled/Hint}}</em></span>
</$list>
</span>

<!-- Tags -->
<span class="cpl-plugin-card-tags">
<$macrocall $name="tag-plain" text={{{ [<chinese>match[yes]] :then[<category>addprefix[$:/plugins/Gk0Wk/CPL-Repo/config/plugin-categories/]get[text]else[未分类]] :else[<category>] }}} icon="$:/core/images/folder" bg={{{ [{$:/palette}getindex[tag-background]] }}} color={{{ [{$:/palette}getindex[tag-foreground]] }}} />
</span>

</span>

</span>
</$button>

<!-- Install Button -->
<div class="cpl-plugin-card-actions">
<$macrocall $name="install-plugin-button" plugin=<<title>> libraryVersion=<<version>> installedVersion=<<installedVersion>> />
</div>

</div>

<!-- Installation Status -->
<$list filter="[[$:/temp/CPL-Repo/install-plugin-requesting]is[tiddler]field:plugin-title<title>]">
<$list filter="[{$:/temp/CPL-Repo/install-plugin-requesting}match[yes]]">
<div class="cpl-plugin-card-status cpl-status-success"><$text text={{{ [<chinese>match[yes]then[安装准备中...]else[Preparing installation...]] }}}/></div>
</$list>
<$list filter="[{$:/temp/CPL-Repo/install-plugin-requesting}!match[yes]]">
<div class="cpl-plugin-card-status cpl-status-error"><$text text={{{ [<chinese>match[yes]then[出错: ]else[Error: ]addsuffix{$:/temp/CPL-Repo/install-plugin-requesting}] }}}/></div>
</$list>
</$list>
<$list filter="[[$:/temp/CPL-Repo/installing-plugin]is[tiddler]field:plugin-title<title>]">
<$list filter="[{$:/temp/CPL-Repo/installing-plugin}match[yes]]">
<div class="cpl-plugin-card-status cpl-status-success"><$text text={{{ [<chinese>match[yes]then[安装中...]else[Installing...]] }}}/></div>
</$list>
<$list filter="[{$:/temp/CPL-Repo/installing-plugin}!match[yes]]">
<div class="cpl-plugin-card-status cpl-status-error"><$text text={{{ [<chinese>match[yes]then[出错: ]else[Error: ]addsuffix{$:/temp/CPL-Repo/installing-plugin}] }}}/></div>
</$list>
</$list>

</$let>
</$let>
</div>
</$list>
\end
