isite 2022.8.5 → 2022.8.6

package/apps/client-side/site_files/js/bootstrap-5-directive.js

@@ -29,15 +29,7 @@ app.directive('iControl', function () {
           $('.i-list .dropdown-content').css('display', 'none');
         });
     },
-    template: `
-        <div class="mb-3 {{class2}}">
-        <label for="{{id2}}" class="form-label">{{label}}</label>
-        <input id="{{id2}}" ng-disabled="disabled" autofocus v="{{v}}"  type="{{type}}" ng-model="ngModel" ng-change="ngChange()" ngKeydown="ngKeydown()" class="form-control"  placeholder="{{placeholder}}" aria-label="{{label}}"  />
-        <div class="invalid-feedback">
-        
-        </div>   
-        </div>
-        `,
+    template: `/*##client-side/directive/i-control.html*/`,
   };
 });
 
@@ -68,12 +60,7 @@ app.directive('iTextarea', function () {
           $('.popup').hide();
         });
     },
-    template: `
-        <div class="mb-3">
-          <label for="{{id2}}" class="form-label">{{label}}</label>
-          <textarea ng-disabled="disabled" class="form-control" id="{{id2}}" ng-model="ngModel" ng-change="ngChange()" v="{{v}}" rows="{{rows}}"></textarea>
-        </div>
-        `,
+    template: `/*##client-side/directive/i-textarea.html*/`,
   };
 });
 
@@ -102,14 +89,7 @@ app.directive('iCheckbox', function ($timeout) {
         }, 100);
       };
     },
-    template: `
-        <div class="form-check">
-          <input ng-change="changed()" ng-disabled="disabled" class="form-check-input" type="checkbox" ng-model="ngModel" id="{{id2}}">
-          <label class="form-check-label" for="{{id2}}">
-            {{label}}
-          </label>
-        </div>
-        `,
+    template: `/*##client-side/directive/i-checkbox.html*/`,
   };
 });
 
@@ -121,6 +101,7 @@ app.directive('iRadio', function () {
       label: '@',
       group: '@',
       id2: '@',
+      ngValue: '@',
       ngModel: '=',
       ngChange: '&',
     },
@@ -131,18 +112,10 @@ app.directive('iRadio', function () {
         attrs.disabled = '';
       }
 
-      $scope.group = $scope.group || attrs.group || attrs.ngModel.replaceAll('.', '_');
+      $scope.group = $scope.group || attrs.ngModel.replaceAll('.', '_');
       $scope.id2 = $scope.id2 || 'input_' + Math.random().toString().replace('0.', '');
     },
-    template: `
-            <div class="form-check">
-              <input class="form-check-input" type="radio" ng-change="ngChange()" ng-disabled="disabled" ng-model="ngModel" id="{{id2}}" name="{{group}}" >
-              <label class="form-check-label" for="exampleRadios1">
-                {{label}}
-              </label>
-            </div>
-
-        `,
+    template: `/*##client-side/directive/i-radio.html*/`,
   };
 });
 
@@ -182,11 +155,21 @@ app.directive('iButton', function () {
       } else if ($scope.type.like('*print*')) {
         $scope.fa = 'fas fa-print';
         $scope.class = 'btn-secondary';
-      } else if ($scope.type.like('*search*')) {
-        $scope.fa = 'search';
       } else if ($scope.type.like('*export*') || $scope.type.like('*excel*')) {
         $scope.fa = 'fas fa-file-export';
         $scope.class = 'btn-secondary';
+      } else if ($scope.type.like('*search*') || $scope.type.like('*find*')) {
+        $scope.fa = 'fas fa-search';
+        $scope.class = 'btn-light';
+      } else if ($scope.type.like('*login*') || $scope.type.like('*signin*')) {
+        $scope.fa = 'fas fa-sign-in-alt';
+        $scope.class = 'btn-light';
+      } else if ($scope.type.like('*logout*') || $scope.type.like('*signout*')) {
+        $scope.fa = 'fas fa-sign-out-alt';
+        $scope.class = 'btn-light';
+      }
+      if ($scope.type.like('*default*')) {
+        $scope.class = '';
       }
       $scope.$watch('loading', (loading) => {
         if (loading === 'true') {
@@ -196,13 +179,7 @@ app.directive('iButton', function () {
         }
       });
     },
-    template: `
-        <button class="btn {{class}}" type="button" ng-click="click()" ng-disabled="busy">
-          <span ng-show="busy" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
-          {{label}}
-          <i class="{{fa}}"></i>
-        </button>
-        `,
+    template: `/*##client-side/directive/i-button.html*/`,
   };
 });
 app.directive('iList', [
@@ -400,7 +377,9 @@ app.directive('iChecklist', [
         $scope.$watch('ngModel', (ngModel) => {
           $scope.reload();
         });
-
+        $scope.$watch('items', (ngModel) => {
+          $scope.reload();
+        });
         $scope.reload = function () {
           $scope.selectedItems = [];
 
@@ -465,14 +444,7 @@ app.directive('iChecklist', [
           }, 100);
         };
       },
-      template: `
-       <div class="check-list">
-            <label class="title margin"> {{label}} </label>
-            <div class="row">
-              <i-checkbox class="{{class2}}" label="{{item[display]}}" ng-repeat="item in items" ng-model="item.$selected" ng-change="change(item);"></i-checkbox>
-            </div>
-        </div>
-        `,
+      template: `/*##client-side/directive/i-checklist.html*/`,
     };
   },
 ]);
