Skip to content

Instantly share code, notes, and snippets.

@dgerrells

dgerrells/index.html

Created August 18, 2020 21:37
Show Gist options
  • Save dgerrells/e754106803f83bb86ce910ae16cf6332 to your computer and use it in GitHub Desktop.
Save dgerrells/e754106803f83bb86ce910ae16cf6332 to your computer and use it in GitHub Desktop.
Download ZIP
UserManagement DragDrop
Raw
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://rawgit.com/bevacqua/angular-dragula/master/dist/dragula.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<div ng-app="DragAndDrop" class="body-container" layout="column">
<div layout="row" layout-align="space-around start" layout-margin ng-controller="mainCtrl" flex>
<div flex>
<md-toolbar class="md-display-1">
<div class="md-toolbar-tools">
<div>Active Users</div>
<span flex></span>
</div>
</md-toolbar>
<md-whiteframe class="md-whiteframe-2dp" layout="column" layout-padding layout-align="space-around stretch" flex>
<div>
<div layout="row" layout-padding style="background-color: rgba(0,0,0,.1);">
<div flex class="data-cell">User Name</div>
<div flex class="data-cell">Privilege A</div>
<div flex class="data-cell">Privilege B</div>
<div flex class="data-cell">Privilege C</div>
</div>
<md-content class="user-drop-container" dragula-model="users" dragula="'bag-users'" layout-align="space-around stretch" class="questions-container" style="max-height: 80vh;border-color: rgba(0,0,0,.1);border-width:1px;border-style:solid;">
<div layout="row" class="grab-item data-row" ng-repeat="user in users" layout-align="start center">
<div class="data-cell" flex>{{user.name}}</div>
<md-checkbox layout class="data-cell" flex ng-model="user.privA"><label>Privilege A</label></md-checkbox>
<md-checkbox layout class="data-cell" flex ng-model="user.privB">Privilege B</md-checkbox>
<md-checkbox layout class="data-cell" flex ng-model="user.privC">Privilege C</md-checkbox>
</div>
</md-content>
</div>
</md-whiteframe>
</div>
<md-whiteframe class="md-whiteframe-2dp" layout="column" layout-align="space-around stretch" flex="30">
<md-toolbar class="md-display-1">
<div class="md-toolbar-tools">
<div>Inactive Users</div>
<span flex></span>
</div>
</md-toolbar>
<div class="question-search" layout="row" style="padding-top:0.5em">
<md-input-container flex style="margin-bottom: 0;">
<label style="margin-left: 0.5em;">Filter</label>
<input ng-model="searchText" ng-init="searchText = ''">
</md-input-container>
</div>
<md-content layout-padding layout-align="space-around stretch" class="questions-container" style="max-height: 80vh;">
<md-list class="user-drop-container" dragula-model="autoCompleteUsers" dragula="'bag-users'">
<md-list-item ng-click=";" ng-show="user.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1" class="grab-item" ng-repeat="user in autoCompleteUsers">
{{user.name}}
</md-list-item>
</md-list>
</md-content>
</md-whiteframe>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://rawgit.com/bevacqua/angular-dragula/master/dist/angular-dragula.min.js"></script>
<script src="https://cdn.rawgit.com/bevacqua/angularjs-dragula/daa3ef94/dist/angularjs-dragula.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
</div>
Raw
script.js
angular.module('DragAndDrop', ['ngMaterial', angularDragula(angular)])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('teal');
})
.controller('mainCtrl', function($scope) {
$scope.autoCompleteUsers = [
{name:'Maggin Albert'},
{name:'Maggin Louisa'},
{name:'Maggin Anna'},
{name:'Mallet August'},
{name:'Mallet Mamie'},
{name:'Mallet Louis'},
{name:'Manchin Ed'},
{name:'Martin Susan'},
{name:'Martin William'},
{name:'Martin Emma'},
{name:'Martin William'},
{name:'Martin Henry'},
{name:'Matthews Martha'},
{name:'Matthews Henry'},
{name:'Matthews Mary'},
{name:'Matthews Joseph'},
{name:'Matthews Fanny'},
{name:'Matthews John'},
{name:'McClusky Robert'},
{name:'McCoslin Jas'},
{name:'McCoslin Sarah'},
{name:'McCoslin James'},
{name:'McCoslin Henry'},
{name:'McCoslin Lilly'},
{name:'McCoslin Sarah'},
{name:'McCoslin Sarah'},
{name:'McCrager Dunklin'},
{name:'McDonald Sandy'},
{name:'McDurman Pat'},
{name:'McDusmann Jas'},
{name:'McDusmann Ellen'},
{name:'McDusmann John'},
{name:'McGorman Thos'},
{name:'McGorman Catherine'},
{name:'McGorman Mary'},
{name:'McGorman James'},
{name:'McGorman Chas'},
{name:'McGraw Hugh'},
{name:'McGraw Margaret'},
{name:'McGraw Margaret'},
{name:'McGuin James'},
{name:'McGuin Mary'},
{name:'McGwin Mary'},
{name:'McMenamen Ellen'},
{name:'McMinus Hannah'},
{name:'McMinus John'},
{name:'Menard August'},
{name:'Menard Gustave'},
{name:'Mereablin Eugena'},
{name:'Mesnier Charles'},
{name:'Mesnier Margaret'},
{name:'Mesnier Caroline'},
{name:'Mesnier Cecila'},
{name:'Meuder Robert'},
{name:'Meuder Charlotte'},
{name:'Meuder Sarah'},
{name:'Meuder Robert'},
{name:'Mien Madam'},
{name:'Mien John'},
{name:'Miles Nephi'},
{name:'Miles Randal'},
{name:'Miles Ann'},
{name:'Miles Richard'},
{name:'Mires Antony'},
{name:'Molitor Mary'},
{name:'Molitor B'},
{name:'Molitor Mary'},
{name:'Molitor John'},
{name:'Monnier Louisa'},
{name:'Monnier Julia'},
{name:'Monnier Mary'},
{name:'Monnier Adele'},
{name:'Monnier Rose'},
{name:'Monrine Edward'},
{name:'Moody Augustus'},
{name:'Moody Anna'},
{name:'Moody Caroline'},
{name:'Moody Allen'},
{name:'Moody Martha'},
{name:'Moody Charles'},
{name:'Moore Chas'},
{name:'Moran Aba'},
{name:'Moran John'},
{name:'Moran Pat'},
{name:'Mordacier Benjamin'},
{name:'Morisson Louis'},
{name:'Morrison Angelique'},
{name:'Morrison Volmer'},
{name:'Muggle Fred'},
{name:'Murdoch Maria'},
{name:'Murdoch J'},
{name:'Murdoch William'},
{name:'Murdoch Julia'},
{name:'Murdoch Elizabeth'},
{name:'Murdoch Louisa'},
{name:'Murdoch John'},
{name:'Murdock Jane'},
{name:'Murdock Robert'},
{name:'Murdock John'},
{name:'Murphy Mary'},
{name:'Murphy Martin'},
{name:'Murphy Catherine'},
{name:'Murphy Michael'},
{name:'Murphy Bridget'},
{name:'Murphy John'},
{name:'Murphy Thomas'},
{name:'Mutthaup Ernest'},
{name:'Mutthaup Flora'},
{name:'Myers Louis'},
{name:'Myers Elizabella'},
{name:'Nagle Issac'},
{name:'Nixon Sarah'},
{name:'Nixon Robert'},
{name:'Nixon John'},
{name:'Nixon Margaret'},
{name:'Orton Lucy'},
{name:'Orton John'},
{name:'Owens William'},
{name:'Owens Lucy'},
{name:'Owens Mary'},
{name:'Owens Edward'},
{name:'Owens Anna'},
{name:'Palmer Thomas'},
{name:'Paste Antone'},
{name:'Pecie Julia'},
{name:'Perque Lydia'},
{name:'Perque Charles'},
{name:'Perque Ann'},
{name:'Perque Sophia'},
{name:'Perque Charles'},
{name:'Perque Sarah'},
{name:'Perque Marion'},
{name:'Perrin Henry'},
{name:'Pery David'},
{name:'Picot Victor'},
{name:'Pike Fanney'},
{name:'Pike John'},
{name:'Pike Edward'},
{name:'Pike Harriet'},
{name:'Pike Edward'},
{name:'Pike Sherman'},
{name:'Pike Albert'},
{name:'Pitcher Alexander'},
{name:'Pitcher Jane'},
{name:'Pitcher Louis'},
{name:'Pitcher Emma'},
{name:'Plant W'},
{name:'Plant Frances'},
{name:'Plant William'},
{name:'Plant Fanny'},
{name:'Plant Mary'},
{name:'Plant Alfred'},
{name:'Podgue David'},
{name:'Podgue Mary'},
{name:'Podgue Elizabeth'},
{name:'Potof William'},
{name:'Povoin Peter'},
{name:'Power John'},
{name:'Power Michel'},
{name:'Power Sarah'},
{name:'Power Bridget'},
{name:'Power Julia'},
{name:'Power Jacob'},
{name:'Powl Daniel'},
{name:'Price Henry'},
{name:'Price Elizabeth'},
{name:'Price Henry'},
{name:'Price Mary'},
{name:'Price Mary'},
{name:'Price Henry'},
{name:'Price David'},
{name:'Price Christiana'},
{name:'Price Elizabeth'},
{name:'Price Joseph'},
{name:'Price Emma'},
{name:'Price Charles'},
{name:'Price Geo'},
{name:'Price Catherine'},
{name:'Price George'},
{name:'Price John'},
{name:'Price Catherine'},
{name:'Price Jacob'},
{name:'Price William'},
{name:'Price Otto'},
{name:'Price Mary'},
{name:'Prior Nancy'},
{name:'Pull John'},
{name:'Pull Anna'},
{name:'Pull Elizabeth'},
{name:'Pumfey Henry'},
{name:'Pumfey Carlina'},
{name:'Pumfey Henry'},
{name:'Quedems Charles'},
{name:'Quigly John'},
{name:'Quigly Mary'},
{name:'Quigly Mary'},
{name:'Quigly John'},
{name:'Quigly Margaret'},
{name:'Quillerman Elemate'},
{name:'Ragnard Louis'},
{name:'Ragnard Charles'},
{name:'Ramband Louis'},
{name:'Ramband Mary'},
{name:'Ramband Bertha'},
{name:'Ramband Mary'},
{name:'Ramband Corilla'},
{name:'Rauck Geo'},
{name:'Raymand Maria'},
{name:'Reese John'},
{name:'Refinach Henry'},
{name:'Refinach Margaret'},
{name:'Revoire Francois'},
{name:'Reynolds Joseph'},
{name:'Rhyne Bridget'},
{name:'Richards Lucilla'}
];
$scope.users = [{name: 'Nurgal'},{name: 'Json Born'},{name: 'Alice Wondering'}];
});
Raw
style.css
body {
background-color: white;
}
.body-container {
margin: auto;
margin-top: 2em;
margin-bottom: 2em;
min-width: 70%;
max-width: 80%;
}
.edit-question-modal {
min-width: 80%;
overflow-x:hidden;
min-height:70vh;
}
@media screen and (max-width: 1600px) {
.edit-question-modal {
min-width: 95%;
}
.body-container {
max-width: 100%;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.body-container {
max-width: 100%;
}
}
md-list-item.grab-item.ng-hide-remove {
animation: 300ms fadeInRight;
}
md-list-item.grab-item.ng-hide-add {
animation: 300ms fadeOutRight;
}
.ng-hide-remove {
animation: 300ms fadeInDown;
}
.ng-hide-add {
animation: 300ms fadeOutLeft;
}
.data-cell {
padding: .5em;
margin-top: .5em;
margin-bottom: .5em;
}
md-checkbox.data-cell {
margin: 0;
}
md-content.questions-container {
overflow-x: hidden;
}
div.grab-item {
border-color: rgba(0,0,0,.1);
border-bottom-style: solid;
border-bottom-width: 1px;
}
.grab-item {
cursor: grab;
cursor: -webkit-grab;
}
.question-item {
padding: 0.5em;
margin: 0.5em;
cursor: grab;
cursor: -webkit-grab;
}
.question-container.question-drag {
background-color: white;
}
.icon-button.md-button {
min-width: 0;
min-height: 0;
padding: 0;
margin: 0;
align-self: center;
width: 4em;
height: 4em;
line-height: 1em;
}
.icon-button.md-button.small {
width: 2em;
height: 2em;
}
.survey-question {
padding: .5em;
}
.survey-follow-up-container {
padding: 0.5em;
border: #496f6e;
border-width: 2px;
border-style: dashed;
}
md-input-container.survey-name-input {
margin-bottom: 0;
height: 2em;
}
.section-body {
border-width: 2px;
border-color: #496f6e;
border-style: dashed;
min-height: 2em;
}
div.section-container.ng-enter {
animation: 300ms zoomIn;
}
div.section-container.ng-leave {
animation: 300ms zoomOut;
}
[survey-question].ng-enter {
animation: 300ms zoomIn;
}
[survey-question].ng-leave {
animation: 300ms zoomOut;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css " rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment