Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] - First pass at migrating case page to Vue 3 #3956

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 179 additions & 0 deletions src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<template>
<v-item-group mandatory>
<v-dialog v-model="dialogVisable" max-width="600">
<v-card>
<v-card-title>Update Case Status</v-card-title>
<v-card-text
>Are you sure you want to change the case status from {{ _case.status }} to

Check warning on line 7 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

Expected 1 line break after opening tag (`<v-card-text>`), but no line breaks found
{{ selectedStatus }}</v-card-text

Check warning on line 8 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

Expected 1 line break before closing tag (`</v-card-text>`), but no line breaks found
>

<v-btn
class="ml-6 mb-4"
small

Check failure on line 13 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'small' has been replaced with 'size="small"'
color="info"
elevation="1"
@click="changeStatus(selectedStatus)"
>
Submit
</v-btn>
</v-card>
</v-dialog>

<v-container fluid>
<v-row no-gutters>
<v-col v-for="status in statuses" :key="status.name" cols="6" md="2">
<v-item v-slot="{ active, toggle }">

Check failure on line 26 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'active' is defined but never used
<div class="overlap-card" :class="status.hoverClass" @click="openDialog(status.name)">
<v-tooltip bottom>

Check failure on line 28 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'bottom' has been replaced with 'location="bottom"'
<template v-slot:activator="{ on, attrs }">

Check warning on line 29 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

Expected '#activator' instead of 'v-slot:activator'
<v-sheet outlined color="grey lighten-1" :class="status.sheetClass">

Check failure on line 30 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'outlined' has been removed

Check failure on line 30 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'grey lighten-1' has been replaced with 'grey-lighten-1'
<v-card
class="d-flex align-center"
:class="status.sheetClass"
height="30"
width="100%"
@click="toggle"
flat
color="grey lighten-4"

Check failure on line 38 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'grey lighten-4' has been replaced with 'grey-lighten-4'
v-bind="attrs"
v-on="on"
>
<v-scroll-y-transition>
<div v-if="isActiveStatus(status.name)" class="flex-grow-1 text-center">
<v-badge

Check warning on line 44 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

Require self-closing on Vue.js custom components (<v-badge>)
:color="status.color"
bordered
dot
left

Check failure on line 48 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

'left' has been replaced with 'location="left"'
offset-x="-10"
offset-y="0"
>
</v-badge
>{{ status.label }}
</div>

<div v-else class="flex-grow-1 text-center text--disabled">
{{ status.label }}
</div>
<span>{{
status.tooltip ? status.tooltip : `Not yet ${status.label.toLowerCase()}`
}}</span>
</v-scroll-y-transition>
</v-card>
</v-sheet>
</template>
<span>{{
status.tooltip ? status.tooltip : `Not yet ${status.label.toLowerCase()}`
}}</span>
</v-tooltip>
</div>
</v-item>
</v-col>
</v-row>
</v-container>
</v-item-group>
</template>

<script>
import { mapActions } from "vuex"
export default {
name: "CaseStatusSelectGroup",
props: {
_case: {

Check warning on line 83 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

Prop "_case" is not in camelCase
type: Object,
required: false,
default: () => ({}),
},
},
data() {
return {
selectedStatus: null,
dialogVisable: false,
}
},
computed: {
statuses() {
return [
{
name: "New",
label: "New",
color: "red",
hoverClass: "hover-card-three",
sheetClass: "rounded-l-xl arrow",
tooltip: this._case.created_at,
},
{
name: "Triage",
label: "Triaged",
color: "red",
hoverClass: "hover-card-two",
sheetClass: "arrow",
tooltip: this._case.triage_at,
},
{
name: "Closed",
label: "Resolved",
color: "green",
hoverClass: "hover-card",
sheetClass: "arrow",
tooltip: this._case.closed_at,
},
{
name: "Escalated",
label: "Escalated",
color: "red",
hoverClass: "",
sheetClass: "rounded-r-xl",
tooltip: this._case.escalated_at,
},
]
},
},
methods: {
...mapActions("case_management", ["save_page"]),
changeStatus(newStatus) {
this._case.status = newStatus

Check failure on line 136 in src/dispatch/static/dispatch/src/case/CaseStatusSelectGroup.vue

View workflow job for this annotation

GitHub Actions / build

Unexpected mutation of "_case" prop
this.save_page()
this.dialogVisable = false
this.selectedStatus = null
},
openDialog(newStatus) {
this.selectedStatus = newStatus
this.dialogVisable = true
},
isActiveStatus(status) {
return this._case.status === status
},
},
}
</script>

<style scoped>
.arrow {
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}
.overlap-card {
margin-left: -15px;
border-radius: 75%;
box-shadow: 0 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.overlap-card:first-child {
margin-left: 0;
}
.overlap-card:last-child {
margin-right: -15px;
}
.hover-card {
position: relative;
z-index: 1;
}
.hover-card-two {
position: relative;
z-index: 2;
}
.hover-card-three {
position: relative;
z-index: 3;
}
</style>
Loading
Loading