Skip to content

Commit

Permalink
Incorporated add items module for business registration Vanilla JS ->…
Browse files Browse the repository at this point in the history 
… Angular conversion.
  • Loading branch information
@swoocn
swoocn committed Feb 27, 2024
1 parent 8e3f14a commit 0f0f94d
Show file tree
Hide file tree
Showing 12 changed files with 221 additions and 644 deletions.
69 changes: 67 additions & 2 deletions ...p/business/business-settings/business-configuration/business-configuration.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,74 @@
</section>

<section class="menu-setting__floating-button-section" #addItemButtonSection>
<button class="menu-setting__floating-button hidden" #floatingButtonSection>
<button class="menu-setting__floating-button hidden" #floatingButton (click)="showModal()">
<img src="../../../../assets/images/business/menu-add-button.png" alt="Add new item button">
</button>
</section>
<div id="items-display-area"></div>
<div id="items-display-area" #itemsDisplayArea></div>
</main>

<!-- The modal itself -->
<div class="modal" #addItemModal [style.display]="isPreviewImageVisible ? 'block' : 'none'">
<div class="modal__content">

<form [formGroup]="businessProductsForm">
<button type="button" class="modal__close-button" aria-label="Close"
(click)="hideModal($event)">&times;</button>

<!-- Modal title -->
<h2 class="modal__title">Add new item</h2>

<!-- Add item name -->
<div class="modal__item-name">
<label for="item-name" class="modal__label">Item name</label>
<input type="text" id="item-name" class="modal__input modal__input-item-name"
formControlName="itemName" />
</div>

<!-- Add item button -->
<div class="modal__add-item-button">
<input type="file" id="item-image-upload" class="modal__input-file" accept="image/*"
style="display: none;" (change)="handleImageUpload($event)" />
<label for="item-image-upload" class="modal__add-button" aria-label="Add item">
<img [src]="previewImageSrc ? previewImageSrc : '../../../../assets/images/business/add-item-button.png'"
alt="Add item button" />
</label>
<div id="image-preview" class="modal__image-preview">
<img [src]="previewImageSrc" alt="Image Preview" *ngIf="isPreviewImageVisible" />
<span class="image-preview__close" (click)="clearPreviewImage()" *ngIf="isPreviewImageVisible">&times;</span>
</div>
</div>

<!-- Add price input -->
<div class="modal__add-price">
<label for="item-price" class="modal__label modal__label-text">Price</label>
<input type="text" id="item-price" class="modal__input modal__input--price"
formControlName="itemPrice" />
<div class="modal__item-icon">
<img src="../../../../assets/images/business/Pi-logo.png" alt="Pi logo">
</div>
</div>

<!-- Preparation time input group -->
<div class="modal__prep-time">
<label for="prep-time" class="modal__label">How long to prepare this meal?</label>
<input type="text" id="prep-time" class="modal__input modal__input-prep-time"
formControlName="prepTime" />
</div>

<!-- Description input group -->
<div class="modal__description">
<label for="description" class="modal__label">Description</label>
<textarea id="description" class="modal__textarea" maxlength="50" rows="4"
formControlName="description"></textarea>
</div>

<!-- Confirm button -->
<div class="modal__confirm">
<button type="button" class="modal__confirm-btn" (click)="onModalConfirm()">Confirm</button>
</div>
</form>

</div>
</div>
1 change: 1 addition & 0 deletions ...p/business/business-settings/business-configuration/business-configuration.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@

@import '../.././../../assets/styles/business/business-configuration/header.scss';
@import '../.././../../assets/styles/business/business-configuration/main.scss';
@import '../.././../../assets/styles/business/business-configuration/modal.scss';
55 changes: 3 additions & 52 deletions ...usiness/business-settings/business-configuration/business-configuration.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ describe('BusinessConfigurationComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [BusinessConfigurationComponent]
}).compileComponents();

})
.compileComponents();

fixture = TestBed.createComponent(BusinessConfigurationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
Expand All @@ -18,54 +19,4 @@ describe('BusinessConfigurationComponent', () => {
it('should create', () => {
expect(component).toBeTruthy();
});

it('should initialize form with default values', () => {
expect(component.menuStatusLabel).toBe('on');
expect(component.orderStatusLabel).toBe('off');
expect(component.paymentStatusLabel).toBe('on');
});

it('should load toggle states and update form', () => {
spyOn(component, 'initializeToggles');
spyOn(component, 'updateToggleLabels');
spyOn(component, 'updateSliderAppearance');
spyOn(component, 'updateFloatingButtonVisibility');

component.loadToggleStates();

expect(component.initializeToggles).toHaveBeenCalled();
expect(component.updateToggleLabels).toHaveBeenCalled();
expect(component.updateSliderAppearance).toHaveBeenCalled();
expect(component.updateFloatingButtonVisibility).toHaveBeenCalled();
});

it('should update toggle labels correctly', () => {
component.menuToggle.nativeElement.checked = true;

component.orderToggleDiv.nativeElement.querySelector('input')!.checked = true;
component.paymentToggleDiv.nativeElement.querySelector('input')!.checked = false;

component.updateToggleLabels();

expect(component.menuStatusLabel).toEqual('on');
expect(component.orderStatusLabel).toEqual('on');
expect(component.paymentStatusLabel).toEqual('off');
});

// it('should hide appropriate sections when menuEnabled is false', () => {
// component.menuToggle.nativeElement.checked = false;

// component.loadToggleStates();
// fixture.detectChanges();

// expect(component.orderToggleDiv.nativeElement.classList.contains('hidden')).toBeTruthy();
// expect(component.paymentToggleDiv.nativeElement.classList.contains('hidden')).toBeTruthy();
// expect(component.floatingButtonSection.nativeElement.classList.contains('hidden')).toBeTruthy();
// });

it('should call saveToggleStates on toggle change', () => {
spyOn(component, 'saveToggleStates');
component.onToggleChange('menu-toggle');
expect(component.saveToggleStates).toHaveBeenCalled();
});
});
Loading

0 comments on commit 0f0f94d

Please sign in to comment.