@@ -483,6 +455,7 @@ app.directive('iDate', function () {
     required: 'ngModel',
     scope: {
       label: '@',
+      V: '@',
       year: '@',
       ngModel: '=',
       ngChange: '&',
@@ -565,6 +538,7 @@ app.directive('iDate', function () {
       $scope.updateDate = function (date) {
         if ($scope.model.selectedDay && $scope.model.selectedMonth && $scope.model.selectedYear) {
           $scope.ngModel = new Date($scope.model.selectedYear.id, $scope.model.selectedMonth.id, $scope.model.selectedDay.id, 0, 0, 0);
+          $scope.editOnly = false;
           if ($scope.ngChange) {
             $scope.ngChange();
           }
@@ -583,154 +557,146 @@ app.directive('iDate', function () {
   };
 });
 
-app.directive('iChecklist2', [
-  '$interval',
-  function ($interval) {
-    return {
-      restrict: 'E',
-      required: 'ngModel',
-      scope: {
-        label: '@',
-        primary: '@',
-        display: '@',
-        ngModel: '=',
-        items: '=',
-        like: '&',
-      },
-      link: function ($scope, element, attrs, ctrl) {
-        attrs.primary = attrs.primary || 'id';
+app.directive('iDatetime', function () {
+  return {
+    restrict: 'E',
+    required: 'ngModel',
+    scope: {
+      label: '@',
+      V: '@',
+      ngYear: '@',
+      ngModel: '=',
+      ngChange: '&',
+    },
+    link: function ($scope, element, attrs) {
+      if (typeof attrs.disabled !== 'undefined') {
+        attrs.disabled = 'disabled';
+      } else {
+        attrs.disabled = '';
+      }
+      $scope.year = $scope.ngYear ? parseInt($scope.ngYear) : 1960;
 
-        $scope.selectedItems = [];
+      $scope.model = {};
 
-        $scope.$watch('ngModel', (ngModel) => {
-          $scope.reload();
+      $scope.hours = [];
+      for (let i = 0; i < 24; i++) {
+        $scope.hours.push({
+          id: i,
+          name: i < 10 ? '0' + i : i,
         });
+      }
+      $scope.minutes = [];
+      for (let i = 0; i < 60; i++) {
+        $scope.minutes.push({
+          id: i,
+          name: i < 10 ? '0' + i : i,
+        });
+      }
 
-        $scope.reload = function () {
-          $scope.selectedItems = [];
-
-          if ($scope.ngModel) {
-            $scope.ngModel.forEach((mitem) => {
-              $scope.selectedItems.push(mitem);
-            });
-
-            if ($scope.items) {
-              $scope.items.forEach((mitem) => {
-                let exist = !1;
-                $scope.selectedItems.forEach((sitem) => {
-                  if (mitem[$scope.primary] === sitem[$scope.primary]) {
-                    exist = !0;
-                  }
-                });
-                if (exist) {
-                  mitem.$selected = !0;
-                } else {
-                  mitem.$selected = !1;
-                }
-              });
-            }
-          }
-          if (!$scope.ngModel) {
-            $scope.selectedItems = [];
-            if ($scope.items) {
-              $scope.items.forEach((mitem) => {
-                mitem.$selected = !1;
-              });
-            }
-          }
-        };
-
-        $scope.change = function (item) {
-          if (item.$selected) {
-            let exsits = !1;
-            $scope.selectedItems.forEach((sitem) => {
-              if (sitem[$scope.primary] === item[$scope.primary]) {
-                exsits = !0;
-              }
-            });
-            if (!exsits) {
-              $scope.selectedItems.push(item);
-            }
-          } else {
-            $scope.selectedItems.forEach((sitem, index) => {
-              if (sitem[$scope.primary] === item[$scope.primary]) {
-                $scope.selectedItems.splice(index, 1);
-              }
-            });
-          }
-
-          $scope.ngModel = $scope.selectedItems;
-        };
-      },
-      template: `
-       <div class="row padding check-list">
-            <label class="title"> {{label}} </label>
-            <div class="control" ng-repeat="item in items">
-                <label class="checkbox" >
-                    <span > {{item[display]}} </span>
-                    <input type="checkbox" ng-model="item.$selected" ng-change="change(item)" >
-                    <span class="checkmark"></span>
-                </label>
-            </div>
-        </div>
-        `,
-    };
-  },
-]);
+      $scope.days = [];
+      for (let i = 1; i < 32; i++) {
+        $scope.days.push({
+          id: i,
+          name: i,
+        });
+      }
 
-app.directive('iRadiolist', [
-  '$interval',
-  function ($interval) {
-    return {
-      restrict: 'E',
-      required: 'ngModel',
-      scope: {
-        label: '@',
-        display: '@',
-        ngModel: '=',
-        items: '=',
-      },
-      link: function (scope, element, attrs) {
-        scope.model = scope.ngModel;
+      $scope.years = [];
+      for (let i = $scope.year; i < 2100; i++) {
+        $scope.years.push({
+          id: i,
+          name: i,
+        });
+      }
+      $scope.lang = site.session ? site.session.lang : 'en';
+      if ($scope.lang === 'ar') {
+        $scope.monthes = [
+          { id: 0, name: 'يناير' },
+          { id: 1, name: 'فبراير' },
+          { id: 2, name: 'مارس' },
+          { id: 3, name: 'ابريل' },
+          { id: 4, name: 'مايو' },
+          { id: 5, name: 'يونيو' },
+          { id: 6, name: 'يوليو' },
+          { id: 7, name: 'اغسطس' },
+          { id: 8, name: 'سبتمبر' },
+          { id: 9, name: 'اكتوبر' },
+          { id: 10, name: 'نوفمبر' },
+          { id: 11, name: 'ديسمبر' },
+        ];
+      } else {
+        $scope.monthes = [
+          { id: 0, name: 'Jan' },
+          { id: 1, name: 'Feb' },
+          { id: 2, name: 'Mar' },
+          { id: 3, name: 'Aper' },
+          { id: 4, name: 'May' },
+          { id: 5, name: 'June' },
+          { id: 6, name: 'Jule' },
+          { id: 7, name: 'Aug' },
+          { id: 8, name: 'Sep' },
+          { id: 9, name: 'Oct' },
+          { id: 10, name: 'Nov' },
+          { id: 11, name: 'Des' },
+        ];
+      }
 
-        scope.code = 'radio_' + Math.random();
+      $scope.$watch('ngModel', function (ngModel) {
+        if (ngModel) {
+          ngModel = new Date(ngModel);
+          $scope.model = $scope.model || {};
+          $scope.model.selectedDay = $scope.days.find((d) => d.id == ngModel.getDate());
+          $scope.model.selectedMonth = $scope.monthes.find((m) => m.id == ngModel.getMonth());
+          $scope.model.selectedYear = $scope.years.find((y) => y.id == ngModel.getFullYear());
+          $scope.model.selectedHour = $scope.hours.find((y) => y.id == ngModel.getHours());
+          $scope.model.selectedMinute = $scope.minutes.find((y) => y.id == ngModel.getMinutes());
+        } else {
+          $scope.model = $scope.model || {};
+          $scope.model.selectedDay = null;
+          $scope.model.selectedMonth = null;
+          $scope.model.selectedYear = null;
+          $scope.model.selectedHour = null;
+          $scope.model.selectedMinute = null;
+        }
+      });
 
-        scope.change = function (item) {
-          scope.ngModel = item;
-        };
+      $scope.setDay = function () {
+        $scope.ngModel = new Date();
+      };
 
-        scope.isChecked = function (item) {
-          if (item && scope.ngModel && scope.ngModel.id === item.id) {
-            return !0;
+      $scope.updateDate = function (date) {
+        if ($scope.model.selectedDay && $scope.model.selectedMonth && $scope.model.selectedYear && $scope.model.selectedHour && $scope.model.selectedMinute) {
+          $scope.ngModel = new Date($scope.model.selectedYear.id, $scope.model.selectedMonth.id, $scope.model.selectedDay.id, $scope.model.selectedHour.id, $scope.model.selectedMinute.id, 0);
+          $scope.editOnly = false;
+          if ($scope.ngChange) {
+            $scope.ngChange();
           }
-          return !1;
-        };
-      },
-      template: `
-       <div class="row padding radio-list">
-            <label class="title"> {{label}} </label>
-            <div class="control" ng-repeat="item in items">
-                <label class="radio" >
-                    <span > {{item[display]}} </span>
-                    <input name="{{code}}" type="radio" ng-model="model"  ng-checked="isChecked(item)" ng-click="change(item)" ng-change="change(item)" >
-                    <span class="checkmark"></span>
-                </label>
-            </div>
-        </div>
-        `,
-    };
-  },
-]);
+        }
+      };
+    },
+    restrict: 'E',
+    require: 'ngModel',
+    scope: {
+      v: '@',
+      disabled: '@',
+      label: '@',
+      ngModel: '=',
+    },
+    template: `/*##client-side/directive/i-datetime.html*/`,
+  };
+});
 
 app.directive('iFile', [
   '$interval',
   'isite',
-  function ($interval, isite) {
+  '$timeout',
+  function ($interval, isite, $timeout) {
     return {
       restrict: 'E',
       required: 'ngModel',
       scope: {
         label: '@',
+        view: '@',
         accept: '@',
         folder: '@',
         ngModel: '=',
@@ -739,19 +705,20 @@ app.directive('iFile', [
         ngChange: '&',
       },
       link: function ($scope, element, attrs, ctrl) {
-        $scope.label = $scope.label || 'Select File to Upload';
+        $scope.label = $scope.label || '';
         $scope.folder = $scope.folder || 'default';
         $scope.accept = $scope.accept ? $scope.accept : '';
+        $scope.viewOnly = $scope.view === undefined ? false : true;
+
         let input = $(element).find('input')[0];
         let button = $(element).find('button')[0];
-        if (attrs.view === '') {
-          $scope.viewOnly = !0;
-        }
+
         let progress = $(element).find('.progress')[0];
         $(progress).hide();
 
         $scope.id = Math.random().toString().replace('.', '_');
-        if (attrs.view !== '') {
+
+        if (!$scope.viewOnly) {
           button.addEventListener('click', function () {
             input.click();
           });
@@ -775,9 +742,7 @@ app.directive('iFile', [
 
               if (file) {
                 $scope.ngModel = file;
-                if ($scope.ngChange) {
-                  $scope.ngChange();
-                }
+                $scope.changed();
               }
             }
           );
@@ -788,9 +753,17 @@ app.directive('iFile', [
 
         $scope.$watch('ngModel', (ngModel) => {
           if (ngModel) {
-            a.setAttribute('url', ngModel);
+            button.setAttribute('url', ngModel);
           }
         });
+
+        $scope.changed = function () {
+          $timeout(() => {
+            if ($scope.ngChange) {
+              $scope.ngChange();
+            }
+          }, 200);
+        };
       },
       template: `/*##client-side/directive/i-file.html*/`,
     };
@@ -800,12 +773,14 @@ app.directive('iFile', [
 app.directive('iImage', [
   '$interval',
   'isite',
-  function ($interval, isite) {
+  '$timeout',
+  function ($interval, isite, $timeout) {
     return {
       restrict: 'E',
       required: 'ngModel',
       scope: {
         folder: '@',
+        view: '@',
         accept: '@',
         ngModel: '=',
         ngClick: '&',
@@ -814,12 +789,14 @@ app.directive('iImage', [
       link: function ($scope, element, attrs, ctrl) {
         $scope.folder = $scope.folder || 'default';
         $scope.accept = $scope.accept ? $scope.accept : 'image/*';
+        $scope.viewOnly = $scope.view === undefined ? false : true;
+
         let input = $(element).find('input')[0];
         let img = $(element).find('img')[0];
         let progress = $(element).find('.progress')[0];
         $(progress).hide();
 
-        if (attrs.view !== '') {
+        if (!$scope.viewOnly) {
           img.addEventListener('click', function () {
             input.click();
           });
@@ -844,7 +821,9 @@ app.directive('iImage', [
               if (image) {
                 $scope.ngModel = image;
                 if ($scope.ngChange) {
-                  $scope.ngChange();
+                  $timeout(() => {
+                    $scope.ngChange();
+                  }, 200);
                 }
               }
             }
@@ -861,6 +840,58 @@ app.directive('iImage', [
     };
   },
 ]);
+app.directive('iUpload', [
+  '$interval',
+  'isite',
+  function ($interval, isite) {
+    return {
+      restrict: 'E',
+      scope: {
+        label: '@',
+        api: '@',
+        type: '@',
+        view: '@',
+        ngClick: '&',
+        onUploaded: '&',
+      },
+      link: function ($scope, element, attrs, ctrl) {
+        let input = $(element).find('input')[0];
+        let a = $(element).find('button')[0];
+        let progress = $(element).find('progress')[0];
+        $(progress).hide();
+
+        if (attrs.view !== '') {
+          a.addEventListener('click', function () {
+            input.click();
+          });
+        }
+
+        input.addEventListener('change', function () {
+          if ($scope.api) {
+            isite.upload(
+              this.files,
+              {
+                api: $scope.api,
+              },
+              (err, file, e) => {
+                if (e) {
+                  $(progress).show();
+                  progress.value = e.loaded;
+                  progress.max = e.total;
+                }
+
+                if (file) {
+                  $scope.onUploaded(file);
+                }
+              }
+            );
+          }
+        });
+      },
+      template: `/*##client-side/directive/i-upload.html*/`,
+    };
+  },
+]);
 
 app.directive('iTreeview', [
   '$interval',
@@ -975,23 +1006,7 @@ app.directive('iTreeview', [
           }
         });
       },
-      template: `
-        <div class="treeview">
-        <ul >
-            <li ng-dblclick="$event.preventDefault();$event.stopPropagation();source.$actions = !0" ng-mouseleave="source.$actions = !1">
-           
-            <i ng-hide="openTree" class="fa fa-folder"></i>  <i ng-show="openTree" class="fa fa-folder"></i> 
-           
-
-            <span ng-click="openTree = !openTree" class="title"> {{label}} <small class="display"> [ {{ngModel.v_display}} ] </small>  </span>
-                <div class="actions" ng-show="source.$actions === !0">
-                    <i-button type="add default" ng-click="ngClick($event , ngModel);ngNode($event , ngModel)"></i-button>
-                </div>
-                <i-treenode display="{{display}}" ng-click="ngClick($event)" ng-add="ngAdd()" ng-edit="ngEdit()" ng-delete="ngDelete()" ng-show="openTree" ng-model="ngModel" nodes="v_nodes" ></i-treenode>
-            </li>
-        </ul>
-        </div>
-        `,
+      template: `/*##client-side/directive/i-treeview.html*/`,
     };
   },
 ]);
@@ -1096,30 +1111,7 @@ app.directive('iTreenode', [
           node.$selected = !0;
         };
       },
-      template: `
-        <div class="treenode"> 
-        <ul >
-            <li  ng-repeat="node in nodes" >
-            <div class="row" ng-dblclick="$event.preventDefault();$event.stopPropagation();node.$actions = !0;source.$actions = !1" ng-mouseleave="node.$actions = !1">
-            <span ng-show="node.nodes.length > 0" ng-click="node.$expand = !node.$expand;">
-                    <i ng-hide="node.$expand" class="fa fa-caret-left"></i>  <i ng-show="node.$expand" class="fa fa-caret-down"></i> 
-            </span>
-            <span ng-hide="node.nodes.length > 0" >
-                    <i class="fa fa-file"></i>
-            </span>
-
-                <span class="text" ng-class="{'selected' : node.$selected == !0}" ng-click="ngClick($event , node);node.$expand = !node.$expand;selected(node);updateModal(node)"   > {{node[display]}} </span>
-                <div class="actions" ng-show="node.$actions === !0">
-                    <i-button type="add default" ng-click="ngAdd(node)"></i-button>
-                    <i-button type="edit default" ng-click="ngEdit(node)"></i-button>
-                    <i-button type="delete default" ng-click="ngDelete(node)"></i-button>
-                </div>
-            </div>   
-                <i-treenode display="{{display}}" ng-click="ngClick($event)" ng-add="ngAdd()" ng-edit="ngEdit()" ng-delete="ngDelete()" ng-show="node.$expand" ng-model="ngModel" nodes="node.nodes" nodes="node.nodes"></i-treenode>
-            </li>
-        </ul>
-        </div>
-        `,
+      template: `/*##client-side/directive/i-treenode.html*/`,
     };
   },
 ]);