Skip to content

Commit

Permalink
fix(com-pwa): review and fix many errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliMD
AliMD committed Apr 19, 2023
1 parent 2bfd1f5 commit 98ed4fe
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 20 deletions.
26 changes: 12 additions & 14 deletions uniquely/com-pwa/src/manager/controller/new-order.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@ export const newOrderFsmConstructor = finiteStateMachineProvider.defineConstruct
show_detail: {
target: 'orderDetail',
},
not_found_in_loading: {
target: 'pending',
},
not_found: {
target: 'notFound',
},
Expand All @@ -93,12 +96,7 @@ export const newOrderFsmConstructor = finiteStateMachineProvider.defineConstruct
on: {},
},
notFound: {
on: {
context_request_complete: {
target: 'routing',
condition: 'is_all_context_ready',
},
},
on: {},
},
newOrder: {
entry: 'check_item_list',
Expand Down Expand Up @@ -184,12 +182,16 @@ finiteStateMachineProvider.defineActions<NewOrderFsm>('new_order_fsm', {
},

routing: (fsmInstance) => {
const {orderId, orderStorage} = fsmInstance.getContext();
const orderId = fsmInstance.getContext().orderId;
const orderStorage = orderStorageContextConsumer.getResponse();
if (orderId === 'new') {
fsmInstance.transition('new_order');
}
else if (orderStorage?.data[orderId] != null) {
fsmInstance.transition('show_detail');
fsmInstance.transition('show_detail', {orderStorage});
}
else if (orderStorageContextConsumer.getState().target !== 'complete') {
fsmInstance.transition('not_found_in_loading');
}
else {
fsmInstance.transition('not_found');
Expand All @@ -213,6 +215,7 @@ finiteStateMachineProvider.defineActions<NewOrderFsm>('new_order_fsm', {
return;
}
// else
// TODO: update context directly
fsmInstance.transition('submit_success', {orderId: order.id});
},

Expand Down Expand Up @@ -335,13 +338,8 @@ finiteStateMachineProvider.defineSignals<NewOrderFsm>('new_order_fsm', [
{
signalId: orderStorageContextConsumer.id,
callback: (_, fsmInstance): void => {
/**
* FIXME: When we click on `showOrderDetail` button(after registering a new order)
* this `callback` will run twice, why?
* It that's why the state will change to `notFound` at the first time and then
* will change to 'orderDetail'
*/
const orderStorage = orderStorageContextConsumer.getResponse();
console.warn('orderStorage', {state: orderStorageContextConsumer.getState().target, orderStorage});
fsmInstance.transition(`context_request_${orderStorageContextConsumer.getState().target}`, {
orderStorage,
});
Expand Down
120 changes: 114 additions & 6 deletions uniquely/com-pwa/src/ui/page/new-order.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
import {
AlwatrBaseElement,
css,
CSSResultGroup,
customElement,
html,
LocalizeMixin,
mapIterable,
nothing,
property,
PropertyValues,
SignalMixin,
state,
UnresolvedMixin,
} from '@alwatr/element';
import {finiteStateMachineConsumer} from '@alwatr/fsm';
import {message, number, replaceNumber} from '@alwatr/i18n';
import '@alwatr/icon';
import {calcDiscount} from '@alwatr/math';
import {redirect} from '@alwatr/router';
import {AlwatrDocumentStorage} from '@alwatr/type';
Expand All @@ -21,20 +27,22 @@ import {
Product,
tileQtyStep,
} from '@alwatr/type/customer-order-management.js';
import '@alwatr/ui-kit/button/icon-button.js';
import '@alwatr/ui-kit/card/icon-box.js';
import '@alwatr/ui-kit/card/surface.js';
import {IconButtonContent} from '@alwatr/ui-kit/src/button/icon-button.js';
import {AlwatrTextField} from '@alwatr/ui-kit/src/text-field/text-field.js';

import {config} from '../../config.js';
import {buttons} from '../../manager/buttons.js';
import {scrollToTopCommand, topAppBarContextProvider} from '../../manager/context.js';
import {AlwatrOrderDetailBase} from '../stuff/order-detail-base.js';
import '../stuff/order-shipping-form.js';
import '../stuff/order-status-box.js';
import '../stuff/select-product.js';

import type {NewOrderFsm} from '../../manager/controller/new-order.js';
import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';


declare global {
interface HTMLElementTagNameMap {
'alwatr-page-new-order': AlwatrPageNewOrder;
Expand All @@ -45,21 +53,121 @@ declare global {
* Alwatr Customer Order Management Order Form Page
*/
@customElement('alwatr-page-new-order')
export class AlwatrPageNewOrder extends UnresolvedMixin(AlwatrOrderDetailBase) {
export class AlwatrPageNewOrder extends UnresolvedMixin(LocalizeMixin(SignalMixin(AlwatrBaseElement))) {
static override styles: CSSResultGroup = css`
:host {
display: flex;
flex-direction: column;
padding: calc(2 * var(--sys-spacing-track));
box-sizing: border-box;
min-height: 100%;
gap: var(--sys-spacing-track);
}
:host([state=reloading]) > * {
opacity: var(--sys-surface-disabled-opacity);
}
alwatr-surface {
--_surface-color-on: var(--sys-color-on-surface-variant-hsl);
}
.product-item {
display: flex;
flex-direction: row;
gap: var(--sys-spacing-track);
}
.product-item > img {
display: block;
width: calc(6 * var(--sys-spacing-track));
border-radius: var(--sys-radius-small);
align-self: flex-start;
}
.detail-container {
flex-grow: 1;
}
.detail-container > * {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--sys-spacing-track);
}
.detail-container > *:last-child {
margin-bottom: 0;
}
.submit-container {
text-align: end;
}
/* ----- */
.number-field {
--_surface-color-on: var(--sys-color-on-surface-variant-hsl);
/* --_surface-color-bg: var(--sys-color-surface-variant-hsl); */
display: flex;
align-items: center;
padding: 0;
font-family: var(--sys-typescale-body-large-font-family-name);
font-weight: var(--sys-typescale-body-large-font-weight);
font-size: var(--sys-typescale-body-large-font-size);
letter-spacing: var(--sys-typescale-body-large-letter-spacing);
line-height: var(--sys-typescale-body-large-line-height);
border-radius: var(--sys-radius-xsmall);
text-align: center;
box-shadow: none;
border-bottom: 1px solid var(--sys-color-outline);
border-radius: var(--sys-radius-xsmall) var(--sys-radius-xsmall) 0 0;
width: calc(20 * var(--sys-spacing-track));
margin-right: auto;
}
alwatr-text-field {
display: block;
padding: 0;
width: 100%;
flex-grow: 1;
border-radius: inherit;
}
/* So not group these selectors! */
input::placeholder {
font: inherit;
color: var(--sys-color-on-surface-variant);
}
input::-webkit-input-placeholder {
font: inherit;
color: var(--sys-color-on-surface-variant);
}
input::-moz-placeholder {
font: inherit;
color: var(--sys-color-on-surface-variant);
}
input[type='number'] {
-moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
`;

protected fsm = finiteStateMachineConsumer<NewOrderFsm>('new_order_fsm_' + this.ali, 'new_order_fsm');

@state()
gotState = this.fsm.getState().target;

set orderId(orderId: string) {
debugger;
this.fsm.transition('change_order_id', {orderId});
}

@property({type: String})
get orderId(): string {
debugger;

return this.fsm.getContext().orderId;
}

Expand Down

0 comments on commit 98ed4fe

Please sign in to comment.