한줄공지 수정

src/app/mock-api/apps/board/notice-oneline/api.ts

@@ -33,29 +33,13 @@ export class BoardNoticeOnelineMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+
-        const order = request.params.get('order') || 'asc';
         const page = parseInt(request.params.get('page') ?? '1', 10);
         const size = parseInt(request.params.get('size') ?? '10', 10);
 
         // Clone the noticeOnelines
         let noticeOnelines: any[] | null = cloneDeep(this._noticeOnelines);
 
-        // Sort the noticeOnelines
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
-          noticeOnelines.sort((a, b) => {
-            const fieldA = a[sort].toString().toUpperCase();
-            const fieldB = b[sort].toString().toUpperCase();
-            return order === 'asc'
-              ? fieldA.localeCompare(fieldB)
-              : fieldB.localeCompare(fieldA);
-          });
-        } else {
-          noticeOnelines.sort((a, b) =>
-            order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
-          );
-        }
-
         // If search exists...
         if (search) {
           // Filter the noticeOnelines

src/app/mock-api/apps/board/notice-oneline/data.ts

@@ -2,6 +2,7 @@
 
 export const noticeOnelines = [
   {
+    id: '1',
     idx: 25,
     site: 'All',
     title: '-입금문의안내(필독)-',
@@ -10,4 +11,44 @@ export const noticeOnelines = [
     views: 65,
     state: '노출',
   },
+  {
+    id: '2',
+    idx: 26,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
+  {
+    id: '3',
+    idx: 27,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
+  {
+    id: '4',
+    idx: 28,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
+  {
+    id: '5',
+    idx: 29,
+    site: 'All',
+    title: '-입금문의안내(필독)-',
+    writer: '관리자',
+    writeDate: '2021-06-08 00:43',
+    views: 65,
+    state: '노출',
+  },
 ];

src/app/modules/admin/board/notice-oneline/components/index.ts

@@ -1,3 +1,4 @@
 import { ListComponent } from './list.component';
+import { ReditComponent } from './redit.component';
 
-export const COMPONENTS = [ListComponent];
+export const COMPONENTS = [ListComponent, ReditComponent];

src/app/modules/admin/board/notice-oneline/components/list.component.html

@@ -10,117 +10,82 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">한줄공지</div>
+    <div class="text-4xl font-extrabold tracking-tight">쪽지함</div>
     <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="dailys$ | async as dailys">
-          <ng-container
-            *ngFor="let daily of dailys; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ daily.totalPartnerCount }} 총 보유머니:{{
-                  daily.totalHoldingMoney
-                }}
-                총 콤프:{{ daily.totalComp }} 총 합계:{{
-                  daily.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
 
-      <!-- SelectBox -->
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-        </mat-select>
-      </mat-form-field>
       <!-- Search -->
-      <mat-form-field
+
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+      <button mat-icon-button (click)="__onClickSearch()">
-      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <mat-icon
+      </button>
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search'"
-        />
-      </mat-form-field>
-      <!-- Add user button -->
       <button
         class="ml-4"
         mat-flat-button
         [color]="'primary'"
+        (click)="__onClickReditBtn($event, '0')"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">등록</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- Search --><!-- Search -->
+  <div
+    *ngIf="__isSearchOpened"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+  >
+    <!-- Actions -->
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <!-- Search -->
+      <!-- Add user button -->
+      <button
+        mat-flat-button
+        [color]="'primary'"
+        fxFlex
         (click)="__createProduct()"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
-        <span class="ml-2 mr-1">검색하기</span>
+        <span class="ml-2 mr-1">Search</span>
       </button>
     </div>
+    <!-- Card inception -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
+      >
+        <input
+          matInput
+          [matDatepicker]="picker1"
+          [placeholder]="'Choose a date'"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker1"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
+      </mat-form-field>
+    </div>
+    <!-- Card expiration -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
+      >
+        <input
+          matInput
+          [matDatepicker]="picker2"
+          [placeholder]="'Choose a date'"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker2"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker2></mat-datepicker>
+      </mat-form-field>
+    </div>
   </div>
 
   <!-- Main -->
@@ -130,21 +95,25 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="noticeOnelines$ | async as noticeOnelines">
-        <ng-container *ngIf="noticeOnelines.length > 0; else noNoticeOneline">
+        <ng-container *ngIf="noticeOnelines.length > 0; else noUser">
           <div class="grid">
             <!-- Header -->
             <div
-              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
+              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-              matSort
-              matSortDisableClear
             >
-              <div class="hidden sm:block">번호</div>
+              <div class="hidden lg:block">번호</div>
-              <div class="hidden sm:block">사이트</div>
+              <div class="hidden lg:block">사이트</div>
-              <div class="hidden sm:block">제목</div>
+              <div class="hidden lg:block">제목</div>
-              <div class="hidden sm:block">작성자</div>
+              <div class="hidden lg:block">
-              <div class="hidden sm:block">작성일</div>
+                작성자
-              <div class="hidden sm:block">조회</div>
+                <hr style="margin: 7px 0px" />
-              <div class="hidden sm:block">상태</div>
+                작성일
+              </div>
+              <div class="hidden lg:block">
+                조회
+                <hr style="margin: 7px 0px" />
+                상태
+              </div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="noticeOnelines$ | async as noticeOnelines">
@@ -158,37 +127,39 @@
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
                   <!-- 번호 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.idx }}
                   </div>
                   <!-- 사이트 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.site }}
                   </div>
                   <!-- 제목 -->
-                  <div class="hidden sm:block truncate">
+                  <div
+                    class="hidden lg:block"
+                    style="cursor: pointer"
+                    (click)="__onClickReditBtn($event, noticeOneline.id)"
+                  >
                     {{ noticeOneline.title }}
                   </div>
-                  <!-- 작성자 -->
+                  <!-- 작성자 || 작성일 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.writer }}
-                  </div>
+                    <hr style="margin: 7px 0px" />
-                  <!-- 작성일 -->
+
-                  <div class="hidden sm:block truncate">
                     {{ noticeOneline.writeDate }}
                   </div>
