feat: move site

README.md

@@ -152,8 +152,6 @@ yarn build
 
 
 ## contribute
-[Click Here](https://github.com/xjh22222228/nav/tree/master/data)
-
 Thank you for your [contribution](https://github.com/xjh22222228/nav/issues), men.
 
 <a href="https://github.com/YutHelloWorld">

README_zh-CN.md

@@ -159,8 +159,6 @@ yarn build
 
 
 ## 贡献
-[点击这里](https://github.com/xjh22222228/nav/tree/master/data)
-
 Thank you for your [contribution](https://github.com/xjh22222228/nav/issues), men.
 
 <a href="https://github.com/YutHelloWorld">

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { NzTagModule } from 'ng-zorro-antd/tag'
 import { NzRateModule } from 'ng-zorro-antd/rate'
 import { NzSwitchModule } from 'ng-zorro-antd/switch'
 import { DragDropModule } from '@angular/cdk/drag-drop'
+import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'
 
 // components
 import { AppComponent } from './app.component'
@@ -58,6 +59,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LogoComponent } from '../components/logo/logo.component';
 import { CardComponent } from '../components/card/index.component'
+import { MoveSiteComponent } from '../components/move-site/index.component'
 
 const appRoutes: Routes = [
   { 
@@ -113,7 +115,8 @@ const appRoutes: Routes = [
     ToolbarTitleWebComponent,
     WebListComponent,
     LogoComponent,
-    CardComponent
+    CardComponent,
+    MoveSiteComponent
   ],
   imports: [
     NzModalModule,
@@ -138,6 +141,7 @@ const appRoutes: Routes = [
     NzTabsModule,
     NzTagModule,
     NzRateModule,
+    NzCheckboxModule,
     NzSwitchModule,
     DragDropModule,
     BrowserModule,

src/components/card/index.component.html

@@ -68,7 +68,8 @@
 
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu nzSelectable>
-        <li nz-menu-item (click)="toggleModal(); detail = dataSource">{{ $t('_edit') }}</li>
+        <li nz-menu-item (click)="toggleCreateModal(); detail = dataSource">{{ $t('_edit') }}</li>
+        <li nz-menu-item (click)="handleMove()">{{ $t('_move') }}</li>
         <a
           nz-popconfirm
           nzPopconfirmPlacement="rightTop"
@@ -85,10 +86,19 @@
 </div>
 
 <app-create-web
-  *ngIf="showModal"
-  [visible]="showModal"
-  (onCancel)="toggleModal()"
-  (onOk)="handleOk($event)"
+  *ngIf="showCreateModal"
+  [visible]="showCreateModal"
+  (onCancel)="toggleCreateModal()"
+  (onOk)="handleUpdateSiteOk($event)"
   [detail]="dataSource"
 >
 </app-create-web>
+
+<app-move-site
+  #moveSite
+  *ngIf="showMoveModal"
+  [indexs]="indexs"
+  [visible]="showMoveModal"
+  (onCancel)="toggleMoveModal()"
+>
+</app-move-site>

src/components/card/index.component.ts

 // Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
 // See https://github.com/xjh22222228/nav
 
-import { Component, OnInit, Input } from '@angular/core'
+import { Component, OnInit, Input, ViewChildren, QueryList } from '@angular/core'
 import { NzMessageService } from 'ng-zorro-antd/message'
 import { getToken } from '../../utils/user'
 import { setWebsiteList, copyText, deleteByWeb, getTextContent, updateByWeb } from '../../utils'
@@ -9,6 +9,7 @@ import { websiteList } from '../../store'
 import { INavProps, ITagProp, INavFourProp } from '../../types'
 import * as __tag from '../../../data/tag.json'
 import { $t } from '../../locale'
+import { MoveSiteComponent } from '../move-site/index.component'
 
 const tagMap: ITagProp = (__tag as any).default
 
@@ -19,12 +20,17 @@ const tagMap: ITagProp = (__tag as any).default
 })
 export class CardComponent implements OnInit {
   @Input() dataSource: INavFourProp
+  @Input() indexs: Array<number>
+
+  @ViewChildren(MoveSiteComponent)
+  moveSiteChild: QueryList<MoveSiteComponent>
 
   $t = $t
   objectKeys = Object.keys
   websiteList: INavProps[] = websiteList
   isLogin: boolean = !!getToken()
-  showModal = false
+  showCreateModal = false
+  showMoveModal = false
   copyUrlDone = false
   copyPathDone = false
   tagMap = tagMap
@@ -33,7 +39,8 @@ export class CardComponent implements OnInit {
     private message: NzMessageService,
   ) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  }
 
   async copyUrl(e, type: number) {
     const w = this.dataSource
@@ -53,8 +60,12 @@ export class CardComponent implements OnInit {
     this.copyPathDone = false
   }
 
-  toggleModal() {
-    this.showModal = !this.showModal
+  toggleCreateModal() {
+    this.showCreateModal = !this.showCreateModal
+  }
+
+  toggleMoveModal() {
+    this.showMoveModal = !this.showMoveModal
   }
 
   onRateChange(n: number) {
@@ -62,7 +73,7 @@ export class CardComponent implements OnInit {
     setWebsiteList(this.websiteList)
   }
 
-  handleOk(payload: INavFourProp) {
+  handleUpdateSiteOk(payload: INavFourProp) {
     updateByWeb({
       ...this.dataSource,
       name: getTextContent(this.dataSource.name),
@@ -75,7 +86,7 @@ export class CardComponent implements OnInit {
     }
 
     this.message.success($t('_modifySuccess'))
-    this.toggleModal()
+    this.toggleCreateModal()
   }
 
   confirmDel() {
@@ -85,4 +96,12 @@ export class CardComponent implements OnInit {
       desc: getTextContent(this.dataSource.desc)
     })
   }
+
+  handleMove() {
+    this.moveSiteChild.changes.subscribe((comps: QueryList<MoveSiteComponent>) =>
+    {
+      comps.first?.pushMoveSites([this.dataSource])
+    });
+    this.showMoveModal = true
+  }
 }

src/components/move-site/index.component.html

+<nz-modal
+  [nzWidth]="560"
+  [(nzVisible)]="visible"
+  [nzTitle]="$t('_moveTo')"
+  (nzOnCancel)="handleCancel()"
+  (nzOnOk)="hanldeOk()"
+>
+  <ng-container *nzModalContent>
+    <nz-select
+      [ngModel]="oneSelect"
+      nzShowSearch
+      [nzPlaceHolder]="$t('_sel1')"
+      (ngModelChange)="hanldeOneSelect($event)"
+      style="width: 160px;"
+    >
+      <nz-option
+        *ngFor="let item of websiteList; index as idx"
+        [nzLabel]="item.title"
+        [nzValue]="idx"
+      >
+      </nz-option>
+    </nz-select>
+
+    <nz-select
+      [ngModel]="twoSelect"
+      nzShowSearch
+      [nzPlaceHolder]="$t('_sel2')"
+      (ngModelChange)="hanldeTwoSelect($event)"
+      style="width: 160px; margin-left: 15px;"
+    >
+      <nz-option
+        *ngFor="let item of twoOptList; index as idx"
+        [nzLabel]="item.title"
+        [nzValue]="idx"
+      >
+      </nz-option>
+    </nz-select>
+
+    <nz-select
+      [ngModel]="threeSelect"
+      nzShowSearch
+      [nzPlaceHolder]="$t('_sel3')"
+      (ngModelChange)="hanldeThreeSelect($event)"
+      style="width: 160px; margin-left: 15px;"
+    >
+      <nz-option
+        *ngFor="let item of threeOptList; index as idx"
+        [nzLabel]="item.title"
+        [nzValue]="idx"
+      >
+      </nz-option>
+    </nz-select>
+
+    <div class="act">
+      <label nz-checkbox [(ngModel)]="checked">{{ $t('_copy') }}</label>
+    </div>
+  </ng-container>
+</nz-modal>

src/components/move-site/index.component.scss

+.act {
+  margin-top: 30px;
+}

src/components/move-site/index.component.ts

+// Copyright @ 2018-2021 xiejiahe. All rights reserved. MIT license.
+// See https://github.com/xjh22222228/nav
+
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { $t } from 'src/locale'
+import { setWebsiteList } from '../../utils'
+import { websiteList } from '../../store'
+import { INavProps, INavTwoProp, INavThreeProp, INavFourProp } from '../../types'
+import { NzMessageService } from 'ng-zorro-antd/message'
+
+@Component({
+  selector: 'app-move-site',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss']
+})
+export class MoveSiteComponent {
+  @Input() visible: boolean
+  @Input() indexs: Array<number>
+  @Output() onCancel = new EventEmitter()
+
+  $t = $t
+  websiteList: INavProps[] = websiteList
+  twoOptList: INavTwoProp[] = []
+  threeOptList: INavThreeProp[] = []
+  checked = false
+  oneSelect = ''
+  twoSelect = ''
+  threeSelect = ''
+  moveSites: INavFourProp[] = []
+
+  constructor (
+    private message: NzMessageService
+  ) {}
+
+  ngOnInit() {}
+
+  pushMoveSites(sites: INavFourProp[]) {
+    this.moveSites = sites
+  }
+
+  hanldeOneSelect(index) {
+    this.oneSelect = index
+    const title = this.websiteList[index].title
+    const findItem = this.websiteList.find(item => item.title === title)
+    this.twoOptList = findItem.nav
+    this.twoSelect = ''
+    this.threeSelect = ''
+  }
+
+  hanldeTwoSelect(index) {
+    this.twoSelect = index
+    const title = this.twoOptList[index].title
+    const findItem = this.twoOptList.find(item => item.title === title)
+    this.threeOptList = findItem.nav
+    this.threeSelect = ''
+  }
+
+  hanldeThreeSelect(index) {
+    this.threeSelect = index
+  }
+
+  handleCancel() {
+    this.onCancel.emit()
+  }
+
+  hanldeOk() {
+    if (this.threeSelect === '') {
+      return this.message.error($t('_sel3'))
+    }
+
+    this.moveSites.forEach((item: INavFourProp) => {
+      const exists = this.websiteList[this.oneSelect]
+        .nav[this.twoSelect]
+        .nav[this.threeSelect]
+        .nav.find((el: INavFourProp) => el.name === item.name)
+
+      if (exists) {
+        this.message.error(`${$t('_repeatAdd')} "${item.name}"`)
+      } else {
+        this.websiteList[this.oneSelect]
+        .nav[this.twoSelect]
+        .nav[this.threeSelect]
+        .nav
+        .unshift(item)
+
+        if (!this.checked) {
+          const [a, b, c, d] = this.indexs
+          this.websiteList[a]
+          .nav[b]
+          .nav[c]
+          .nav.splice(d, 1)
+        }
+
+        this.message.success(`"${item.name}" ${$t('_moveSuccess')}`)
+      }
+    });
+    setWebsiteList(this.websiteList)
+    this.handleCancel()
+  }
+}

src/locale/english.ts

@@ -97,5 +97,9 @@ export default {
   _iconAddr: 'Icon Link',
   _copyUpload: 'Support to paste screenshots or copy pictures here to upload',
   _upload: 'Upload',
-  _continueAdd: 'Continue to add affiliate links'
+  _continueAdd: 'Continue to add affiliate links',
+  _moveTo: 'Move to',
+  _move: 'Move',
+  _copy: 'Copy',
+  _moveSuccess: 'Moved successfully'
 }

src/locale/zh_CN.ts

@@ -97,5 +97,9 @@ export default {
   _iconAddr: '图标地址',
   _copyUpload: '支持将截图或复制图片粘贴此处上传',
   _upload: '上传',
-  _continueAdd: '继续添加关联链接'
+  _continueAdd: '继续添加关联链接',
+  _moveTo: '移动到',
+  _move: '移动',
+  _copy: '复制',
+  _moveSuccess: '移动成功'
 }

src/utils/index.ts

@@ -216,11 +216,11 @@ export function queryString(): {
   }
 
   if (page > websiteList.length - 1) {
-    page = websiteList.length - 1;
-    id = 0;
+    page = websiteList.length - 1
+    id = 0
   } else {
     if (!(id <= websiteList[page].nav.length - 1)) {
-      id = websiteList[page].nav.length - 1;
+      id = websiteList[page].nav.length - 1
     }
   }
 
@@ -241,7 +241,7 @@ export function adapterWebsiteList(websiteList: any[], parentItem?: any) {
 
     if (Array.isArray(item.nav)) {
       if (item.nav[0]?.url) {
-        item.nav = item.nav.filter(item => !item.ownVisible || isLogin);
+        item.nav = item.nav.filter(item => !item.ownVisible || isLogin)
       }
       adapterWebsiteList(item.nav, item)
     }

src/view/index/light/index.component.html

@@ -58,10 +58,10 @@
                 class="gutter-row"
                 nz-col
                 [nzSpan]="8"
-                *ngFor="let el of item.nav"
+                *ngFor="let el of item.nav; index as j"
                 [class.remove]="!isLogin && el.ownVisible"
               >
-                <app-card [dataSource]="el"></app-card>
+                <app-card [dataSource]="el" [indexs]="[page, id, i, j]"></app-card>
               </div>
             </div>
           </div>

src/view/index/side/index.component.html

@@ -71,7 +71,7 @@
       
                 <div nz-row [nzGutter]="[16, 16]" [style.display]="item.collapsed ? 'none' : ''">
                   <div
-                    *ngFor="let el of item.nav"
+                    *ngFor="let el of item.nav; let i=j"
                     class="gutter-row"
                     [class.remove]="!isLogin && el.ownVisible"
                     nz-col
@@ -83,7 +83,7 @@
                     [nzXl]="6"
                     [nzXXl]="6"
                   >
-                    <app-card [dataSource]="el"></app-card>
+                    <app-card [dataSource]="el" [indexs]="[page, id, i, j]"></app-card>
                   </div>
                 </div>
               </div>

src/view/index/sim/index.component.html

@@ -45,10 +45,10 @@
                 class="gutter-row"
                 nz-col
                 [nzSpan]="8"
-                *ngFor="let el of item.nav; let idx=index"
+                *ngFor="let el of item.nav; let idx=index; let i=j"
                 [class.remove]="!isLogin && el.ownVisible"
               >
-                <app-card [dataSource]="el"></app-card>
+                <app-card [dataSource]="el" [indexs]="[page, id, i, j]"></app-card>
               </div>
             </div>
           </div>