Organization Columns - Part 1

src/@seed/api/column/column.service.ts

@@ -3,6 +3,7 @@ import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import type { Observable } from 'rxjs'
 import { catchError, map, ReplaySubject, Subject, takeUntil } from 'rxjs'
+import type { ProgressResponse } from '@seed/api/progress'
 import { ErrorService } from '@seed/services/error/error.service'
 import { UserService } from '../user'
 import type { Column, ColumnsResponse } from './column.types'
@@ -57,4 +58,22 @@ export class ColumnService {
       }),
     )
   }
+
+  updateMultipleColumns(organization_id: number, table_name: string, changes: object): Observable<ProgressResponse> {
+    const url = '/api/v3/columns/update_multiple/'
+    return this._httpClient.post<ProgressResponse>(url, { organization_id, table_name, changes }).pipe(
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error updating columns')
+      }),
+    )
+  }
+
+  deleteColumn(column: Column): Observable<ProgressResponse> {
+    const url = `/api/v3/columns/${column.id}/?organization_id=${column.organization_id}`
+    return this._httpClient.delete<ProgressResponse>(url).pipe(
+      catchError((error: HttpErrorResponse) => {
+        return this._errorService.handleError(error, 'Error deleting column')
+      }),
+    )
+  }
 }

src/@seed/services/uploader/index.ts

@@ -0,0 +1,2 @@
+export * from './uploader.service'
+export * from './uploader.types'

src/app/core/navigation/navigation.service.ts

@@ -47,20 +47,12 @@ export class NavigationService {
           type: 'basic',
         },
         {
-          id: 'organizations/column-mappings',
-          link: '/organizations/column-mappings/properties',
-          title: 'Column mappings',
-          icon: 'fa-solid:right-left',
-          type: 'basic',
-          regexMatch: /^\/organizations\/column-mappings\/(properties|taxlots)/,
-        },
-        {
-          id: 'organizations/column-settings',
-          link: '/organizations/column-settings/properties',
-          title: 'Column Settings',
+          id: 'organizations/columns',
+          link: '/organizations/columns/list/properties',
+          title: 'Columns',
           icon: 'fa-solid:sliders',
           type: 'basic',
-          regexMatch: /^\/organizations\/column-settings\/(properties|taxlots)/,
+          regexMatch: /^\/organizations\/columns\/list\/(properties|taxlots)/,
         },
         {
           id: 'organizations/cycles',

src/app/modules/organizations/columns/columns.component.html

@@ -0,0 +1,35 @@
+<mat-drawer-container class="static h-full">
+  <mat-drawer class="fixed top-16 h-full" mode="side" opened>
+    <seed-vertical-navigation
+      class="mt-4 bg-gray-100 dark:bg-gray-700 print:hidden"
+      [appearance]="'default'"
+      [mode]="'side'"
+      [navigation]="columnsNavigationMenu"
+      [opened]="true"
+      [autoCollapse]="true"
+      name="columnssNavigation"
+    >
+      <!-- Navigation header hook -->
+      <ng-container verticalNavigationContentHeader>
+        <div class="static flex items-center justify-center p-4">
+          <h3 class="font-xl font-bold">Columns</h3>
+        </div>
+      </ng-container>
+
+      <!-- Navigation footer hook -->
+      <ng-container verticalNavigationFooter> </ng-container>
+    </seed-vertical-navigation>
+  </mat-drawer>
+  <mat-drawer-content class="h-full bg-white p-4">
+    <seed-page [config]="{ title: pageTitle }">
+      <nav [tabPanel]="tabPanel" mat-tab-nav-bar>
+        @for (tab of tabs; track tab.label) {
+          <a [active]="tab.route === currentType()" (click)="navigateTo(tab.route)" mat-tab-link>{{ tab.label }}</a>
+        }
+      </nav>
+      <mat-tab-nav-panel #tabPanel>
+        <router-outlet></router-outlet>
+      </mat-tab-nav-panel>
+    </seed-page>
+  </mat-drawer-content>
+</mat-drawer-container>

src/app/modules/organizations/columns/columns.component.ts

@@ -0,0 +1,112 @@
+import { CommonModule, Location } from '@angular/common'
+import { Component, inject, type OnInit } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatSidenavModule } from '@angular/material/sidenav'
+import { MatTabsModule } from '@angular/material/tabs'
+import { Title } from '@angular/platform-browser'
+import { Router, RouterOutlet } from '@angular/router'
+import { type NavigationItem, VerticalNavigationComponent } from '@seed/components'
+import { PageComponent } from '@seed/components'
+import { SharedImports } from '@seed/directives'
+
+@Component({
+  selector: 'seed-organizations-columns',
+  templateUrl: './columns.component.html',
+  imports: [
+    CommonModule,
+    SharedImports,
+    MatIconModule,
+    MatSidenavModule,
+    MatTabsModule,
+    PageComponent,
+    VerticalNavigationComponent,
+    RouterOutlet,
+  ],
+})
+export class ColumnsComponent implements OnInit {
+  private _title = inject(Title)
+  private _router = inject(Router)
+  private _location = inject(Location)
+  tabs = [
+    {
+      label: 'Properties',
+      route: 'properties',
+    },
+    {
+      label: 'TaxLots',
+      route: 'taxlots',
+    },
+  ]
+  pageTitle: string
+  columnsNavigationMenu: NavigationItem[] = [
+    {
+      id: 'organizations/columns/list',
+      exactMatch: false,
+      title: 'Column List',
+      link: '/organizations/columns/list',
+      type: 'basic',
+      fn: (n: NavigationItem) => {
+        this.setNavTitle(n)
+      },
+    },
+    {
+      id: 'organizations/columns/geocoding',
+      link: '/organizations/columns/geocoding',
+      title: 'Geocoding',
+      type: 'basic',
+      fn: (n: NavigationItem) => {
+        this.setNavTitle(n)
+      },
+    },
+    {
+      id: 'organization/columns/data-type',
+      link: '/organizations/columns/data-types',
+      title: 'Data Types',
+      type: 'basic',
+      fn: (n: NavigationItem) => {
+        this.setNavTitle(n)
+      },
+    },
+    {
+      id: 'organizations/columns/import-settings',
+      link: '/organizations/columns/import-settings',
+      title: 'Import Settings',
+      type: 'basic',
+      fn: (n: NavigationItem) => {
+        this.setNavTitle(n)
+      },
+    },
+  ]
+
+  ngOnInit(): void {
+    this.setTitle()
+  }
+
+  currentType(): string {
+    return this._location.path().split('/').pop()
+  }
+
+  async navigateTo(type: string) {
+    const loc = this._location.path()
+    if (loc.includes(type)) {
+      return
+    }
+    const newPath = loc.replace(this.inverseType(type), type)
+    await this._router.navigateByUrl(newPath).then(() => {
+      this.setTitle()
+    })
+  }
+
+  inverseType(type: string): string {
+    return type === 'properties' ? 'taxlots' : 'properties'
+  }
+
+  setNavTitle(n: NavigationItem) {
+    this.pageTitle = n.title
+  }
+
+  setTitle() {
+    const basePath = `${this._location.path().split('/').slice(0, -1).join('/')}/properties`
+    this.pageTitle = this.columnsNavigationMenu.find((n) => basePath.includes(n.link)).title
+  }
+}