-                  <!-- 조회 -->
+                  <!-- 조회 || 상태 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ noticeOneline.views }}
-                  </div>
+                    <hr style="margin: 7px 0px" />
-                  <!-- 상태 -->
+
-                  <div class="hidden sm:block truncate">
                     {{ noticeOneline.state }}
                   </div>
+
+                  <!-- management -->
                 </div>
               </ng-container>
-              <!-- 등록 -->
-              <button mat-flat-button [color]="'primary'">등록</button>
             </ng-container>
           </div>
 
@@ -204,11 +175,11 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noNoticeOneline>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no noticeOnelines!
+          There are no data!
         </div>
       </ng-template>
     </div>

src/app/modules/admin/board/notice-oneline/components/list.component.ts

@@ -8,28 +8,13 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+import { FormBuilder, FormControl } from '@angular/forms';
-  FormBuilder,
+
-  FormControl,
+import { MatPaginator } from '@angular/material/paginator';
-  FormGroup,
+
-  Validators,
+import { Observable, Subject, takeUntil } from 'rxjs';
-} from '@angular/forms';
+import { fuseAnimations } from '@fuse/animations';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
 
-import { User } from '../../../member/user/models/user';
 import { NoticeOneline } from '../models/notice-oneline';
 import { NoticeOnelinePagination } from '../models/notice-oneline-pagination';
 import { NoticeOnelineService } from '../services/notice-oneline.service';
