105 lines
3.4 KiB
Vue
105 lines
3.4 KiB
Vue
<template>
|
|
<div>
|
|
<span class="text-caption">{{ $ay.t("WorkOrderStatus") }}</span>
|
|
<template v-if="hasState">
|
|
<br />
|
|
{{ currentState.color }}
|
|
<v-icon large :color="currentState.color">$ayiFlag</v-icon
|
|
><span class="text-h5">{{ currentState.name }}</span>
|
|
<v-icon large v-if="currentState.locked">$ayiLock</v-icon>
|
|
<v-icon large v-if="currentState.completed">$ayiCheckCircle</v-icon>
|
|
</template>
|
|
<div>
|
|
{{ pvm.selectLists.wostatus }}
|
|
<template v-if="canAdd">
|
|
<h5>editable state here</h5>
|
|
</template>
|
|
</div>
|
|
|
|
<!--
|
|
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 {};
|
|
},
|
|
|
|
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.parentVM.formState.loading &&
|
|
!this.parentVM.formState.readonly
|
|
) {
|
|
window.$gz.form.fieldValueChanged(this.parentVM, 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) {
|
|
//Not set yet so return not set state
|
|
return {
|
|
id: 0,
|
|
name: "NOT SET YET",
|
|
active: true,
|
|
color: "#000000",
|
|
completed: false,
|
|
locked: false
|
|
};
|
|
} else {
|
|
//find it in the states collection
|
|
//pvm.selectLists.wostates
|
|
//and return here
|
|
//return this.value.states[this.value.states.length - 1];
|
|
}
|
|
},
|
|
canAdd: function() {
|
|
return (
|
|
!this.value.isLocked &&
|
|
this.pvm.rights.change &&
|
|
this.pvm.subRights.states.create
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|