dodalem liste dla gryfu i male porzadki
This commit is contained in:
@@ -6,8 +6,12 @@
|
||||
<span class="order-id">{{ order.orderId }}</span>
|
||||
<h3 class="model">{{ order.model }}</h3>
|
||||
<p class="client">{{ order.client }}</p>
|
||||
<div class="list-month">
|
||||
<span v-for="assignedOrder in order.assignedOrders" :key="assignedOrder" class="month">
|
||||
<div class="order-lists">
|
||||
<span
|
||||
v-for="assignedOrder in order.assignedOrders"
|
||||
:key="assignedOrder"
|
||||
class="order-list"
|
||||
>
|
||||
{{ assignedOrder }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -16,11 +20,26 @@
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div class="flow-head">
|
||||
<span class="label">Etapy Produckji</span>
|
||||
<span class="label">Deska</span>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="steps no-scrollbar">
|
||||
<template v-for="(step, index) in order.steps" :key="`${step}-${index}`">
|
||||
<template v-for="(step, index) in order.steps.body" :key="`${step}-${index}`">
|
||||
<div class="step">{{ step }}</div>
|
||||
<span class="arrow">→</span>
|
||||
</template>
|
||||
<button class="step add">
|
||||
<q-icon class="add-icon" name="add" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow" v-if="order.steps.neck">
|
||||
<div class="flow-head">
|
||||
<span class="label">Gryf</span>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="steps no-scrollbar">
|
||||
<template v-for="(step, index) in order.steps.neck" :key="`${step}-${index}`">
|
||||
<div class="step">{{ step }}</div>
|
||||
<span class="arrow">→</span>
|
||||
</template>
|
||||
@@ -72,7 +91,7 @@ defineProps({
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-areas:
|
||||
'order-id month month'
|
||||
'order-id order-list order-list'
|
||||
'model model finish'
|
||||
'client client finish';
|
||||
gap: 4px;
|
||||
@@ -100,14 +119,14 @@ defineProps({
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.list-month {
|
||||
grid-area: month;
|
||||
.order-lists {
|
||||
grid-area: order-list;
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row-reverse;
|
||||
gap: 5px;
|
||||
.month {
|
||||
.order-list {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
padding: 0.1rem 0.5rem;
|
||||
@@ -138,7 +157,7 @@ defineProps({
|
||||
}
|
||||
|
||||
.flow {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
.flow-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -31,129 +31,48 @@
|
||||
</div>
|
||||
|
||||
<div class="orders">
|
||||
<order-card :order="order" />
|
||||
<div class="order-card">
|
||||
<div class="card-head">
|
||||
<div class="copy">
|
||||
<span class="order-id">0026/2025/1</span>
|
||||
<h3 class="client">Regius 6 CLS</h3>
|
||||
<p class="model">Mayo Stock</p>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="month">Month 08</span>
|
||||
<div class="finish">
|
||||
<span
|
||||
class="material-symbols-outlined icon"
|
||||
data-icon="flare"
|
||||
style="font-variation-settings: 'FILL' 1"
|
||||
>flare</span
|
||||
>
|
||||
<span class="label">Gloss</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div class="flow-head">
|
||||
<span class="label">Production Flow</span>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="steps no-scrollbar">
|
||||
<div class="step done"><span class="text">ST</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step done"><span class="text">IS</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step current"><span class="text">AC</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<button class="step add" type="button">
|
||||
<!-- <span class="material-symbols-outlined add-icon" data-icon="add">add</span> -->
|
||||
<q-icon class="add-icon" name="add" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-card">
|
||||
<div class="card-head">
|
||||
<div class="copy">
|
||||
<span class="order-id">#2024-079</span>
|
||||
<h3 class="client">Annie Clark</h3>
|
||||
<p class="model">St. Vincent Signature Relic</p>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="month">Month 07</span>
|
||||
<span class="month">Month 07</span>
|
||||
<div class="finish">
|
||||
<span class="material-symbols-outlined icon" data-icon="texture">texture</span>
|
||||
<span class="label">Satin</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div class="flow-head">
|
||||
<span class="label">Production Flow</span>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="steps no-scrollbar">
|
||||
<div class="step done"><span class="text">ST</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step done"><span class="text">IS</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step done"><span class="text">AC</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step done"><span class="text">LD</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<button class="step add" type="button">
|
||||
<span class="material-symbols-outlined add-icon" data-icon="add">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-card urgent">
|
||||
<div class="card-head">
|
||||
<div class="copy">
|
||||
<span class="order-id order-id-error">#2024-085 [URGENT]</span>
|
||||
<h3 class="client">Kevin Parker</h3>
|
||||
<p class="model">Psychedelic Dream Strut</p>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="month month-error">Month 08</span>
|
||||
<div class="finish">
|
||||
<span class="material-symbols-outlined icon" data-icon="layers">layers</span>
|
||||
<span class="label">Mix</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div class="flow-head">
|
||||
<span class="label">Production Flow</span>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="steps no-scrollbar">
|
||||
<div class="step alert"><span class="text">ST</span></div>
|
||||
<span class="arrow">→</span>
|
||||
<div class="step waiting">
|
||||
<span class="material-symbols-outlined wait-icon" data-icon="hourglass_empty"
|
||||
>hourglass_empty</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<order-card :order="order[0]" />
|
||||
<order-card :order="order[1]" />
|
||||
<order-card :order="order[2]" />
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import OrderCard from 'src/components/OrderCard.vue'
|
||||
const order = {
|
||||
orderId: '0112/2025/12',
|
||||
model: 'Regius 6 Core',
|
||||
client: 'Mayo Stock',
|
||||
assignedOrders: ['IV', '2025-4'],
|
||||
finish: 'MIX',
|
||||
steps: ['B', 'IZ', 'AK', 'LD'],
|
||||
}
|
||||
const order = [
|
||||
{
|
||||
orderId: '0112/2025/12',
|
||||
model: 'Duvell 6',
|
||||
client: 'Sleek Elite',
|
||||
assignedOrders: ['PAZ-25'],
|
||||
finish: 'GLOSS',
|
||||
steps: {
|
||||
body: ['B', 'IZ', 'AK', 'LD', 'LD', 'LD', 'UV'],
|
||||
neck: ['B', 'IZ', 'AK'],
|
||||
},
|
||||
},
|
||||
{
|
||||
orderId: '0029/2024/1',
|
||||
model: 'Legend 6',
|
||||
client: 'Heindeburs Indonesia',
|
||||
assignedOrders: ['STY-25'],
|
||||
finish: 'MAT',
|
||||
steps: {
|
||||
body: ['B', 'M'],
|
||||
},
|
||||
},
|
||||
{
|
||||
orderId: '0001/2025/20',
|
||||
model: 'Regius 6 Core',
|
||||
client: 'Mayo Stock',
|
||||
assignedOrders: ['KWI-25', 'SUMMIT'],
|
||||
finish: 'MIX',
|
||||
steps: {
|
||||
body: ['B', 'IZ', 'AK', 'LD'],
|
||||
},
|
||||
},
|
||||
]
|
||||
//
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user