@@ -42,18 +27,18 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        grid-template-columns: 40px 40px auto 200px 200px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 40px 40px auto 200px 200px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 40px 40px auto 300px 200px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 40px 40px auto 300px 200px;
         }
       }
     `,
@@ -64,16 +49,16 @@ import { Router } from '@angular/router';
 })
 export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
 
   noticeOnelines$!: Observable<NoticeOneline[] | undefined>;
-  users$!: Observable<User[] | undefined>;
 
   isLoading = false;
   searchInputControl = new FormControl();
   selectedNoticeOneline?: NoticeOneline;
   pagination?: NoticeOnelinePagination;
 
+  __isSearchOpened = false;
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -81,8 +66,6 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   constructor(
     private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
     private _noticeOnelineService: NoticeOnelineService,
     private router: Router
   ) {}
@@ -113,45 +96,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   /**
    * After view init
    */
-  ngAfterViewInit(): void {
+  ngAfterViewInit(): void {}
-    if (this._sort && this._paginator) {
-      // Set the initial sort
-      this._sort.sort({
-        id: 'name',
-        start: 'asc',
-        disableClear: true,
-      });
-
-      // Mark for check
-      this._changeDetectorRef.markForCheck();
-
-      // If the noticeOneline changes the sort order...
-      this._sort.sortChange
-        .pipe(takeUntil(this._unsubscribeAll))
-        .subscribe(() => {
-          // Reset back to the first page
-          this._paginator.pageIndex = 0;
-        });
-
-      // Get products if sort or page changes
-      merge(this._sort.sortChange, this._paginator.page)
-        .pipe(
-          switchMap(() => {
-            this.isLoading = true;
-            return this._noticeOnelineService.getNoticeOnelines(
-              this._paginator.pageIndex,
-              this._paginator.pageSize,
-              this._sort.active,
-              this._sort.direction
-            );
-          }),
-          map(() => {
-            this.isLoading = false;
-          })
-        )
-        .subscribe();
-    }
-  }
 
   /**
    * On destroy
@@ -166,14 +111,24 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  viewUserDetail(id: string): void {
-    let url: string = 'member/user/' + id;
-    this.router.navigateByUrl(url);
-  }
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickTItle(noticeOneline: NoticeOneline): void {}
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
+  __onClickReditBtn(event: MouseEvent, id: string): void {
+    const param = id === '0' ? '' : id;
+    let url: string = 'board/notice-oneline/redit/' + param;
+    this.router.navigateByUrl(url);
+  }
   /**
    * Create product
    */

src/app/modules/admin/board/notice-oneline/components/redit.component.html

@@ -0,0 +1,137 @@
+<div class="flex flex-col flex-auto min-w-0">
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+    <div class="w-full max-w-screen-xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
+        <div
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+        >
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            한줄공지 {{ !noticeOneline ? "등록" : "수정" }}
+          </div>
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <form
+              [formGroup]="noticeOnelineForm"
+              autocomplete="off"
+              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+            >
+              <!-- 공지적용 -->
+              <div>
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>공지적용</mat-label>
+                  <mat-select>
+                    <ng-container *ngFor="let type of noticeType">
+                      <mat-option [value]="type.key">
+                        {{ type.value }}
+                      </mat-option>
+                    </ng-container>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+
+              <!-- 사이트선택 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>사이트선택</mat-label>
+                  <mat-select>
+                    <ng-container *ngFor="let type of siteType">
+                      <mat-option [value]="type.key">
+                        {{ type.value }}
+                      </mat-option>
+                    </ng-container>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <!-- 글쓴이 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>글쓴이(아이디)</mat-label>
+                  <input
+                    matInput
+                    readonly="true"
+                    [formControlName]="'writer'"
+                  />
+                </mat-form-field>
+              </div>
+              <!-- 제목 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>제목</mat-label>
+                  <input matInput readonly="true" [formControlName]="'title'" />
+                </mat-form-field>
+              </div>
+              <!-- 등록시간 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>등록시간</mat-label>
+                  <input matInput [formControlName]="'writerDate'" />
+                </mat-form-field>
+                <span
+                  >예) 2001-01-01 23시22분(2001년 1월1일 오후 11시21분)-
+                  <p style="color: red">미등록시 현재일로 등록</p></span
+                >
+              </div>
+              <!-- 조회수 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>조회수</mat-label>
+                  <input matInput readonly="true" [formControlName]="'views'" />
+                </mat-form-field>
+              </div>
+              <!-- Body -->
+              <!-- <quill-editor class="mt-2"></quill-editor> -->
+              <mat-form-field
+                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              >
+                <textarea
+                  matInput
+                  [required]="true"
+                  [rows]="5"
+                  matTextareaAutosize
+                  [formControlName]="'content'"
+                ></textarea>
+                <mat-label>내용</mat-label>
+              </mat-form-field>
+            </form>
+          </div>
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Save as draft -->
+              <button
+                class="sm:mx-3"
+                mat-stroked-button
+                (click)="__onClickeCancel()"
+              >
+                <span>취소</span>
+              </button>
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__onClickReditBtn(noticeOneline)"
+              >
+                {{ !noticeOneline ? "등록" : "수정" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/admin/board/notice-oneline/components/redit.component.ts

@@ -8,33 +8,20 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
+
-  FormBuilder,
+import { ActivatedRoute, Router } from '@angular/router';
-  FormControl,
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import {
+import { Subject, takeUntil } from 'rxjs';
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
-
+import { NoticeOnelineService } from '../services/notice-oneline.service';
-import { User } from 'app/modules/admin/member/user/models/user';
+import { NoticeOneline } from '../models/notice-oneline';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
 
 @Component({
-  selector: 'notice-oneline-registration',
+  selector: 'notice-oneline-redit',
-  templateUrl: './registration.component.html',
+  templateUrl: './redit.component.html',
   styles: [
     /* language=SCSS */
     `
