email: move server location to it's own card

comples #826
2023-07-10 21:25:25 +05:30
parent 287ad9034d
commit 0049e269d3
5 changed files with 109 additions and 126 deletions
@@ -1,50 +1,3 @@
-<!-- Modal change mail server domain -->
-<div class="modal fade" id="mailLocationModal" tabindex="-1" role="dialog">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h4 class="modal-title">{{ 'emails.changeDomainDialog.title' | tr }}</h4>
-      </div>
-      <div class="modal-body">
-        <div ng-bind-html=" 'emails.changeDomainDialog.description' | tr "></div>
-        <br>
-
-        <form name="mailLocationForm" role="form" novalidate ng-submit="mailLocation.submit()" autocomplete="off">
-          <div class="form-group" ng-class="{ 'has-error': (mailLocationForm.subdomain.$dirty && mailLocationForm.subdomain.$invalid) || (!mailLocationForm.subdomain.$dirty && mailLocation.error)}">
-            <label class="control-label">{{ 'emails.changeDomainDialog.location' | tr }}</label>
-
-            <div class="has-error" ng-show="mailLocation.error">{{ mailLocation.error.message }}</div>
-
-            <div class="input-group form-inline">
-              <input type="text" class="form-control" ng-model="mailLocation.subdomain" id="mailLocationLocationInput" name="location" placeholder="{{ 'emails.changeDomainDialog.locationPlaceholder' | tr }}" autofocus>
-
-              <div class="input-group-btn">
-                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                  <span>{{ (!mailLocation.subdomain ? '' : '.') + mailLocation.domain.domain }}</span>
-                  <span class="caret"></span>
-                </button>
-                <ul class="dropdown-menu dropdown-menu-right" role="menu">
-                  <li ng-repeat="domain in domains">
-                    <a href="" ng-click="mailLocation.domain = domain">{{ domain.domain }}</a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <p class="text-center text-warning text-bold" ng-show="mailLocation.domain.provider === 'manual'" ng-bind-html="'emails.changeDomainDialog.manualInfo' | tr:{ domain: mailLocation.domain.domain }"></p>
-
-          <input class="ng-hide" type="submit" ng-disabled="mailLocationForm.$invalid"/>
-        </form>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
-        <button type="button" class="btn btn-success" ng-click="mailLocation.submit()" ng-disabled="mailLocationForm.$invalid || mailLocation.busy"><i class="fa fa-circle-notch fa-spin" ng-show="mailLocation.busy"></i> {{ 'main.dialog.save' | tr }}</button>
-      </div>
-    </div>
-  </div>
-</div>
-
 <!-- Modal change max email size -->
 <div class="modal fade" id="maxEmailSizeChangeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
@@ -220,6 +173,7 @@
    </h1>
  </div>

+  <!-- domain listing -->
  <div class="text-left">
    <h3>{{ 'emails.domains.title' | tr }}</h3>
  </div>
@@ -269,6 +223,7 @@
    </div>
  </div>

+  <!-- mailbox sharing -->
  <div class="text-left section-header" ng-show="user.isAtLeastOwner">
    <h3>{{ 'emails.mailboxSharing.title' | tr }}</h3>
  </div>
@@ -289,22 +244,82 @@
    </div>
  </div>

