Portal widget - manage delegates

Modern Development/Service Portal Widgets/Manage Delegates Widget/README.md

@@ -0,0 +1,15 @@
+# My Delegates -  Portal Widget 
+## Overview
+Simple Service Portal widget to create, edit, list, and delete OOB Delegate functionality in portal. 
+
+## Files included
+- HTML : widget HTML.
+- CSS : widget CSS.
+- Client Script : widget Client contriller.
+- Server Script : widget Server Script.
+
+## How to use
+- Create a new Service Portal widget.
+- Copy paste the html, css, client and server scipts to respective fields
+- Save and add the widget to a portal page.
+

Modern Development/Service Portal Widgets/Manage Delegates Widget/delegates.html

@@ -0,0 +1,82 @@
+<div class="panel panel-default">
+  <div class="panel-heading">
+    <h3 class="panel-title">Delegates</h3>
+  </div>
+  <div class="panel-body">
+    <div ng-if="!c.data.delegates.length" class="alert alert-info text-center">
+      You have no active delegates.
+    </div>
+
+    <ul class="list-group" ng-if="c.data.delegates.length > 0">
+      <li class="list-group-item delegate-item" ng-repeat="d in c.data.delegates">
+        <h4>{{d.delegate_display}}</h4>
+        <p class="text-muted">
+          <strong>User:</strong> {{d.user_display}} <br/>
+          <strong>Starts:</strong> {{d.starts_display || 'N/A'}} <br/>
+          <strong>Ends:</strong> {{d.ends_display || 'N/A'}}
+        </p>
+        <p>
+          <strong>Notifications:</strong>
+          <span ng-if="d.approvals"> Approvals</span>
+          <span ng-if="d.assignments"> Assignments</span>
+          <span ng-if="d.notifications"> All</span>
+          <span ng-if="d.invitations"> Invitations</span>
+        </p>
+        <div class="btn-row">
+          <button class="btn btn-sm btn-default" ng-click="c.edit(d.sys_id)">
+            <i class="fa fa-edit"></i> Edit
+          </button>
+        </div>
+      </li>
+    </ul>
+
+    <hr/>
+
+    <div class="delegate-form-container">
+      <h4 ng-if="!c.editing">Create a New Delegate</h4>
+      <h4 ng-if="c.editing">Edit Delegate</h4>
+
+      <form name="delegateForm" ng-submit="c.saveDelegate()">
+        <!-- User is not editable: recorded as current user server-side -->
+
+        <div class="form-group">
+          <label for="delegate">Delegate <span class="text-danger">*</span></label>
+          <sn-record-picker field="c.delegateField" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name,email'" page-size="10" placeholder="Search delegate..." required></sn-record-picker>
+        </div>
+
+        <div class="row">
+          <div class="col-md-6">
+            <div class="form-group">
+              <label>Starts</label>
+              <input type="datetime-local" class="form-control" ng-model="c.form.starts_local" />
+            </div>
+          </div>
+          <div class="col-md-6">
+            <div class="form-group">
+              <label>Ends</label>
+              <input type="datetime-local" class="form-control" ng-model="c.form.ends_local" />
+            </div>
+          </div>
+        </div>
+
+        <div class="checkboxes form-group">
+          <label class="checkbox-inline"><input type="checkbox" ng-model="c.form.approvals"> Approvals</label>
+          <label class="checkbox-inline"><input type="checkbox" ng-model="c.form.assignments"> Assignments</label>
+          <label class="checkbox-inline"><input type="checkbox" ng-model="c.form.notifications"> All notifications</label>
+          <label class="checkbox-inline"><input type="checkbox" ng-model="c.form.invitations"> Meeting invitations</label>
+        </div>
+
+        <div class="form-group">
+          <button type="submit" class="btn btn-primary" ng-disabled="delegateForm.$invalid">
+            <i class="fa" ng-class="{'fa-plus-circle': !c.editing, 'fa-save': c.editing}"></i>
+            {{c.editing ? 'Save' : 'Create'}}
+          </button>
+          <button type="button" class="btn btn-default" ng-click="c.resetForm()">New</button>
+          <button type="button" class="btn btn-danger" ng-if="c.editing" ng-click="c.deleteDelegate()">
+            <i class="fa fa-trash"></i> Delete
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>

Modern Development/Service Portal Widgets/Manage Delegates Widget/delegates.scss

@@ -0,0 +1,19 @@
+.delegate-item {
+  border-left: 4px solid #5bc0de;
+  margin-bottom: 10px;
+  padding: 10px 15px;
+}
+.delegate-item h4 {
+  margin-top: 0;
+  font-weight: bold;
+  color: #333;
+}
+.delegate-form-container {
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+}
+.btn-row { margin-top: 8px; }
+.form-group { margin-bottom: 15px; }
+.panel-heading + .panel-body { padding-top: 20px; }
+.checkboxes label { margin-right: 12px; }

Modern Development/Service Portal Widgets/Manage Delegates Widget/delegates_client.css