@@ -59,14 +46,20 @@ import { UserService } from 'app/modules/admin/member/user/services/user.service
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
   isLoading = false;
   searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
+  noticeOnelineForm!: FormGroup;
-  selectedUser?: User;
+  editMode: boolean = false;
+
+  noticeType = NOTICE_TYPE;
+  siteType = SITE_TYPE;
+  useOrNotType = USE_OR_NOT_TYPE;
+
+  noticeOneline!: NoticeOneline;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -77,7 +70,9 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
-    private _userService: UserService
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _noticeOnelineService: NoticeOnelineService
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -88,53 +83,32 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
+    // Create the contact form
-      id: [''],
+    this.noticeOnelineForm = this._formBuilder.group({
-      signinId: [{ value: '', disabled: true }],
+      writer: ['관리자'],
-      signinPw: [{ value: '' }],
+      noticeType: [''],
-      exchangePw: [''],
+      useOrNot: [''],
-      description: [''],
+      widthSize: [''],
-      tags: [[]],
+      site: [''],
-      nickname: [{ value: '', disabled: true }],
+      title: [''],
-      ownCash: [''],
+      writerDate: [''],
-      phoneNumber: [''],
+      views: ['0'],
-      level: [''],
+      content: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
     });
 
-    // Get the User
+    this._noticeOnelineService.noticeOneline$
-    this._userService.user$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
+      .subscribe((noticeOneline: NoticeOneline | undefined) => {
-        if (!user) {
+        if (!noticeOneline) {
           return;
         }
-        this.selectedUser = user;
 
-        this.selectedProductForm.patchValue(user);
+        this.noticeOneline = noticeOneline;
+        this.noticeOnelineForm.patchValue(noticeOneline);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    /* this.user$ = this._userService.user$; */
   }
 
   /**
@@ -159,6 +133,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __onClickeCancel(): void {
+    /* let url: string = 'board/customer-template/';
+    this._router.navigateByUrl(url); */
+  }
+  __onClickReditBtn(noticeOneline: NoticeOneline): void {
+    console.log('click: ', noticeOneline);
+  }
+
   /**
    * Create product
    */
@@ -171,6 +153,22 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * Toggle edit mode
+   *
+   * @param editMode
+   */
+  toggleEditMode(editMode: boolean | null = null): void {
+    if (editMode === null) {
+      this.editMode = !this.editMode;
+    } else {
+      this.editMode = editMode;
+    }
+
+    // Mark for check
+    this._changeDetectorRef.markForCheck();
+  }
+
   /**
    * Track by function for ngFor loops
    *
@@ -181,3 +179,28 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     return item.id || index;
   }
 }
+
+export const NOTICE_TYPE = [
+  {
+    key: '0',
+    value: '흐르는공지',
+  },
+];
+
+export const SITE_TYPE = [
+  {
+    key: '0',
+    value: '--전체--',
+  },
+];
+
+export const USE_OR_NOT_TYPE = [
+  {
+    key: '0',
+    value: '사용(노출)',
+  },
+  {
+    key: '1',
+    value: '미사용',
+  },
+];

src/app/modules/admin/board/notice-oneline/components/registration.component.html

@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">한줄공지 등록</div>

src/app/modules/admin/board/notice-oneline/components/view.component.html

@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">한줄공지-상세page</div>

src/app/modules/admin/board/notice-oneline/components/view.component.ts

@@ -1,183 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
-import { fuseAnimations } from '@fuse/animations';
-import { FuseConfirmationService } from '@fuse/services/confirmation';
-
-import { User } from 'app/modules/admin/member/user/models/user';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
-
-@Component({
-  selector: 'notice-oneline-view',
-  templateUrl: './view.component.html',
-  styles: [
-    /* language=SCSS */
-    `
-      .inventory-grid {
-        grid-template-columns: 48px auto 40px;
-
-        @screen sm {
-          grid-template-columns: 48px auto 112px 72px;
-        }
-
-        @screen md {
-          grid-template-columns: 48px 112px auto 112px 72px;
-        }
-
-        @screen lg {
-          grid-template-columns: 48px 112px auto 112px 96px 96px 72px;
-        }
-      }
-    `,
-  ],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: fuseAnimations,
-})
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild(MatPaginator) private _paginator!: MatPaginator;
-  @ViewChild(MatSort) private _sort!: MatSort;
-
-  isLoading = false;
-  searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
-  selectedUser?: User;
-
-  private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-  /**
-   * Constructor
-   */
-  constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _fuseConfirmationService: FuseConfirmationService,
-    private _formBuilder: FormBuilder,
-    private _userService: UserService
-  ) {}
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Lifecycle hooks
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * On init
-   */
-  ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
-    });
-
-    // Get the User
-    this._userService.user$
-      .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
-          return;
-        }
-        this.selectedUser = user;
-
-        this.selectedProductForm.patchValue(user);
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-      });
-
-    /* this.user$ = this._userService.user$; */
-  }
-
-  /**
-   * After view init
-   */
-  ngAfterViewInit(): void {}
-
-  /**
-   * On destroy
-   */
-  ngOnDestroy(): void {
-    // Unsubscribe from all subscriptions
-    this._unsubscribeAll.next(null);
-    this._unsubscribeAll.complete();
-  }
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Public methods
-  // -----------------------------------------------------------------------------------------------------
-
-  // -----------------------------------------------------------------------------------------------------
-  // @ Private methods
-  // -----------------------------------------------------------------------------------------------------
-
-  /**
-   * Create product
-   */
-  __createProduct(): void {}
-
-  /**
-   * Toggle product details
-   *
-   * @param productId
-   */
-  __toggleDetails(productId: string): void {}
-
-  /**
-   * Track by function for ngFor loops
-   *
-   * @param index
-   * @param item
-   */
-  __trackByFn(index: number, item: any): any {
-    return item.id || index;
-  }
-}

