autocomplete: also indicate inactive organizations
This commit is contained in:
parent
f4c50ae0fa
commit
3186d5e4d7
8 changed files with 40 additions and 22 deletions
|
@ -90,7 +90,6 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
|
||||||
@objectId.val('').trigger('change')
|
@objectId.val('').trigger('change')
|
||||||
|
|
||||||
onObjectClick: (e) =>
|
onObjectClick: (e) =>
|
||||||
return if e.currentTarget.classList.contains('is-inactive')
|
|
||||||
objectId = $(e.currentTarget).data('object-id')
|
objectId = $(e.currentTarget).data('object-id')
|
||||||
@selectObject(objectId)
|
@selectObject(objectId)
|
||||||
@close()
|
@close()
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
class App.UserOrganizationAutocompletion extends App.ObjectOrganizationAutocompletion
|
class App.UserOrganizationAutocompletion extends App.ObjectOrganizationAutocompletion
|
||||||
|
objectSingle: 'User'
|
||||||
|
objectIcon: 'user'
|
||||||
|
inactiveObjectIcon: 'inactive-user'
|
||||||
|
objectSingels: 'People'
|
||||||
objectCreate: 'Create new Customer'
|
objectCreate: 'Create new Customer'
|
||||||
|
referenceAttribute: 'member_ids'
|
||||||
|
|
||||||
newObject: (e) =>
|
newObject: (e) =>
|
||||||
if e
|
if e
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<li class="recipientList-entry js-object<% if @object.active is false: %> is-inactive<% end %>" data-object-id="<%= @object.id %>">
|
<li class="recipientList-entry js-object" data-object-id="<%= @object.id %>">
|
||||||
<div class="recipientList-iconSpacer">
|
<div class="recipientList-iconSpacer">
|
||||||
<%- @Icon(@icon, 'recipientList-icon') %>
|
<%- @Icon(@icon, 'recipientList-icon') %>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,17 @@
|
||||||
<li class="recipientList-entry js-organization" data-organization-id="<%- @organization.id %>">
|
<li class="recipientList-entry js-organization" data-organization-id="<%- @organization.id %>">
|
||||||
<div class="recipientList-iconSpacer">
|
<div class="recipientList-iconSpacer">
|
||||||
|
<% if @organization.active is false: %>
|
||||||
|
<%- @Icon('inactive-organization', 'recipientList-icon') %>
|
||||||
|
<% else: %>
|
||||||
<%- @Icon('organization', 'recipientList-icon') %>
|
<%- @Icon('organization', 'recipientList-icon') %>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="recipientList-name">
|
<div class="recipientList-name">
|
||||||
<%= @organization.displayName() %>
|
<%= @organization.displayName() %>
|
||||||
<span class="recipientList-detail">- <%= @objectCount %> <%- @T(@objectSingels) %></span>
|
<span class="recipientList-detail">- <%= @objectCount %> <%- @T(@objectSingels) %></span>
|
||||||
</div>
|
</div>
|
||||||
|
<% if @organization.active is false: %>
|
||||||
|
<div class="recipientList-status"><%= @Ti('inactive') %></div>
|
||||||
|
<% end %>
|
||||||
<%- @Icon('arrow-right', 'recipientList-arrow') %>
|
<%- @Icon('arrow-right', 'recipientList-arrow') %>
|
||||||
</li>
|
</li>
|
|
@ -42,6 +42,7 @@
|
||||||
.icon-horizontal-rule { width: 12px; height: 12px; }
|
.icon-horizontal-rule { width: 12px; height: 12px; }
|
||||||
.icon-important { width: 16px; height: 16px; }
|
.icon-important { width: 16px; height: 16px; }
|
||||||
.icon-in-process { width: 64px; height: 64px; }
|
.icon-in-process { width: 64px; height: 64px; }
|
||||||
|
.icon-inactive-organization { width: 16px; height: 16px; }
|
||||||
.icon-inactive-user { width: 16px; height: 16px; }
|
.icon-inactive-user { width: 16px; height: 16px; }
|
||||||
.icon-info { width: 5px; height: 11px; }
|
.icon-info { width: 5px; height: 11px; }
|
||||||
.icon-italic { width: 12px; height: 12px; }
|
.icon-italic { width: 12px; height: 12px; }
|
||||||
|
|
|
@ -6592,10 +6592,6 @@ footer {
|
||||||
.dropdown li.is-active {
|
.dropdown li.is-active {
|
||||||
background: hsl(205,90%,60%);
|
background: hsl(205,90%,60%);
|
||||||
|
|
||||||
&.is-inactive {
|
|
||||||
background: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
+ li {
|
+ li {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
@ -6742,21 +6738,6 @@ footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@extend .u-clickable;
|
@extend .u-clickable;
|
||||||
|
|
||||||
&.is-inactive {
|
|
||||||
cursor: not-allowed;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&.is-active {
|
|
||||||
.recipientList-icon {
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipientList-name {
|
|
||||||
color: hsl(238,2%,56%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipientList-entry .recipientList-iconSpacer {
|
.recipientList-entry .recipientList-iconSpacer {
|
||||||
|
@ -6765,6 +6746,7 @@ footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipientList-icon {
|
.recipientList-icon {
|
||||||
|
@ -6790,8 +6772,13 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipientList-status {
|
.recipientList-status {
|
||||||
color: hsl(238,2%,56%);
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
margin: 0 10px;
|
||||||
|
flex-shrink: 1;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.recipientList-arrow {
|
.recipientList-arrow {
|
||||||
|
|
|
@ -311,6 +311,14 @@
|
||||||
<path d="M7.997 43.981a644.16 644.16 0 0 0 0-11.995c-2.244.046-4.129-.852-5.998-2.998C.793 27.84 0 25.945 0 23.99V7.997C0 3.792 3.77 0 7.997 0h30.988c5.153 0 8.922 3.592 8.996 7.997.025 5.474.025 10.563 0 15.993-.173 4.45-3.942 8.042-8.996 7.996-5.857.046-11.907.046-17.993 0-.56.046-1.353.345-2 1-3.519 3.436-6.99 7.228-10.995 10.995.335.025.235.025 0 0z"/>
|
<path d="M7.997 43.981a644.16 644.16 0 0 0 0-11.995c-2.244.046-4.129-.852-5.998-2.998C.793 27.84 0 25.945 0 23.99V7.997C0 3.792 3.77 0 7.997 0h30.988c5.153 0 8.922 3.592 8.996 7.997.025 5.474.025 10.563 0 15.993-.173 4.45-3.942 8.042-8.996 7.996-5.857.046-11.907.046-17.993 0-.56.046-1.353.345-2 1-3.519 3.436-6.99 7.228-10.995 10.995.335.025.235.025 0 0z"/>
|
||||||
<path d="M52 20c3.609-.172 7.144-.172 10 3 1.185 1.404 1.993 3.195 2 5-.007 5.358-.209 10.432 0 15 .195 4.983-4.148 8.863-8 9 .316.062.114.161 0 0a272.316 272.316 0 0 0 0 12c-.593-.497-.997-.696-1-1-3.634-3.278-6.967-6.561-10-10-1.11-.64-1.917-1.038-3-1-6.09.062-12.15-.038-18 0-5.565-.038-9.707-4.813-9-10 .202-.385.404-.683 1-1 1.222-1.474 2.637-2.966 4-4 .657-.757 1.364-.956 2-1a1091.5 1091.5 0 0 0 17 0c6.002.044 11.356-4.134 13-10-.028-1.795-.23-3.785 0-6z" fill="#A9BCC4" opacity=".4"/>
|
<path d="M52 20c3.609-.172 7.144-.172 10 3 1.185 1.404 1.993 3.195 2 5-.007 5.358-.209 10.432 0 15 .195 4.983-4.148 8.863-8 9 .316.062.114.161 0 0a272.316 272.316 0 0 0 0 12c-.593-.497-.997-.696-1-1-3.634-3.278-6.967-6.561-10-10-1.11-.64-1.917-1.038-3-1-6.09.062-12.15-.038-18 0-5.565-.038-9.707-4.813-9-10 .202-.385.404-.683 1-1 1.222-1.474 2.637-2.966 4-4 .657-.757 1.364-.956 2-1a1091.5 1091.5 0 0 0 17 0c6.002.044 11.356-4.134 13-10-.028-1.795-.23-3.785 0-6z" fill="#A9BCC4" opacity=".4"/>
|
||||||
</g>
|
</g>
|
||||||
|
</symbol><symbol id="icon-inactive-organization" viewBox="0 0 16 16">
|
||||||
|
<title>
|
||||||
|
inactive-organization
|
||||||
|
</title>
|
||||||
|
<g fill-rule="evenodd">
|
||||||
|
<path d="M1 12.533V1h7v4h.533L7 6.533V6H6v1h.533L5 8.533V8H4v1h.533L3 10.533V10H2v1h.533L1 12.533zM3.73 15L6 12.73V13h1v-1h-.27l3-3H10v-.27L11.73 7H12v-.27L13.73 5H15v10H3.73zM2 9h1V8H2v1zm0-2h1V6H2v1zm0-2h1V4H2v1zm0-2h1V2H2v1zm2 4h1V6H4v1zm0-2h1V4H4v1zm0-2h1V2H4v1zm2 2h1V4H6v1zm0-2h1V2H6v1zm3 9v1h1v-1H9zm0-1h1v-1H9v1zm2 2h1v-1h-1v1zm0-2h1v-1h-1v1zm0-2h1V8h-1v1zm2 4h1v-1h-1v1zm0-2h1v-1h-1v1zm0-2h1V8h-1v1zm0-2h1V6h-1v1z"/>
|
||||||
|
<path fill-rule="nonzero" d="M13.786 1.453l.707.707L2.138 14.596l-.707-.707z"/>
|
||||||
|
</g>
|
||||||
</symbol><symbol id="icon-inactive-user" viewBox="0 0 16 16">
|
</symbol><symbol id="icon-inactive-user" viewBox="0 0 16 16">
|
||||||
<title>
|
<title>
|
||||||
inactive-user
|
inactive-user
|
||||||
|
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
11
public/assets/images/icons/inactive-organization.svg
Normal file
11
public/assets/images/icons/inactive-organization.svg
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>inactive-organization</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="inactive-organization" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M1,12.5328082 L1,1 L8,1 L8,5 L8.53280816,5 L7,6.53280816 L7,6 L6,6 L6,7 L6.53280816,7 L5,8.53280816 L5,8 L4,8 L4,9 L4.53280816,9 L3,10.5328082 L3,10 L2,10 L2,11 L2.53280816,11 L1,12.5328082 Z M3.72982965,15 L6,12.7298296 L6,13 L7,13 L7,12 L6.72982965,12 L9.72982965,9 L10,9 L10,8.72982965 L11.7298296,7 L12,7 L12,6.72982965 L13.7298296,5 L15,5 L15,15 L8,15 L3.72982965,15 Z M2,9 L3,9 L3,8 L2,8 L2,9 Z M2,7 L3,7 L3,6 L2,6 L2,7 Z M2,5 L3,5 L3,4 L2,4 L2,5 Z M2,3 L3,3 L3,2 L2,2 L2,3 Z M4,7 L5,7 L5,6 L4,6 L4,7 Z M4,5 L5,5 L5,4 L4,4 L4,5 Z M4,3 L5,3 L5,2 L4,2 L4,3 Z M6,5 L7,5 L7,4 L6,4 L6,5 Z M6,3 L7,3 L7,2 L6,2 L6,3 Z M9,12 L9,13 L10,13 L10,12 L9,12 Z M9,11 L10,11 L10,10 L9,10 L9,11 Z M11,13 L12,13 L12,12 L11,12 L11,13 Z M11,11 L12,11 L12,10 L11,10 L11,11 Z M11,9 L12,9 L12,8 L11,8 L11,9 Z M13,13 L14,13 L14,12 L13,12 L13,13 Z M13,11 L14,11 L14,10 L13,10 L13,11 Z M13,9 L14,9 L14,8 L13,8 L13,9 Z M13,7 L14,7 L14,6 L13,6 L13,7 Z" id="organization-tab-dark" fill="#50E3C2"></path>
|
||||||
|
<polygon id="Line" fill="#50E3C2" fill-rule="nonzero" points="13.7859092 1.45319036 14.493016 2.16029714 2.13799065 14.5961654 1.43088387 13.8890586"></polygon>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
Loading…
Reference in a new issue