300 lines
9.4 KiB
Vue
300 lines
9.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mb-n2 ml-10">
|
|
<span class="text-caption">{{ $ay.t("QuoteQuoteStatusType") }}</span>
|
|
</div>
|
|
|
|
<template>
|
|
<div class="mb-6 mb-sm-0">
|
|
<v-btn icon class="ml-n1 mr-2" @click="openDialog = true">
|
|
<v-icon>{{ openIcon() }}</v-icon>
|
|
</v-btn>
|
|
|
|
<span class="text-h6" @click="openDialog = true">{{
|
|
pvm.currentState.name
|
|
}}</span>
|
|
<v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
|
|
<v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
|
|
>$ayiLock</v-icon
|
|
>
|
|
<v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
|
|
>$ayiCheckCircle</v-icon
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<v-row justify="center">
|
|
<v-dialog v-model="openDialog" max-width="600px">
|
|
<v-card>
|
|
<v-card-title>
|
|
<span class="text-h5">{{ $ay.t("QuoteQuoteStatusType") }}</span>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<template v-if="$vuetify.breakpoint.smAndUp">
|
|
<!-- WIDE VIEW -->
|
|
<div v-for="item in stateDisplayList" :key="item.id">
|
|
<span>{{ item.timeStamp }}</span>
|
|
<span class="ml-3">{{ item.user }}</span>
|
|
<span class="font-weight-bold ml-3">{{ item.name }}</span>
|
|
<v-icon small :color="item.color" class="ml-4">$ayiFlag</v-icon>
|
|
<v-icon small color="primary" v-if="item.locked" class="ml-4"
|
|
>$ayiLock</v-icon
|
|
>
|
|
<v-icon small color="primary" v-if="item.completed" class="ml-4"
|
|
>$ayiCheckCircle</v-icon
|
|
>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<!-- NARROW VIEW -->
|
|
<div v-for="item in stateDisplayList" :key="item.id">
|
|
<span>{{ item.timeStamp }} </span>
|
|
<span>{{ item.user }}</span>
|
|
<div class="mb-2">
|
|
<span class="font-weight-bold">{{ item.name }}</span>
|
|
<v-icon small :color="item.color" class="ml-4"
|
|
>$ayiFlag</v-icon
|
|
>
|
|
<v-icon small color="primary" v-if="item.locked" class="ml-4"
|
|
>$ayiLock</v-icon
|
|
>
|
|
<v-icon
|
|
small
|
|
color="primary"
|
|
v-if="item.completed"
|
|
class="ml-4"
|
|
>$ayiCheckCircle</v-icon
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- append-outer-icon="$ayiPlus"
|
|
@click:append-outer="addState()" -->
|
|
<template v-if="canAdd">
|
|
<div class="mt-8">
|
|
<v-autocomplete
|
|
v-model="selectedStatus"
|
|
:items="pvm.selectLists.allowedquotestatus"
|
|
item-text="name"
|
|
item-value="id"
|
|
dense
|
|
:label="$ay.t('NewStatus')"
|
|
prepend-icon="$ayiEdit"
|
|
@click:prepend="handleEditStateClick()"
|
|
>
|
|
<template v-slot:item="data">
|
|
<v-list-item-avatar>
|
|
<v-icon :color="data.item.color">$ayiFlag</v-icon>
|
|
</v-list-item-avatar>
|
|
<v-list-item-content>
|
|
<v-list-item-title
|
|
><span class="text-subtitle-2">{{
|
|
data.item.name
|
|
}}</span
|
|
><v-icon
|
|
small
|
|
color="disabled"
|
|
class="ml-2"
|
|
v-if="data.item.locked"
|
|
>$ayiLock</v-icon
|
|
>
|
|
<v-icon
|
|
color="disabled"
|
|
class="ml-1"
|
|
small
|
|
v-if="data.item.completed"
|
|
>$ayiCheckCircle</v-icon
|
|
></v-list-item-title
|
|
>
|
|
|
|
<v-list-item-subtitle>
|
|
{{ data.item.notes }}</v-list-item-subtitle
|
|
>
|
|
</v-list-item-content>
|
|
<v-list-item-action> </v-list-item-action>
|
|
</template>
|
|
</v-autocomplete>
|
|
</div>
|
|
</template>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="blue darken-1" text @click="cancelDialog()">{{
|
|
$ay.t("Cancel")
|
|
}}</v-btn>
|
|
<v-btn
|
|
color="blue darken-1"
|
|
:disabled="selectedStatus == null"
|
|
text
|
|
@click="save()"
|
|
>{{ $ay.t("OK") }}</v-btn
|
|
>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
/* XXXeslint-disable */
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedStatus: null,
|
|
openDialog: false
|
|
};
|
|
},
|
|
|
|
props: {
|
|
value: {
|
|
default: null,
|
|
type: Object
|
|
},
|
|
pvm: {
|
|
default: null,
|
|
type: Object
|
|
},
|
|
allStates: {
|
|
default: null,
|
|
type: Array
|
|
},
|
|
allowedStates: {
|
|
default: null,
|
|
type: Array
|
|
},
|
|
formKey: { type: String, default: "" }, //used to grab template from store
|
|
readonly: Boolean,
|
|
disabled: Boolean
|
|
},
|
|
|
|
methods: {
|
|
addState() {
|
|
if (this.selectedStatus != null) {
|
|
//first remove any other non saved states in collection, no need to send them to the server if there was multiple state changes since last save
|
|
this.value.states = this.value.states.filter(
|
|
z => z.concurrency != null
|
|
);
|
|
|
|
//is it a different state?
|
|
if (this.selectedStatus == this.pvm.currentState.id) {
|
|
return;
|
|
}
|
|
|
|
//push in new state
|
|
this.value.states.push({
|
|
quoteId: this.value.id,
|
|
quoteStatusId: this.selectedStatus,
|
|
userId: window.$gz.store.state.userId,
|
|
userViz: window.$gz.store.state.userName,
|
|
created: window.$gz.locale.nowUTC8601String()
|
|
});
|
|
|
|
this.selectedStatus = null;
|
|
this.pvm.formState.dirty = true;
|
|
}
|
|
},
|
|
getStateForDisplay(state) {
|
|
let ret = {
|
|
id: Date.now,
|
|
name: "??",
|
|
color: "#ffffff",
|
|
locked: false,
|
|
completed: false,
|
|
timeStamp: "??",
|
|
user: "??"
|
|
};
|
|
const s = this.allStates.find(z => z.id == state.quoteStatusId);
|
|
if (s == null) {
|
|
return ret;
|
|
}
|
|
//make for display
|
|
ret.id = state.id;
|
|
ret.name = s.name;
|
|
ret.color = s.color;
|
|
ret.locked = s.locked;
|
|
ret.completed = s.completed;
|
|
ret.user = state.userViz;
|
|
ret.timeStamp = window.$gz.locale.utcDateToShortDateAndTimeLocalized(
|
|
state.created,
|
|
this.pvm.timeZoneName,
|
|
this.pvm.languageName,
|
|
this.pvm.hour12
|
|
);
|
|
return ret;
|
|
},
|
|
form() {
|
|
return window.$gz.form;
|
|
},
|
|
openIcon: function() {
|
|
if (this.canAdd) {
|
|
return "$ayiEdit";
|
|
}
|
|
return "$ayiHistory";
|
|
},
|
|
handleEditStateClick: function() {
|
|
window.$gz.eventBus.$emit("openobject", {
|
|
type: window.$gz.type.QuoteStatus,
|
|
id: this.selectedStatus
|
|
});
|
|
},
|
|
save() {
|
|
this.addState();
|
|
this.openDialog = false;
|
|
},
|
|
cancelDialog() {
|
|
this.selectedStatus = null;
|
|
this.openDialog = false;
|
|
},
|
|
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;
|
|
},
|
|
stateDisplayList() {
|
|
let ret = [];
|
|
this.value.states.forEach(z => {
|
|
ret.push(this.getStateForDisplay(z));
|
|
});
|
|
return ret;
|
|
},
|
|
canAdd: function() {
|
|
//first check most obvious disqualifying properties
|
|
if (!this.pvm.rights.change) {
|
|
return false;
|
|
}
|
|
|
|
//not currently locked, user has rights to do it so allow it
|
|
if (!this.value.isLockedAtServer) {
|
|
return true;
|
|
}
|
|
|
|
//locked, confirm if user can change it
|
|
//if any role then no problem
|
|
|
|
//ok, only thing left to check is if the current user can unlock this
|
|
//get remove roles required for current state
|
|
let cs = this.pvm.currentState;
|
|
if (cs.removeRoles == null || cs.removeRoles == 0) {
|
|
//no state set yet
|
|
return true;
|
|
}
|
|
|
|
//ok, need to check the role here against current user roles to see if this is valid
|
|
if (window.$gz.role.hasRole(cs.removeRoles)) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|