src/app/modules/admin/board/notice-oneline/models/notice-oneline.ts

@@ -1,4 +1,5 @@
 export interface NoticeOneline {
+  id: string;
   idx?: number;
   site?: string;
   title?: string;

src/app/modules/admin/board/notice-oneline/notice-oneline.module.ts

@@ -15,6 +15,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -45,6 +46,7 @@ import { noticeOnelineRoutes } from './notice-oneline.routing';
     MatSlideToggleModule,
     MatRadioModule,
     MatCheckboxModule,
+    MatDatepickerModule,
   ],
 })
 export class NoticeOnelineModule {}

src/app/modules/admin/board/notice-oneline/notice-oneline.routing.ts

@@ -1,24 +1,35 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { ViewComponent } from '../../member/user/components/view.component';
+import { ReditComponent } from './components/redit.component';
 
-import { NoticeOnelinesResolver } from './resolvers/notice-oneline.resolver';
+import {
-import { UserResolver } from '../../member/user/resolvers/user.resolver';
+  NoticeOnelinesResolver,
+  NoticeOnelineResolver,
+} from './resolvers/notice-oneline.resolver';
 
 export const noticeOnelineRoutes: Route[] = [
   {
     path: '',
+    pathMatch: 'full',
+    redirectTo: 'list',
+  },
+  {
+    path: 'list',
     component: ListComponent,
     resolve: {
       noticeOnelines: NoticeOnelinesResolver,
     },
   },
   {
-    path: ':id',
+    path: 'redit',
-    component: ViewComponent,
+    component: ReditComponent,
+  },
+  {
+    path: 'redit/:id',
+    component: ReditComponent,
     resolve: {
-      users: UserResolver,
+      noticeOneline: NoticeOnelineResolver,
     },
   },
 ];

