User list

Ready

HTML
View
Context
Info
Notes


        
        <div class="filter-group">
    <div class="form-item custom-select">
        <label for="4e52096a-0213-adb1-283f-f4cd00f9870a">Filter</label>
        <select id="4e52096a-0213-adb1-283f-f4cd00f9870a" name="4e52096a-0213-adb1-283f-f4cd00f9870a" multiple class="custom-select">
            <option value="option-0">gordon</option>
            <option value="option-1">ben</option>
            <option value="option-2">andrey</option>
            <option value="option-3">alfredo</option>
            <option value="option-4">Gordon Ramsay</option>
            <option value="option-5">Ben Bernanke</option>
            <option value="option-6">Andrey Ivanov</option>
            <option value="option-7">Alfredo Linguini</option>
            <option value="option-8">gordon@gusteaus.fr</option>
            <option value="option-9">ben@gusteaus.fr</option>
            <option value="option-10">andrey@gusteaus.fr</option>
            <option value="option-11">alfredo@gusteaus.fr</option>
        </select>
    </div>
    <div class="form-item custom-select">
        <label for="f3ec5e11-c621-162e-47f8-859d2ce77c68">Role</label>
        <select id="f3ec5e11-c621-162e-47f8-859d2ce77c68" name="f3ec5e11-c621-162e-47f8-859d2ce77c68" multiple class="custom-select">
            <option value="option-0">Administrator</option>
            <option value="option-1">Economy</option>
            <option value="option-2">Sommelier</option>
            <option value="option-3">Server</option>
        </select>
    </div>
</div>

<div class="action-bar">
    <button type="button">
        <span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#user-add" />
            </svg>
            <span>Add new user</span>
        </span>
    </button>
</div>

