Solve the problem that the style cannot be neat because the page is not refreshed

1. remove toggle public project code; 2. modify the way to show role in public project list; 3. Change the way the change detection is default and remove actively refreshed code Signed-off-by: Yogi_Wang <yawang@vmware.com>
2024-11-18 16:25:16 +01:00 · 2019-11-12 10:42:42 +08:00 · 2019-11-12 10:42:42 +08:00 · 2ddcee8e03
commit 2ddcee8e03
parent 407417ce7b
5 changed files with 17 additions and 59 deletions
--- a/src/portal/lib/src/service/project.service.ts
+++ b/src/portal/lib/src/service/project.service.ts
@ -70,7 +70,6 @@ export abstract class ProjectService {
    pageSize?: number
  ): Observable<HttpResponse<Project[]>>;
  abstract createProject(name: string, metadata: any, countLimit: number, storageLimit: number): Observable<any>;
-  abstract toggleProjectPublic(projectId: number, isPublic: string): Observable<any>;
  abstract deleteProject(projectId: number): Observable<any>;
  abstract checkProjectExists(projectName: string): Observable<any>;
  abstract checkProjectMember(projectId: number): Observable<any>;
@ -162,12 +161,6 @@ export class ProjectDefaultService extends ProjectService {
               catchError(error => observableThrowError(error)), );
  }

-  public toggleProjectPublic(projectId: number, isPublic: string): Observable<any> {
-    return this.http
-               .put(`/api/projects/${projectId}`, { 'metadata': {'public': isPublic} }, HTTP_JSON_OPTIONS).pipe(
-               catchError(error => observableThrowError(error)), );
-  }
-
  public deleteProject(projectId: number): Observable<any> {
    return this.http
               .delete(`/api/projects/${projectId}`)
--- a/src/portal/src/app/project/list-project/list-project.component.html
+++ b/src/portal/src/app/project/list-project/list-project.component.html
@ -1,4 +1,4 @@
-<clr-datagrid (clrDgRefresh)="clrLoad($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="selectedChange()">
+<clr-datagrid (clrDgRefresh)="clrLoad($event)" [clrDgLoading]="loading" [(clrDgSelected)]="selectedRow">
    <clr-dg-action-bar>
        <button type="button" class="btn btn-sm btn-secondary" (click)="addNewProject()" *ngIf="projectCreationRestriction">
            <clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'PROJECT.NEW_PROJECT' | translate}}</button>
@ -8,7 +8,7 @@
    </clr-dg-action-bar>
    <clr-dg-column [clrDgField]="'name'">{{'PROJECT.NAME' | translate}}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="accessLevelComparator">{{'PROJECT.ACCESS_LEVEL' | translate}}</clr-dg-column>
-    <clr-dg-column *ngIf="showRoleInfo" [clrDgSortBy]="roleComparator">{{'PROJECT.ROLE' | translate}}</clr-dg-column>
+    <clr-dg-column [clrDgSortBy]="roleComparator">{{'PROJECT.ROLE' | translate}}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="repoCountComparator">{{'PROJECT.REPO_COUNT'| translate}}</clr-dg-column>
    <clr-dg-column *ngIf="withChartMuseum" [clrDgSortBy]="chartCountComparator">{{'PROJECT.CHART_COUNT'| translate}}</clr-dg-column>
    <clr-dg-column [clrDgSortBy]="timeComparator">{{'PROJECT.CREATION_TIME' | translate}}</clr-dg-column>
@ -17,13 +17,13 @@
            <a href="javascript:void(0)" (click)="goToLink(p.project_id)">{{p.name}}</a>
        </clr-dg-cell>
        <clr-dg-cell>{{ (p.metadata.public === 'true' ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}}</clr-dg-cell>
-        <clr-dg-cell *ngIf="showRoleInfo">{{roleInfo[p.current_user_role_id] | translate}}</clr-dg-cell>
+        <clr-dg-cell>{{ roleInfo[p.current_user_role_id]? (roleInfo[p.current_user_role_id] | translate): "-"}}</clr-dg-cell>
        <clr-dg-cell>{{p.repo_count}}</clr-dg-cell>
        <clr-dg-cell *ngIf="withChartMuseum">{{p.chart_count}}</clr-dg-cell>
        <clr-dg-cell>{{p.creation_time | date: 'short'}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>
-        <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'PROJECT.OF' | translate}} </span> {{pagination.totalItems
+        <span *ngIf="totalCount">{{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'PROJECT.OF' | translate}} </span> {{pagination.totalItems
        }} {{'PROJECT.ITEMS' | translate}}
        <clr-dg-pagination #pagination [clrDgPageSize]="pageSize" [(clrDgPage)]="currentPage" [clrDgTotalItems]="totalCount"></clr-dg-pagination>
    </clr-dg-footer>
--- a/src/portal/src/app/project/list-project/list-project.component.spec.ts
+++ b/src/portal/src/app/project/list-project/list-project.component.spec.ts
@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, ComponentFixtureAutoDetect } from '@angular/core/testing';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { ListProjectComponent } from './list-project.component';
 import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectorRef } from '@angular/core';
