This commit is contained in:
j3d1 2024-06-18 15:57:50 +02:00
parent 75798e38e4
commit 4738651b66
4 changed files with 163 additions and 38 deletions

View file

@ -127,7 +127,8 @@ class IssueSerializer(serializers.ModelSerializer):
'type': 'shipping_code',
'id': shipping_code.id,
'timestamp': shipping_code.used_at,
'code': ShippingCodeSerializer(shipping_code).data,
'code': shipping_code.code,
'code_type': shipping_code.type,
})
return sorted(timeline, key=lambda x: x['timestamp'])

View file

@ -0,0 +1,110 @@
<template>
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<!--span><a href="#">$USER</a> has changed state to <span
class="badge badge-pill badge-primary" :class="'bg-' + colorLookup">{{ lookupState.text }}</span> at <time
:datetime="timestamp">{{ timestamp }}</time>
</span-->
{{item}}
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'TimelineShippingCode',
props: {
'item': {
type: Object,
required: true
}
},
computed: {
...mapState(['state_options']),
lookupState: function () {
try {
if (this.item.state)
return this.state_options.find(state => state.value === this.item.state);
} catch (e) {
}
return {
text: 'Unknown',
value: 'unknown'
};
},
colorLookup: function () {
if (this.item.state.startsWith('closed_')) {
return 'secondary';
} else if (this.item.state.startsWith('pending_')) {
return 'warning';
} else if (this.item.state.startsWith('waiting_')) {
return 'primary';
} else {
return 'danger';
}
},
'timestamp': function () {
return new Date(this.item.timestamp).toLocaleString();
},
}
};
</script>
<style scoped>
a {
color: inherit;
}
.timeline-item-description {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--gray);
img {
flex-shrink: 0;
}
a {
/*color: var(--c-grey-500);*/
font-weight: 500;
text-decoration: none;
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--info);
}
}
}
.avatar {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1 / 1;
flex-shrink: 0;
width: 40px;
height: 40px;
&.small {
width: 28px;
height: 28px;
}
img {
object-fit: cover;
}
}
</style>

View file

@ -50,6 +50,15 @@ const store = createStore({
showAddBoxModal: false,
test: ['foo', 'bar', 'baz'],
shippingCodeTypes: {
'2kg-de': '2kg Paket (DE)',
'5kg-de': '5kg Paket (DE)',
'10kg-de': '10kg Paket (DE)',
'2kg-eu': '2kg Paket (EU)',
'5kg-eu': '5kg Paket (EU)',
'10kg-eu': '10kg Paket (EU)',
}
},
getters: {
route: state => router.currentRoute.value,
@ -497,6 +506,7 @@ const store = createStore({
"loadedItems",
"messageTemplates",
"messageTemplatesVariables",
"shippingCodes",
],
watch: [
"test",
@ -509,6 +519,7 @@ const store = createStore({
"loadedItems",
"messageTemplates",
"messageTemplatesVariables",
"shippingCodes",
],
mutations: [
//"replaceTickets",

View file

@ -1,42 +1,36 @@
<template>
<div>
<h3>Shipping Codes</h3>
<ul>
<li v-for="code in shippingCodes" :key="code.code">
<span v-if="code.issue_thread == null">{{ code.type }} - {{ code.code }}</span>
<span v-else><s>{{ code.type }} - {{ code.code }}</s> <a
:href="'/'+ getEventSlug + '/ticket/' + code.issue_thread">Issue</a></span>
</li>
</ul>
<!--Table
:columns="['type', 'code']"
:items="shippingCodes"
:keyName="'code'"
>
<template #actions="{ item }">
<div class="btn-group">
<button class="btn btn-secondary" @click.stop="alert(item)">
<font-awesome-icon icon="archive"/>
use
</button>
<button class="btn btn-danger" @click.stop="">
<font-awesome-icon icon="trash"/>
delete
</button>
</div>
</template>
</Table-->
<div class="mt-3">
<h5>Shipping Code Types</h5>
<span v-for="(type, key) in availableShippingCodeTypes()" :key="key" class="mr-2">
<span v-if="type.count > 2" class="badge badge-success">{{ type.name }} - {{ type.count }}</span>
<span v-else-if="type.count > 0" class="badge badge-warning" v-if="type.count > 0">
{{ type.name }} - {{ type.count }}
</span>
<span v-else class="badge badge-danger">{{ type.name }}</span>
</span>
</div>
<div class="mt-3">
<h5>Available Shipping Codes</h5>
<ul>
<li v-for="code in shippingCodes" :key="code.code">
<span v-if="code.issue_thread == null">{{ code.type }} - {{ code.code }}</span>
<span v-else><s style="color:var(--danger)">{{ code.type }} - {{ code.code }}</s> use in <a
:href="'/'+ getEventSlug + '/ticket/' + code.issue_thread">#{{ code.issue_thread }}</a></span>
</li>
</ul>
</div>
<div class="mt-3">
<textarea class="form-control mb-3" rows="5" placeholder="Shipping Code List" v-model="bulk_codes"
v-if="bulk"></textarea>
<div class="input-group">
<input type="text" class="form-control" placeholder="Shipping Code" v-model="code" v-if="!bulk">
<select class="form-control" v-model="type">
<option value="2kg-de">2kg DE</option>
<option value="2kg-eu">2kg EU</option>
<option value="5kg-de">5kg DE</option>
<option value="5kg-eu">5kg EU</option>
<option value="10kg-de">10kg DE</option>
<option v-for="it in Object.keys(shippingCodeTypes)" :value="it">{{
shippingCodeTypes[it]
}}
</option>
</select>
<div class="input-group-prepend">
<div class="input-group-text">
@ -69,25 +63,34 @@ export default {
};
},
computed: {
...mapState(['shippingCodes']),
...mapState(['shippingCodes', 'shippingCodeTypes']),
...mapGetters(['getEventSlug']),
},
methods: {
...mapActions(['fetchShippingCodes', 'createShippingCode']),
createSingleOrBulkShippingCode() {
if (this.bulk) {
const jobs = this.bulk_codes.split('\n').map(code => {
return this.createShippingCode({code: code.trim(), type: this.type});
});
Promise.all(jobs).then(() => {
this.bulk_codes = '';
});
const list = this.bulk_codes.split('\n');
if (confirm('Are you sure you want to add ' + list.length + ' shipping codes as ' + this.type + '?')) {
const jobs = list.map(code => {
return this.createShippingCode({code: code.trim(), type: this.type});
});
Promise.all(jobs).then(() => {
this.bulk_codes = '';
});
}
} else {
this.createShippingCode({code: this.code, type: this.type}).then(() => {
this.code = '';
});
}
},
availableShippingCodeTypes() {
return Object.keys(this.shippingCodeTypes).map(key => {
var count = this.shippingCodes.filter(code => code.type === key && code.issue_thread === null).length;
return {id: key, count: count, name: this.shippingCodeTypes[key]};
});
},
},
mounted() {
this.fetchShippingCodes();