Skip to content

Commit

Permalink
Build the enhanced plugin page
Browse files Browse the repository at this point in the history
  • Loading branch information
@BenSurgisonGDS
BenSurgisonGDS committed Aug 21, 2023
1 parent 7f0400f commit a467f72
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 60 deletions.
13 changes: 1 addition & 12 deletions lib/manage-prototype-handlers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,18 +500,7 @@ async function getPluginsHandler (req, res) {
const pageName = 'Plugins'
const model = {
currentSection: pageName,
links: managementLinks,
mode: req.query.mode
}

const isSuccessResult = !!req.query.package

if (isSuccessResult) {
model.successBanner = {
package: plugins.preparePackageNameForDisplay(req.query.package),
mode: req.query.mode,
verb: verbs[req.query.mode].status
}
links: managementLinks
}
model.groupsOfPlugins = await prepareForPluginPage()
res.render(getManagementView('plugins.njk'), model)
Expand Down
115 changes: 67 additions & 48 deletions lib/nunjucks/views/manage-prototype/plugins.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,87 @@
{% from "govuk/components/button/macro.njk" import govukButton %}

{% block content %}
<form method="post">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds-from-desktop">
<form method="post">
<div class="govuk-grid-row govuk-!-margin-bottom-5">
<div class="govuk-grid-column-two-thirds-from-desktop">
<h1 class="govuk-heading-l">Plugins</h1>
<p class="govuk-body">
Plugins provide you with new components, styles and other features
</p>
</div>
</div>

<h1 class="govuk-heading-l">Plugins</h1>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<div class="sub-nav">
<h2 class="govuk-heading-m">Find plugins</h2>
</div>
<div class="sub-nav">
<a href="./plugins-installed" class="govuk-heading-m">
Your plugins <span class="badge">1</span>
</a>
</div>
</div>

<p class="govuk-body">
Plugins provide you with new components, styles and other features
</p>
<div class="govuk-grid-column-three-quarters">
<div class="govuk-!-margin-bottom-5">
{{ govukLabel({"text":"Search", classes:"govuk-!-font-weight-bold"}) }}
<div id="search-input-container"></div>
</div>

{% for group in groupsOfPlugins %}
<h2 class="govuk-heading-m">{{ group.name }}</h2>

<ul class="govuk-list govuk-prototype-kit-manage-prototype-plugin-list-plugin-list" data-plugin-group-status="{{ group.status }}">
{% for plugin in group.plugins %}
<li class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item" data-plugin-package-name="{{ plugin.packageName }}">
{% for group in groupsOfPlugins %}
<ul class="govuk-list govuk-prototype-kit-manage-prototype-plugin-list-plugin-list"
data-plugin-group-status="{{ group.status }}">
{% for plugin in group %}
<li class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item"
data-plugin-package-name="{{ plugin.packageName }}">
<span class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-name">
{{ plugin.name }}
{% if plugin.scope %}
<br/>
<span class="govuk-caption-m">From {{ plugin.scope }}</span>
{% endif %}
{% if plugin.updateLink %}
<br/>
v{{ plugin.latestVersion }} available
{% endif %}
{% if plugin.scope %}
<br/>
<span class="govuk-caption-m">From {{ plugin.scope }}</span>
{% endif %}
{% if plugin.updateLink %}
<br/>
v{{ plugin.latestVersion }} available
{% endif %}
</span>
<span class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-version">
<span class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-version">
{{ plugin.installedVersion or plugin.latestVersion }}
</span>
<span class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-buttons">
<span class="govuk-prototype-kit-manage-prototype-plugin-list-plugin-list__item-buttons">
{% if not plugin.installedVersion %}
{{ govukButton({
html: 'Install <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
classes: "govuk-button--secondary",
attributes: { id: "install-" + plugin.packageName, formaction: plugin.installLink }
}) }}
{% endif %}
{% if plugin.uninstallLink %}
{{ govukButton({
html: 'Uninstall <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
classes: "govuk-button--secondary",
attributes: { id: "uninstall-" + plugin.packageName, formaction: plugin.uninstallLink }
}) }}
{% endif %}
{% if plugin.updateLink %}
{{ govukButton({
html: 'Update <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
classes: "govuk-button--secondary",
attributes: { id: "update-" + plugin.packageName, formaction: plugin.updateLink }
}) }}
{% endif %}
{% if plugin.helpLink %}
<a class=""
href="{{ plugin.helpLink }}">Help<span class="govuk-visually-hidden"> - {{ plugin.name }}</span></a>
{% endif %}
{% if plugin.uninstallLink %}
{{ govukButton({
html: 'Uninstall <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
classes: "govuk-button--secondary",
attributes: { id: "uninstall-" + plugin.packageName, formaction: plugin.uninstallLink }
}) }}
{% endif %}
{% if plugin.updateLink %}
{{ govukButton({
html: 'Update <span class="govuk-visually-hidden"> ' + plugin.name + '</span>',
classes: "govuk-button--secondary",
attributes: { id: "update-" + plugin.packageName, formaction: plugin.updateLink }
}) }}
{% endif %}
{% if plugin.helpLink %}
<a class=""
href="{{ plugin.helpLink }}">Help<span
class="govuk-visually-hidden"> - {{ plugin.name }}</span></a>
{% endif %}
</span>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</form>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</form>
{% endblock %}

0 comments on commit a467f72

Please sign in to comment.