@ -14,6 +14,7 @@ import { StatisticHandler } from "../../shared/statictics/statistic-handler.serv
 import { ConfirmationDialogService } from "../../shared/confirmation-dialog/confirmation-dialog.service";
 import { of } from 'rxjs';
 import { BrowserAnimationsModule, NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { delay } from 'rxjs/operators';
 describe('ListProjectComponent', () => {
    let component: ListProjectComponent;
    let fixture: ComponentFixture<ListProjectComponent>;
@ -21,7 +22,7 @@ describe('ListProjectComponent', () => {
        listProjects: () => {
            return of({
                body: []
-            });
+            }).pipe(delay(0));
        }
    };
    const mockSessionService = {
@ -85,6 +86,7 @@ describe('ListProjectComponent', () => {
                { provide: StatisticHandler, useValue: mockStatisticHandler },
                { provide: ConfirmationDialogService, useValue: mockConfirmationDialogService },
                { provide: OperationService, useValue: mockOperationService },
+                { provide: ComponentFixtureAutoDetect, useValue: true }

            ]
        })
--- a/src/portal/src/app/project/list-project/list-project.component.ts
+++ b/src/portal/src/app/project/list-project/list-project.component.ts
@ -16,8 +16,6 @@ import {forkJoin as observableForkJoin,  Subscription, forkJoin } from "rxjs";
 import {
    Component,
    Output,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
    OnDestroy, EventEmitter
 } from "@angular/core";
 import { Router } from "@angular/router";
@ -43,8 +41,7 @@ import { throwError as observableThrowError } from "rxjs";

@Component({
    selector: "list-project",
-    templateUrl: "list-project.component.html",
-    changeDetection: ChangeDetectionStrategy.OnPush
+    templateUrl: "list-project.component.html"
 })
 export class ListProjectComponent implements OnDestroy {
    loading = true;
@ -53,7 +50,7 @@ export class ListProjectComponent implements OnDestroy {
    searchKeyword = "";
    selectedRow: Project[]  = [];

-  @Output() addProject = new EventEmitter<void>();
+    @Output() addProject = new EventEmitter<void>();

    roleInfo = RoleInfo;
    repoCountComparator: Comparator<Project> = new CustomComparator<Project>("repo_count", "number");
@ -78,8 +75,7 @@ export class ListProjectComponent implements OnDestroy {
        private translate: TranslateService,
        private deletionDialogService: ConfirmationDialogService,
        private operationService: OperationService,
-        private translateService: TranslateService,
-        private ref: ChangeDetectorRef) {
+        private translateService: TranslateService) {
        this.subscription = deletionDialogService.confirmationConfirm$.subscribe(message => {
            if (message &&
                message.state === ConfirmationState.CONFIRMED &&
@ -89,10 +85,6 @@ export class ListProjectComponent implements OnDestroy {
        });
    }

-    get showRoleInfo(): boolean {
-        return this.filteredType !== 2;
-    }
-
    get projectCreationRestriction(): boolean {
        let account = this.session.getCurrentUser();
        if (account) {
@ -144,12 +136,10 @@ export class ListProjectComponent implements OnDestroy {
        this.router.navigate(linkUrl);
    }

-    selectedChange(): void {
-        let hnd = setInterval(() => this.ref.markForCheck(), 100);
-        setTimeout(() => clearInterval(hnd), 1000);
-    }
-
    clrLoad(state: State) {
+        if (!state || !state.page) {
+            return;
+        }
        this.selectedRow = [];

        // Keep state for future filtering and sorting
@ -166,10 +156,8 @@ export class ListProjectComponent implements OnDestroy {
        }
        this.proService.listProjects(this.searchKeyword, passInFilteredType, pageNumber, this.pageSize)
        .pipe(finalize(() => {
-            // Force refresh view
-            let hnd = setInterval(() => this.ref.markForCheck(), 100);
-            setTimeout(() => clearInterval(hnd), 1000);
-        }))
+            this.loading = false;
+          }))
            .subscribe(response => {
                // Get total count
                if (response.headers) {
@ -184,9 +172,7 @@ export class ListProjectComponent implements OnDestroy {
                this.projects = doFiltering<Project>(this.projects, state);
                this.projects = doSorting<Project>(this.projects, state);

-                this.loading = false;
            }, error => {
-                this.loading = false;
                this.msgHandler.handleError(error);
            });
    }
@ -197,29 +183,6 @@ export class ListProjectComponent implements OnDestroy {
        }
    }

-    toggleProject(p: Project) {
-        if (p) {
-            p.metadata.public === "true" ? p.metadata.public = "false" : p.metadata.public = "true";
-            this.proService
-                .toggleProjectPublic(p.project_id, p.metadata.public)
-                .subscribe(
-                response => {
-                    this.msgHandler.showSuccess("PROJECT.TOGGLED_SUCCESS");
-                    let pp: Project = this.projects.find((item: Project) => item.project_id === p.project_id);
-                    if (pp) {
-                        pp.metadata.public = p.metadata.public;
-                        this.statisticHandler.refresh();
-                    }
-                },
-                error => this.msgHandler.handleError(error)
-                );
-
-            // Force refresh view
-            let hnd = setInterval(() => this.ref.markForCheck(), 100);
-            setTimeout(() => clearInterval(hnd), 2000);
-        }
-    }
-
    deleteProjects(p: Project[]) {
        let nameArr: string[] = [];
        if (p && p.length) {
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@ -625,7 +625,7 @@
        "PULL_COMMAND": "Pull命令",
        "PULL_TIME": "拉取时间",
        "PUSH_TIME": "推送时间",
-        "IMMUTABLE": "保留的",
+        "IMMUTABLE": "不可变的",
        "MY_REPOSITORY": "我的仓库",
        "PUBLIC_REPOSITORY": "公共仓库",
        "DELETION_TITLE_REPO": "删除镜像仓库确认",