src/app/modules/admin/board/notice-oneline/resolvers/notice-oneline.resolver.ts

@@ -38,7 +38,7 @@ export class NoticeOnelineResolver implements Resolve<any> {
     state: RouterStateSnapshot
   ): Observable<NoticeOneline | undefined> {
     return this._noticeOnelineService
-      .getNoticeOnelineById(route.paramMap.get('title'))
+      .getNoticeOnelineById(route.paramMap.get('id'))
       .pipe(
         // Error here means the requested product is not available
         catchError((error) => {

src/app/modules/admin/board/popup/components/redit.component.ts

@@ -55,7 +55,6 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   searchInputControl = new FormControl();
   popupForm!: FormGroup;
   editMode: boolean = false;
-  contact = contacts[0];
   categories = categories;
   popup: Popup | undefined;
 
@@ -159,20 +158,7 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
     // Mark for check
     this._changeDetectorRef.markForCheck();
   }
-  /**
+
-   * Get country info by iso code
-   *
-   * @param iso
-   */
-  getCountryByIso(iso: string): Country {
-    return {
-      id: '19430ee3-b0fe-4987-a7c8-74453ad5504d',
-      iso: 'af',
-      name: 'Afghanistan',
-      code: '+93',
-      flagImagePos: '-1px -3180px',
-    } as Country;
-  }
   /**
    * Track by function for ngFor loops
    *
@@ -184,52 +170,6 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 }
 
-export const contacts = [
-  {
-    id: 'cd5fa417-b667-482d-b208-798d9da3213c',
-    avatar: 'assets/images/avatars/male-01.jpg',
-    background: 'assets/images/cards/14-640x480.jpg',
-    name: 'Dejesus Michael',
-    emails: [
-      {
-        email: 'dejesusmichael@mail.org',
-        label: '가로',
-      },
-      {
-        email: 'michael.dejesus@vitricomp.io',
-        label: '세로',
-      },
-    ],
-    phoneNumbers: [
-      {
-        country: 'bs',
-        phoneNumber: 'TOP',
-        label: 'Mobile',
-      },
-      {
-        country: 'bs',
-        phoneNumber: 'LEFT',
-        label: 'Work',
-      },
-    ],
-    title: 'Track Service Worker',
-    company: 'Vitricomp',
-    birthday: '1975-01-10T12:00:00.000Z',
-    address: '279 Independence Avenue, Calvary, Guam, PO4127',
-    notes:
-      '<p>Do incididunt cillum duis eu pariatur enim proident minim officia amet proident consequat consequat qui consequat magna magna occaecat aliquip culpa pariatur velit nisi nostrud irure eu ullamco exercitation sint.</p><p>Cillum deserunt laborum laborum quis nisi enim et aliquip labore excepteur in excepteur labore amet in ipsum ipsum nostrud deserunt lorem nisi voluptate dolor minim enim ut eu cupidatat enim.</p>',
-    tags: ['56ddbd47-4078-4ddd-8448-73c5e88d5f59'],
-  },
-];
-
-export interface Country {
-  id: string;
-  iso: string;
-  name: string;
-  code: string;
-  flagImagePos: string;
-}
-
 export const categories = [
   {
     id: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',