Leitgedanken/msd2/tracking/piwik/plugins/UsersManager/angularjs/user-permissions-edit/user-permissions-edit.component.html

<div class="userPermissionsEdit" ng-class="{ loading: $ctrl.isLoadingAccess }">
    <div class="row" ng-if="!$ctrl.hasAccessToAtLeastOneSite">
        <div piwik-notification context="warning" type="persistent" noclear="true">
            <strong>{{:: 'General_Warning'|translate }}:</strong>

            {{:: 'UsersManager_NoAccessWarning'|translate }}
        </div>
    </div>
    <div class="row to-all-websites">
        <div class="col s12">
            <div>
                <span>{{ 'UsersManager_GiveAccessToAll'|translate }}:</span>

                <div
                    id="all-sites-access-select"
                    piwik-field
                    uicontrol="select"
                    ng-model="$ctrl.allWebsitesAccssLevelSet"
                    options="$ctrl.accessLevels"
                    full-width="true"
                ></div>

                <a href="" class="btn" ng-class="{ disabled: $ctrl.isGivingAccessToAllSites }" ng-click="$ctrl.showChangeAccessAllSitesModal()">
                    {{:: 'General_Apply'|translate }}
                </a>
            </div>
            <p>&nbsp;</p>
            <p>{{ 'UsersManager_OrManageIndividually'|translate }}:</p>
        </div>
    </div>
    <div class="filters row">
        <div class="col s12 m12 l8">
            <div class="input-field bulk-actions">
                <a
                    class='dropdown-trigger btn'
                    href=''
                    data-activates='user-permissions-edit-bulk-actions'
                    piwik-dropdown-menu
                    ng-class="{ disabled: $ctrl.isBulkActionsDisabled }"
                >
                    {{:: 'UsersManager_BulkActions'|translate }}
                </a>
                <ul id='user-permissions-edit-bulk-actions' class='dropdown-content'>
                    <li>
                        <a class='dropdown-trigger' data-activates="user-permissions-bulk-set-access" piwik-dropdown-menu>{{:: 'UsersManager_SetPermission'|translate }}</a>
                        <ul id="user-permissions-bulk-set-access" class="dropdown-content">
                            <li ng-repeat="access in $ctrl.accessLevels">
                                <a href="" ng-click="$ctrl.siteAccessToChange = null; $ctrl.roleToChangeTo = access.key; $ctrl.showChangeAccessConfirm();">{{ access.value }}</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="" ng-click="$ctrl.siteAccessToChange = null; $ctrl.roleToChangeTo = 'noaccess'; $ctrl.showRemoveAccessConfirm();">{{:: 'UsersManager_RemovePermissions'|translate }}</a>
                    </li>
                </ul>
            </div>

            <div class="input-field site-filter">
                <input
                    type="text"
                    placeholder="{{:: 'UsersManager_FilterByWebsite'|translate }}"
                    ng-model="$ctrl.siteNameFilter"
                    ng-model-options="{debounce: 300}"
                    ng-change="$ctrl.offset = 0; $ctrl.fetchAccess()"
                />
            </div>

            <div class="input-field access-filter">
                <div
                    piwik-field
                    uicontrol="select"
                    ng-model="$ctrl.accessLevelFilter"
                    options="$ctrl.filterAccessLevels"
                    full-width="true"
                    ng-change="$ctrl.offset = 0; $ctrl.fetchAccess()"
                    placeholder="{{ 'UsersManager_FilterByAccess'|translate }}"
                ></div>
            </div>
        </div>

        <div class="col s12 m12 l4 sites-for-permission-pagination-container" ng-if="$ctrl.totalEntries > $ctrl.limit">
            <div class="sites-for-permission-pagination">
                <a class="prev" ng-class="{ disabled: $ctrl.offset <= 0 }">
                    <span class="pointer" ng-click="$ctrl.gotoPreviousPage()">« {{:: 'General_Previous'|translate }}</span>
                </a>

                <span class="counter">
                    <span>
                        {{ 'General_Pagination'|translate:$ctrl.getPaginationLowerBound():$ctrl.getPaginationUpperBound():$ctrl.totalEntries }}
                    </span>
                </span>

                <a class="next" ng-class="{ disabled: $ctrl.offset + $ctrl.limit >= $ctrl.totalEntries }">
                    <span class="pointer" ng-click="$ctrl.gotoNextPage()">{{:: 'General_Next'|translate }} »</span>
                </a>
            </div>
        </div>
    </div>

    <div piwik-notification context="info" type="persistent" noclear="true" ng-if="$ctrl.isRoleHelpToggled" class="roles-help-notification">
        <span piwik-translate="UsersManager_RolesHelp">
            <a href='https://matomo.org/faq/general/faq_70/' target='_blank' rel='noreferrer noopener'>::</a>::<a href='https://matomo.org/faq/general/faq_69/' target='_blank' rel='noreferrer noopener'>::</a>
        </span>
    </div>

    <div piwik-notification context="info" type="persistent" noclear="true" ng-if="$ctrl.isCapabilitiesHelpToggled" class="capabilities-help-notification">
        <span piwik-translate="UsersManager_CapabilitiesHelp">
            TODO
        </span>
    </div>

    <table piwik-content-table id="sitesForPermission">
        <thead>
        <tr>
            <th class="select-cell">
                <span class="checkbox-container">
                    <input type="checkbox" id="perm_edit_select_all" ng-model="$ctrl.isAllCheckboxSelected" ng-change="$ctrl.onAllCheckboxChange()" />
                    <label for="perm_edit_select_all"></label>
                </span>
            </th>
            <th>{{:: 'General_Name'|translate }}</th>
            <th class="role_header">
                <span>{{:: 'UsersManager_Role'|translate }}</span>
                <a href="" class="helpIcon" ng-click="$ctrl.isRoleHelpToggled = !$ctrl.isRoleHelpToggled" ng-class="{ sticky: $ctrl.isRoleHelpToggled }">
                    <span class="icon-help"></span>
                </a>
            </th>
            <th class="capabilities_header">
                <span>{{:: 'UsersManager_Capabilities'|translate }}</span>
                <a href="" class="helpIcon" ng-click="$ctrl.isCapabilitiesHelpToggled = !$ctrl.isCapabilitiesHelpToggled" ng-class="{ sticky: $ctrl.isCapabilitiesHelpToggled }">
                    <span class="icon-help"></span>
                </a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="select-all-row" ng-if="$ctrl.isAllCheckboxSelected && $ctrl.siteAccess.length < $ctrl.totalEntries">
            <td colspan="4">
                <div ng-if="!$ctrl.areAllResultsSelected">
                    <span piwik-translate="UsersManager_TheDisplayedWebsitesAreSelected"><strong>{{ $ctrl.siteAccess.length }}</strong></span>
                    <a href="#" ng-click="$ctrl.areAllResultsSelected = !$ctrl.areAllResultsSelected" piwik-translate="UsersManager_ClickToSelectAll"><strong>{{ $ctrl.totalEntries }}</strong></a>
                </div>

                <div ng-if="$ctrl.areAllResultsSelected">
                    <span piwik-translate="UsersManager_AllWebsitesAreSelected"><strong>{{ $ctrl.totalEntries }}</strong></span>
                    <a href="#" ng-click="$ctrl.areAllResultsSelected = !$ctrl.areAllResultsSelected" piwik-translate="UsersManager_ClickToSelectDisplayedWebsites"><strong>{{ $ctrl.siteAccess.length }}</strong></a>
                </div>
            </td>
        </tr>
        <tr ng-repeat="entry in $ctrl.siteAccess">
            <td class="select-cell">
                <span class="checkbox-container">
                    <input type="checkbox" ng-attr-id="perm_edit_select_row{{ $index }}" ng-model="$ctrl.selectedRows[$index]" ng-click="$ctrl.onRowSelected()" />
                    <label ng-attr-for="perm_edit_select_row{{ $index }}"></label>
                </span>
            </td>
            <td>
                <span>{{ entry.site_name }}</span>
            </td>
            <td>
                <div
                    piwik-field
                    uicontrol="select"
                    ng-model="entry.role"
                    options="$ctrl.accessLevels"
                    ng-change="$ctrl.previousRole = '{{ entry.role }}'; $ctrl.roleToChangeTo = entry.role; $ctrl.siteAccessToChange = entry; $ctrl.showChangeAccessConfirm();"
                    full-width="true"
                    class="role-select"
                ></div>
            </td>
            <td>
                <piwik-capabilities-edit
                    idsite="entry.idsite"
                    site-name="entry.site_name"
                    user-login="$ctrl.userLogin"
                    user-role="entry.role"
                    capabilities="entry.capabilities"
                    on-capabilities-change="$ctrl.fetchAccess()"
                >
                </piwik-capabilities-edit>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="delete-access-confirm-modal modal">
        <div class="modal-content">
            <h3 ng-if="$ctrl.siteAccessToChange" piwik-translate="UsersManager_DeletePermConfirmSingle"><strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.siteAccessToChange.site_name }}</strong></h3>
            <p ng-if="!$ctrl.siteAccessToChange" piwik-translate="UsersManager_DeletePermConfirmMultiple"><strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.getAffectedSitesCount() }}</strong></p>
        </div>
        <div class="modal-footer">
            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.changeUserRole()">{{:: 'General_Yes'|translate }}</a>
            <a href="" class="modal-action modal-close modal-no" ng-click="$ctrl.siteAccessToChange = null; $ctrl.roleToChangeTo = null;">{{:: 'General_No'|translate }}</a>
        </div>
    </div>

    <div class="change-access-confirm-modal modal">
        <div class="modal-content">
            <h3 ng-if="$ctrl.siteAccessToChange" piwik-translate="UsersManager_ChangePermToSiteConfirmSingle"><strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.siteAccessToChange.site_name }}</strong>::<strong>{{ $ctrl.getRoleDisplay($ctrl.roleToChangeTo) }}</strong></h3>
            <p ng-if="!$ctrl.siteAccessToChange" piwik-translate="UsersManager_ChangePermToSiteConfirmMultiple"><strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.getAffectedSitesCount() }}</strong>::<strong>{{ $ctrl.getRoleDisplay($ctrl.roleToChangeTo) }}</strong></p>
        </div>
        <div class="modal-footer">
            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.changeUserRole()">{{:: 'General_Yes'|translate }}</a>
            <a href="" class="modal-action modal-close modal-no" ng-click="$ctrl.siteAccessToChange.role = $ctrl.previousRole; $ctrl.siteAccessToChange = null; $ctrl.roleToChangeTo = null;">{{:: 'General_No'|translate }}</a>
        </div>
    </div>

    <div class="confirm-give-access-all-sites modal">
        <div class="modal-content">
            <h3 piwik-translate="UsersManager_ChangePermToAllSitesConfirm"><strong>{{ $ctrl.userLogin }}</strong>::<strong>{{ $ctrl.getRoleDisplay($ctrl.allWebsitesAccssLevelSet) }}</strong></h3>
            <p>{{ 'UsersManager_ChangePermToAllSitesConfirm2'|translate }}</p>
        </div>
        <div class="modal-footer">
            <a href="" class="modal-action modal-close btn" ng-click="$ctrl.giveAccessToAllSites()">{{:: 'General_Yes'|translate }}</a>
            <a href="" class="modal-action modal-close modal-no">{{:: 'General_No'|translate }}</a>
        </div>
    </div>
</div>