Merge branch 'develop' of https://github.com/swsnu/swpp18-team11 into…

… develop

backend/kiwi/kiorder/api/v1/base.py

@@ -30,7 +30,7 @@ def get_current_store(self) -> Store:
         try:
             return self.store
         except AttributeError:
-            self.store = store = Store.objects.first()
+            self.store = store = Store.objects.order_by('id').first()
             if not store:
                 self.abort(status_code=404, message="No store")
             return store

frontend/src/app/app.module.ts

@@ -20,6 +20,8 @@ import { SelectStoreFranchiseComponent } from './select-store-franchise/select-s
 import { SelectStoreMapComponent } from './select-store-map/select-store-map.component';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
+import { MyCartDialogComponent } from './my-cart-dialog/my-cart-dialog.component';
+
 /* Angular Material stuffs */
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconModule } from '@angular/material';
@@ -35,7 +37,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-
+import { MatDialogModule } from '@angular/material';
 
 @NgModule({
   declarations: [
@@ -53,6 +55,10 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     SelectStoreComponent,
     SelectStoreFranchiseComponent,
     SelectStoreMapComponent,
+    MyCartDialogComponent,
+  ],
+  entryComponents: [
+    MyCartDialogComponent,
   ],
   imports: [
     BrowserModule,
@@ -78,6 +84,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
     DragDropModule,
     MatAutocompleteModule,
     MatProgressSpinnerModule,
+    MatDialogModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

frontend/src/app/footer/footer.component.html

@@ -9,8 +9,7 @@
               remove_shopping_cart</mat-icon>
 
     <mat-icon class="myCartIcon"
-              routerLink="/mycart"
-              matBadge="{{myCartCount}}" matBadgeColor="warn">
+              routerLink="/mycart">
       shopping_cart</mat-icon>
   </mat-toolbar-row>
 </mat-toolbar>

frontend/src/app/my-cart-dialog/my-cart-dialog.component.css

@@ -0,0 +1,14 @@
+h3 {
+  marign-top: 0;
+  margin-botton: 15px;
+}
+.button-group {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 15px;
+  padding-left: 10px;
+  padding-right: 15px;
+}
+.mat-list .mat-list-item .mat-list-item-content {
+  padding: 0 5px;
+}

frontend/src/app/my-cart-dialog/my-cart-dialog.component.html

@@ -0,0 +1,12 @@
+<h3>{{purchasable.name}} 옵션 설정</h3>
+<app-select-option [options]="purchasable.options"></app-select-option>
+<div class="button-group">
+  <button mat-icon-button
+          (click)="cancelClicked()">
+    <mat-icon>close</mat-icon>
+  </button>
+    <button mat-icon-button
+            (click)="confirmClicked()">
+      <mat-icon>check</mat-icon>
+    </button>
+</div>

frontend/src/app/my-cart-dialog/my-cart-dialog.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MyCartDialogComponent } from './my-cart-dialog.component';
+import { SelectOptionComponent } from '../select-option/select-option.component';
+
+describe('MyCartDialogComponent', () => {
+  let component: MyCartDialogComponent;
+  let fixture: ComponentFixture<MyCartDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        MyCartDialogComponent,
+        SelectOptionComponent,
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyCartDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+});

frontend/src/app/my-cart-dialog/my-cart-dialog.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { Purchasable } from '../purchasable';
+
+@Component({
+  selector: 'app-my-cart-dialog',
+  templateUrl: './my-cart-dialog.component.html',
+  styleUrls: ['./my-cart-dialog.component.css']
+})
+export class MyCartDialogComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<MyCartDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public purchasable: Purchasable
+  ) {}
+
+  ngOnInit() {
+  }
+
+  cancelClicked() {
+    this.dialogRef.close();
+  }
+  confirmClicked() {
+    this.dialogRef.close(this.purchasable.options);
+  }
+}

frontend/src/app/my-cart/my-cart.component.css