src/app/modules/organizations/columns/columns.routes.ts

@@ -0,0 +1,72 @@
+import type { Routes } from '@angular/router'
+import { DataTypesPropertiesComponent } from './data-types/data-types-properties.component'
+import { DataTypesTaxLotsComponent } from './data-types/data-types-taxlots.component'
+import { GeocodingPropertiesComponent } from './geocoding/geocoding-properties.component'
+import { GeocodingTaxlotsComponent } from './geocoding/geocoding-taxlots.component'
+import { ImportSettingsPropertiesComponent } from './import-settings/import-settings-properties.component'
+import { ImportSettingsTaxLotsComponent } from './import-settings/import-settings-taxlots.component'
+import { ListPropertiesComponent } from './list/list-properties.component'
+import { ListTaxLotComponent } from './list/list-taxlots.component'
+
+export default [
+  {
+    path: 'list',
+    pathMatch: 'full',
+    redirectTo: 'list/properties',
+  },
+  {
+    path: 'list/properties',
+    title: 'Column List',
+    component: ListPropertiesComponent,
+  },
+  {
+    path: 'list/taxlots',
+    title: 'Column List',
+    component: ListTaxLotComponent,
+  },
+  {
+    path: 'geocoding',
+    pathMatch: 'full',
+    redirectTo: 'geocoding/properties',
+  },
+  {
+    path: 'geocoding/properties',
+    title: 'Geocoding Order',
+    component: GeocodingPropertiesComponent,
+  },
+  {
+    path: 'geocoding/taxlots',
+    title: 'Geocoding Order',
+    component: GeocodingTaxlotsComponent,
+  },
+  {
+    path: 'data-types',
+    pathMatch: 'full',
+    redirectTo: 'data-types/properties',
+  },
+  {
+    path: 'data-types/properties',
+    title: 'Data Types',
+    component: DataTypesPropertiesComponent,
+  },
+  {
+    path: 'data-types/taxlots',
+    title: 'Data Types',
+    component: DataTypesTaxLotsComponent,
+  },
+  {
+    path: 'import-settings',
+    pathMatch: 'full',
+    redirectTo: 'import-settings/properties',
+  },
+  {
+    path: 'import-settings/properties',
+    title: 'Import Settings',
+    component: ImportSettingsPropertiesComponent,
+  },
+  {
+    path: 'import-settings/taxlots',
+    title: 'Import Settings',
+    component: ImportSettingsTaxLotsComponent,
+  },
+] satisfies Routes

