This commit is contained in:
299
ayanova/src/components/quote-state.vue
Normal file
299
ayanova/src/components/quote-state.vue
Normal file
@@ -0,0 +1,299 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user