+  <!-- server location -->
+  <div class="text-left section-header" ng-show="user.isAtLeastOwner">
+    <h3>
+      {{ 'emails.settings.location' | tr }}
+      <div class="btn-group btn-group-sm pull-right">
+        <button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="mailLocation.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'main.action.showLogs' | tr }}">
+          <i class="fas fa-align-left"></i> <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+          <li ng-repeat="task in mailLocation.tasks">
+            <a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
+            {{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </h3>
+  </div>
+
+  <div class="card">
+    <div class="row">
+      <div class="col-md-7">
+        <p ng-bind-html="'emails.changeDomainDialog.description' | tr"></p>
+      </div>
+      <div class="col-md-5">
+        <div class="input-group form-inline">
+          <input type="text" class="form-control" ng-model="mailLocation.subdomain" id="mailLocationLocationInput" name="location" placeholder="{{ 'emails.changeDomainDialog.locationPlaceholder' | tr }}" autofocus>
+
+          <div class="input-group-btn">
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+              <span>{{ (!mailLocation.subdomain ? '' : '.') + mailLocation.domain.domain }}</span>
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-right" role="menu">
+              <li ng-repeat="domain in domains">
+                <a href="" ng-click="mailLocation.domain = domain">{{ domain.domain }}</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-12" style="margin-bottom: 10px;">
+        <div ng-show="mailLocation.busy" class="progress progress-striped active animateMe">
+          <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ mailLocation.percent }}%"></div>
+        </div>
+      </div>
+    </div>
+
+    <p class="text-center text-warning text-bold" ng-show="mailLocation.domain.provider === 'manual'" ng-bind-html="'emails.changeDomainDialog.manualInfo' | tr:{ domain: mailLocation.domain.domain }"></p>
+
+    <div class="row">
+      <div class="col-md-6">
+        <p ng-show="mailLocation.busy">{{ mailLocation.message }}</p>
+        <p ng-hide="mailLocation.busy">
+          <div class="has-error" ng-show="!mailLocation.active">{{ mailLocation.errorMessage }}</div>
+        </p>
+      </div>
+      <div class="col-md-6 text-right">
+        <!-- save is always enabled so that user can "redo" the task -->
+        <button class="btn btn-outline btn-primary" ng-click="mailLocation.change()" ng-hide="mailLocation.busy">{{ 'main.dialog.save' | tr }}</button>
+        <button class="btn btn-outline btn-danger" ng-click="mailLocation.stop()" ng-show="mailLocation.busy" style="margin-right: 10px">{{ 'main.dialog.cancel' | tr }}</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- settings -->
  <div class="text-left section-header" ng-show="user.isAtLeastOwner">
    <h3>{{ 'emails.settings.title' | tr }}</h3>
  </div>

  <div class="card" ng-show="user.isAtLeastOwner" style="margin-bottom: 15px;">
    <p ng-bind-html=" 'emails.settings.info' | tr "></p>
-
    <div class="row">
-      <div class="col-xs-6">
-        <span class="text-muted">{{ 'emails.settings.location' | tr }}</span>
-      </div>
-      <div class="col-xs-6 text-right">
-        <span>{{ mailLocation.currentLocation.subdomain + (!mailLocation.currentLocation.subdomain ? '' : '.') + mailLocation.currentLocation.domain.domain }}
-          <a ng-hide="mailLocation.busy" href="" ng-click="mailLocation.show()"><i class="fa fa-edit text-small"></i></a> <!-- ng-disabled does not work for links -->
-        </span>
-      </div>
      <div class="col-xs-6">
        <span class="text-muted">{{ 'emails.settings.maxMailSize' | tr }}</span>
      </div>
@@ -339,19 +354,6 @@
        <a href="" ng-click="solrConfig.show()"><i class="fa fa-edit text-small"></i></a>
      </div>
    </div>
-
-    <div class="row" ng-show="mailLocation.busy">
-      <div class="col-md-12" style="margin-top: 10px;">
-        {{ 'emails.settings.changeDomainProgress' | tr }}
-        <div style="display: flex; margin: 4px 0;">
-          <div class="progress progress-striped active animateMe" style="flex-grow: 1;">
-            <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ mailLocation.percent }}%"></div>
-          </div>
-          <div ng-show="mailLocation.taskMinutesActive >= 2" class="text-danger hand" style="margin: 0 4px;" ng-click="mailLocation.stopTask()" uib-tooltip="Cancel Task"><i class="fas fa-times"></i></div>
-        </div>
-        <p>{{ mailLocation.message }}</p>
-      </div>
-    </div>
  </div>

 </div>
