Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Manage apps layout was a bit confuse #10882

Merged
merged 5 commits into from
May 26, 2018
Merged

Fix: Manage apps layout was a bit confuse #10882

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
efe7058
Adds search, order by status and enable label
gdelavald May 25, 2018
df81407
Change side of label for enabling button
gdelavald May 25, 2018
560f0c9
Update apps.js
ggazzo May 26, 2018
71b8d5a
Update apps.js
ggazzo May 26, 2018
f0d9288
Improve code and fix review
rodrigok May 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/rocketchat-apps/assets/stylesheets/apps.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,11 @@ div.apps-error {
width: 100%;
font-size: 45px;
}

.preferences-page--apps .rc-table-tr {
opacity: 0.5;
}

.preferences-page--apps .rc-table-tr.active {
opacity: 1;
}
3 changes: 3 additions & 0 deletions packages/rocketchat-apps/client/admin/appManage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<span class="rc-switch__button">
<span class="rc-switch__button-inside"></span>
</span>
<span class="rc-switch__text">
{{_ "Activate"}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should toggle this text

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since layout only stated 'Enable' and I didn't want to add yet another i18n string, I thought this would be enough.

</span>
</label>
</div>

Expand Down
14 changes: 12 additions & 2 deletions packages/rocketchat-apps/client/admin/apps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,17 @@
<!-- TODO: fix this class -->
<section class="preferences-page preferences-page--apps">
{{#header sectionName="Manage_Apps" hideHelp=true fixedHeight=true}}
<button class="rc-button rc-button--small rc-button--primary rc-directory-plus rc-tooltip rc-tooltip--down" data-button="install" aria-label="{{_ 'Install_package'}}">{{> icon icon="plus"}}</button>
<div class="rc-directory-header">
<div class="rc-input rc-input--small rc-directory-search">
<label class="rc-input__label">
<div class="rc-input__wrapper">
{{> icon icon="magnifier" block="rc-input__icon" }}
<input type="text" class="rc-input__element rc-input__element--small js-search" name="app-filter" id="app-filter" placeholder={{_ "Search"}} autocomplete="off">
</div>
</label>
</div>
<button class="rc-button rc-button--small rc-button--primary rc-directory-plus rc-tooltip rc-tooltip--down" data-button="install" aria-label="{{_ 'Install_package'}}">{{> icon icon="plus"}}</button>
</div>
{{/header}}
<div class="rc-directory-content">
{{#requiresPermission 'manage-apps'}}
Expand All @@ -17,7 +27,7 @@
</thead>
<tbody class="rc-table-body">
{{#each apps}}
<tr class="rc-table-tr" data-name="{{name}}">
<tr class="rc-table-tr {{activeClass status}}" data-name="{{name}}">
<td class="rc-table-td rc-table-td--name">
<div class="rc-directory-channel-wrapper">
<div class="rc-directory-channel-avatar" style="background-image:url({{iconFileContent}})"></div>
Expand Down
21 changes: 19 additions & 2 deletions packages/rocketchat-apps/client/admin/apps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
import { AppEvents } from '../communication';
const ENABLED_STATUS = ['auto_enabled','manually_enabled'];
const enabled = ({status}) => ENABLED_STATUS.includes(status);
const sortByStatus = (a, b) => {
if (enabled(a)) {
if (enabled(b)) {
return a.name > b.name;
}
return -1;
}
return 1;
};

Template.apps.onCreated(function() {
const instance = this;
this.ready = new ReactiveVar(false);
this.apps = new ReactiveVar([]);
this.filter = new ReactiveVar('');

RocketChat.API.get('apps').then((result) => {
instance.apps.set(result.apps);
Expand Down Expand Up @@ -53,10 +65,13 @@ Template.apps.helpers({
return false;
},
apps() {
return Template.instance().apps.get();
return Template.instance().apps.get().sort(sortByStatus).filter(({name}) => name.toLowerCase().includes(Template.instance().filter.get().toLowerCase()));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

apply the filter before the sort

},
parseStatus(status) {
return t(`App_status_${ status }`);
},
activeClass(status) {
return status === 'auto_enabled' || status === 'manually_enabled'? 'active' : '';
Copy link
Member

@ggazzo ggazzo May 26, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

return enabled(status) ? 'active' : '';

}
});

Expand All @@ -70,8 +85,10 @@ Template.apps.events({
// show an error ? I don't think this should ever happen
}
},

'click [data-button="install"]'() {
FlowRouter.go('/admin/app/install');
},
'keyup #app-filter'(e, t) {
t.filter.set(e.currentTarget.value);
}
});