<div class="wc-grid">

    <div class="wc-grid-item ">
        <h2>Gordon Ramsay</h2>
        <dl class="dl-grid">
            <dt>Username:</dt>
            <dd>gordon</dd>
            <dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
            <dd>gordon@gusteaus.fr</dd>
            <dt>Role:</dt>
            <dd>Administrator</dd>
            <dt>Logged in:</dt>
            <dd><em>3 days ago</em></dd>
        </dl>
        <div class="action-bar">
            <button type="button" class="alt">
                <span>
                    <span>Edit</span>
                </span>
            </button>
        </div>
    </div>
    <div class="wc-grid-item ">
        <h2>Ben Bernanke</h2>
        <dl class="dl-grid">
            <dt>Username:</dt>
            <dd>ben</dd>
            <dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
            <dd>ben@gusteaus.fr</dd>
            <dt>Role:</dt>
            <dd>Economy</dd>
            <dt>Logged in:</dt>
            <dd><em>3 days ago</em></dd>
        </dl>
        <div class="action-bar">
            <button type="button" class="alt">
                <span>
                    <span>Edit</span>
                </span>
            </button>
        </div>
    </div>
    <div class="wc-grid-item ">
        <h2>Andrey Ivanov</h2>
        <dl class="dl-grid">
            <dt>Username:</dt>
            <dd>andrey</dd>
            <dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
            <dd>andrey@gusteaus.fr</dd>
            <dt>Role:</dt>
            <dd>Sommelier</dd>
            <dt>Logged in:</dt>
            <dd><em>3 days ago</em></dd>
        </dl>
        <div class="action-bar">
            <button type="button" class="alt">
                <span>
                    <span>Edit</span>
                </span>
            </button>
        </div>
    </div>
    <div class="wc-grid-item ">
        <h2>Alfredo Linguini</h2>
        <dl class="dl-grid">
            <dt>Username:</dt>
            <dd>alfredo</dd>
            <dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
            <dd>alfredo@gusteaus.fr</dd>
            <dt>Role:</dt>
            <dd>Server</dd>
            <dt>Logged in:</dt>
            <dd><em>3 days ago</em></dd>
        </dl>
        <div class="action-bar">
            <button type="button" class="alt">
                <span>
                    <span>Edit</span>
                </span>
            </button>
        </div>
    </div>

    <div class="wc-grid-item edit-mode">
        <h2><em>editing:</em> Fredrik Frodlund</h2>
        <div class="form-item ">
            <label for="b9bb03a1-ae46-7524-a87f-5f2befd468ab">
                Name

            </label>
            <input type="text" id="b9bb03a1-ae46-7524-a87f-5f2befd468ab" value="Fredrik Frodlund">
        </div>
        <div class="form-item ">
            <label for="19ccd2a8-71f0-d2ae-d43d-4555f7abdf11">
                Username

            </label>
            <input type="text" id="19ccd2a8-71f0-d2ae-d43d-4555f7abdf11" value="fredrik">
        </div>
        <div class="form-item ">
            <label for="2593b4d2-8d0d-ce4b-4830-488466f9cb58">
                E-mail

            </label>
            <input type="text" id="2593b4d2-8d0d-ce4b-4830-488466f9cb58" value="fredrik@gusteaus.fr">
        </div>
        <div class="form-item ">
            <label for="6abc65a0-6983-75aa-e319-0967dfaeb2bf">Role</label>
            <select id="6abc65a0-6983-75aa-e319-0967dfaeb2bf" name="6abc65a0-6983-75aa-e319-0967dfaeb2bf" class="">
                <option value="option-0">Administrator</option>
                <option value="option-1">Economy</option>
                <option value="option-2">Sommelier</option>
                <option value="option-3">Server</option>
            </select>
        </div>
        <div class="form-item ">
            <label for="40e5a330-1fdf-01ce-d2e5-d402e2e272b4">
                Change password

            </label>
            <input type="password" id="40e5a330-1fdf-01ce-d2e5-d402e2e272b4" value="">
        </div>
        <div class="action-bar">
            <button type="button" class="alt">
                <span>
                    <svg class="icon alt" height="20" width="20" aria-hidden="true">
                        <use xlink:href="../../sprite.svg#delete" />
                    </svg>
                    <span>Delete user</span>
                </span>
            </button>
            <button type="button">
                <span>
                    <svg class="icon " height="20" width="20" aria-hidden="true">
                        <use xlink:href="../../sprite.svg#save" />
                    </svg>
                    <span>Save</span>
                </span>
            </button>
        </div>
    </div>

    <div class="wc-grid-item edit-mode">
        <h2><em>Create user</em></h2>
        <div class="form-item ">
            <label for="cfe377cf-9646-ca1c-fa2a-6dddaf10ba35">
                Name

            </label>
            <input type="text" id="cfe377cf-9646-ca1c-fa2a-6dddaf10ba35" value="Fredrik Frodlund">
        </div>
        <div class="form-item ">
            <label for="0118cbba-b34b-5b8c-01a4-c74792f17b30">
                Username

            </label>
            <input type="text" id="0118cbba-b34b-5b8c-01a4-c74792f17b30" value="fredrik">
        </div>
        <div class="form-item ">
            <label for="bb2dba6a-0c83-5149-eed7-f396c37eaf64">
                E-mail

            </label>
            <input type="text" id="bb2dba6a-0c83-5149-eed7-f396c37eaf64" value="fredrik@gusteaus.fr">
        </div>
        <div class="form-item ">
            <label for="f7fc1ab5-a8b0-f867-13df-fb6f7e2feb21">Role</label>
            <select id="f7fc1ab5-a8b0-f867-13df-fb6f7e2feb21" name="f7fc1ab5-a8b0-f867-13df-fb6f7e2feb21" class="">
                <option value="option-0">Administrator</option>
                <option value="option-1">Economy</option>
                <option value="option-2">Sommelier</option>
                <option value="option-3">Server</option>
            </select>
        </div>
        <div class="form-item ">
            <label for="9a93dc57-3d30-d74c-8631-44b55012eea3">
                Create password

            </label>
            <input type="password" id="9a93dc57-3d30-d74c-8631-44b55012eea3" value="">
        </div>
        <div class="action-bar">
            <button type="button" class="alt">
                <span>
                    <svg class="icon alt" height="20" width="20" aria-hidden="true">
                        <use xlink:href="../../sprite.svg#delete" />
                    </svg>
                    <span>Delete user</span>
                </span>
            </button>
            <button type="button">
                <span>
                    <svg class="icon " height="20" width="20" aria-hidden="true">
                        <use xlink:href="../../sprite.svg#save" />
                    </svg>
                    <span>Save</span>
                </span>
            </button>
        </div>
    </div>

</div>

<div class="action-bar">
    <button type="button">
        <span>
            <svg class="icon " height="20" width="20" aria-hidden="true">
                <use xlink:href="../../sprite.svg#user-add" />
            </svg>
            <span>Add new user</span>
        </span>
    </button>