src/app/modules/organizations/columns/data-types/data-types-properties.component.ts

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common'
+import { type AfterViewInit, Component, type OnInit, ViewChild, ViewEncapsulation } from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatPaginator } from '@angular/material/paginator'
+import { MatSelectModule } from '@angular/material/select'
+import { MatTableModule } from '@angular/material/table'
+import { map, takeUntil } from 'rxjs'
+import { TableContainerComponent } from '@seed/components'
+import { SharedImports } from '@seed/directives'
+import { naturalSort } from '@seed/utils'
+import { DataTypesComponent } from './data-types.component'
+
+@Component({
+  selector: 'seed-organizations-column-data-types-properties',
+  templateUrl: './data-types.component.html',
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    SharedImports,
+    TableContainerComponent,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatPaginator,
+    MatSelectModule,
+    MatTableModule,
+    ReactiveFormsModule,
+  ],
+})
+export class DataTypesPropertiesComponent extends DataTypesComponent implements AfterViewInit, OnInit {
+  type = 'PropertyState'
+
+  @ViewChild(MatPaginator) paginator: MatPaginator
+
+  ngOnInit(): void {
+    this._columnService.propertyColumns$
+      .pipe(takeUntil(this._unsubscribeAll$))
+      .pipe(
+        map((columns) => {
+          this.columns = columns.sort((a, b) => naturalSort(a.display_name, b.display_name))
+          this.initializeFormControls()
+          if (this.columns.length > 0) {
+            this.isLoading = false
+          }
+          this.columnTableDataSource.data = this.columns
+        }),
+      )
+      .subscribe()
+  }
+
+  ngAfterViewInit(): void {
+    this.columnTableDataSource.paginator = this.paginator
+  }
+}

src/app/modules/organizations/columns/data-types/data-types-taxlots.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common'
+import { type AfterViewInit, Component, type OnInit, ViewChild, ViewEncapsulation } from '@angular/core'
+import { ReactiveFormsModule } from '@angular/forms'
+import { MatButtonModule } from '@angular/material/button'
+import { MatFormFieldModule } from '@angular/material/form-field'
+import { MatInputModule } from '@angular/material/input'
+import { MatPaginator } from '@angular/material/paginator'
+import { MatSelectModule } from '@angular/material/select'
+import { MatTableModule } from '@angular/material/table'
+import { map, takeUntil } from 'rxjs'
+import { TableContainerComponent } from '@seed/components'
+import { SharedImports } from '@seed/directives'
+import { naturalSort } from '@seed/utils'
+import { DataTypesComponent } from './data-types.component'
+
+@Component({
+  selector: 'seed-organizations-column-data-types-taxlots',
+  templateUrl: './data-types.component.html',
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    SharedImports,
+    TableContainerComponent,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatPaginator,
+    MatSelectModule,
+    MatTableModule,
+    ReactiveFormsModule,
+  ],
+})
+export class DataTypesTaxLotsComponent extends DataTypesComponent implements AfterViewInit, OnInit {
+  type = 'TaxLotState'
+  @ViewChild(MatPaginator) paginator: MatPaginator
+
+  ngOnInit(): void {
+    this._columnService.taxLotColumns$
+      .pipe(takeUntil(this._unsubscribeAll$))
+      .pipe(
+        map((columns) => {
+          this.columns = columns.sort((a, b) => naturalSort(a.display_name, b.display_name))
+          this.initializeFormControls()
+          this.columnTableDataSource.data = this.columns
+        }),
+      )
+      .subscribe()
+  }
+
+  ngAfterViewInit() {
+    this.columnTableDataSource.paginator = this.paginator
+  }
+}