-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
290 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| <template> | ||
| <div class="m-3 card-request"> | ||
| <div v-for="event in emptyStartEvents" :key="event.id" class="card"> | ||
| <div class="card-body"> | ||
| <div class="d-flex justify-content-between"> | ||
| <div> | ||
| <span v-uni-id="event.id.toString()">{{ transformedName }}</span> | ||
| <span v-if="process.startEvents.length > 1"> | ||
| : {{ event.name }} | ||
| </span> | ||
| <a | ||
| href="#" | ||
| :aria-expanded="ariaExpanded" | ||
| :aria-controls="getComputedId(process)" | ||
| @click="showRequestDetails" | ||
| > | ||
| ... | ||
| </a> | ||
| </div> | ||
| <div class="text-right"> | ||
| <button | ||
| v-uni-aria-describedby="event.id.toString()" | ||
| :href="getNewRequestLinkHref(process, event)" | ||
| class="btn btn-primary btn-sm" | ||
| @click.prevent="newRequestLink(process, event)" | ||
| > | ||
| <i class="fas fa-caret-square-right mr-1"></i> {{ $t("Start") }} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <div | ||
| v-if="showdetail" | ||
| :id="getComputedId(process)" | ||
| :aria-hidden="ariaHidden" | ||
| > | ||
| <hr /> | ||
| <p class="card-text text-muted">{{ process.description }}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { createUniqIdsMixin } from "vue-uniq-ids"; | ||
| const uniqIdsMixin = createUniqIdsMixin(); | ||
| export default { | ||
| mixins: [uniqIdsMixin], | ||
| props: ["name", "description", "filter", "id", "process"], | ||
| data() { | ||
| return { | ||
| disabled: false, | ||
| spin: 0, | ||
| showtip: true, | ||
| showdetail: false | ||
| }; | ||
| }, | ||
| computed: { | ||
| ariaHidden() { | ||
| return this.showdetail ? "false" : "true"; | ||
| }, | ||
| ariaExpanded() { | ||
| return this.showdetail ? "true" : "false"; | ||
| }, | ||
| emptyStartEvents() { | ||
| return this.process.startEvents.filter( | ||
| (event) => | ||
| !event.eventDefinitions || event.eventDefinitions.length === 0 | ||
| ); | ||
| }, | ||
| transformedName() { | ||
| return this.process.name.replace( | ||
| new RegExp(this.filter, "gi"), | ||
| (match) => { | ||
| return match; | ||
| } | ||
| ); | ||
| }, | ||
| truncatedDescription() { | ||
| if (!this.process.description) { | ||
| return `<span class="text-primary"></span>`; | ||
| } | ||
| let result = ""; | ||
| const wordArray = this.process.description.split(" "); | ||
| // Number of maximum characters we want for our description | ||
| const maxLength = 100; | ||
| let word = null; | ||
| while ((word = wordArray.shift())) { | ||
| if (result.length + word.length + 1 <= maxLength) { | ||
| result = `${result} ${word}`; | ||
| } | ||
| } | ||
| return result.replace(new RegExp(this.filter, "gi"), (match) => { | ||
| return `<span class="text-primary"> ${match} </span>`; | ||
| }); | ||
| } | ||
| }, | ||
| methods: { | ||
| newRequestLink(process, event) { | ||
| if (this.disabled) return; | ||
| this.disabled = true; | ||
| // Start a process | ||
| this.spin = `${process.id}.${event.id}`; | ||
| const startEventId = event.id; | ||
| window.ProcessMaker.apiClient | ||
| .post(`/process_events/${this.process.id}?event=${startEventId}`) | ||
| .then((response) => { | ||
| this.spin = 0; | ||
| const instance = response.data; | ||
| if (this.$cookies.get("isMobile")) { | ||
| window.location = `/requests/mobile/${instance.id}?fromRedirect=true`; | ||
| } else { | ||
| window.location = `/requests/${instance.id}?fromRedirect=true`; | ||
| } | ||
| }) | ||
| .catch((err) => { | ||
| this.disabled = false; | ||
| const { data } = err.response; | ||
| if (data.message) { | ||
| ProcessMaker.alert(data.message, "danger"); | ||
| } | ||
| }); | ||
| }, | ||
| showRequestDetails(id) { | ||
| if (this.showdetail === false) { | ||
| this.showdetail = true; | ||
| } else { | ||
| this.showdetail = false; | ||
| } | ||
| }, | ||
| getNewRequestLinkHref(process, event) { | ||
| const { id } = process; | ||
| const startEventId = event.id; | ||
| return `/process_events/${id}?event=${startEventId}`; | ||
| }, | ||
| getComputedId(process) { | ||
| return `process-${process.id}`; | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .card-request { | ||
| width: 45%; | ||
| min-width: 40%; | ||
| max-width: 50%; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <template> | ||
| <div> | ||
| <div v-if="Object.keys(processes).length && !loading" class="process-list"> | ||
| <div | ||
| v-for="(category, index) in processes" | ||
| :key="`category-${index}`" | ||
| class="mt-3" | ||
| > | ||
| <!-- | ||
| <h5 class="mb-n2"> | ||
| {{ index }} | ||
| <span class="badge badge-pill badge-secondary"> | ||
| {{ category.length }} | ||
| </span> | ||
| </h5> | ||
| --> | ||
| <b-container fluid> | ||
| <b-card-group> | ||
| <template v-for="(process, id) in category"> | ||
| <ProcessCard | ||
| v-if="hasEmptyStartEvents(process)" | ||
| :key="`process-${id}`" | ||
| :filter="filter" | ||
| :process="process" | ||
| /> | ||
| </template> | ||
| </b-card-group> | ||
| </b-container> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import ProcessCard from "./card.vue"; | ||
| export default { | ||
| components: { ProcessCard }, | ||
| data() { | ||
| return { | ||
| filter: "", | ||
| loading: false, | ||
| error: false, | ||
| loaded: false, | ||
| processes: {}, | ||
| perPage: 10, | ||
| page: 1 | ||
| }; | ||
| }, | ||
| mounted() { | ||
| this.fetch(); | ||
| }, | ||
| methods: { | ||
| hasEmptyStartEvents(process) { | ||
| return !!process.events.find( | ||
| (event) => | ||
| !event.eventDefinitions || event.eventDefinitions.length === 0 | ||
| ); | ||
| }, | ||
| fetch() { | ||
| // Now call our api | ||
| window.ProcessMaker.apiClient | ||
| .get( | ||
| `start_processes?page=${this.page}&per_page=${this.perPage}&filter=${this.filter}&order_by=category.name,name` + | ||
| "&order_direction=asc,asc" + | ||
| "&include=events,categories" + | ||
| "&without_event_definitions=true" | ||
| ) | ||
| .then((response) => { | ||
| const { data } = response; | ||
| // Empty processes | ||
| this.processes = {}; | ||
| // Now populate our processes array with data for rendering | ||
| this.populate(data.data); | ||
| // Do initial filter | ||
| // Set data in paginate | ||
| data.meta.from -= 1; | ||
| this.$refs.listProcess.data = data; | ||
| this.$refs.listProcess.setPaginationData(data.meta); | ||
| const dataStart = { | ||
| count: "0", | ||
| showControl: true, | ||
| showAvatar: false, | ||
| colorTextStart: "color: #57646F" | ||
| }; | ||
| this.$emit("startControl", dataStart); | ||
| }) | ||
| .catch(() => { | ||
| this.error = true; | ||
| }); | ||
| }, | ||
| populate(data) { | ||
| // Each element in data represents an individual process | ||
| // We need to pull out the category name, and if it's available in our processes, append it there | ||
| // if not, create the category in our processes array and then append it | ||
| for (const process of data) { | ||
| for (const category of process.categories) { | ||
| // Now determine if we have it defined in our processes list | ||
| if (typeof this.processes[category.name] === "undefined") { | ||
| // Create it | ||
| this.processes[category.name] = []; | ||
| } | ||
| // Now append | ||
| this.processes[category.name].push(process); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> |
Oops, something went wrong.