Disabled/Greyed project when not usable.

Not usable means sources are out of sync or project is not enable.

3 files changed, 27 insertions, 2 deletions

diff --git a/webapp/src/app/devel/devel.component.css b/webapp/src/app/devel/devel.component.css
index 40d6fec..4b03dcb 100644
--- a/webapp/src/app/devel/devel.component.css
+++ b/webapp/src/app/devel/devel.component.css
@@ -12,3 +12,8 @@
 .table-borderless>thead>tr>th {
     border: none;
 }
+
+a.dropdown-item.disabled {
+    pointer-events:none;
+    opacity:0.4;
+}
diff --git a/webapp/src/app/devel/devel.component.html b/webapp/src/app/devel/devel.component.html
index feac413..0b90f8e 100644
--- a/webapp/src/app/devel/devel.component.html
+++ b/webapp/src/app/devel/devel.component.html
@@ -10,8 +10,11 @@
                     {{curPrj.label}} <span class="caret" style="float: right; margin-top: 8px;"></span>
                                     </button>
                             <ul *dropdownMenu class="dropdown-menu" role="menu">
-                                <li role="menuitem"><a class="dropdown-item" *ngFor="let prj of (config$ | async)?.projects" (click)="curPrj=prj">{{prj.label}}</a>
+                                <li role="menuitem"><a class="dropdown-item" *ngFor="let prj of (config$ | async)?.projects"
+                                        [class.disabled]="!prj.isUsable"
+                                        (click)="curPrj=prj">{{prj.label}}</a>
                                 </li>
+
                             </ul>
                         </div>
                         <span *ngIf="!curPrj" style="color:red; font-style: italic;">
@@ -34,4 +37,4 @@
         <panel-deploy [curProject]=curPrj></panel-deploy>
     </div>
     -->
-</div>
\ No newline at end of file
+</div>
diff --git a/webapp/src/app/services/config.service.ts b/webapp/src/app/services/config.service.ts
index f5e353c..4501add 100644
--- a/webapp/src/app/services/config.service.ts
+++ b/webapp/src/app/services/config.service.ts
@@ -29,6 +29,14 @@ export var ProjectTypes = [
     { value: ProjectType.SYNCTHING, display: "Cloud Sync" }
 ];
 
+export var ProjectStatus = {
+    ErrorConfig: "ErrorConfig",
+    Disable: "Disable",
+    Enable: "Enable",
+    Pause: "Pause",
+    Syncing: "Syncing"
+};
+
 export interface IProject {
     id?: string;
     label: string;
@@ -37,6 +45,7 @@ export interface IProject {
     type: ProjectType;
     status?: string;
     isInSync?: boolean;
+    isUsable?: boolean;
     serverPrjDef?: IXDSFolderConfig;
     isExpanded?: boolean;
     visible?: boolean;
@@ -144,6 +153,7 @@ export class ConfigService {
                 // XXX for now, only isInSync and status may change
                 this.confStore.projects[i].isInSync = prj.isInSync;
                 this.confStore.projects[i].status = prj.status;
+                this.confStore.projects[i].isUsable = this._isUsableProject(prj);
                 this.confSubject.next(Object.assign({}, this.confStore));
             }
         });
@@ -359,6 +369,12 @@ export class ConfigService {
         return this.xdsServerSvr.syncProject(prj.id);
     }
 
+    private _isUsableProject(p) {
+        return p && p.isInSync &&
+            (p.status === ProjectStatus.Enable) &&
+            (p.status !== ProjectStatus.Syncing);
+    }
+
     private _getProjectIdx(id: string): number {
         return this.confStore.projects.findIndex((item) => item.id === id);
     }
@@ -374,6 +390,7 @@ export class ConfigService {
             type: rPrj.type,
             status: rPrj.status,
             isInSync: rPrj.isInSync,
+            isUsable: this._isUsableProject(rPrj),
             defaultSdkID: rPrj.defaultSdkID,
             serverPrjDef: Object.assign({}, rPrj),  // do a copy
         };