@@ -0,0 +1,86 @@
+function($scope) {
+  var c = this;
+  c.form = {};
+  c.editing = false;
+  c.delegateField = { displayValue: '', value: '', name: 'delegate' };
+
+  c.$onInit = function() {
+    c.data = c.data || {};
+    c.form = {
+      approvals: false,
+      assignments: false,
+      notifications: false,
+      invitations: false
+    };
+  };
+
+  function pad(n){ return n<10 ? '0'+n : n; }
+
+  function localToGlide(local) {
+    if (!local) return '';
+    var d = new Date(local);
+    return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate())
+      + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
+  }
+
+  c.saveDelegate = function() {
+    c.form.delegate = c.delegateField.value;
+    c.form.starts = localToGlide(c.form.starts_local);
+    c.form.ends = localToGlide(c.form.ends_local);
+
+    c.data.action = 'save_delegate';
+    c.data.record = angular.copy(c.form);
+
+    c.server.update().then(function() {
+      c.data.action = undefined;
+      c.resetForm();
+      c.server.get().then(function(response) {
+        c.data = response.data;
+      });
+    }, function() {
+      alert('Failed to save delegate.');
+    });
+  };
+
+  c.edit = function(sys_id) {
+    c.server.get().then(function(response) {
+      c.data = response.data;
+      var rec = c.data.delegates.find(function(x){ return x.sys_id === sys_id; }) || {};
+      c.editing = true;
+      c.form = {
+        sys_id: rec.sys_id,
+        approvals: !!rec.approvals,
+        assignments: !!rec.assignments,
+        notifications: !!rec.notifications,
+        invitations: !!rec.invitations,
+        starts_local: rec.starts_value ? new Date(rec.starts_value.replace(' ', 'T')) : null,
+        ends_local: rec.ends_value ? new Date(rec.ends_value.replace(' ', 'T')) : null
+      };
+      c.delegateField.value = rec.delegate_sys_id || rec.delegate;
+      c.delegateField.displayValue = rec.delegate_display;
+    });
+  };
+
+  c.deleteDelegate = function() {
+    if (!c.form.sys_id) return;
+    if (!confirm('Delete delegate record?')) return;
+    c.data.action = 'delete_delegate';
+    c.data.sys_id = c.form.sys_id;
+    c.server.update().then(function() {
+      c.data.action = undefined;
+      c.resetForm();
+      c.server.get().then(function(response) { c.data = response.data; });
+    });
+  };
+
+  c.resetForm = function() {
+    c.editing = false;
+    c.form = {
+      approvals: false,
+      assignments: false,
+      notifications: false,
+      invitations: false
+    };
+    c.delegateField = { displayValue: '', value: '', name: 'delegate' };
+  };
+}

Modern Development/Service Portal Widgets/Manage Delegates Widget/delegates_server.js

@@ -0,0 +1,69 @@
+(function() {
+  data.delegates = [];
+  var currentUser = gs.getUserID(); 
+
+  if (input && input.action === 'save_delegate' && input.record) {
+    var rec = input.record;
+    var gr;
+    if (rec.sys_id) {
+      gr = new GlideRecord('sys_user_delegate');
+      if (!gr.get(rec.sys_id)) {
+        gr.initialize();
+      }
+    } else {
+      gr = new GlideRecord('sys_user_delegate');
+      gr.initialize();
+    }
+
+    gr.setValue('user', currentUser);
+
+    if (rec.delegate) gr.setValue('delegate', rec.delegate);
+    if (rec.starts) gr.setValue('starts', rec.starts);
+    if (rec.ends) gr.setValue('ends', rec.ends);
+
+    gr.setValue('approvals', rec.approvals ? 'true' : 'false');
+    gr.setValue('assignments', rec.assignments ? 'true' : 'false');
+    gr.setValue('notifications', rec.notifications ? 'true' : 'false');
+    gr.setValue('invitations', rec.invitations ? 'true' : 'false');
+
+    var id = gr.update();
+    data.saved_sys_id = id;
+  }
+
+  if (input && input.action === 'delete_delegate' && input.sys_id) {
+    var ddel = new GlideRecord('sys_user_delegate');
+    if (ddel.get(input.sys_id)) {
+      ddel.deleteRecord();
+      data.deleted = true;
+    } else {
+      data.deleted = false;
+    }
+  }
+
+
+  var grList = new GlideRecord('sys_user_delegate');
+  grList.addQuery('user', currentUser);
+  grList.orderByDesc('starts');
+  grList.query();
+  while (grList.next()) {
+    var obj = {};
+    obj.sys_id = grList.getUniqueValue();
+    obj.user = grList.getValue('user');
+    obj.delegate = grList.getValue('delegate');
+    obj.user_display = grList.getDisplayValue('user');
+    obj.delegate_display = grList.getDisplayValue('delegate');
+    obj.starts_display = grList.getDisplayValue('starts');
+    obj.ends_display = grList.getDisplayValue('ends');
+    obj.starts_value = grList.getValue('starts');
+    obj.ends_value = grList.getValue('ends');
+    obj.approvals = grList.getValue('approvals') === 'true' || grList.getValue('approvals') === '1';
+    obj.assignments = grList.getValue('assignments') === 'true' || grList.getValue('assignments') === '1';
+    obj.notifications = grList.getValue('notifications') === 'true' || grList.getValue('notifications') === '1';
+    obj.invitations = grList.getValue('invitations') === 'true' || grList.getValue('invitations') === '1';
+
+    obj.user_sys_id = obj.user;
+    obj.delegate_sys_id = obj.delegate;
+
+    data.delegates.push(obj);
+  }
+})();