@@ -1,35 +1,54 @@
-.purchasable {
-  display: flex;
-  flex-direction: row;
+.mycart-list {
+  margin-left: 5px;
+  margin-right: 13px;
+  padding-top: 0;
 }
 .mycart-list .mat-list-item {
   height: auto;
   margin-top: 10px;
 }
-#totalPrice {
-  text-align: right;
-  margin-right: 100px; /*does it works well?*/
-}
-.option-panel-title {
-  justify-content: space-between;
+.purchasable-detail-wrapper {
+  display: table;
 }
-.button-group {
-  text-align: center;
-  margin: 20px;
-  margin-top: 40px;
-  margin-botton: 30px;
+.purchasable-detail {
+  display: table-cell;
+  vertical-align: middle;
+  font-size: medium;
 }
 .navigate-button {
   margin-left: 10px;
   margin-right: 10px;
 }
+.option-dialog-button {
+  position: absolute;
+  right: 45%;
+}
 .quantity-control-buttons {
   flex: auto;
   min-width: 110px;
+  position: absolute;
+  right: 20%;
 }
 .quantity-button {
   min-width: 10px;
 }
-.purchasable-detail{
-  font-size: medium;
+.purchasable-total-price {
+  position: absolute;
+  right: 8%;
+}
+.remove-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+#totalPrice {
+  text-align: right;
+  margin-top: 30px;
+  margin-right: 20px;
+}
+.button-group {
+  text-align: center;
+  margin: 20px;
+  margin-top: 40px;
+  margin-bottom: 30px;
 }

frontend/src/app/my-cart/my-cart.component.html

@@ -1,22 +1,18 @@
 <div class="container">
   <mat-list class="mycart-list">
     <mat-list-item *ngFor="let purchasable of myCart; let idx = index">
-      <div class="purchasable-detail">
-        <img src="{{purchasable.thumbnail}}"
-             width="50" height="50">
-        <label>{{purchasable.name}}</label>
-        <mat-expansion-panel *ngIf="hasOptions(purchasable)"
-                             [hideToggle]="true">
-          <mat-expansion-panel-header class="option-panel-header">
-            <mat-panel-title class="option-panel-title">
-              옵션 수정
-              <mat-icon>add_circle_outline</mat-icon>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <app-select-option [options]="purchasable.options"
-                             (optionChanged)="updateOptionChange($event)"></app-select-option>
-        </mat-expansion-panel>
-        <mat-divider></mat-divider>
+      <div class="purchasable-detail-wrapper">
+        <div class="purchasable-detail">
+          <img src="{{purchasable.thumbnail}}"
+               width="50" height="50">
+          <label>{{purchasable.name}}</label>
+          <button mat-icon-button
+                  class="option-dialog-button"
+                  *ngIf="hasOptions(purchasable)"
+                  (click)="openOptionDialog(idx)">
+            <mat-icon>add_box</mat-icon>
+          </button>
+        </div>
       </div>
       <div class="quantity-control-buttons">
         <button  mat-button
@@ -27,10 +23,14 @@
                  class="quantity-button"
                  (click)="increment(idx)">+</button>
       </div>
-      <div>
+      <div class="purchasable-total-price">
         {{purchasable.total_price}}원
-        <button (click)="removePurchasable(idx)">X</button>
       </div>
+      <button mat-icon-button class="remove-button"
+              (click)="removePurchasable(idx)">
+        <mat-icon>cancel_presentation</mat-icon>
+      </button>
+      <mat-divider></mat-divider>
     </mat-list-item>    <!--End of my cart list-->
   </mat-list>
 
@@ -41,7 +41,7 @@
     <button mat-stroked-button
             class="navigate-button"
             (click)="emptyCart()">
-      <mat-icon>remove_shopping_cart</mat-icon>
+      <mat-icon>cancel_presentation</mat-icon>
       비우기</button>
     <button mat-stroked-button
             class="navigate-button"
@@ -57,16 +57,3 @@
   </div>
 </div>
 
-
-<!--mat-list *ngIf="hasOptions(purchasable)">
-  <mat-list-item *ngFor="let option of purchasable.options">
-            <span *ngIf="option.quantity != 0">
-              {{option.name}} x{{option.quantity}}</span>
-    <button (click)="selectIndex(idx)"
-            (click)="switchTab()">옵션 설정</button>
-  </mat-list-item>
-</mat-list-->
-<!--
-  <app-select-option [options]="myCart[selectedIndex].options"
-                     (optionChanged)="updateOptionChange($event)"></app-select-option>
--->

frontend/src/app/my-cart/my-cart.component.spec.ts

@@ -9,6 +9,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { MyCartService } from '../my-cart.service';
 import { Purchasable } from '../purchasable';
 import { Option } from '../option';
+import { MyCartDialogComponent } from '../my-cart-dialog/my-cart-dialog.component';
 import { SelectOptionComponent } from '../select-option/select-option.component';
 
 describe('MyCartComponent', () => {
@@ -35,7 +36,8 @@ describe('MyCartComponent', () => {
     TestBed.configureTestingModule({
       declarations: [
         MyCartComponent,
-        SelectOptionComponent
+        MyCartDialogComponent,
+        SelectOptionComponent,
       ],
       imports: [
         NgbModule,
@@ -102,12 +104,6 @@ describe('MyCartComponent', () => {
     expect(component.myCart).toEqual(myCartServiceSpy.getMyCart());
   });
 
-  it('selectIndex should set selectedIndex', () => {
-    component.selectedIndex = 1;
-    component.selectIndex(2);
-    expect(component.selectedIndex).toEqual(2);
-  });
-
   it('hasOptions should check Purchasable options', () => {
     // option undefined
     const optionUndefinedPurchasable = new Purchasable({
@@ -160,8 +156,7 @@ describe('MyCartComponent', () => {
 
   it('updateOptionChange should update purchasable options', () => {
     const newOptions: Option[] = [new Option({total_price: 100})];
-    component.selectedIndex = 0;
-    component.updateOptionChange(newOptions);
+    component.updateOptionChange(newOptions, 0);
     // updatePurchasablePrice called
     expect(component.myCart[0].total_price).toEqual(110);
     // myCartService.updateMyCart called