117 lines
3.6 KiB
Vue
117 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<span class="text-caption">{{ $ay.t("WorkOrderStatus") }}</span>
|
|
|
|
<template v-if="hasState">
|
|
<br />
|
|
<span class="text-h6">{{ currentState.name }}</span>
|
|
<v-icon :color="currentState.color" class="ml-4">$ayiFlag</v-icon>
|
|
<v-icon color="primary" v-if="currentState.locked" class="ml-4"
|
|
>$ayiLock</v-icon
|
|
>
|
|
<v-icon color="primary" v-if="currentState.completed" class="ml-4"
|
|
>$ayiCheckCircle</v-icon
|
|
>
|
|
</template>
|
|
|
|
<template v-if="canAdd">
|
|
<div class="xmt-5">
|
|
<v-autocomplete
|
|
v-model="selectedStatus"
|
|
:items="pvm.selectLists.allowedwostatus"
|
|
item-text="name"
|
|
item-value="id"
|
|
></v-autocomplete>
|
|
</div>
|
|
</template>
|
|
|
|
<!--
|
|
Display as drop down box set to last status entered, user selects new status and it appends a new record to the wostate collection
|
|
and shows dirty and as new state.
|
|
Also a button to show more info which pops up a dialog showing the entire state history in a data table
|
|
|
|
TODO: POC for now don't worry about rights to unset / set certain states, just hook it up for testing
|
|
todo: show completing states with a checkmark icon, show locking states with a lock icon
|
|
todo: show states in color as selected (but in some way that is contrasting to avoid invisibility)
|
|
todo: show current state separate from selection box, selection box only shows available to user states
|
|
todo: it must be clear to user why they can not change if they have too low a role to change, perhaps text under state instead of selector box that says "Only select roles can change this state"
|
|
|
|
-->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
/* XXXeslint-disable */
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedStatus: null
|
|
};
|
|
},
|
|
|
|
props: {
|
|
value: {
|
|
default: null,
|
|
type: Object
|
|
},
|
|
pvm: {
|
|
default: null,
|
|
type: Object
|
|
},
|
|
formKey: { type: String, default: "" }, //used to grab template from store
|
|
readonly: Boolean,
|
|
disabled: Boolean
|
|
},
|
|
|
|
methods: {
|
|
form() {
|
|
return window.$gz.form;
|
|
},
|
|
fieldValueChanged(ref) {
|
|
if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
|
|
window.$gz.form.fieldValueChanged(this.pvm, ref);
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
hasState() {
|
|
return this.value.states != null && this.value.states.length > 0;
|
|
},
|
|
currentState() {
|
|
//return actual status object from top level shell based on current state
|
|
//if state is unknown then it should return a placeholder dummy state showing an error condition or empty I guess
|
|
|
|
if (this.value.states != null) {
|
|
//find it in the status collection
|
|
//and return here
|
|
let laststate = this.value.states[this.value.states.length - 1];
|
|
let found = this.pvm.selectLists.wostatus.find(
|
|
z => z.id == laststate.workOrderStatusId
|
|
);
|
|
if (found) {
|
|
return found;
|
|
}
|
|
}
|
|
//default
|
|
return {
|
|
id: 0,
|
|
name: "NOT SET YET",
|
|
active: true,
|
|
color: "#ffffff", //invisible
|
|
completed: false,
|
|
locked: false
|
|
};
|
|
},
|
|
canAdd: function() {
|
|
return (
|
|
!this.value.isLocked &&
|
|
this.pvm.rights.change &&
|
|
this.pvm.subRights.states.create
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|