</div>


        {{render '@multi-select-filter--users'}}

{{#> @action-bar new-user}}
  {{> @button}}
{{/ @action-bar}}

{{#> @wc-grid}}

  {{!-- Regular users --}}
  {{#each users}}
    {{#> @wc-grid-item}}
      <h2>{{name}}</h2>
      <dl class="dl-grid">
        <dt>Username:</dt>
        <dd>{{username}}</dd>
        <dt><em data-tippy-content="A valid e-email is required for password reset to work properly. If no e-mail is set, the administrator will have to set passwords manually.">E-mail:</em></dt>
        <dd>{{email}}</dd>
        <dt>Role:</dt>
        <dd>{{role}}</dd>
        <dt>Logged in:</dt>
        <dd><em>3 days ago</em></dd>
      </dl>
      {{#> @action-bar ../edit}}
        {{> @button}}
      {{/ @action-bar}}
    {{/ @wc-grid-item}}
  {{/each}}

  {{!-- Edit user mode --}}
  {{#> @wc-grid-item edit-user}}
    <h2><em>editing:</em> {{name.value}}</h2>
    {{> @form-item-input name id=(random)}}
    {{> @form-item-input username id=(random)}}
    {{> @form-item-input email id=(random)}}
    {{> @form-item-select role id=(random)}}
    {{> @form-item-input change-password id=(random)}}
    {{#> @action-bar}}
      {{> @button delete}}
      {{> @button save}}
    {{/ @action-bar}}
  {{/ @wc-grid-item}}

  {{!-- Add user mode --}}
  {{#> @wc-grid-item edit-user}}
    <h2><em>Create user</em></h2>
    {{> @form-item-input name id=(random)}}
    {{> @form-item-input username id=(random)}}
    {{> @form-item-input email id=(random)}}
    {{> @form-item-select role id=(random)}}
    {{> @form-item-input create-password id=(random)}}
    {{#> @action-bar}}
      {{> @button delete}}
      {{> @button save}}
    {{/ @action-bar}}
  {{/ @wc-grid-item}}

{{/ @wc-grid}}

{{#> @action-bar new-user}}
  {{> @button}}
{{/ @action-bar}}


        
            
            {
  "new-user": {
    "text": "Add new user",
    "icon": "user-add"
  },
  "edit-user": {
    "modifier": "edit-mode",
    "name": {
      "label": "Name",
      "value": "Fredrik Frodlund"
    },
    "username": {
      "label": "Username",
      "value": "fredrik"
    },
    "email": {
      "label": "E-mail",
      "value": "fredrik@gusteaus.fr"
    },
    "role": {
      "label": "Role",
      "options": [
        {
          "option": "Administrator"
        },
        {
          "option": "Economy"
        },
        {
          "option": "Sommelier"
        },
        {
          "option": "Server"
        }
      ]
    },
    "change-password": {
      "label": "Change password",
      "type": "password"
    },
    "create-password": {
      "label": "Create password",
      "type": "password"
    },
    "delete": {
      "text": "Delete user",
      "icon": "delete",
      "modifier": "alt"
    },
    "save": {
      "text": "Save",
      "icon": "save"
    }
  },
  "edit": {
    "text": "Edit",
    "modifier": "alt"
  },
  "users": [
    {
      "username": "gordon",
      "name": "Gordon Ramsay",
      "email": "gordon@gusteaus.fr",
      "role": "Administrator"
    },
    {
      "username": "ben",
      "name": "Ben Bernanke",
      "email": "ben@gusteaus.fr",
      "role": "Economy"
    },
    {
      "username": "andrey",
      "name": "Andrey Ivanov",
      "email": "andrey@gusteaus.fr",
      "role": "Sommelier"
    },
    {
      "username": "alfredo",
      "name": "Alfredo Linguini",
      "email": "alfredo@gusteaus.fr",
      "role": "Server"
    }
  ]
}

Handle: @user-list
Preview:
- With layout
- Component only
Filesystem Path: components/03_organisms/user-list/user-list.hbs
References (7): @multi-select-filter--users, @action-bar, @button, @wc-grid, @wc-grid-item, @form-item-input, @form-item-select
Referenced by (1): @account-settings

No notes defined.