s.esmaeiliandClaude Opus 5
0e5f9ccd7b
Phase 2, completing the app-wide rollout of the home/product-detail design language (LESS colour tokens, BEM class names, hairline-bordered cards, SectionHead, dashed empty states) onto the account side: dashboard, orders, transactions, profile, login and register. Reuse over re-implementation: the dashboard's live rate block is now components/home/RateStrip.vue rather than a second hand-built strip, and every screen uses components/ui/PageBar.vue for its chrome. OrderCard and OrderItemCard are restyled to match. OrderItemCard drops its always-empty note row: our OrderItem schema has no note field (legacy's per-item note was a real column there; ours is not), so it could only ever print a dash. OrdersView swaps ant Tabs for the same scrolling chip rail the rest of the redesign uses, and its full-screen Modal with hand-written CSS overrides for a bottom Drawer, matching how every other detail surface opens. Deleted AppHeader.vue, orphaned once every screen moved to PageBar. Its shutter animation was driven by transitionFlag, which nothing reads any more — the router afterEach comment claiming otherwise is corrected rather than left asserting something untrue, and the now-inert half is flagged in place. ScrollFetchSearch loses its isFav prop: it gated two empty-state branches that rendered the identical image, and its only caller (FavoritesView) now renders its own. Behaviour is preserved throughout. Orders still reads GET /customers/:id/orders and filters client-side; transactions still reads GET /customers/:id/ledger-entries with legacy's CREDIT/DEBIT colour meaning intact; profile stays read-only over real fields; login keeps the real customer lookup plus the documented OTP stub; register stays stubbed with copy that does not claim an account was created. Verified in a real browser against the running API and native database: dashboard 4 tiles with a real balance, orders 1 real order card, profile 4 real spec rows, transactions the correct empty state for a customer with no ledger rows, and login/register confirmed with the session cleared (the guard bounces a signed-in user away from /login, which is why they needed a separate pass). No console errors, no horizontal overflow. vue-tsc and vite build both clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
145 lines
3.2 KiB
Vue
145 lines
3.2 KiB
Vue
<!--
|
|
One line of an order's contents, restyled into the redesigned design
|
|
language (see components/home/* and HomeView). Ported originally from
|
|
legacy henza_pwa/src/components/product/orderItem.vue.
|
|
|
|
Adapted: product/variant title comes from a client-side lookup (see
|
|
useOrderItemProduct.ts) since the real order-items response only carries
|
|
productVariantId.
|
|
|
|
DROPPED the "توضیحات: -" row the previous version rendered: our OrderItem
|
|
schema has no note field (legacy's per-item note was a real column there;
|
|
ours isn't), so it could only ever print a dash. An always-empty row is
|
|
noise, not information.
|
|
-->
|
|
<template>
|
|
<article class="oi">
|
|
<div class="oi__art">
|
|
<img v-if="lookup?.imageUrl" v-lazy="lookup.imageUrl" :alt="lookup?.productTitle ?? ''" />
|
|
<div v-else class="oi__artEmpty" aria-hidden="true">
|
|
<Icon icon="vuesax-linear:diamonds" size="18" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="oi__main">
|
|
<div class="oi__head">
|
|
<h4 class="oi__title">{{ lookup?.productTitle ?? '—' }}</h4>
|
|
<span v-if="lookup?.variantTitle" class="oi__variant">{{ lookup.variantTitle }}</span>
|
|
</div>
|
|
|
|
<div class="oi__figures">
|
|
<span class="oi__figure">
|
|
{{ value.quantity }}
|
|
<i>عدد</i>
|
|
</span>
|
|
<span class="oi__figure">
|
|
{{ value.computedWeightGrams }}
|
|
<i>گرم</i>
|
|
</span>
|
|
<span class="oi__figure">
|
|
{{ value.wagePercentSnapshot }}
|
|
<i>٪ اجرت</i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import Icon from '../icon/Icon.vue'
|
|
import { useOrderItemProduct, type VariantLookup } from '../../composables/useOrderItemProduct'
|
|
import type { OrderItemDetail } from '../../api/client'
|
|
|
|
const props = defineProps<{ value: OrderItemDetail }>()
|
|
const { lookup: lookupVariant } = useOrderItemProduct()
|
|
const lookup = ref<VariantLookup | undefined>()
|
|
|
|
onMounted(async () => {
|
|
lookup.value = await lookupVariant(props.value.productVariantId)
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.oi {
|
|
display: flex;
|
|
gap: 11px;
|
|
padding: 11px;
|
|
background: @canvas;
|
|
border: 1px solid @hairline;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.oi__art {
|
|
flex: 0 0 62px;
|
|
width: 62px;
|
|
height: 62px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: @hairlineSoft;
|
|
}
|
|
|
|
.oi__art img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.oi__artEmpty {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: grid;
|
|
place-items: center;
|
|
color: @inkFaint;
|
|
}
|
|
|
|
.oi__main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oi__head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 7px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oi__title {
|
|
margin: 0;
|
|
font-size: 12.5px;
|
|
font-weight: 700;
|
|
color: @ink;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.oi__variant {
|
|
flex: 0 0 auto;
|
|
font-size: 10.5px;
|
|
color: @inkFaint;
|
|
}
|
|
|
|
.oi__figures {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 14px;
|
|
padding-top: 9px;
|
|
}
|
|
|
|
.oi__figure {
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: @inkSoft;
|
|
}
|
|
.oi__figure i {
|
|
font-style: normal;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
color: @inkFaint;
|
|
padding-inline-start: 2px;
|
|
}
|
|
</style>
|