@@ -24,25 +24,28 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati

    $scope.mailLocation = {
        busy: false,
-        error: null,
+        percent: 0,
+        message: '',
+        errorMessage: '',
+
        currentLocation: { domain: null, subdomain: '' },
        domain: null,
        subdomain: '',
-        taskId: null,
-        percent: 0,
-        taskMinutesActive: 0,
-        message: '',
-        errorMessage: '',
-        reconfigure: false,
+        tasks: [],

-        stopTask: function () {
-            Client.getLatestTaskByType(TASK_TYPES.TASK_CHANGE_MAIL_LOCATION, function (error, task) {
+        refreshTasks: function () {
+            Client.getTasksByType(TASK_TYPES.TASK_CHANGE_MAIL_LOCATION, function (error, tasks) {
                if (error) return console.error(error);
-                if (!task.id) return;
+                $scope.mailLocation.tasks = tasks.slice(0, 10);
+                if ($scope.mailLocation.tasks.length && $scope.mailLocation.tasks[0].active) $scope.mailLocation.updateStatus();
+            });
+        },

-                Client.stopTask(task.id, function (error) {
-                    if (error) console.error(error);
-                });
+        stop: function () {
+            Client.stopTask($scope.mailLocation.tasks[0].id, function (error) {
+                if (error) console.error(error);
+                $scope.mailLocation.busy = false;
+                $scope.mailLocation.refreshTasks();
            });
        },

@@ -50,46 +53,27 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
            Client.getMailLocation(function (error, location) {
                if (error) return console.error('Failed to get max email location', error);

-                $scope.mailLocation.currentLocation.subdomain = location.subdomain;
-                $scope.mailLocation.currentLocation.domain = $scope.domains.find(function (d) { return location.domain === d.domain; });
+                $scope.mailLocation.currentLocation.subdomain = $scope.mailLocation.subdomain = location.subdomain;
+                $scope.mailLocation.currentLocation.domain = $scope.mailLocation.domain = $scope.domains.find(function (d) { return location.domain === d.domain; });

-                Client.getLatestTaskByType(TASK_TYPES.TASK_CHANGE_MAIL_LOCATION, function (error, task) {
-                    if (error) return console.error(error);
-                    if (!task) return;
-
-                    $scope.mailLocation.taskId = task.id;
-                    $scope.mailLocation.reconfigure = task.active; // if task is active when this view reloaded, reconfigure email apps when task done
-                    $scope.mailLocation.updateStatus();
-                });
+                $scope.mailLocation.refreshTasks();
            });
        },

-        show: function () {
-            $scope.mailLocation.busy = false;
-            $scope.mailLocation.error = null;
-
-            $scope.mailLocation.domain = $scope.mailLocation.currentLocation.domain;
-            $scope.mailLocation.subdomain = $scope.mailLocation.currentLocation.subdomain;
-
-            $scope.mailLocationForm.$setUntouched();
-            $scope.mailLocationForm.$setPristine();
-
-            $('#mailLocationModal').modal('show');
-        },
-
        updateStatus: function () {
-            Client.getTask($scope.mailLocation.taskId, function (error, data) {
+            var taskId = $scope.mailLocation.tasks[0].id;
+
+            Client.getTask(taskId, function (error, data) {
                if (error) return window.setTimeout($scope.mailLocation.updateStatus, 5000);

                if (!data.active) {
-                    $scope.mailLocation.taskId = null;
                    $scope.mailLocation.busy = false;
                    $scope.mailLocation.message = '';
-                    $scope.mailLocation.percent = 0;
-                    $scope.taskMinutesActive = 0;
+                    $scope.mailLocation.percent = 100;
                    $scope.mailLocation.errorMessage = data.success ? '' : data.error.message;

-                    if ($scope.mailLocation.reconfigure) $scope.reconfigureEmailApps();
+                    $scope.reconfigureEmailApps();
+                    $scope.mailLocation.refreshTasks(); // update the tasks list dropdown

                    return;
                }
@@ -97,32 +81,26 @@ angular.module('Application').controller('EmailsController', ['$scope', '$locati
                $scope.mailLocation.busy = true;
                $scope.mailLocation.percent = data.percent;
                $scope.mailLocation.message = data.message;
-                $scope.mailLocation.taskMinutesActive = moment().diff(moment(data.creationTime), 'minutes');
-
                window.setTimeout($scope.mailLocation.updateStatus, 1000);
            });
        },

-        submit: function () {
+        change: function () {
            $scope.mailLocation.busy = true;
+            $scope.mailLocation.percent = 0;
+            $scope.mailLocation.message = '';
+            $scope.mailLocation.errorMessage = '';

            Client.setMailLocation($scope.mailLocation.subdomain, $scope.mailLocation.domain.domain, function (error, result) {
                if (error) {
+                    console.error(error);
+                    $scope.mailLocation.errorMessage = error.message;
                    $scope.mailLocation.busy = false;
-                    $scope.mailLocation.error = error;
-                    return;
+                } else {
+                    $scope.mailLocation.refreshTasks();
                }

-                // update UI immediately
-                $scope.mailLocation.currentLocation = { subdomain: $scope.mailLocation.subdomain, domain: $scope.mailLocation.domain };
-
-                $scope.mailLocation.taskId = result.taskId;
-                $scope.mailLocation.reconfigure = true; // reconfigure email apps when task done
-                $scope.mailLocation.updateStatus();
-
                Client.refreshConfig(); // update config.mailFqdn
-
-                $('#mailLocationModal').modal('hide');
            });
        }
    };