From 2ddcee8e030a4410a100ef9299c3bd2362330afc Mon Sep 17 00:00:00 2001 From: Yogi_Wang Date: Tue, 12 Nov 2019 10:42:42 +0800 Subject: [PATCH] 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 --- src/portal/lib/src/service/project.service.ts | 7 --- .../list-project/list-project.component.html | 8 +-- .../list-project.component.spec.ts | 6 ++- .../list-project/list-project.component.ts | 53 +++---------------- src/portal/src/i18n/lang/zh-cn-lang.json | 2 +- 5 files changed, 17 insertions(+), 59 deletions(-) diff --git a/src/portal/lib/src/service/project.service.ts b/src/portal/lib/src/service/project.service.ts index a0f34ad4c..5c3dcc4e3 100644 --- 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>; abstract createProject(name: string, metadata: any, countLimit: number, storageLimit: number): Observable; - abstract toggleProjectPublic(projectId: number, isPublic: string): Observable; abstract deleteProject(projectId: number): Observable; abstract checkProjectExists(projectName: string): Observable; abstract checkProjectMember(projectId: number): Observable; @@ -162,12 +161,6 @@ export class ProjectDefaultService extends ProjectService { catchError(error => observableThrowError(error)), ); } - public toggleProjectPublic(projectId: number, isPublic: string): Observable { - return this.http - .put(`/api/projects/${projectId}`, { 'metadata': {'public': isPublic} }, HTTP_JSON_OPTIONS).pipe( - catchError(error => observableThrowError(error)), ); - } - public deleteProject(projectId: number): Observable { return this.http .delete(`/api/projects/${projectId}`) diff --git a/src/portal/src/app/project/list-project/list-project.component.html b/src/portal/src/app/project/list-project/list-project.component.html index 255f4bf2a..08d45720b 100644 --- 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 @@ - + @@ -8,7 +8,7 @@ {{'PROJECT.NAME' | translate}} {{'PROJECT.ACCESS_LEVEL' | translate}} - {{'PROJECT.ROLE' | translate}} + {{'PROJECT.ROLE' | translate}} {{'PROJECT.REPO_COUNT'| translate}} {{'PROJECT.CHART_COUNT'| translate}} {{'PROJECT.CREATION_TIME' | translate}} @@ -17,13 +17,13 @@ {{p.name}} {{ (p.metadata.public === 'true' ? 'PROJECT.PUBLIC' : 'PROJECT.PRIVATE') | translate}} - {{roleInfo[p.current_user_role_id] | translate}} + {{ roleInfo[p.current_user_role_id]? (roleInfo[p.current_user_role_id] | translate): "-"}} {{p.repo_count}} {{p.chart_count}} {{p.creation_time | date: 'short'}} - {{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'PROJECT.OF' | translate}} {{pagination.totalItems + {{pagination.firstItem + 1}} - {{pagination.lastItem +1 }} {{'PROJECT.OF' | translate}} {{pagination.totalItems }} {{'PROJECT.ITEMS' | translate}} diff --git 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 index 2a1873b04..7a30e7e64 100644 --- 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; @@ -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 } ] }) diff --git a/src/portal/src/app/project/list-project/list-project.component.ts b/src/portal/src/app/project/list-project/list-project.component.ts index 01a9f0e0d..9686df1ee 100644 --- 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(); + @Output() addProject = new EventEmitter(); roleInfo = RoleInfo; repoCountComparator: Comparator = new CustomComparator("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(this.projects, state); this.projects = doSorting(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) { diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json index 8cdf682a5..df14f5fd0 100644 --- 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": "删除镜像仓库确认",